ワイヤーフレーム書こう

初心者ホームページ作成講座③ ワイヤーを書こう

一人の趣味のようなウェブサイトであれば、ワイヤーフレーム(WF)など書く必要はないと思いますが、確認をして進めるべきことにおいてワイヤーフレームは重要なものになります。

ワイヤーフレームとは

各ページの要件と表示画面の両方を持った仕様書だと思ってください。
プラモデルの説明書だとイメージするとわかりやすいですかね。

全体図がわかるもの
遷移図といった、どういったページが必要なのかわかる大まかな全体図があると好ましいです。 遷移図
ページの要素
そのページの内容を記載、決まってない場合は仮でもいいのでおおよそこのような内容が入るとわかるようにする
ページの配置
ロゴの位置やページ内の配置を記載 リンクになっているもの、画像のイメージなど、そのページで伝えたいことを記載

デザインとコーディングが始められるものが理想

デザイナはワイヤーフレームから、デザインの作成に入ります。当然、ディレクターがデザイナーを兼任している場合や、ヒアリングにデザイナが同席の場合は不要かもしれません。

また、ワイヤーフレームからレイアウトを確認してコーディングの基礎となるマークアップを進めるなど、デザインとコーディングが平行して作業が進められる程度のワイヤーフレームがかけるのが理想です。

ワイヤーフレームが書けるツール

デザイナーならPhotoshopを使い慣れているので、そちらがいいかもしれません。
主に扱いやすさで言えば、Googleスライドが無難でしょう。Photoshopのような専門的な使い方は不要ですし、機能は少ないですが、ワイヤーを書くだけならまったく問題ありません。

Adobe Experience Design 略してXDは、Googleスライドに扱い方は近いですが、ガイド表示などあり、精密なワイヤーをデザインを入れて書くことができます。また、プロトタイプといった実際に遷移ができる図もかけますので、より詳細なワイヤーを書きたい人にはオススメです。

以上の中から無料で使える Googleスライドをまずは利用することがいいでしょう。

確認を入れることで大きな間違いを減らす

さて、社長にワイヤーフレームを見せて確認を入れましょう。
ここではデザインをイメージさせるものは必要ありません。どんな内容のものを作りますと伝えます。

ワイヤーの説明を終え、デザインの要望を聞きましょう。
もし、依頼者である社長が、「こんな感じのデザインがいいなぁ」と要望が出てきた場合はしっかりとメモを取りましょう。

ワイヤーでOKをもらっている場合は、デザインラフの作成に次は進みましょう。もし、ワイヤーの段階で、「う~ん」と難色を示したのであれば、ヒアリングに徹しましょう。