DesigntoCode01_01：ワイヤーフレームを観察・再現する

ここではWebサイト制作における第一歩となる「ワイヤーフレームの作成」に取り組みます。
ワイヤーフレームとは、Webページの情報構造やレイアウトを視覚的に設計するための設計図のことです。

🧭 学習の流れ

1. ワイヤーフレームの目的を理解する
   　→ ユーザーにとってわかりやすい構成とは何かを考えます。
2. 要素をパーツ単位で分解する
   　→ ヘッダー・メイン・フッター、記事ブロック、ボタンなどの構成要素を整理します。
3. ツールを使って実際に作成する
   　→ 提供されているレイアウト例をもとに、自分で再現してみましょう。

📁 作成ファイル・保存場所

• この課題はコーディングを行わず、ワイヤーフレームを元に設計を行います。
• 作業はデザインツール　PhotoshopやFigmaを使用します。
• コンセプトシート（Wordファイル）は課題ページからダウンロードして使用します。

今回のテーマ

作成されたワイヤーフレームをもとに、色や文字サイズ、レイアウトの余白などを考えたデザインカンプ（完成見本デザイン）を作成してみましょう。

🔍 デザインカンプ構成要素ごとの説明テンプレート

以下の各要素について、デザインの意図・色・サイズをコメントとしてFigma内または別シートに記入しましょう。