ディレクター必見!WEBサイトのラフを超簡単に・フレキシブルに作る方法


こんにちは。
WEBエンジニアの文です。

なんか小学生の工作みたいなことしてますが、遊んでません。
ちゃんと仕事してます。

今日は皆様に、簡単・フレキシブル・スピーディーにWEBサイトのラフを作る方法をご紹介します。

ラフって何?作らないといけないの?

ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。
これを元にワイヤーフレームや配置する要素を決めたりもするので、
割と重要なものになります。

いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが
事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。

ラフをスピーディーに作る方法

ラフはほぼ何もない状態からコンテンツを決めていく作業のため、
頻繁に変更が発生しがちです。

そのため、PC上で作るよりも、鉛筆などで直接紙に書き詰めていくことが多いです。

  • とりあえず紙に書いてみる→変更があったから消して書く→また変更があったから消して書く
  • 変更があるたびに別の紙に書いていく

など、変更がある度にこんな作業は非効率ですね!

そこで、今回は私がいつもやっているラフの作り方をお教えします。

実際にやってみよう

実際にやってみるのが早いので、実際にやってみましょう。
今回は架空のショップサイトを作ってみることにします。

下準備

まずは紙2枚とペンとハサミとノリを用意します。
紙はA4程度の大きさであれば、一般的なWEBサイトの横幅くらいの大きさに見えるので、
そのくらいのものが望ましいです。

今回は地球環境にも配慮し、会社にある不要な紙の裏を使います。俗にいう裏紙です。

いいのがありました。
裏がまっさらな紙です。
弊社の七夕飾りに使われていた短冊でしたが、奪ってきました。

パーツを描こう

では、1枚目の紙にさっくりとパーツを描いていきましょう。
今回は簡易版で、TOPページのファーストビュー部分を作るので下記のようにパーツを用意してみました。

  • ロゴ
  • ナビゲーション
  • キャッチコピー
  • リード
  • 商品自体のイメージ
  • 商品の使用例のイメージ
  • 関連サイトへのバナー
  • 今すぐ購入ボタン

これはただのパーツなので、適当な場所に思いついたものを描いていけばいいです。
なんとなく全体のイメージがある場合は、この時点からレイアウトしておいても可です。

パーツのグループ(ナビゲーションのパーツなど)は、大体同じ大きさにしておくといい感じです。

パーツを切り出す

描いたら切りましょう。
全部バラバラにしてしまいましょう。

ある程度レイアウトした方は、一旦誰かに見せましょう。
大体「ここはこうした方がいいんじゃない?」みたいになって変更することになります。

切ります。

目が死んでいますね。
パーツが多いとだんだん辛くなってきます。

全部切れました。
なんとなくグルーピングしておくと、配置するときに楽ですよ。

コツは、余白はなるべく切ってしまうことです。
パーツ同士を重ねることもあるので、余白が大きいと下のパーツが見えなくなってイメージが付きづらくなります。

紙の上に配置してみよう

切り終わったら配置です。
もう1枚の紙の上に、思うがままパーツを置いていってください。

納得がいくまで配置をいじってみましょう。

パーツ毎に独立しているので、実際に目で確認しながらサクサクとレイアウトできるかと思います。

私はこんな感じで配置してみました。

※罫線がないと見づらかったので、適当に足してあります

使用例のイメージのパーツが余ってしまいました。
でもこのパーツはどこかにいれたいので、メインの商品画像をカルーセルにすることにしました。

矢印がないのでパーツを作って

こんな感じにしてみました。
縮尺があれですが、イメージは伝わりますね。

これで一回チームに共有し、フィードバックをもらいましょう。
必要があればこの勢いで要素を足したり引いたり、配置を変更したりしていきます。

場所を確定する

チーム内(もしくはクライアント)と調整が終わったら、場所を確定させましょう。
適当に置いただけだと風で全て消えてしまうので、のり付けです。
※今作っているこれも、途中で風に吹かれて飛ばされました。

いい大人が、楽しそうですね。
最終系はこうなりました。
スライダーもちゃんと表現してあります。

この段階になったらメモや動きの説明は直に書いてしまいましょう。
罫線なども入れてOKです。

今回のまとめ

いかがでしょうか。
ラフなので、これをもとにワイヤーフレームを作る必要はありますが、
「ワイヤー作ったあとにリテイク入ってめっちゃ時間かかる」みたいなことは極力防げるようになるかと思います。

また、今回はファーストビューだけでしたが、1ページ丸々この手法で作成することも可能です。

是非お試しください。

お問い合わせはこちら

03-5389-0383
受付 10:00〜19:00 土日祝定休

投稿者: fumiaki