WEB制作のデザインに移る前にやっておくべきこと、それがワイヤーフレーム（以下ワイヤー）作りです。ワイヤーとはWEBサイトの設計図のようなものでデザインの叩き台になります。ワイヤーの段階でページ推移を考えユーザビリティの高いレイアウトを構築していきます。理想はデザイナーがワイヤーを見れば何も質問しなくていいレベルまで作り込みます。

ワイヤーについてとワイヤー作りに便利なアプリを下記ページで紹介していますので参照してください。

また、このページはトレーニング中級の2回目になります。前回の「レイアウトをパーツに分けて考えよう」も重要ですので読まれていない方は参照してください。

簡単なブログを作っていこう

トレーニング中級では全体を通して簡単なブログページを作っていきたいと思います。ブログなら複雑なデザインが必要としなくある程度イメージが出来ると思ったからです。ブログ作りにあたって最低限のデザインアプリとテキストエディタの準備をお願いします。

サーバーが無くても見れるように作るのでローカルサーバーのインストールやサーバーアップロード用のFTPアプリは必要ありません。

ブログサイトの仕様を決めよう

ブログのトップページと記事ページのワイヤーを作っていきたいと思います。ワイヤー作りの前にこれから作るワイヤーの仕様を決めなければなりません。今後作るブログの仕様は下記のようにしますが、自分用に変更しても構いません。

サイト情報

コンテンツ

トップページのワイヤーを描いていこう

今回はトレーニングなので必要最低限だけの要素のみ記述していきます。ブログで定番のレイアウトがあるので下記のようなザックリとしたワイヤーをまず描きましょう。

これらのワイヤーは実際に自分でも描いてみてください。

まずはヘッダー部分から描きこむ

サイト名とサイト概要をまず描きます。その下に全ページ共通で表示されるグローバルメニューを描きました。リンク先はホーム（トップページ）、野菜のこと（カテゴリー）、お問い合わせの3つです。野菜のこととお問い合わせは実際に作りませんが仮リンクで設置しようと思います。

メイン部分を描きこむ

×の部分は画像になります。ブログのトップページですのでシンプルに記事の一覧だけを描いています。ひとつめの記事が大きくその他が小さく描いていますが、これはCSSの練習になるのでサイズを変えています。
最後に書かれている数字は残りの記事一覧を表示させるページャーになります。実際には機能しないリンクです。

サイドバー部分を描きこむ

今回はブログのサイドバーですのでよくあるパターンのサイドバーを描いてみました。カテゴリーメニューを置くことでグローバルメニューで紹介しきれない記事への導線を作ります。オススメの記事一覧はPV数のランキングでも良いですが単純にサイト運営者が読ませたい記事のリンクでも良いです。最後に画像を設置していますが特集的なバナーリンクを設置するバナーリンク領域を作ります。

フッター部分を描きこむ

フッターもブログでよくあるパターンの内容にしています。最近は少ない傾向にありますが、フッターに殆どのコンテンツ情報を記載するパターンがあります。作るブログ自体が簡素なので情報が少ないですがサービス系のサイトだと100個くらいメニューがあったりしますね。

ブログについてやお問い合わせページは実際には作りませんが仮リンクとして設置します。

これでトップページ全てのパーツを描き揃えました。ページの都合で分割して紹介しましたが、全てを一つにまとめた画像を見てみましょう。

トップページのワイヤー全容

各パーツ毎に作ってしまったので文字のサイズ感に違和感がありますが、全てを組み合わせるとこのような感じになります。一気にブログっぽくなりましたね。

非常に少ないコンテンツ内容です。それでもコーディングをする場合は各パーツ全てを作らなければならないのでソコソコのボリュームになります。

次は記事ページのワイヤーを作ります。

記事ページのワイヤーを描いていこう

今回は普通のブログを作るのでヘッダー、サイドバー、フッターは全てのページで共通です。そのため記事ページのワイヤーは記事部分だけ作成すればOKです。

メイン部分を描きこむ

記事ページのメイン部分の文章は仮のものを入れています。今回は「すぐ使えるダミーテスト」という仮文章を作ってくれるWEBサービスで発行してもらった文章を適当に貼り付けています。「テキストテキスト…」と書くのも良いですが今回は実際の文章の方が感覚が分かりやすいと思うのでダミーテキストを利用しています。

記事ページで重要なのは「記事タイトル」「投稿日」「カテゴリー」「本文」「前後記事へのリンク」です。関連リンクやシェアボタンなどがよくありますが今回は除外しています。本来パンくずリストも入るべきですがトレーニングには合わないと思うので除外しています。記事本文中には様々な要素が投稿されることになりますが今回は見出しとテキストだけの内容にしています。

そして実はこの記事ページもヘッダー、メイン、フッターに分かれています。コーディングの際には実際にタグを分けていきます。

それではヘッダーなど全てのパーツを一つにまとめた画像を見てみましょう。

記事ページのワイヤー全容

これでトップページと記事ページのワイヤーが完成しました。

最後に

ワイヤーを描くことはWEBサイトのデザインをするための重要な作業です。「ワイヤーに何を描けば良いかわからない…」そういう場合はまず仕様書をしっかり作りましょう。ワイヤーが出来ないということはデザインも思い浮かびません。

今回は適当なサイズのワイヤーですが、このワイヤーの段階でしっかりと寸法を決めてしまうことも出来ます。その場合、デザインは色と画像を付けるだけです。その辺りは状況に応じて対応すればいいと思います。僕の場合は仕事で受ける場合はある程度デザインが分かるようなワイヤーを描いてからデザインを起こします。個人サイトを作る場合はワイヤーのみ描いてデザインはしません。このサイトもワイヤーしか描いていおらず、パーツだけPhotoshopなどを活用して作っています。

次はいよいよデザインを作るトレーニングです。お疲れさまでした。