ホームページやチラシ制作を依頼するときに知っておきたいワイヤーフレーム(構成案)とは

簡単に言うと、作業の後戻りを防ぐための、色やデザインに取りかかる前に制作する、おおまかな構成を決めるための「ラフ案」のことです。

ホームぺージに掲載したい内容を、どれをどこに配置するのかを、この時点で決めていき、このラフ案を確定した後、実際のデザイン（色味や雰囲気）の作成に進みます。 変なイメージがつかないように、一般的に白黒のモノクロで作られます。

ワイヤーフレームは、ゴールへの道しるべになる

お客様から「こういう事業・サービスをしていて（しようとして）、ホームページを作りたいが、何をどういう風にしたいかわからない」というお声をよく聞きます。

具体的なイメージがあったり、すでにホームページがあってリニューアルしたいという場合は、お客様もたたき台があるからか、そこから構成を練り直したり追加したり必要に応じて削除したりと、完成のイメージが想像しやすいようですが、全くはじめてホームページを作る場合は、「ホームページの必要性は感じているが、自分のサービスをどうホームページでアピールしたら良いのか、何を載せたら良いのかがわからない」という事業者さまも多いです。

そこで、いきなりデザインに取りかかるのではなくて、まずワイヤーフレームというモノクロのラフ案を作成します（主にパソコン画面。スマホ画面はパソコン画面が完了した後、ワイヤーフレームなしで制作することが多いです）。

モノクロのワイヤーフレーム（ラフ案）のサンプル画像

（※クリックすると全画面表示されます）

 

このラフ案のように、キャッチコピーや文章、大まかな構成、どこにどんな写真を入れたいかを決めて、実際のデザインはこのラフ案を決定してから作業します。

また合わせて下記を伺います。

• 何をアピールしたいホームページなのか。キャッチコピーは？
• ホームページのテイスト：安心感のある、ポップ、さわやか、かわいい、かっこいい、大人っぽい、爽やか等
• キーカラー：メインとする色。ロゴがあるならロゴに合わせても良い
• ターゲットの人（ホームページを見てもらいたい人）：年齢層、男性か女性か。既婚、子持ち、家族、●●のサービスを求めている人等
• 参考にして欲しいホームページのアドレス（あれば）

サンプルとして「宝塚のお料理教室」をテーマにしました

今回の場合、「宝塚のお料理教室」をテーマにサンプルで作ってみました。

• ご自宅でされているお料理教室の紹介サイト「気軽におもてなし料理」をテーマに
• イメージ：落ち着いた、安心感のある、シンプル
• キーカラー：ブラウンと差し色にグリーン
• ターゲットの人：30代〜60代の男女。または子育て中の女性）

出来上がったデザイン

そして、出来上がったデザインがこちら（パソコン画面のワイヤーフレーム）↓

（※クリックすると全画面表示されます）

このように、ワイヤーフレームから詰めておけば、デザインが出来上がってから「イメージと違った！」ということも無くなし、作業の後戻りもないので安心してお客様もお任せ頂けると思います。

作る側としても作業中、こんな感じで大丈夫だろうか、・・・と不安を感じながら作業せず済みます。

もちろん、デザインが一度仕上がってからも、そこからご相談しながらブラッシュアップしつつ、お客様の納得のいくように制作させて頂きます。

自分のサービスを言葉にすることの大切さ、難しさ

時々、白黒のラフ案だけを見ても、イメージが湧かないというお客様がいらっしゃるので今回ブログで説明してみました。　

今回は1ページのデザインでボリュームもとても少ないので、ラフ案を作るのは労力がかかりませんが、ボリュームが多い物販専門のサイトやランディングページ、専門的な説明を掲載したいクリニック系のホームページとなると、ワイヤーフレームを決めるだけで、数日、数週間かかることもあります。

また、お客様がモノを売る時、事業を開始するとき、何をアピールしたいかというのが案外サクっと言葉にできないことが多かったりします。

そのあたりをヒアリングしたり、頂いた膨大な資料を見ながら、こちらでホームページにどうまとめていったらホームページを見る人に見やすいのか、伝わりやすいのか考える作業もWEB制作の仕事だったりするんですよね。