Webデザインの参考には、配色や写真だけでなく、情報の順序、ページ間の移動、入力の説明も含まれます。「好きな雰囲気」を探すことは出発点になりますが、完成するサイトで誰の何を助けるかも一緒に考えます。

架空の設備点検会社なら「初めて依頼する施設担当者が、点検の対象と見積もり前の準備を知る」が用事です。この場合、サービス一覧、対象外の説明、準備物、相談先への移動が参考になります。飲食店の予約や採用応募では、見る場所と必要な情報が変わります。

まず同じ用事を助けるサイトを二つ、見せ方が気になる別業種のサイトを一つなど、比較できる範囲で候補を集めます。件数は本稿の整理例で、三件が最適という根拠ではありません。目的に合わない作品を大量に保存するより、どの疑問に答えているかを書ける候補を残してください。

初めての訪問者だけでなく、すでに取引がある人が資料を探す場面も確認します。一つのトップ画面で全員の目的を同じ扱いにせず、優先する用事と別の行き先を分けます。参考を探す前の短い問いが、採用理由を具体化します。

会社案内なら提供範囲と連絡への移動、記事媒体なら一覧と本文の読みやすさ、ECなら商品条件と購入前の確認が見る対象です。同じ配色でも、そのサイトで訪問者が行う用事は違います。参考を保存する際にサイトの種類と見たページを一緒に記録すると、自社へ使う理由を後から確かめられます。

この章の根拠：出典5

MUUUUU.ORGのようなギャラリーでは、カテゴリや掲載例から候補を探せます。表示された画像だけで決めず、実サイトへのリンクを開いて、情報を探す操作を試します。ギャラリーの掲載は、訪問者による使いやすさの試験結果や売上の証拠ではありません。

受賞作品や作品集も、表現の候補を広げる入口になります。ただし、その作品と自社では原稿量、写真、運営体制が違います。海外の画面なら日本語にすると見出しが長くなる場合もあります。作品の紹介文だけで、自社にもそのまま合うと判断しません。

テンプレートは、ページや部品のひな型です。無料か有料かに加えて、使うCMS、編集できる範囲、商用利用、画像やフォントの条件、更新とサポートの範囲を確認します。無料なら制限がない、有料ならすべての操作が完成する、という比較はしません。契約価格と利用条件は販売者の現行ページで確かめます。

紙へのラフ、画面作成ツール、CMSのプレビューなどは、参考を自社の原稿へ置き換える道具です。いきなり特定製品を買う必要はなく、何を確認する試作が必要かを先に決めます。作品を見る場所と、自社の画面を作る道具を混同しないことが大切です。

候補URLをブラウザーのブックマークへ保存し、ページ名と確認日、参考にする場所をメモします。画面を記録する場合も社内の比較用と、写真やデザインを公開へ流用することを分けます。参考の資料を集める道具と、配色や部品を試作する道具を目的に合わせて選んでください。

この章の根拠：出典1

「高級感」「すっきり」「見やすい」だけでは、制作担当が同じ画面を想像できるとは限りません。「サービス一覧の設備名の下に、依頼できる内容が一行ある。自分の設備を選べるようにしたい」のように場所、表示内容、目的をそろえて伝えます。

写真なら、商品全体の形、作業前後の状態、使う場面のどれを見せたいかを選びます。自社に同じ品質や枚数の写真がないなら、参考の写真中心の構図は再現しにくい場合があります。文章で答えるところ、図にするところ、撮影が必要なところへ分けてください。

文字は、見出しと本文の差、長い説明の区切り、リンクの意味を見ます。色は自社のロゴや指針との関係と、背景との明暗差を確かめます。通常サイズの文字には4.5:1などの基準がありますが、見た目で十分そうと決めず、色の値を使って確認します。ロゴや大きな文字等の例外も分けます。

配置では、関連する条件と次のリンクが近いか、注意事項が必要な場面で読めるかを見ます。情報を伝える画像には役割に合う代替テキストが必要で、飾りだけの画像とは扱いが違います。参考のaltをそのまま持ってきても、自社の写真の説明にはなりません。

この章の根拠：出典3出典2

スマートフォンで実サイトを開き、サービスを探し、条件を読み、相談先へ進みます。幅に応じて配置を変えるレスポンシブデザインでも、必要な説明が隠れることがあります。パソコンで格好よく見えることだけで採用しません。

文字を拡大した状態でも、見出しやボタンが重ならず内容を読めるかを見ます。パソコンではTabキーでリンクやボタンへ移動し、今どこにいるかが見えるか、必要な操作へ到達できるかを試します。入力欄なら何を書くか、エラーの直し方、送信後の案内を確認します。

動きがある画面は、何を伝えるための動きかを考えます。長い演出を待たないと条件を読めない場合や、動きを減らしたときに内容が消える場合は、自社へ取り入れる前に別の案を求めます。静止画像ではこの問題を判断できません。

W3CのEasy Checksは最初の点検に役立ちますが、簡単な操作確認だけでアクセシビリティ全体の適合が証明されるわけではありません。見つけた事実と推測を分け、「スマートフォンでメニューを開けなかった」「原因は未確認」のように記録してください。

この章の根拠：出典4

参考の一覧をそのまま完成仕様にせず、自社のサービス名や説明、写真を入れた試作を作ります。架空の点検会社では、参考が短い英語の三項目でも、自社の説明は長い日本語になるとします。小さい文字へ縮めるより、まとまりを分けて一列で読める案も比較します。

採用理由は「設備を選ぶため」「準備物を見落とさないため」のように書きます。保留の理由は「写真が用意できない」「更新担当が操作できない」「重要な案内を動きに隠す」と書けます。好きではないだけで否定するより、成立する条件を具体化します。

写真、ロゴ、文章、コードなどを参考サイトからコピーすることと、情報の見せ方を参考にすることは別です。利用したい素材は提供元の条件を確認します。テンプレートも購入しただけで、そのデモに使われる素材すべての利用が許可されるとは限りません。権利の不明な素材を完成案へ混ぜないでください。

制作担当には、候補URL、画面の場所、自社に使う理由、自社の原稿、避ける表現、未確認条件を渡します。費用は写真の準備、デザイン、実装、操作確認、保守を含む範囲で尋ねます。参考そのものの制作費を、見た目から推測して自社の見積もりにしません。

参考の組み合わせにも優先順位を付けます。写真は候補A、サービスの説明順は候補B、という組み合わせは可能ですが、違う書体やボタン表現をそのまま集めると一貫しない画面になります。制作担当には「参考ごとの何を使うか」を伝え、全体の文字・色・操作は自社でそろえる案を求めます。

納品前の確認では、参考と同じに見えるかより、合意した理由が自社の原稿でも成立するかを見ます。設備名と対象説明が読めるか、準備物から相談へ進めるかを試します。参考を送った時の記録と、試作で変更した理由を残すと、好みの議論だけへ戻らずに修正を依頼できます。

この章の根拠：出典2出典4

完成する参考メモは、好きなサイトの一覧だけではありません。「サービス一覧の名前と対象説明を、自社の設備を選ぶために使う。写真は自社素材、スマートフォンでも対象が読めることを確認」という説明まで含みます。

参考が役立つのは、制作担当が自社の条件へ合わせて案を作り、双方がその理由を確認できるときです。受賞や掲載数を成果の保証にせず、試作で観察した結果と未確認の条件を残してください。

この章の根拠：出典1出典4