Webページデザイン完全ガイド〜手書きラフからワイヤーフレームへの清書フロー〜

アイデアを論理的な形に落とし込む方法

Webサイトのデザインルールやトーン&マナーの方向性が見えてきたら、
次はいよいよ具体的なページの構造を決める「設計図(ワイヤーフレーム)」の作成に入ります。
このステップで大切なのは、いきなりパソコンの画面に向かってデザインツールを動かさないことです。

「手書きでのアナログなアイデア出し」から、
「デザインツールでのデジタルな清書」という2つのステップを正しく踏むことで、
迷いのない強固なWebサイトの骨組みを作ることができます。

今回はその具体的なフローと、プロが実践するデザインの落とし込み方を詳しく解説します。

手書きラフからワイヤーフレームへの清書フロー

STEP.01:アナログ:手書きで「情報配置のラフ」を描く

最初に行うのは、ノートやコピー用紙、ホワイトボードなどを使った、
Webページ構成の手書きのスケッチ(ペーパープロトタイプ)です。

いきなりFigmaやAdobe XDなどのデザインツールを開いてしまうと、
「ツールの操作」や「細かなフォントサイズ・余白の数値」に意識が引っ張られ、
肝心の「情報の優先順位」がおろそかになってしまいます。

デザインの目的として、以下を念頭に置いて作業を行いましょう。

手書きラフの目的と決めるべきこと

情報の優先順位を決める

ユーザーに一番最初に見せたい要素(キャッチコピー、CVボタンなど)をどこに配置するか。

大まかな視線誘導のルート作り

記事の前半でも解説した「Fの法則」や「Zの法則」に沿って、ストレスのない配置になっているか。

各セクションの役割分担

ヘッダー、ヒーローセクション、メインコンテンツ、フッターの大まかな縦の並び順を確定させる。

プロの手書きのコツ

スピード重視(タイムボックス)

定規は使わず、1つの画面につき3〜5分程度で素早く何パターンも描いてみましょう。

テキストや画像は簡略化

細かな文字は書かず、四角(□)や線(ー)、バツ印(✕:画像を示す)などで記号化して描くのがポイントです。

手書きで「この情報の並び順が一番ユーザーに伝わりやすい」という納得のいく配置(1パターン)が決まったら、
次のデジタル工程へ進みます。

STEP.02:デジタル:デザインツールでワイヤーフレームに清書する

手書きのラフをもとに、デザインツールを使って「論理的なワイヤーフレーム(骨組み)」へと清書していきます。
現在は、共同編集がしやすくコンポーネント機能が強力な「Figma」を使用するのが業界のスタンダードです。

デジタルへの清書は、単に手書きの絵をきれいにトレースする作業ではありません。
ここではじめて、「グリッドシステム」や「正確な比率・数値」という論理的なデザインルールを適用させます。

清書時の3大重要ルール

正確なアートボード(画面幅)を設定する

PC版なら横幅1440px、スマホ版なら390pxなど、
実際の閲覧環境を想定したサイズで枠(アートボード)を作ります。

グリッドシステムで要素を整列させる

一般的な「12カラムグリッド」などを画面に敷き、
要素の横幅や余白(8px、16px、24pxなどの倍数)を正確な数値で整列させます。
これにより、実装(コーディング)しやすい美しいレイアウトの基礎が整います。

色とフォントは「使わない」

この段階では、画面を必ずモノトーン(白・黒・グレー)で構成してください。
フォントも標準的なゴシック体のみを使用します。
最初に色や装飾をつけてしまうと、「情報の配置や読みやすさ」の検証がブレてしまうためです。

まとめ

アナログとデジタルの役割の違い

手書きラフとデザインツールでの清書には、それぞれ明確な役割の違いがあります。

直感的なアイデア(手書き)を、論理的な数値(ツール)へと落とし込む。
この一連のフローを踏むことで、後々のデザイン工程で「やっぱり配置を変えたい」という手戻りを防ぐことができます。
骨組みが完璧に組み上がったら、いよいよ次からは各ブロックごとの具体的な構築術へと進んでいきましょう!