設計力を鍛える実践トレーニングへ！
Web制作の案件を任されたとき、もしくは依頼されることを想像したとき、こんな不安を感じたことはありませんか？
- どのように進行していけばいいのか分からない
- クライアントに何をヒアリングすればいいのか迷う
- サイトの設計をどうやって構築すればよいか
- 作業の優先順位や全体像がつかめず焦る
実はこれらの不安の根本は「逆算ができていないこと」にあります！
案件のゴールや必要なアウトプットが見えていないと、何から始めていいのか、どこまで詰めて考えるべきかが分からなくなる。
つまり、“逆算思考”ができていない状態だと、全体の進行もヒアリングも、立ち回り方もすべてが不安定になるのです。
設計力は、逆算力の土台になる
そんな時に必要になるのが「設計力」です。
設計力があると、ゴールから逆算して今何をすべきかを考えられるようになります。
- このサイトは何を目的としているのか？
- そのためにはどんなページや構成が必要か？
- その設計図を描くには、どんな情報をヒアリングするべきか？
こうして逆算して思考できるようになると、
ただ作業をこなすだけでなく「自ら案件をリードする力」が備わっていきます。
この逆算力は、ヒアリングの精度を高めるだけでなく、
提案力や進行管理、クライアントへの信頼感にも直結します。
まずは「構成を読み解く力」を鍛える
そこで今回は、実際のWebサイトを題材に構成をトレースするワークを行います。
サイトの目的や導線、ページごとの役割を逆算的に読み解きながら、
自分自身の中に「設計の基準」となる感覚を育てていきましょう。
これまでに学んできたサイトマップ・ディレクトリマップ・コンテンツマップ・ワイヤーフレームの知識をベースに、
「実際のサイトはどのような設計意図で構成されているのか？」を観察し、読み解く力を養います。
地味に見えるワークかもしれませんが、ここをしっかり経験しておくことで、
案件を任されたときの不安が“逆算で見通せる安心感”に変わっていきます。
これができるようになると、ヒアリングや提案にも自信が持てるようになり、
ただの「作業担当」ではなく「プロジェクトを前に進める人」として信頼される存在になれます。
それでは早速、構成トレースワークに取り組んでいきましょう！
【課題①】既存のWebサイトをトレースしよう
今回は以下のサイト（デイトラのコーポレートサイト）を題材にして設計のトレースをしていきましょう！
ディレクトリマップとコンテンツマップをまとめた形でサイトの構成を整理していきます。
ワークシートを用意しているので、こちらを複製して記入していってくださいね！
【課題①-1】ページを洗い出してディレクトリマップを作成しよう
まず最初はディレクトリマップを作成します。実際にサイト内を移動しながら存在しているページの名前とそのディレクトリ、1行で各ページの概要を書き出していきましょう。
ページ名は何でも良いですが、そのページのタイトルや見出しを記入すると分かりやすいです🙆
また、ヒントとしてワークシート内【ディレクトリマップ】には存在するページ分の枠を準備しています！探してみてくださいね！
【重要】サンクスページに関して
こちらのディレクトリマップですが、お問い合わせのサンクスページも枠の数に含んでいる形になります。
Webサイトの運用方法によっては、お問い合わせの件数をサンクスページにたどり着いた場合にコンバージョンとして計測・管理している場合もあり、あまりURL直打ちで確認する行為はよくないという可能性があります。
今後のトレース課題に関しても、サンクスページに関しては見に行かずスルーでOKです🙆
【課題①-2】各ページのシートを作成してコンテンツマップを作ろう
次にコンテンツマップのトレースを実施してみましょう！
前回も伝えたように、この講座ではコンテンツマップを制作の軸として扱います。
例えばコーポレートサイトひとつを制作しようとしても、これだけの情報を整理して決めていく必要があります。
- どんな構成か
- ページやセクションごとの役割や目的
- どんなテキスト（見出しや本文）を入れるか
- デザインの雰囲気や見せ方
- リンク先
- 何の素材（写真や動画）が必要か
- どんな機能があるか
これらの情報をバラバラに考えてしまうと、ページ同士の整合性が取れなかったり、あとから素材が足りなくなったりと、トラブルの原因になってしまいます。
だからこそ、コンテンツマップを使って全体を一括で整理できる力があると、関係者間での認識ズレを防ぎ、効率的に制作を進めることができます。
今回のワークでは、実際のWebサイトを題材にして、「どのページに何が必要なのか」を自分の手で洗い出す練習をしていきます。
はじめは悩む箇所も多いと思いますが、大事なのは、構造と内容を意識的に言語化する力を養うこと。
このトレーニングを重ねることで、ヒアリングや設計の精度もぐっと上がっていきます👍️
それでは、さっそくやってみましょう！
まずは対象となるWebサイトを見ながら、トップページの構成から洗い出してみましょう。
シートには6種類の項目を用意していますが、どの項目も明確な答えはありません。
項目（テーマ）に沿って考えて、気付きをメモするイメージで問題ないので進めていきましょう！（必ずすべての項目を埋めなくてもOKです）
セクション名
分析対象のWebサイトで使われている各セクションに名前を付けてみましょう。
例：「ファーストビュー」「サービス紹介」「実績」「お客様の声」「CTA」など。
明確に名前がわからない場合は、見た目や内容から仮の名称でもOKです（例：「特徴紹介①」など）。
内容
そのセクションでどんな情報が掲載されているかを簡潔にまとめましょう。
例：「自社サービスの概要紹介」「最新のお知らせ3件」「利用者の声を3人分掲載」など。
実際に記載されている見出しやテキスト内容の要約がベースになります。
意図
そのセクションが何のために存在しているのか・どんな効果があるかを読み取って記載します。
例：「信頼感の醸成」「サービスの価値を訴求」「離脱を防ぐための導線」など。
「なぜこの情報がこの場所にあるのか？」を意識して考えてみてください。
【例】
セクション：デイトラについて
意図：デイトラの成り立ち・強み・想いをまとめて、コンセプト的に伝えている→ブランドイメージの構築
「ディレクトリマップ」シートに【コンセプト・ターゲット・サイトの目的】を記載しています。何を書けばよいか迷った場合は、この部分を基に考えてみましょう！
デザインの見せ方／機能
そのセクションのレイアウトや演出のイメージ、必要な機能を記載します。
例：「スライダーで表示」「カード型レイアウト」「アニメーションあり」「絞り込み機能」など。
デザインの雰囲気をここに書いてもOKです👍️
アセット／必要な情報
ここにはそのセクションを作成するにあたり、必要な素材や情報を記載します。
トレース対象のセクションを作成する立場になってみて、「この情報・素材は、クライアントに聞くor提供してもらわないと作れないだろうな」というものを想像しながら書き出してみてください！
【例】
セクション：運営メンバー
アセット・必要な情報：社員の情報（名前・役職・紹介文※〇〇文字前後）、写真
備考
その他の気づきや疑問など、メモ的に自由に記入してください！
慣れない作業で難しく感じる部分もあると思いますが、サイトを設計している要素を細分化して整理するクセをつけることが、今後ご自身でサイトを設計する際の大きな武器になります。
思考を巡らす事自体に重きを置いて取り組んでいきましょう！
次の講座で回答例を紹介しているので参考にしてみてください☺️