Design to Code 01｜ワイヤーフレームを観察・再現しよう

Design to Codeの最初のSTEPでは、カフェサイト「Espresso Lane」のワイヤーフレームを観察し、Webページがどのような構成で作られているのかを確認します。

ワイヤーフレームとは、Webページの情報やレイアウトを整理するための設計図です。この段階では、写真や色、細かな装飾は考えません。

まずは、ヘッダー　キービジュアル　About　Menu　Access　フッターなど、ページを構成している要素が「どこに」「どのくらいの大きさで」配置されているのかを見ていきます。

このあとSTEP02では、このワイヤーフレームを見ながらHTMLを作成します。そのためSTEP01では、見た目ではなく、Webページの構造を読み取ることを意識しましょう。

1. Espresso Laneのワイヤーフレームを確認しよう

ここでは、これから5STEPを通して制作する「Espresso Lane」のワイヤーフレームを使用します。

最初に細かな文字を見るのではなく、ページ全体を縮小して確認してみましょう。

大きく見ると、ヘッダー　キービジュアル　About Us　Menu　Access　フッターという順番で構成されています。

Webページは一枚の長い画面として考えるのではなく、役割ごとのセクションに分けて考えると構造を理解しやすくなります。

2. ページを構成する要素に分けて考えよう

• ヘッダー：サイト名やナビゲーションを配置する
• キービジュアル：最初に見せたい写真やキャッチコピーを配置する
• About：店舗やサービスについて紹介する
• Menu：商品やサービスの情報を見せる
• Access：住所や営業時間、地図などを掲載する
• フッター：サイト情報やコピーライトなどをまとめる

「ここには何が置いてあるか」だけでなく、「この部分は何のためにあるのか」まで考えてみましょう。

3. HTMLにすると何になるか考えてみよう

このSTEPではまだHTMLを書きませんが、次のSTEPでコーディングすることを意識しながらワイヤーフレームを観察します。

ここでは正解のHTMLを書く必要はありません。デザイン上のまとまりとHTMLの構造がつながっていることを意識してみましょう。

4. レイアウトを観察しよう

• コンテンツは画面いっぱいに広がっているか
• 左右にはどのくらい余白があるか
• Menuは何列になっているか
• 見出しはどこに配置されているか
• 画像と文章はどのような順番になっているか
• セクションとセクションの間にはどのくらい余白があるか

この観察は、STEP03でCSSを書くときにも重要になります。

5. Figmaでワイヤーフレームを再現しよう

構成を確認できたら、完成見本を参考にFigmaでワイヤーフレームを作成してみましょう。

この課題では、細かな装飾を作る必要はありません。グレーの長方形やテキストなどを使って、情報の位置・幅・余白が分かる状態まで作成できればOKです。

すでにFigma実践でEspresso Laneを作成している場合は、そこで作成したワイヤーフレームをそのまま使用して構いません。