ホームページのデザイン確認の進め方｜制作会社へのフィードバックと社内承認

制作会社からホームページのデザイン案が届いたとき、「何となく違う」と感じても、どこをどう伝えればよいか迷うことがあります。反対に、見た目は気に入っていても、必要な説明が抜けていたり、スマートフォンでは読みづらかったりする場合もあります。デザイン確認では、見た印象を大切にしながら、対象の読者、伝える内容、使い方に結び付けて意見を整理しましょう。

この記事は、ホームページを制作・リニューアル中の経営者や担当者に向けた、デザイン案の確認とフィードバックの実務ガイドです。見る順番、社内で意見が分かれた場合の整理、修正コメントの書き方、承認の残し方まで説明します。制作会社へ専門用語で指示する必要はありません。場所と理由、望む状態が伝われば、解決案を一緒に検討できます。

英国政府のデザインレビューの公開記録、デジタル庁、W3Cの一次資料を参照しました。確認日は2026年9月10日です。記事中の店舗内装会社や担当者の会話、修正メモは説明用の架空例です。実在する顧客案件、筆者の担当実績、売上や問い合わせの改善結果を示すものではありません。

1. デザインを見る前に、今回決めることを揃える

誰に、何を伝えるサイトかを一文にする

最初に、デザイン案を評価するための前提を確認します。例えば「初めて店舗を出す人が、対応できる工事と相談の進め方を理解するサイト」です。この一文があれば、施工写真の迫力、相談方法の分かりやすさ、費用条件の説明を、同じ目的に沿って見ることができます。単に「おしゃれなサイト」という条件より、判断の理由を話しやすくなります。

対象が複数いる場合は、一つの画面で全員に同じ情報を強く見せる必要があるか考えます。新規相談と既存顧客の連絡では、必要な入口が違います。今回確認するページが誰のどの用事を担当するかを決め、ほかの用事はどこへ案内するか確認します。構成自体が未決定なら、サイトマップとページ構成の作り方から整理すると進めやすくなります。

構成案・デザイン案・動く試作の違いを確認する

線や文字で情報の順序を示した構成案と、写真・色・書体を入れたデザイン案では、見るべき内容が異なります。構成を確認する段階で写真の細かな色調に時間を使うと、肝心の説明の過不足が残ります。提出資料の名称だけで判断せず、今回は情報の順番、見た目、操作のどこまで検討できる状態か聞いてください。

GOV.UKのプロトタイプ作成ガイドでは、紙のスケッチから動くコードまで、試したいことに応じた形式を使うと説明しています。企業サイトでも、静止画で色や配置を確認し、開閉や入力は動く試作で確かめる、と資料を使い分けられます。試作が動いたことは、本番の品質や通知先まで確認できたことを意味しません。

確認する版と、未確定の材料を明記する

社内の人が違う版を見ていると、すでに直った箇所への指摘と新しい指摘が混ざります。「トップPC・第2案・9月10日版」のように対象を識別し、確認用URLやファイルを一か所へまとめます。画面内で使われる仮写真、仮の数字、まだ承認されていない見出しも一覧にしておきます。

例えば仮写真の空が青いから配色を青に合わせた場合、本写真へ変わると印象が大きく変わります。材料が未確定でも検討は進められますが、写真差し替え後に配色と文字の読みやすさを再確認する条件を残します。仮の電話番号や費用が完成情報に見えるなら、制作側の管理メモで仮と分かるようにし、公開前に実情報へ置き換える担当を決めます。

2. 第一印象を、情報の優先順位と結び付けて確認する

最初に目に入るものが、伝えたい内容かを見る

デザイン案を開いたら、すぐ説明を受ける前に、何の会社に見えたか、何を頼めると感じたかを書きます。これは印象の記録であり、読者全体の理解を証明する調査ではありません。ただ、作り手の説明がなければ事業内容が分からないという疑問は、見出しや写真の役割を見直す材料になります。

架空の店舗内装会社で、建物の外観写真だけが大きく置かれている例を考えます。美しい建物でも、新築工事なのか内装改修なのか判断できない場合があります。このとき写真を小さくすることだけが解決策ではありません。「店舗の内装設計・施工」という見出し、対応範囲、実際の施工箇所が分かる写真の組み合わせを検討できます。

強調の数と、読む順番を確認する

ロゴ、キャッチコピー、料金、実績数、相談ボタンをすべて大きくすると、どこから読めばよいか判断しづらくなります。ページの役割に合わせ、まず伝えること、続けて確かめること、必要な人が詳しく読むことを分けます。文字の大きさだけでなく、余白、並び方、写真との距離も含めて順番を見ます。

下の表は、デザイン確認の視点を揃えるための例です。重要な情報を全部トップへ集めるための表ではありません。サービス詳細へ進んだ先で説明するなら、入口の文言から行き先を予測できるかを確認します。事業によっては価格を一律に表示できないため、見積もり条件や相談時に必要な情報を示す方法も考えられます。

見た目の見出しと、ページの構造を揃える

大きな英語の飾り文字があり、その下の日本語が内容を説明する場合、利用者が見出しとして読むのはどちらでしょうか。画面上の美しさに加え、本文のまとまりが伝わる名前かを確認します。「私たちの想い」だけでは説明しきれないなら、その下に何の方針を述べるか分かる見出しを付ける方法があります。

W3Cの見出しの解説は、内容の構造に応じた階層を使い、支援技術などによるページ内の移動にも役立てることを説明しています。発注者はタグを自分で組む必要はありませんが、コーディング時に見出しの意味が保たれるかを制作担当へ確認できます。見た目のサイズを変えるためだけに、内容の階層まで変えないようにします。

3. 文字・配色・写真を、実際に読む条件で確かめる

全体表示だけでなく、読む大きさで文字を見る

長いデザイン案を画面に一枚で収めると、本文が極端に小さくなります。その縮小状態では、ページ全体のリズムは見えても、通常の閲覧時の文字の大きさは判断できません。全体を見る確認と、実際の画面幅に近い表示で文章を読む確認を分けます。スクリーンショットへ拡大縮小を繰り返した画像だけで最終判断しないことが大切です。

デジタル庁のタイポグラフィの留意事項は、閲覧者がフォントや文字サイズを変更する場合があることと、変更後も読みやすさや機能を保つ必要性を説明しています。自社サイトへの応用では、ブランドの書体を選ぶだけでなく、長い日本語、数字、英字が混ざった段落を使い、文字間や行間も確認しましょう。

確認に使う原稿が「ここに説明が入ります」だけだと、本番で二行になる見出しや、長い商品名を想定できません。代表的な短い文と長い文を入れて見比べます。太字を多用している段落では、強調が必要な判断材料だけを選び直します。書体の好き嫌いとは別に、読者が途中で行を見失わず、条件や単位を取り違えないかを確かめます。

薄い文字や写真上の文字は、測定と目視を組み合わせる

淡い配色は落ち着いた印象を作れますが、文字まで背景に近づけると読みにくくなります。W3Cのコントラストの解説では、WCAG 2.2の達成基準1.4.3について、通常の文字は4.5対1以上、大きな文字は3対1以上などの条件を説明しています。大きな文字の定義や例外もあるため、見た目の印象だけで合否を決めず、制作担当に該当する条件で確認してもらいます。

写真の上に白い見出しが乗る場合、写真全体の平均的な暗さではなく、文字の背後にある部分が問題になります。PCでは暗い壁の上でも、スマートフォンの切り抜きでは明るい窓の上に移るかもしれません。写真の選び方、切り抜き位置、文字を置く範囲、背景の処理を組み合わせ、実装後も確かめます。測定値が条件を満たしていても、細い書体などが読みづらければ調整を検討します。

写真の雰囲気と、情報としての正確さを両方見る

写真は、色味が揃っているだけでは十分とは限りません。何のサービスを説明する写真か、会社が実際に担当した範囲と合っているか、商品や設備が現在の仕様かも確認します。イメージ写真を実績のように見せる配置になっていたら、説明や掲載場所を検討し直します。掲載許可や素材の管理は、写真・原稿の準備ガイドで別途整理できます。

文字を画像に焼き込む案にも注意が必要です。W3Cの文字画像の解説では、技術的に表現できる場合はテキストを使う考え方と、ロゴなどの例外を示しています。企業サイトでは料金、条件、主要な説明を画像だけに閉じ込めず、読める本文として用意する方法を相談します。図解や写真を使うこと自体を避けるのではなく、画像の見た目だけに情報伝達を任せない設計を考えます。

4. スマートフォンと操作の状態を確認する

PC案を縮めたものとして評価しない

横に並んだ写真と説明が縦に並ぶと、情報を読む順番や長さの感じ方が変わります。PC案で隣り合っていた見出しと注意書きが離れていないか、写真の重要な部分が切れていないか、相談前に必要な条件を見落とさないかを確認します。スマートフォン用の案がない場合は、いつどの資料で確認できるかを決めておきましょう。

例えば「写真を全部同じ高さにしてほしい」という希望は、一覧を整える目的には合っていても、縦長の施工写真が切れる原因になる場合があります。優先するのが一覧の統一感なのか、施工箇所の説明なのかを伝え、拡大表示や詳細ページも含めて提案を受けます。PCとスマートフォンで写真の見せる範囲を変えるなら、両方の画像を確認対象に含めます。

細い画面や拡大時に、説明が失われないかを見る

W3Cのリフローの解説は、通常の縦に読む内容について、320 CSSピクセル相当の幅でも情報や機能を失わず、縦横両方向のスクロールを要求しない条件を説明しています。意味や利用に二次元の配置を必要とする表や図などには例外があります。この幅はCSS上の表示領域の話で、端末の商品名や画面の物理的な画素数と同じではありません。

発注者側では、まず実装されたページを細い画面と拡大表示で見て、文字が重なる、説明が隠れる、操作に必要なボタンが画面外へ消える、といった問題を記録します。デザイン画像だけで、この条件への対応を確認したことにはできません。アクセシビリティ全体の確認は、企業サイトのアクセシビリティ改善ガイドへつなげて進められます。

通常表示以外の、開く・選ぶ・失敗する画面を確認する

メニューが閉じた静止画だけでは、開いたときに何項目が並ぶか、閉じる操作が分かるかは判断できません。ボタンも、通常時の色だけでなく、キーボードで選んだ位置が分かるか、処理中に何が表示されるかを確認します。入力欄がある場合は、入力例とエラーの文面、訂正する場所が分かる状態も必要です。

すべての操作を最初のデザイン提出で完成させる必要があるかは案件の進め方によります。ただし、未確認の状態を一覧に残さず「デザインは承認済み」とすると、実装時の判断が曖昧になります。「メニュー展開は次回の試作で確認」「フォームのエラーは実装確認に含める」と、次の確認に渡します。利用者の分岐全体は、制作前のユーザーフロー設計で整理できます。

5. フィードバックを、場所・理由・望む状態で書く

印象、確認できた事実、提案を分ける

「冷たい印象がする」は、感じたこととして有用です。ただし、それだけでは、写真、色、文章、余白のどこを変えるか決まりません。「スタッフの顔がなく、会社の説明も短いので、初めて相談する人が担当者を想像しにくいと感じた」のように、画面にある事実と自分の解釈を分けます。そのうえで、社員紹介の追加などを提案として添えます。

反対に「この配置では誰も問い合わせない」と言い切ると、確認していない行動を事実として扱うことになります。「相談ボタンを探したが、料金表の後では見つけられなかった」と自分の観察を記録し、ほかの利用者でも確かめる必要があるか相談します。改善案を伝える際も、結果が保証される言い方ではなく、何を確認したい変更かを示します。

制作担当が同じ箇所を見られるコメントにする

コメントには、対象の版、ページ名、PCかスマートフォンか、該当箇所を記入します。画面に番号を振り、文章の同じ番号から参照すると、長いページでも見つけやすくなります。一つのコメントに配色、文章、写真差し替えをまとめると完了判定が曖昧になるため、確認できる単位に分けましょう。

望む状態は、可能なら利用者が理解・操作できる形で書きます。「もっと目立たせる」なら、何より先に読ませたいのか、どの情報と混同されているのかを追加します。色や位置の指定が必須のブランド条件なら、その根拠資料を渡します。単なる案なら「方法は相談したい」と伝えることで、制作担当が別の解決策も提案できます。

変更してほしい理由と、残したい良さを一緒に伝える

直したい箇所だけを伝えると、気に入っていた雰囲気まで大きく変わることがあります。「落ち着いた色と大きな余白は維持し、費用条件の文字は読みやすくしたい」のように、残す要素を添えます。どこまで変えてよいかが分かると、局所的な調整と全体の方向転換を区別できます。

修正後に判断する条件も先に考えましょう。「スマートフォンのサービス画面で、料金と追加条件を続けて読めること」と書けば、修正版で確認する場所が明確です。「いい感じになるまで」だけでは終わりを決めにくくなります。正解を一つに固定する必要はありませんが、変更の目的が満たされたかを話せる状態を作ります。

6. 社内の意見を整理し、制作会社へ一本化する

公開例：GDSは途中の案を複数の職種で検討している

英国政府のGDSが2017年に公開したデザインレビューの実践記録では、デザイナーだけでなく、開発者や調査担当などが制作途中の案を見て意見を出しています。確認してほしい点と背景を最初に伝え、意見を記録し、その場ですべての解決策を決めようとしない進め方が紹介されています。

この記録は、関係者の共通理解や協働についての公開例です。問い合わせや売上の増加を比較試験で示した資料ではありません。企業サイトへ応用するなら、営業は顧客の質問、受付は連絡後の対応、責任者は事業方針、と異なる知識を持ち寄れます。会議の人数を増やすことより、誰から何の情報を得たいかを先に決めることが重要です。

多数決の前に、意見が違う理由を確認する

営業担当は料金を大きく見せたい、責任者は価格だけで比較されたくない、と意見が分かれたとします。両方の意見をそのまま制作会社へ送ると、どちらを優先すべきか分かりません。前者は相談前の不安を減らしたいのか、後者は案件ごとの条件差を伝えたいのかを聞きます。目的が分かれば、目安と変動条件を一緒に示す案を検討できます。

実際に必要な追加料金の条件が未決定なら、配色や配置の工夫だけでは解決できません。事業上の条件を決める人に確認を戻します。デザインへの意見に見えても、原稿の不足、事業方針、提供できるサービスの認識違いが原因の場合があります。社内窓口は、解決策を独断で作るより、誰が何を決めるかを整理する役割を担います。

必須修正・相談・保留を分けて送る

事実と異なるサービス説明、合意済みの要件が抜けている箇所、見えない文字などは、まず対応の必要性を確認します。印象を調整したい案や、追加のページが必要な提案は、費用・工程の影響も含めた相談として分けます。分類は相手の責任を決め付けるためではなく、次に必要な返答を明確にするために使います。

送信前には、似た指摘をまとめ、矛盾した指示がないか確認します。決められない項目を削除して無かったことにせず、判断者と期限を付けて保留欄へ置きます。制作会社には「社内意見をすべて並べた資料」なのか「窓口で調整した正式な依頼」なのかを明示してください。未調整の意見を実装指示と受け取られるのを防ぐためです。

7. 修正の範囲と、承認する内容を記録する

追加したいことは、作業範囲と日程を確認する

写真を差し替える調整と、ページの目的を変える提案では、必要な作業が異なります。例えば「施工事例をもっと充実させたい」という希望が、新しい詳細ページ、分類、入力画面、原稿作成まで含むなら、表示の微調整だけでは終わりません。希望を伝えた段階と、作業範囲が合意された段階を区別します。

修正回数や追加費用の扱いは、各案件の見積もりや合意内容に沿って確認します。一般的な回数を当てはめて当然に無料と判断しないようにしましょう。追加作業を頼む場合は、何を追加し、何を今回見送り、次の提出がいつになるかを記録します。判断材料が不足しているなら、着手前に不足分を具体的に質問します。

修正版を、コメント番号ごとに見比べる

修正版が届いたら、全体を眺めて終わりにせず、提出したコメント番号に対応させて確認します。「反映済み」「代案を提示」「材料待ち」のように制作側から状況が分かると、確認漏れを減らせます。反映されていても、変更の目的を満たしているかは別に判断します。ボタンが赤くなっただけで、ほかのリンクとの区別が付いたとは限りません。

関連する画面への影響も見ます。見出しを長くした結果、スマートフォンで写真に重なる、共通部品の変更が別のページでも現れる、といった点です。すべてのページを毎回最初から作り直す確認ではなく、どこまで変更が及ぶかを制作担当と共有し、その範囲を見比べます。修正が終わった項目と、新しく出た希望を混ぜないことも大切です。

デザイン承認と、公開の判断を分けて残す

承認の連絡には、版、対象ページ、対象画面、承認した範囲を記載します。「トップPC第3案とスマートフォン第2案の配色・配置を承認。写真の掲載許可と入力エラー画面は未確認」のように残すと、次の工程の前提が分かります。未確認の項目は担当と確認時期を付け、単に「あとで」としないようにします。

デザイン画像の承認だけでは、リンク先、フォーム送受信、検索向け設定、公開ドメインの表示まで確認したことにはなりません。実装後の確認と公開の判断は、案件で合意した工程に沿って行います。検収や支払いの条件は契約上の取り決めに従い、ここでのデザイン承認のメモと混同しないでください。公開後の個別修正は、ホームページの修正依頼の伝え方で扱っています。

8. そのまま使える確認メモと、次の進め方

確認前・送信前・修正後のメモを一つにまとめる

専用のツールがなくても、表計算や文書で確認メモを作れます。重要なのは、誰が見ても対象と状態が分かることです。以下を案件用に調整し、必要な画面のスクリーンショットや原稿へリンクします。閲覧者の個人情報や未公開の資料を含む場合は、共有先とアクセス範囲も確認してください。

説明できない違和感は、比較する材料を用意する

理由をすぐ言葉にできない場合は、気になる場所を指し、参考になる画面と並べて相談します。「この写真の距離感は近い」「この見出しのまとまりは読みやすい」と、参考のどの部分を見るかを限定してください。参考サイトを丸ごと同じにする依頼ではなく、自社の目的に合う要素を探すために使います。

比較案を頼む場合も、変える条件を揃えます。配色、写真、原稿を一度に変えた二案では、何が印象の違いを生んだか分かりにくくなります。例えば同じ原稿と写真で見出しのまとまりを比べるなど、今回の疑問を確かめられる案を相談します。必要なら利用者に操作してもらい、関係者の印象と実際の行動を別々に記録します。

まず、今回の一画面から確認を始める

最初から全ページへ細かな指示を書こうとすると、共通する前提が決まらないまま修正が広がります。代表的なページで、目的、情報の順番、文字と配色、スマートフォン、未確認の操作を順に確かめてください。そこで決めたルールをほかのページへ展開し、個別に異なる部分を追加で確認します。

制作会社へは、「誰に何を伝えたいか」「どの画面のどこで困ると考えたか」「何を残し、何を変えたいか」を渡します。Acquaのホームページ制作・リニューアルの相談でも、現在の案や課題を共有いただければ、確認すべき範囲を整理するところから検討できます。見た目を整える判断を、原稿・操作・運用へつながる具体的な合意として残していきましょう。