• ワイヤーフレームとは何か説明できる
• XDでワイヤーフレームを作れる
• XDのショートカットを覚える

ワイヤーフレームってなんだ？

ワイヤーフレームはウェブデザインの骨格のことです。 ヒアリングシートをもとに「どこに」「なにを」配置するかを決めていきます。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

ウェブデザインのスクールに行っても、ワイヤーフレームについては教えてくれませんでした。
多分、多くのスクールがデザインツールの使い方とコードの書き方のみです。
しかしながら、ヒアリングで聞いたことをデザインにいきなり起こそうと思ってもなかなかうまく進まないものです。
大まかな設計図としてワイヤーフレームを書くことで、頭が整理されていくはずです。

なぜワイヤーフレームを書くのか？

コンテンツの過不足を確認するため

ヒアリングで聞いた情報には、重複しているものがあるかもしれません。
配置してみると、実はコンテンツが少ないページがあったりして、コンテンツを増やしたり、別のページと合わせたりする必要が出てきたりします。

導線を決めるため

ユーザーが回遊しやすいようなサイトにするために、ボタンの位置、数、全ページへのリンクがあるのかなど決めていきます。
構造の設計になるので、ここがしっかり組めていないと後々大きく変更することになりかねないので、しっかりすり合わせましょう。

フォントのルールを決めるため

意外にも、フォントが与える印象は大きく、ブランドイメージにも関わってきます。
ワイヤーフレームの段階で見出し、本文のフォントの種類と太さを決めておくとイメージがしやすいでしょう。
ワイヤーフレームの書き方には正解はなく、案件によっても様々です。
ブランドカラーを決めてワイヤーの段階から色を決める場合もあると思います。
色々な記事を見ながら、自分にあった形にしていきましょう！

XDワイヤーフレームの作り方

用意するもの

• XDをダウンロードしていない方はこちらから。
• ヒアリングシートはこちら

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

こちらの３つのルールを守ってワイヤーフレームを書くのがおすすめです。

白・黒・グレーのみを使う

あくまでも設計に集中したいので、色を入れるとフォーカスしづらくなります。

フォントの大きさを決める

最近は、ゴシック系のフォントで大きく表示させるデザインが流行っていますね。ヒアリングで聞いたイメージや参考サイトをもとに、フォントの大きさを決めておきましょう。

フォントを決める

フォントの種類は本当にたくさんあって、悩んでしまいますが、全体のイメージを左右するのでこの段階で決めておきましょう。

画面サイズを整えよう

まずは画面サイズを整えていきましょう。
おすすめは、横幅1366pxで、そのうち1080pxをコンテンツを表示する幅とするサイズです。
XDを開いたら、webのところから1366pxを選びます。

アートボードが開くので、左端をドラッグしてガイド線を引きます。
1080pxのコンテンツ幅にしたいので、両端から143pxのところに引くとぴったりです。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

カラーパレットを作ろう

次に、カラーパレットを作ります。
XDに指定した色を覚えさせておけば後で繰り返し使えたり、一括で色が変えられるようになるので最初に作っておきます。
四角形のツール（ショートカット：R）を持って、適当な四角を書きます。
右側のプロパティから、塗りの色を変更します。

Command + Shift + Y　を押して、アセットを開きます。
一番上の色の横にある＋マークを押すと、選択しているオブジェクトの塗りの色が記憶されます。

これを３つ作って、
黒：文字色　白：背景が黒の場合の色　グレー：写真用
を覚えさせておきましょう。
次回から図形やテキストの色を付けたい時、これらをクリックするだけでその色を使えます。
そして、このパレットの色を変えると、パレットを使用して色付けした全ての図形に反映されます。
やっぱり#DDDDDDのグレーじゃなくて#A2A2A2のグレーにしようと思った時、全ての図形をひとつひとつ修正しなくて良いという分けです。
 

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

→XD ショートカットリストはこちら

フォントを決めよう

色の次はフォントです。
コーディングでも使うのですが、現時点ではとりあえず、
大きい見出しから順に、h1、h2、h3
本文は、pで囲むと覚えてください。
テキストツール（ショートカット：T）を持って適当なところをクリックして文字を入力します。
プロパティから文字の大きさ、太さ、フォントを選びます。
色は先ほど登録した黒にしたいので、アセットの黒をクリックして色を適用します。
このフォントスタイルを覚えさせたいので、これもアセットから登録します。
同じように、h2、h3、pを以下のように設定して、アセットに登録してみましょう。

• h1：50px　黒　好きなフォント
• H2：36px　黒　好きなフォント
• H3：20px　黒　好きなフォント
• P：16px　黒　好きなフォント

コンポーネントを使おう

XDでは、コンポーネントを使うとさらに効率よくワイヤーフレームを作ることができます。
コンポーネントは、何度も使うパーツを覚えていてくれて、使いたい時にすぐに使えるライブラリみたいなものです。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

 
四角形とテキスト、線（ショートカット：L）を使って、このようなボタンと写真のパーツを作ってみましょう。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

パーツができたら、パーツを構成している全ての要素を選択します。
該当の範囲をドラッグで囲うか、Shiftを押しながら全ての要素をクリックしていきます。
アセットパネルのコンポーネントの横の＋をクリックすると、そのパーツが記憶されます。
先ほど作った見出しも、同じようにコンポーネントとして登録すると便利です。

パーツを組み合わせてワイヤーフレームを作ろう

登録した色、フォント、パーツを組み合わせながら、ヒアリングシートをもとにワイヤーフレームを描いてみましょう！
コンポーネントを使う時は、使いたいコンポーネントをアートボードにドラッグするだけでOKです。
コンポーネントは、最初に登録したものが”マスターコンポーネント”とされます。
このマスターコンポーネントの「色」「フォント」「大きさ」などを変更すると、そのコンポーネント全てがマスターコンポーネントと同じように変化します。

便利なテンプレートを組み合わせる

上記のようなコンポーネントが作られたXDのテンプレートファイルが、無料/有料でたくさん出回っています。
→XD日本語テンプレート
これを利用するのも良いですね！

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

前回のレッスン↓

The post 完全初心者OK！XDを使ったワイヤーフレームの書き方 first appeared on Linksbase.

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

マスターすれば、静的で物足りなかったページが、動きのあるおしゃれなページに生まれ変わりますよ！
それでは早速やってみましょう〜！
 

用意するもの

• HTMLエディタ
• 背景用の画像３枚

スクロールしたくなるデモ

百聞は一見に如かず！
実際どんな風になるのかお見せします。
なんだか楽しくてずっと上下にスクロールしたくなりませんか？

See the Pen background-attachment by Yukino Watanabe (@yukino0on) on CodePen.

マーケティング的 背景固定のメリット

カーテンが上がっていく感じ。
と表現する人もいますね！

文字は通常通り動いていくのに、背景が固まっています。
これをマーケティング的に見ると、伝えたいことに集中させられる
というのがメリットじゃないかなと思います。

文字をあえて少なくすることで、「なになに？次は？」というワクワクを掻き立てられます。
つまり、スクロールしてどんどんのめりこませて行くLP（ランディングページ）でも有効な手法ではないでしょうか。

「リバウンド繰り返していませんか？」
「実はそれ、あなたは悪くないんです。」
「XXなら、痩せたあと体重をキープできる！」
みたいな感じですね。

デモでも一応そんな風に書いてみました。
99%の人が自分のヒジを舐められない。
でもそれを知った90%の人が試しに舐めようとする。
らしいですよ。

すごく前のビデオですが、アメリカにいた時に面白い子どもの本があって、そこに書いてありました。
よかったらみて見てください。

にしても画質悪い。
当時は綺麗だと思っていたけど。たった5年でここまで進化するんですね・・。

HTML/CSSコーディング

ではやり方です！
HTMLとCSSそれぞれ見ていきます。

シンプルなHTMLでOK

今回は、箱が３つのHTMLにしました。
それぞれの箱に言葉が入っています。
これ以上説明のしようがない・・というくらい簡単な構造です。笑

クラスは、固定させたい背景を持つdiv要素に.fixedをつけています。
それぞれのdivの背景を別々の画像にしたいので、それぞれに.bg1, .bg2, .bg3というクラスをつけます。

background-attachmentで背景を固定できる

続いてCSSです。

先ほどのクラスに対して、それぞれ違う背景をbackground-imageで指定します。

ここまでは一緒ですね！
はい、ここが魔法です！笑

固定させたい背景のdivに.fixedクラスをつけたので、この子たちに
background-attachment: fixed;

というCSSを使ってあげます。
たったこれだけ。
あとは、見栄えをよくするために

• 背景をいっぱいに表示させる
• 高さを指定
• 文字を真ん中に

というような感じで整えてあります。
ぜひ使ってみてくださいね！

スマホ（iOS）では表示されない・・！！

さて、このとっても簡単に背景を固定させるbackground-attachmentというCSS。

残念なお知らせです。このCSSはiOSが未対応です。

スクロールの効果がより期待できるのはスマホなんですが、iOSではいつもと変わらず背景が動いていってしまいます。
ただ。

ご安心ください。
ちゃんと裏ワザがあります。
擬似クラスというのを使うのですが、これはまた別の記事で解説したいと思います。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

おしゃれサイト制作ならLinksbase

Linksbase（リンクスベイス）は、ワードプレスをベースに、高いデザインスキルを駆使したホームページをご提供しています！
女性ならではのおしゃれなサイトデザインながら、芸術のおしゃれだけでなく、マーケティング観点を加味したご提案いたします。

モットーは、企業やサービスを【ブランディング】し、お客様に「選ばれる」ためのホームページ制作。
ブランディングとは、「〇〇といえばここ」という意識をお客様に根付かせること。「価格競争知らず」「リピート客がたくさん」「社員が長く働いてくれる」そんなビジネス、始めませんか？

The post あなたもデキル！CSSでスクロールしても背景を固定させる方法 first appeared on Linksbase.

おっしゃれー！！！！ やってみたくなったでしょ。 わかってしまえば簡単にできるのですが、検索してもなかなか難しかったので共有致します。

用意するもの

• Illustratorなどのベクター画像が作れるもの
• HTMLエディタ 私はBracketsを使ってます。AtomとかなんでもOK

仕組み

A：表示したいイラストやロゴの“ベースSVG”と B：アニメーションの動きをつける“マスクSVG” という2枚の画像を重ねて、 Aを、Bで隠している状態から、Bが書き順に沿って動くことで あたかも手書きで書いているかのように見せられるものです。  

・・・おっと、じゃあBだけでええやん と思った方。

そうです。パスだけならBだけ使えばいいんですが、 この動きのベースになっているのが、パス（線）なので、 お洒落なフォントだったり、イラストの場合、表現できないんです。

そういった場合には、今回紹介する方法がGoodです。

SVGアニメーションの作り方

動画を作りましたので、合わせて見ていただくとわかりやすいかなと思います！  

①ベース＝マスクされる側

Illustratorを使います。

1-1. レイヤーの名前を決める

こちらでは、「base」と「mask」にしています。
これが、のちにID名になり、コードを読み解く時に便利なので必ず入れましょう。

1-2. テキストツールで文字を書く

「base」レイヤーにテキストツールで好きな文字などを描きます。

• フォント選びで気をつけたいこと。
  • 文字の間隔が狭くないもの
  • 文字の太さが出来るだけ均一なもの

マスクを作った時に、重なってしまって仕上がりが雑になってしまうので、こういったフォントを選ぶのがおすすめです。

1-3. パスをアウトライン化

選択ツールに持ち替えて、描いたテキストを右クリック。

「アウトラインを作成」します。 （英語表記でごめんなさいw英語を忘れないようにと極力英語にしております。）

1-4. 複合パスを作成

オブジェクト＞複合パス＞作成 から、複合パスを作ります。
これをやっていないとなんだかうまく行かなかったです。

1-5. 塗り色を選択

塗りつぶしカラーを入れましょう。

今回はロスの夕焼けをイメージしてみました。
またの名をインスタグラムカラーという・・。

これで“ベースSVG”の完成です。

②アニメーションパス＝マスク

引き続きIllustratorです。

2-1. 「base」レイヤーをロック

先ほどのベースSVGのレイヤーを、鍵マークをつけて動かせないようにロックします。
この上にマスク SVGを描いていきます。

2-2. ペンツールでなぞる

ペンツールを持って、「出来るだけ一筆書き」で、ベースSVGをなぞっていきます。

ぺジェ曲線、難しいですよね。
私もまだまだ練習が必要です。

ここでは、書き順の通りになぞりましょう！

今回は、「Los」「An」「geles」「gの点」という感じで分けました。
（後でgの点が入っていないことに気づいたのと、Aの綴りがなんか不自然だったのであとで修正しました。）

2-3. なぞった線を太くしてベースSVGを隠す

ダイレクト選択ツールなどを使って、線を修正しながら、ベースSVGが「完全に隠れるように」でも「他の線に被らないように」なぞっていきます。

マスクSVGの線が、書き順に沿って消えていくことで、下のベースSVGが浮き上がっているように見えるということなのですが、 線を太くしたばっかりに、一画目の線が次の画も隠してしまっていると、アニメーションにした時に不自然な画が自分の番じゃないのに出てきてしまうということなんですね。

ですので、線の太さが大きく違うフォントを使うと、画数ごとにレイヤーを分けて、それぞれ太さを変えて、という作業が増えるということです。

増やしてもいいですがなかなかめんどくさいです。
あとは、アニメーションのスピードでごまかせるところもありますのである程度は妥協もしましょう。笑

透明度は70%くらいでやるとうまくできると思います。

2-4. 線の名前をつけてグループ化

最後に、マスクSVGの線レイヤーにわかりやすいように名前をつけておきます。

線たちのグループ化は、ビデオではやりましたが、まあやらなくても良いかなと後で思いました。

最終的に落ち着いたのはこんな感じ。

結局「Los」「A」「Angeles」の３種で分けました。 「A」がどうしても重なってしまうんですが、スピードでごまかしています・・w これで“マスクSVG”の完成です。

③SVGに書き出し

名前をつけて保存か、エクスポートからSVGを保存します。

名前をつけて保存の方が、htmlで見た時に行を分けてくれていてわかりやすいのでおすすめです。

④エディターでコードを書く

さあ、ここまできたら簡単です！

4-1. テンプレをコピー

エディタで、〇〇.htmlというファイルを作ります。
そうしたら、その中に下記のコードをコピぺしてください。

<!DOCTYPE html>
<html lang="ja">

<head>
  <title>手書き風SVG文字アニメーション</title>

  <style type="text/css">
    /* CSS コピペ */
  </style>
</head>

<body>
  <div class="svgall">
    <svg class="mask" viewBox="コピペ" id="move">
      <defs>
        <!-- アニメーション画像 -->
        <mask id="clipMask">
          <!--マスクのpath-->
        </mask>
      </defs>
      <!-- ベース画像 -->
      <image xlink:href="ファイルパス" width="100%" height="100%" mask="url(#clipMask)"></image>
    </svg>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
  <script>
    new Vivus('move', {
      type: 'scenario-sync',
      duration: 100,
      forceRender: false,
      animTimingFunction: Vivus.EASE
    })
  </script>

</body>

</html>

4-2. ③で保存したSVGをエディタで開く

上下や左右のウィンドウを利用して、さっきのSVGを開いておきましょう。

4-3. 必要情報をSVGから拾ってくる

SVGのコードの中から、CSSの部分・viewboxの数字をコピーしてきましょう。

CSSの中にある、マスクレイヤーの線のクラスのなかの、 fillとstrokeは fill: none;　と　stroke:#fff に修正しておきましょう！

次に、<g id=”mask”>から</g>まで全部を切り取って、htmlのマスクのpathというところに入れます。
そして、<g id=”mask”></g>はいらないので削除します。

4-4. ベースSVGのファイルパス

先ほど、マスクのpathを切り取った＝マスクのレイヤーのデータがなくなったので、SVGには、ベースSVGのみが残っている状態です。

このSVGのファイルパスを、htmlの中に入れて、読み込ませます。

⑤CSSとHMTLでSVGがアニメーションに！

完成です！おめでとうございます。

動きの理由は、htmlの中に読み込ませているscriptのおかげです。

vivus.jsを利用しています。
new Vivus〜のところで、スタートするタイミングやアニメーション全体のスピードなどを操作できるので、色々試してみてください。  

いかがでしたでしょうか。

私はこのhtmlマークアップのところでなかなかつまづいてしまって悔しかったのですが、テンプレを使ってしまえばめちゃ簡単にできたので嬉しい限りでございます！

誰かのお役にたてば何よりです。

SVGアニメーション参考リンク

今回色々と調べていて参考にさせていただいた記事です。

つまづいたら色々と見比べてやってみると良いと思います。

https://nycreation.jp/blog/archives/91/
https://theorthodoxworks.com/front-end/svg-handwriting-animation-js/
https://www.willstyle.co.jp/blog/1569/ http://herrkf.com/20190422/3517  

おしゃれサイト制作ならLinksbase

Linksbase（リンクスベイス）は、ワードプレスをベースに、高いデザインスキルを駆使したホームページをご提供しています！

女性ならではのおしゃれなサイトデザインながら、芸術のおしゃれだけでなく、マーケティング観点を加味したご提案いたします。

モットーは、企業やサービスを【ブランディング】し、お客様に「選ばれる」ためのホームページ制作。 ブランディングとは、「〇〇といえばここ」という意識をお客様に根付かせること。

「価格競争知らず」「リピート客がたくさん」「社員が長く働いてくれる」そんなビジネス、始めませんか？

The post [ビデオ解説付] CSSとSVGで手書き風のアニメーションを作る方法 first appeared on Linksbase.