ワイヤーフレームを作成する
サイトジャンルやコンテンツ（記事企画）が出来たら、ワイヤーフレームを作りましょう。
ワイヤーフレームとは、Webページの骨組み・設計図の様なものです。 ファーストビューやユーザーの視線の動きなども考慮してコンテンツのレイアウトを決めていきます。
ワイヤーフレーム作成のポイント
1.情報を整理する
１つのページにコンテンツを沢山載せると情報量が多く、ユーザーが目的のコンテンツを見つけられなかったり、読み進めるのをやめてしまったりすることがあります。
特にサイトのフロントページに表示させる内容や記事へのリンクは、重要なコンテンツのみに絞りましょう。賑やかさを演出しつつ、どのようなサイトで記事があるのかが一目で分かる程度に抑えます。
2.実際に使用するテキストを使う
テキスト部分は実際に使用するテキストを使います。 「△△」「〇〇」のようにサンプルテキストを使用すると、完成時のテキストがサンプルテキストよりも長くなってレイアウトが崩れてしまう危険性があります。 ですので、テキストは極力実際に使用する文言を入れましょう。
また、今回のサイトはブログコンテンツメインという性質上、タイトルや抜粋文（表示する場合）の長さが揃わない可能性も視野に入れます。各ブログへのリンク箇所では、どの程度の文字数を基準にしてカード幅を決めるか、タイトル等が長すぎる場合はどうするかも合わせて考えておくと良いでしょう。
3.メリハリで優先度を表す
テキスト量の多いサイトでは、すべてのテキストを読んでもらえる可能性は高くないかと思います。たとえば小さな文字が沢山並んでいるだけだと、ユーザーは読み進める気をなくし離脱してしまいます。
その対策として、サイズや太さなどで目立たせた見出しを付けたりします。 細かい設定は後のデザイン工程で行います。ワイヤーフレームの時点では、各見出し・本文との文字サイズ差など、大まかにあたりを付けておきましょう。
見本
今回作成するサイトは、ブログがメインのサイトです。
- フロントページ
- 記事一覧ページ
- ブログ記事ページ
３ページ分のワイヤーフレームを作成しました。
トップビューを魅力的にする
講座で使用している見本のトップビューは淡白な作りになっています。 が、実際にオリジナルサイトを作成する際は、ユーザー（ペルソナ）が「このサイト見てみたい」と思えるように、キャッチコピーを工夫しましょう。
そのためにwebサイト/ページタイトルではなく、キャッチコピー重視にします。
①ベネフィット 商品やサービスを購入した先にある、ユーザーの「満足」を意味します。 ユーザーの心のなかにある願望を表現するワードを入れると良いでしょう。
②ベネフィット概要/サイト概要 ベネフィットの根拠を簡単に説明します。詳細はページをスクロールして読んでもらえれば良いので、ユーザーがサイトを見たくなるようインパクト重視にします。
ワイヤーフレームの見本で使った受託開発のサイトであれば、ユーザーのベネフィットは「高い技術力の受託開発を、低予算で依頼できる」ことです。
ベネフィットを強調した文言に変えると、先程よりも読んでみようという気になるのではないでしょうか。
また、ペルソナ・記事企画シートで使ったダイエット系サイト。 この場合、ペルソナの表面願望は「望みのボティを（ハードなドレーニングや制限をせずに）手に入れたい」です。彼女が欲しい・モテたいという心もありますね。
このペルソナがサイトを開きたとき、記事を読んでみようと興味が湧く言葉を考えます。 サイトタイトルが書かれているよりも、下図のようにベネフィットが押し出されている方が惹きつけられるでしょう。
イラストレーターでのワイヤー作成方法
イラストレーターでワイヤーフレームやデザインを組んでいく方法は人それぞれです。 1ファイル＝1ページ分にする方も、一枚のアートボードに全ページのレイアウトを入れる方もいます。
今回はアートボードを３つ作成して、 それぞれのページレイアウトを作ってください。
アートボードの設定方法を下記で紹介します。
また、素材欄に
- 空のテンプレート(blank.ai)
- 上図の見本ファイル(mihon.ai)
２つのファイルが入ったフォルダをアップロードしています。 このテンプレートを使っていただいても良いです。
イラストレーターの操作方法につきましては WEBデザインのためのILLUSTRATOR入門講座 をご確認ください。
アートボードの設定
まず、イラストレーターのファイルから「新規」をクリックします。 作成するドキュメントのサイズを決めるウィンドウが表示されるので、幅を1280pxに設定してください。高さはレイアウトに合わせて変更していくので何でも構いません。 カラーモードはRGBにしてください。
作成ボタンをクリックすると、アートボードが一つ配置された画面になります。
アートボードツールをクリックしてください。
自動的にアートボードが選択された状態になります。 ならない方はアートボードをクリックして、選択状態にしてください。
Altキー（Windows）またはOptionキー（macOS）を押しながらドラッグすると複製できます。 この方法で３枚アートボードを配置してください。
これで、それぞれのアートボードに * フロントページ * 記事一覧ページ * ブログ記事ページ
のレイアウトを入れられるようになりました。ページに表示させたいコンテンツとレイアウトを考えながら、図形やテキストを配置して行ってください。
●ガイドの作り方
Webサイトは左右端ギリギリまでテキスト等が入ってしまうと見にくいですよね。 適度な余白を保つためにガイドを作っておくと、配置が少し楽になります。 ガイドの作り方をご紹介します。
長方形ツールで設定したい枠を作ります。 下記ではbootstrap「container」クラスの最大幅＝1140pxにしました。
整列ツールを使って、アートボードの中央に配置します。
↓
長方形を選択した状態で右クリック。 表示された右クリックメニューから「ガイトを作成」をクリックします。
これでガイドができました。 図形のまま置いておくのとの違いは、重ね順に関係なく表示される点です。
直線ツールでも同様にガイドを作成することができます。 揃え位置の目安がほしいときなどに使ってみてください。
アートボードのサイズを変える
アートボードの高さ（長さ）が足りなかったり、余ったりしたときはアートボードツールを使って調整することができます。
アートボードツールをクリックし、変更したいアートボートをクリック。
枠線部分付近にマウスを持ってくると拡大・縮小を示す矢印が表示されます。 ドラッグしてサイズを変更してください。
アートボードをタブルクリックして「アートボードオプション」のウィンドウを表示させ、数値として打ち込むことでも変更できます。
◆課題：ワイヤーフレームを作りましょう
- フロントページ
- 記事一覧ページ
- ブログ記事ページ
のワイヤーフレームを作成してください。
上の見本と異なるレイアウト・コンテンツ配置にして頂いて良いです。