Webページの描き方：ワイヤーフレームで5ステップのチュートリアル
Webページの描き方：まずワイヤーフレームを描いてみましょう。ナビゲーション、メインコンテンツ、サイドバー、フッターをざっくり箱で描くだけ。色もコードもいりません。ここで試しているのはアイデアであって、アートの仕上がりではありません。
デザインする前に、なぜスケッチなのか
レイアウトは「描くもの」ではなく「決めるもの」だからです。ワイヤーフレームを描くと、本気の問いが浮かびます——見出しはどこに置く？ サイドバーはそもそも要る？ 紙の上で箱を動かすのは数秒、コードでは数時間かかります。シンプルな12カラムのグリッドから始めれば、すべての要素の位置が揃い続けます。
ページを構成する4つのブロック
この方法でWebページのレイアウトの描き方を覚えれば、ほとんどのページを数分でスケッチできます。
- ナビゲーション – ロゴ、メニュー、検索。最初に描く。
- メインコンテンツ – いちばん大きな箱：ヒーロー、テキスト、画像。
- サイドバー – あってもなくてもOK。迷ったら外す。
- フッター – リンク、法的情報、連絡先。
そのあと注釈を付けます：各ボックスにひとことだけ。「登録フォーム」「商品写真」といった具合です。それだけで落書きは、誰でも読める仕様書になります。
ワイヤーフレーム5ステップのチュートリアル
紙の上なら20分。ランディングページ、ダッシュボード、ブログ向けのUXスケッチ入門としても使えます。
- グリッドを描く。薄い線で12列。ルールではなくガイド。
- ページの枠を決める。ナビは上、フッターは下。
- コンテンツをブロック分けする。ヒーロー、本文、サイドカラム。
- 注釈を付ける。1ボックスに1語。初心者は飛ばしがちですが、ここが最重要。
- もう一度描く。2回目は必ず何か気づきがあります。
先に紙で考えると、ピクセルではなく構造を考えられます。
ワイヤーフレームはAIに描いてもらえる？
正直なところ、AIが役立つのはここです。無料のAI Drawツールは、テキストの説明文からワイヤーフレーム風のレイアウトを生成します。3案出してもらって、ピンと来るものを探してみてください。
ただし正直なところ：AIがくれるのは参考レイアウトであって、インタラクションのロジックではありません。「チェックアウトがなぜ機能するか」「クリックしたら何が起きるか」は、まだあなたの仕事です。詳しくは、AI描画ツールが作成できる図の種類とAIは図を描けるのかの回答で限界を確認できます。使えるプロンプトはデザインの描き方ガイドにあります。
自分のドキュメントで試してみる
AI Drawアプリは、プレーンテキストの説明を数秒で画像に変えます。1日3枚まで無料、登録費用も不要。「ミニマルなランディングページ、ヒーローは左、フォームは右」と入力して、何が返ってくるか見てみましょう。製品をデザインしてくれるわけではありませんが、アイデアのきっかけにはなるかもしれません。