これからホームページを作りたい人に知ってほしい。何も無いところから公開されるまで。ワイヤーフレーム（ラフ案）とは？

（この記事は、2016年4月30日に書いたものに加筆しています）

一般的にホームページの制作から公開の流れは、だいたい決まっています。
参考：ホームページの制作の流れ

いろいろな代理店とのやりとりでも、基本的にはこの流れと同じなので、どこの制作会社でも大きくは違わないかと思います。

お客様が一番悩むところ、つまり一番制作側の私がサポートしないといけない部分が、「ワイヤーフレームを作る」作業です。

「ワイヤーフレーム」とは

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

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

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

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

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

そこで、いきなりデザインに取りかかるのではなくて（コンテンツが非常にシンプルな場合は、イメージを聞いた上でデザインから取りかかる場合もあります）、まずワイヤーフレームというモノクロのラフ案を作成します（主にパソコン画面。スマホ画面はパソコン画面が完了した後、ワイヤーフレームなしで制作することが多いです）。
 

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

こんな感じです（パソコン画面のワイヤーフレーム）。
（※クリックすると全画面表示されます）

—-

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

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

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

今回の場合、「宝塚のお料理教室」をテーマにサンプルで作ってみました。
（こんな料理教室通ってみたい！と思いながら作りました。）

出来上がったデザイン

そして、出来上がったデザインがこちら（パソコン画面のワイヤーフレーム）↓
（※クリックすると全画面表示されます）

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

私も作業中、こんな感じで大丈夫かな〜・・・と不安にかられながら作業せず済みます＾＾；
もちろん、デザインが一度仕上がってからも、そこからご相談しながらブラッシュアップしつつ、お客様の納得のいくように制作させて頂きます。

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

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

また、お客様がモノを売る時、事業を開始するとき、何をアピールしたいかというのが案外サクっと言葉にできないことが多かったりします。
そのあたりをヒアリングしたり、頂いた膨大な資料を見ながら、こちらでホームページにどうまとめていったらホームページを見る人に見やすいのか、伝わりやすいのか考える作業もWEB制作の仕事だったりするんですよね。

ちょっと宣伝

弊社、(株)宝塚デザインでは、「シンプルプラン」という宝塚近郊の事業者さま限定に、オリジナルテンプレートプランを作りました。

宝塚デザイン＊宝塚デザイン＊オリジナルテンプレートプランとは

ホームページにお金はかけたくないけれど、高品質な自社サイトを作りたい方へ

宝塚デザイン＊オリジナルテンプレートプランの詳細はこちら

(まさかの宣伝で終わってしまいました。)