駆け出しのためのWebデザイン上流設計入門

Webデザインの上流設計は「作る前に判断基準を決める」工程です。企業理解・ターゲット・3C分析・情報設計まで、駆け出しが迷わない7ステップを実例つきで解説。やり直しが減り、提案できるデザイナーになれます【2026年最新】

📌 この記事のポイント

• 上流設計とは「作る前に誰に・何を・なぜを決める」工程である

• 進め方は7ステップ。感覚ではなく型で再現できる

• 競合調査は最低3〜5社、分析は3C分析が実務の定番

• AI時代に価値が上がるのは「上流」を握れるデザイナー

Webデザインの上流設計とは「作る前に判断基準を決める」工程

Webデザインの上流設計とは、手を動かしてデザインを作り始める前に、情報を整理して「誰に・何を・なぜ伝えるか」という判断基準を固める工程のことです。この基準があるかどうかで、その後のデザインの完成度と成果が大きく変わります。

「このレイアウトでいいのか」「この色は適切か」と手が止まる原因の多くは、センスの不足ではなく、判断基準が決まっていないことにあります。上流設計は、その基準を先に用意しておく準備作業です。

この記事では、駆け出しデザイナーが自分の手で上流設計を最後までやり切れるように、7つのステップに分けて解説します。上流設計を固められるデザイナーは、経験年数に関係なくクライアントから信頼されます。

上流設計をやる意味と、やらない場合に起きること

上流設計の意味は「デザインの判断基準を作ること」に尽きます。基準があるとデザインは論理で組み立てられ、基準がないとデザインは感覚頼みになります。

上流設計をやると、次の3つが手に入ります。

• クライアントの要望や目的が整理され、デザインの方向性がブレない

• 何の要素が必要かが明確になり、無駄な作業とやり直しが減る

• 「なんとなく作る」ではなく、意味のあるデザインができる

逆に、上流設計をせずに作り始めると、次のような状態に陥りやすくなります。

• 何度もやり直しが発生する

• 見た目は良いが、成果につながらないデザインになる

• 何を基準に判断すればいいか分からなくなる

案件で迷いが出るときはたいてい上流の整理が甘いときです。デザインは感覚で作るものではなく、基準をもとに組み立てるもの。その基準を作るのが上流設計だと考えてください。

上流設計の全体像｜3フェーズ・7ステップ早見表

上流設計の全体像は「戦略を決める3フェーズ」と、それを形にする「情報設計」で構成されます。まず地図を頭に入れてから、各ステップに進みましょう。

上流設計は「クライアントを知る→分析する→施策を決める」の順で戦略を固め、最後に情報設計でサイトの骨格に落とし込みます。ここからは各ステップを具体的に見ていきます。

ステップ1〜3｜クライアントを知る

「クライアントを知る」は、企業・ターゲット・目的の3つを理解して戦略の土台を作るフェーズです。この土台はこの後のすべての工程で何度も見返すので、丁寧に固めておきます。

Step1｜企業を理解する

企業理解とは、事業内容や強み、大切にしている価値観を徹底的に調べることです。最初にどれだけ理解できているかで、その後の戦略もデザインも効果も変わります。

調べ方は主に3つです。

1. ネットで調べる：既存サイトがあれば、TOPだけでなく全ページを見る

2. クライアントにヒアリングする：サイトに書かれていない内部事情や新しい情報を聞く

3. 提供資料から調べる：会社案内や社内資料で全体像を把握する

ネット上の情報はあくまで外向けの発信です。「〜のために、こういう情報が載っている資料はありませんか」と、相手にメリットがある形でお願いすると、内部情報も共有してもらいやすくなります。

調べる項目は、基本情報・事業内容・商品やサービスの特徴・自社の強み・大切にしていること・業界などです。業界や市場の裏取りには、以下の一次情報ツールが役立ちます。

• Googleトレンド：検索されているキーワードと需要の推移を把握できる

• 業界動向SEARCH.COM：業界ごとの成長状況や主要企業の業績を確認できる

• 日経会社情報DIGITAL：業界動向や企業業績を統計で確認できる

複数の媒体（自社サイト・SNS公式・口コミ・インタビュー記事など）から多面的に集めるのがコツです。

Step2｜ターゲットを設定する

ターゲット設定とは、Webサイトを「どんな人に見てもらいたいか」を明確にすることです。ここが定まると、ユーザーに刺さるコンテンツとデザインが作れます。

集める情報は、属性（年代・性別・居住地・職業・家族構成）、興味関心、人柄、価値観、行動パターンなどです。特徴が掴めたら、そこから表面に見えない悩みやニーズという本音を仮説で描きます。この本音が「サイトで何を伝えるか」の軸になります。

ここで大切な前提が1つあります。ターゲット分析は「仮説」だという認識を持つことです。この認識がないと、自分の想像を事実だと思い込み、偏った方向に進んでしまいます。正確性が必要なときはインタビューやアンケートをしますが、費用と時間がかかるため、中小規模の案件では仮説で進めて運用しながら精度を上げるのが一般的です。

ペルソナ（ターゲットを具体化した架空の人物像）についても触れておきます。通常は、ターゲット設定で足りることが多く、ペルソナはブランディング案件や大規模プロジェクトで作るというのが現場の声です。ターゲットとペルソナの違いは次の通りです。

Step3｜目的とゴールを決める

サイトの目的とゴールとは、「何のために作るか（目的）」と「サイト内でどんな行動をしてほしいか（ゴール）」です。企業にとってWebサイトは目的を達成する手段なので、ここを初期に固めます。

• 目的の例：新規顧客を増やす、認知を上げる、会社の信頼を得る、採用を強化する

• ゴールの例：お問い合わせ送信、資料請求、採用エントリー、商品購入

ゴールは「お問い合わせページの送信ボタンをクリック」のように、具体的なアクションまで落とすと、後の評価基準がスムーズに決まります。目的が2つ以上あるときは優先順位をつけると、情報設計での迷いが減ります。

「とにかく作ってほしい」と言われることもありますが、その場合はヒアリングで本来の目的を紐解くのもデザイナーの仕事です。この目的とゴールへの意識が、NOTの掲げる「課題解決のためのデザイン」の起点になります。

ステップ4〜6｜分析して、施策に落とし込む

ここからは、集めた情報を競合と比較し、施策として具体化するフェーズです。抽象的な情報が、この工程で初めて「サイトで何をするか」に変わります。

Step4｜競合を調査する

競合調査とは、同じ業界の他社を同じ項目で調べ、自社の強みを相対的に浮き彫りにすることです。競合を知ると、自社の特徴がはっきり見えてきます。

調査対象は、自社と似た会社や業界トップなど、比較したい目的に合わせて選びます。数は最低3〜5社が目安です。1社だと偏り、多すぎても時間がかかるため、実務では使える時間から逆算して決めます。

調べるのは自社と同じ項目に加えて、競合サイトの掲載コンテンツです。よく載っている項目は、ユーザーが求めている項目でもあります。なお、この段階ではデザインの雰囲気は調べません。ビジュアルに気を取られると、戦略ではなく見た目に思考が引っ張られるためです。

大手企業であれば、Similar Webというツールで競合サイトの流入元・検索ワード・興味関心など7項目前後の傾向を確認できます。正確な数値ではなく傾向の把握に使うのがコツです。

Step5｜3C分析で「伝える強み」を1点に絞る

3C分析とは、Customer（市場・顧客）・Competitor（競合）・Company（自社）の3つの視点で外部環境を整理し、「サイトで何を伝えるか」を導くフレームワークです。NOTの上流設計ではこの3C分析を軸にします。

手順はシンプルです。

1. 目的を決める：3C分析で何の答えを出すかを先に決める

2. 3つのCを埋める：ターゲット・競合・自社の特徴から、比較したい項目を持ってくる

3. 自社×顧客を比較：顧客ニーズにマッチした自社の強みを出す

4. 自社×競合を比較：競合にはない自社の強みを出す

たとえば「一人席でゆったりできる」が顧客ニーズに合い、かつ競合との差別化になると分かれば、サイトのTOPは一人席の写真にフォーカスする、という判断ができます。フレームワークはあくまで論理的に考えるための手段です。カスタマージャーニーマップを「現場でたまに使う」と答えたメンターは約3割（NOT DESIGN SCHOOL調査、2026年）で、まずは3C分析を使いこなすのがおすすめです。

Step6｜評価基準と施策を決める

評価基準とは、ゴールを達成できたかを誰が見ても判断できる定量的な基準のことです。「お問い合わせしてもらう」ではなく「月間の問い合わせ数◯件」まで落とします。この達成を測る指標をKGI（Key Goal Indicator）と呼びます。

設定は3ステップです。評価基準の項目を決める→計測する数値（どのページの・何のアクションの・どの数値か）を決める→月・年単位で目標数値を決める。KGIが大きい場合は、中間ゴールを測るKPI（Key Performance Indicator）も置きます。

評価基準が決まったら、施策を厳選します。目的・ゴール・評価基準を3点セットで並べて一貫性を確認し、施策の方向性を出し、具体化したうえで、次の3つの観点で今回やるものを絞ります。

施策には予算と工数がつきものです。良い施策でも今回は保留にし、次回の依頼につなげるのはよくあることです。公開後すぐ結果が出なくても焦らないでください。サイトは公開してからが本番で、Google アナリティクスなどで原因を探りながら育てていきます。

ステップ7｜情報設計でサイトの骨格を作る

情報設計とは、上流設計で決めた戦略をもとに「どのページに何を、どう配置するか」を決める工程です。ユーザーが迷わず目的の情報にたどり着ける骨格を、コンテンツ企画→サイトマップ→ワイヤーフレームの順で作ります。

コンテンツを企画する

コンテンツ企画とは、サイトに載せる文章・画像・動画などの情報を洗い出す作業です。企業の特徴・ターゲット・目的・ゴールを踏まえて、伝えるべき内容を書き出します。そのうえで、Step6で決めた施策がコンテンツに含まれているかを必ずチェックします。足りなければ追加します。Webは紙と違ってページの長さに制限がないので、内容の濃さで勝負できます。

サイトマップを作る

サイトマップとは、サイト全体のページ構成を決める設計図です。企画したコンテンツをページに振り分け、どんなページを作り、どこに置くかを整理します。このサイトマップの構成がそのままサイトのディレクトリ構造になるため、ページの階層を意識します。更新できる動的ページと静的ページを区別しておくと、クライアントとの認識のズレを防げます。

ワイヤーフレームを作る

ワイヤーフレームとは、各ページのレイアウトを決める設計図です。サイトマップが「サイト全体のページ構成」なら、ワイヤーフレームは「1ページの中身の配置」を決めるものだと考えてください。作り方は3ステップです。

1. ユーザーがサイトに来てから辿るストーリーを考える

2. そのストーリーに沿ってコンテンツの順番を決める

3. 順番どおりにレイアウトを図面化する（スマホ版も必ず作る）

レイアウトに絶対の正解はありませんが、サイトジャンルごとに定番の型があります。参考サイトを見ながら、「初めて訪れた人がこの順番で理解できるか」「テキスト量は適切か」「ボタンの大きさと位置はベストか」を確認します。ここまで作れば、上流設計から続けた情報整理がサイトの骨組みとして形になります。

限界と注意点｜上流設計は「仮説」であり、万能ではない

上流設計は強力ですが、過信は禁物です。誠実に3つの注意点を共有します。

• 上流設計は仮説である：ターゲット分析も競合分析も、事実ではなく仮説を含みます。分析＝正解ではないので、作り込みすぎず、公開後の運用で検証する前提を持ってください。

• 上流だけでは成果は出ない：上流設計が立派でも、ビジュアルや実装が伴わなければ成果にはつながりません。上流設計はあくまで全工程の一部です。

• 最適な深さは案件で変わる：予算や規模によって、どこまでやるかは変わります。ペルソナやカスタマージャーニーマップは毎回必要なわけではありません。ここは判断が分かれるところで、案件ごとに調整してください。

よくある質問（FAQ）

Q. 上流設計と情報設計の違いは何ですか？
上流設計は「どんなサイトを作るか」という戦略を決める工程、情報設計は「その戦略をどのページにどう配置するか」を決める工程です。上流設計で方針を固め、情報設計でサイトマップやワイヤーフレームに落とし込みます。

Q. 未経験でも上流設計はできますか？
できます。上流設計は手順が決まった「型」なので、企業理解→ターゲット→目的とゴール→競合調査→3C分析→施策→情報設計の順に進めれば、経験が浅くても再現できます。

Q. 競合は何社くらい調べればいいですか？
最低3〜5社が目安です。1社だと偏り、多すぎると時間がかかるため、使える時間から逆算して決めます。

Q. ペルソナは必ず作るべきですか？
必須ではありません。多くの案件はターゲット設定で足ります。ブランディングや大規模案件では作ることがあります。

Q. 分析にどれくらい時間をかければいいですか？
案件の予算と規模で変わります。分析は仮説なので、正確さを求めて時間をかけすぎるより、仮説で前に進めて運用で精度を上げるのが実務的です。

Q. 上流設計はどんなツールでまとめればいいですか？
情報量が多く相互関係を一覧したいので、付箋を並べて俯瞰できるFigjamやMiroなどのツールが向いています。誰が見ても分かるように言語化し、1枚の付箋に1つの内容でまとめると振り返りやすくなります。