Day06-07｜Webサイトの設計図を作成しよう

さて、本日はトレーニング編の大詰めです！

最終課題として、以下をまとめてWebサイトの設計に挑戦していきましょう！

課題の詳細

カフェ・レストランを運営する会社さんからサイト制作を依頼され、制作のためのヒアリングを実施した状況からスタートの想定です💡

以下にヒアリング情報の議事録を用意しているので、こちらを基に以下の設計を進めてください👇️

進め方について

ディレクトリマップ・コンテンツマップ

ディレクトリマップ・コンテンツマップの作成に関してはテンプレートを用意しました！

基本的な構造は、トレース時に使ってもらったシートと似た形式になっています。

「アセット・必要な情報」（どんな情報が必要か？）としてまとめてもらった項目を「イメージ・テキスト素材」「本番テキスト」として実務的にまとめあげていくためのものに変換しています！

なので、トレース時で分析した感覚を活かして自分なりに設計構築していきましょう！

このまま実務でも使っていただけることを想定しているシートですが、今回は設計に関する部分なので本番テキストまで埋めずでOKです。

クライアントに依頼が発生する内容に目印をつけよう！

シートには「要依頼」というチェック項目を用意しています。

設計しながら手元にない情報や素材、前持った確認が必要な箇所にはチェックを入れていきましょう！

ワイヤーフレーム

ワイヤーフレームはコンテンツマップを図にしたものと捉えてください！

実際にWebサイトの形に起こすことでイメージが整理しやすくなったり、過不足を見つけやすくもなります。生成ツールもありますが、まずは自分で作ることに挑戦してみてくださいね💪

ワイヤーフレームについてもFigmaにてテンプレートを用意しています！

パーツ・ブロック・セクションと、いくつかの部品を用意しているので、組み合わせて作成してみましょう！

ワイヤーフレーム作成のポイント

事前に設計シート（スプレッドシート）でページ構成や必要な情報を整理しているため、ワイヤーフレーム作成時に迷う要素は少ないはずです。以下のポイントを意識しながら、気負わずに進めていきましょう！

📌 レイアウトにこだわりすぎない

デザインの完成形を目指す段階ではないので、きれいに整えすぎる必要はありません。
あくまで「情報の配置と優先順位」を視覚的に整理することが目的です。

📌 情報量を意識する

画像・テキスト・ボタンなど、各セクションに含まれる要素の“量”を意識しましょう。

• 伝えたい情報とテキストスペースの比較
• 配置する画像の量
• キャプションやボタンなど、不足していた情報の洗い出し

特にテキスト情報についてはワイヤーフレーム作成段階で未確定のことが実務でもよくあります。ただ、「決まっていないから」でただ素通りすると後工程で「スペースが足りない」「情報が入りきらない」といった問題につながることも。

未確定の情報こそ、仮で配置してみることが大切です。

たとえば「見出しは○○文字程度を想定」「サービス説明は3〜4行分」など、おおよそのボリューム感を掴んでおくことで、後々のデザイン作業がスムーズになります。

「情報量が多いので、整理してレイアウトしてほしい！」のようにデザイナーさんに具体的な指示を出しやすくもなりますね！

---

ワークに関して気になる点・疑問点があれば、Slackにて気軽に質問してください！

作成例等を用意しているので、作成が完了したら次のカリキュラムを確認してください📝

それでは取り組んでいきましょう！