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

ワイヤーフレームとは


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

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

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

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

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

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

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

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

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

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

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

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

TOP_Simple_ワイヤー

—-

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

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

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

 

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

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

 
 

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

simple_top


 

さらに、実際に完成、公開されたデザインはこちら。
※パソコンで見ている方はパソコン対応の画面、スマホで見ている方にはスマホ対応の画面として見えます。

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

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

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

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

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

ちょっと宣伝

Web Camperでは「シンプルプラン」という個人の事業者さま限定のプランがあります。

個人の事業者さま限定のシンプルプランとは

シンプルプランはこんな方にオススメです

  • 無料サイトやブログではなく、そろそろ、独自ドメインでサイトをしっかり運営したい。(自分で決めた「●●●.com」というサイトを持ちたい)
  • 無料ブログのアメブロではなくて、信用のある独自ドメインでのブログも開設したい。
  • 低価格でオシャレで、見やすいデザインのホームページを作りたい。
  • 他のサイトと似たようなサイトにはしたく無い。

 

シンプルプランの特徴

  • スマホでも見やすく更新の管理がしやすいレスポンシブ対応
  • ホームページとブログが統一されたデザインで、見やすい。ブログもSEOに強い独自ドメイン、WordPressで運用可能(SNSのボタン設置や、デザイン変更も可能)
  • 公開後も更新やSEOのサポートが受けられる
  • 基本1ページですが、掲載したい内容にボリュームがある場合はページ数を増やすことが可能

 

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


スポンサーリンク

フォローしてくれたら嬉しいです。