この記事の対象: 自社のブランドサイト・サービスサイトの制作を検討していて、社内で構成案やデザインの方向性を決めなければならない担当者
読了時間: 約14分
「参考サイトを3つ出してください」と制作会社から言われて、手が止まっていませんか。
きれいなサイトはいくらでも見つかります。ただ、集めたブックマークを並べても「で、うちはどうするのか」の答えにはなりません。参考サイトは見た目を真似するために集めるものではなく、自社サイトの構成とトーンを決める判断材料として集めるものだからです。
この記事では、Soreiine!!ギャラリーに掲載されているブランドサイト・サービスサイトの中から、構成の型がはっきり読み取れる10サイトを取り上げます。「何が良いのか」を言語化できる状態にしておくと、制作会社との打ち合わせが一気に進みます。あわせて、参考サイトの集め方・社内合意の取り方・コストに跳ねやすい要素の見分け方まで、発注する側が知っておくべきことをまとめました。
ブランドサイトとサービスサイトは、そもそも役割が違う
最初にここを整理しないまま参考サイトを集めると、選ぶ基準がぶれます。制作会社との打ち合わせでも「そのサイト、うちの目的とは違いますね」と言われて振り出しに戻りがちな部分です。
目的で分けると、見るべき参考が変わる
| ブランドサイト | サービスサイト | |
|---|---|---|
| 主な目的 | 世界観・価値観を伝える | 内容を理解させ、申込・問い合わせにつなげる |
| 主な読み手 | 既存顧客、ファン、採用候補者、取引先 | 検討中の見込み客 |
| 成果の測り方 | 滞在時間、回遊、指名検索、SNS反応 | 資料請求数、問い合わせ数、CVR |
| ページ数の傾向 | 少ない（1枚完結も多い） | 多い（サービス別・事例・料金で増える） |
| 更新頻度 | 低い（キャンペーンごとに作り替える） | 高い（料金・事例・FAQを随時更新） |
| 重視される要素 | ビジュアル、動き、コピー、余白 | 導線、比較しやすさ、フォーム、検索性 |
ブランドサイトは「感じてもらう」ための場所、サービスサイトは「わかってもらう」ための場所です。この2つは求められるスキルも予算配分も違います。
ブランドサイトはビジュアル制作（撮影・イラスト・アニメーション）に予算が寄り、サービスサイトは情報設計とライティングに寄ります。同じ「サイト制作」という言葉でくくって見積もりを取ると、比較がまったく噛み合いません。「トップページ一式」という同じ項目名でも、片方は撮影ディレクションを含み、片方は原稿構成を含む。項目名だけを横に並べても比較にならないのはこのためです。
実際には「両方」を求められることが多い
厄介なのは、社内の要望が「ブランドの世界観も出したいし、問い合わせも増やしたい」という形で来ることです。これ自体は間違っていません。ただ、1ページの中で両立させようとすると、どちらも中途半端になります。 世界観を伝えるには余白と分量の制御が要り、問い合わせを増やすには情報量と導線の反復が要る。同じ1枚で両方をやると、余白が足りず情報も足りない状態に落ち着きます。
現実的な解き方は3つあります。
A：階層で分ける
- トップと下層でトーンを切り替える
- トップは世界観、サービス詳細は実務的に
- 最も一般的。追加コストが小さい
B：サイトを分ける
- ブランドサイトと商品ページを別ドメイン／別階層に
- キャンペーンごとに特設ページを立てる
- 制作費は増えるが、運用が明快になる
C：時間で分ける
- まず実務的なサービスサイトを作る
- ブランド表現は次フェーズに回す
- 予算が限られている場合の現実解
どれを選ぶかで見積もりの構造が変わります。RFPに「A案で考えている」と書くだけで、各社の提案が比較可能になります。
多くの企業に当てはまるのはAです。トップページは世界観を伝えることに集中させ、下層のサービス紹介ページは情報の網羅性と読みやすさを優先する。この分け方なら、制作会社も工数を見積もりやすくなります。
Bを選ぶ判断基準は、更新の主体が分かれるかどうかです。ブランド側は年に数回しか触らず、商品側は毎月動く。触る人も頻度も違うなら、最初から分けたほうが運用は楽になります。Cは「ブランド表現を諦める」ことではありません。先にサービスサイトで成果の土台を作り、その数字を根拠に次の予算を取る進め方です。社内稟議の通し方としても現実的です。
実例で見る：構成の型が読み取れる10サイト
ここからは実際のサイトを見ていきます。「きれいだから」ではなく「どういう判断をしているか」を読み取ることが目的です。各サイトの構成上の判断と、それを自社に持ち込むときの検討ポイントを添えます。
1. BOTANIST フレグランスコレクション｜2分割で「触感」を伝える
https://botanistofficial.com/special/limited/26spring/（Soreiine!!掲載ページ）
画面を左右に割るスプリットレイアウトで、片側に淡いピンクのクリーム状テクスチャを大きく置いた構成です。春限定コレクションのページですが、注目すべきは「香り」という見えないものを、質感の写真で伝えようとしている点です。
ソフトフォーカスの写真がにじむような広がりをつくり、セリフ体（明朝系の欧文書体）の見出しが限定品らしい格を添えています。商品カットを並べるのではなく、使ったときの感触を想像させる方向に振っている。左右分割という形式そのものも効いていて、片側を写真で占有しても、もう片側に情報を置けるため「大きく見せる」と「読ませる」が同居します。
自社に持ち込むなら：化粧品・食品・素材など「使ってみないとわからない」商材では有効な型です。ただし成立条件がはっきりしていて、テクスチャ撮影のクオリティがすべてを決めます。手持ちの商品写真を流用してこのレイアウトを組むと、余白が広いぶん粗さが目立ちます。この構成を採用するなら、撮影を見積もりの別項目として立ててもらい、カット数まで決めた状態で比較してください。撮影を「一式」に含めた見積もりは、後から枚数で揉めます。
2. リンナイ青山ショールーム｜情報を削って格を上げる
https://aoyama.rinnai.jp/（Soreiine!!掲載ページ）
ダークグレーの背景に、サイト名の白いテキストを右寄せで置き、住所とGoogle Mapsへのリンクを添えただけ。要素の数だけを見れば、驚くほど少ないページです。
それでも成立しているのは、目的が「来訪」に一本化されているからです。ガス機器メーカーのショールームサイトですが、製品スペックを説明していません。製品情報は本体サイトが持っているので、ここでは重複させず、来る人に必要な情報だけを残している。役割の分担がはっきりしている構成です。
自社に持ち込むなら：情報を削るのは、実は足すより難しい判断です。社内で「あれも載せたい」を跳ね返し続けないと、この形は保てません。削る構成を採るなら、決裁者を早い段階で巻き込んでおくこと。制作の終盤で役員から「会社概要も入れて」と言われると、設計から崩れます。
ちなみにダークトーンのサイトは、印刷物との相性や、後から追加するコンテンツの見え方に制約が出やすい形式です。白背景を前提に作られたバナーや、明るい商品写真を後から差し込むと浮きます。運用フェーズで何を追加する可能性があるかを先に伝え、その時どう見えるかを制作会社に確認しておくと安全です。
3. GREEN SPOON デリ弁当｜新カテゴリーの告知を1枚で
https://green-spoon.jp/release/deli-bento（Soreiine!!掲載ページ）
惣菜が並ぶ写真をフルスクリーンで使い、「DELICATESSEN BENTO」というレトロ寄りの書体を重ねた1枚構成です。ブラウン系の落ち着いたトーンでまとめ、手作り感と上質さを同時に出しています。
構成として学べるのは、既存ブランドに新カテゴリーを足すときの見せ方です。「弁当」という新しい文脈を、既存ブランドの枠を壊さずに提示している。書体の選び方だけで「本格感」と「遊び心」の両方を担保しているのが巧みです。ブランドカラーやロゴは変えず、書体と写真のトーンだけで新カテゴリーの空気を作る。この順番なら、ブランドの積み上げを崩さずに幅を広げられます。
自社に持ち込むなら：新商品・新サービスの告知ページを既存サイト内に作るケースは非常に多く、ここで「既存サイトのテンプレートに流し込むか、専用に組むか」の判断が発生します。専用に組むほうが表現の自由度は高いですが、更新のたびに制作会社に依頼が必要になります。年に何回この種のページを作るのかを先に数えてから決めてください。頻度が高いなら、CMSで自分たちが組み替えられる仕組みに投資する価値があります。目安としては、専用ページを繰り返し発注する費用が、テンプレート化の初期費用を上回るかどうかで判断できます。
4. 濵田酒造 チルグリ｜3カラムで「選ばせる」
https://www.hamadasyuzou.co.jp/chillgreen_brand/review/（Soreiine!!掲載ページ）
グリーンとピンクの3カラム構成で、2つのフレーバーを左右に置き、中央に「あなたはどっチル？」というコピーとイラストを配置しています。訪問者に選択を促す設計です。
このページの優れている点は、比較を体験に変えているところ。スペック表で並べるのではなく、言葉遊びを挟んで「自分はどっちだろう」と考えさせる。そのうえでオンラインショップへの導線が用意されており、理解から購入までが1本の流れになっています。中央に判断を促すコピーを置く構成は、左右どちらを選んでも次の行き先があるという点でも無駄がありません。
自社に持ち込むなら：商品バリエーションが2〜3種類ある場合の定番の型です。ただし3カラムのレイアウトはスマートフォンでの見え方に注意が必要で、単純に縦積みにすると「比較している」という体験そのものが消えます。制作会社に依頼するときは、スマホでの比較の見せ方を具体的に確認してください。横スクロール、タブ切り替え、アコーディオンなど、手法によって実装工数が変わります。ワイヤーフレームの段階でスマホ版も出してもらうのが確実です。PC版だけ承認して進めると、この種の設計は後で必ず揉めます。
3カラムをどう扱うかは、そもそもレイアウト全体の設計判断でもあります。詳しくはこちらで整理しています。
3カラムデザインはもう古い？2026年の使いどころと組み方【レイアウト判断ガイド】
5. グローカリーホテル建屋｜読み込み中もブランド体験にする
https://www.glctateya.com/（Soreiine!!掲載ページ）
ベージュの背景に、雲から顔を出す帽子をかぶった鳥のようなキャラクターのイラスト。これがローディング画面（コンテンツが表示されるまでの待ち時間の画面）です。
ここで学べるのは、ブランドは最初の1秒から始まっているという考え方です。多くのサイトでローディング画面は「ただの待ち時間」として扱われますが、このサイトはそこにキャラクターを置いて期待感をつくっている。ホテルというホスピタリティ業種との相性も良く、ベージュのトーンが温かみを支えています。
自社に持ち込むなら：ローディング演出は、実は費用対効果の判断が難しい要素です。制作費が上がるうえに、表示速度の観点では不利に働くこともあります。検索順位に影響する表示速度の指標がある以上、「演出のために意図的に待たせる」設計は慎重に判断すべきです。
採用するなら条件を決めておくこと。たとえば「トップページのみ」「初回訪問時のみ（2回目以降は出さない）」「読み込みが終わり次第すぐ抜ける」「最長でも数秒で必ず抜ける」といった仕様を先に固め、見積もりに含めてもらいます。ここを詰めずに「ローディングアニメーションをお願いします」と言うと、後から仕様追加として追加費用が発生しやすい部分です。
判断に迷うなら、優先順位を下げるのが無難です。ローディング演出は公開後に足すこともできる要素で、構成そのものを規定しません。先に固めるべきは、後から変えにくい情報設計のほうです。
6. 東京ばな奈「東京ばにゃ奈クッキーズ」｜ブランドカラーを全面に押し切る
https://www.tokyobanana.jp/products/banyana.html（Soreiine!!掲載ページ）
画面全体がイエロー。ブランドカラーを一色で塗り切る大胆な判断です。「Ready!」の文字が表示され、Cookie同意バナーまでトーンを合わせてあります。
細部までトーンを統一する執念が、このサイトから読み取れる一番の学びです。Cookie同意バナーは法的な要請から出すもので、多くのサイトではツールの初期設定のまま、サイトのデザインから浮いた状態で放置されています。ここを整えているかどうかで、ブランドへの姿勢が伝わる。
自社に持ち込むなら：ブランドカラーの全面使いは、色そのものに認知がある企業だから成立する型です。認知が育っていない段階で真似すると、単に「派手なサイト」になります。
一方で、同意バナーやフォームのデザインを整えるという部分は、どんな規模の企業でもすぐ実行できます。見積もり時に「Cookie同意バナー・問い合わせフォーム・エラーメッセージ・サンクスページのデザイン調整を含むか」を確認しておくと、納品後に浮いた要素を見つけて落胆する事態を防げます。ここは見積もりから漏れやすい定番の項目です。
特にフォームは、外部ツールをそのまま埋め込むとデザインが合いません。ツール側でどこまで見た目を変えられるかはサービスごとに違うので、使用するツールを決める段階で確認しておくのが確実です。問い合わせ直前の画面が最も離脱しやすい場所である以上、ここを「あとで」にしない判断は合理的です。
7. パーソル カルチャーデック｜社内資料をWebで公開する
https://www.persol-group.co.jp/special/culturedeck/（Soreiine!!掲載ページ）
青い線画で描かれた山岳風景が画面全体を覆い、「PERSOL CULTURE DECK」の文字が重なります。手描きタッチのイラストレーションが、企業文化を「旅路」として表現している構成です。
注目すべきは表現よりも企画の発想のほうです。カルチャーデックはもともと社内・採用候補者向けの資料ですが、それをWebサイトとして公開している。採用候補者にも社員にも取引先にも、同じ価値観を同じ形で見せられます。
自社に持ち込むなら：社内にすでにある資料が、ブランドサイトの中身になるというのは、予算が限られている企業ほど効く発想です。経営理念の説明資料、社史、社員インタビューの原稿、事業計画のスライド。これらは中身がすでにあるので、制作費のうちコンテンツ制作にかかる部分を圧縮できます。
制作会社に相談するときは「うちにはこういう資料があります」と最初に出してください。ゼロから企画を起こすのと、既存資料を再構成するのとでは、見積もりの構造がまったく変わります。前者は取材・構成・執筆が積み上がり、後者は編集と再設計が中心になります。資料が整っているほど、同じ予算をデザインと実装に回せます。
8. 赤城ふところ（愛犬と過ごす古民家リトリート）｜ターゲットの示し方
https://akagi-futokoro.com/（Soreiine!!掲載ページ）
群馬県赤城山の古民家リトリート施設のサイトです。障子越しの光と縁側をフルスクリーンで見せ、「古民家で過ごす静かな時間」というコピーを縦書きで配置。ダークトーンの写真が静寂と非日常感をつくっています。
構成上の判断として面白いのは、「愛犬同伴可」という最大の差別化要素を、ファーストビューの主役にしていないことです。ロゴの脇にさりげなく記されているだけ。まず世界観で惹きつけ、条件は探している人が見つけられる位置に置く。犬連れで泊まれる宿を探している人は、必ずその情報を探すからです。
さらに下部にお知らせバーを置き、季節情報を出す枠を確保しています。世界観を保ちながら更新の余地を残すという、運用まで考えた設計です。
自社に持ち込むなら：「差別化要素は大きく出すべき」と考えがちですが、それは検索して比較している段階の人に向けた考え方です。ブランドサイトで最初に伝えるべきものが何かは、流入経路によって変わります。RFPには「どこから来た人が見るページか」を書いておくと、制作会社の提案精度が上がります。
また、お知らせ枠のような「更新できる場所」を1か所は必ず入れること。ここがないサイトは、公開から半年で情報が古いまま止まります。
9. Soreiine!!掲載サイトに共通する「ファーストビューの割り切り」
ここまでの8例を横に並べると、共通点が1つ見えてきます。ファーストビューで伝えようとしていることが、どれも1つだけという点です。
BOTANISTは質感、リンナイ青山は場所、GREEN SPOONは新カテゴリーの存在、濵田酒造は選択、グローカリーホテルはブランドの空気、東京ばな奈は色、パーソルは企業文化、赤城ふところは世界観。どれも「あれもこれも」を最初の画面に詰め込んでいません。
これは自社サイトを作るときに最も破られやすい原則でもあります。社内でファーストビューを議論すると、営業部門はキャンペーン、経営企画は理念、採用担当は募集要項を置きたがる。全部を置いた結果、何も伝わらない画面ができあがります。
自社に持ち込むなら：ファーストビューに置くものを1つに決める会議を、デザイン提案の前にやってください。デザイン案を見てから議論すると、好みの話に流れます。案が出る前に「この画面で伝えるのは○○」と文章で決めておけば、提案の評価軸がそこに固定されます。決められないときは、そのサイトに一番来てほしい人を1人に絞るところからやり直すと答えが出ます。
10. 更新されているサイトに共通する「余白の使い方」
もう1つ、ギャラリーを横断して見ると気づくのは、公開後も情報が更新されているサイトほど、更新箇所が構成の中で場所を与えられていることです。
赤城ふところのお知らせバーがわかりやすい例ですが、他のサイトでも「ここに何かが入る」という枠がデザインの一部として設計されています。逆に、更新が止まっているサイトの多くは、情報を足す場所が構成の中に用意されていません。足そうとすると全体のバランスが崩れるので、結果として誰も触らなくなります。
自社に持ち込むなら：ワイヤーフレームの承認時に「1年後、ここに何が増えているか」を各ページで1行ずつ書き込んでみてください。書けない場所は、増えない場所です。それが意図した設計ならよいのですが、多くの場合は単に想定されていないだけです。
この確認は、デザイン提案の前でも後でもできます。ただし実装が始まってからだと構成変更になるので、ワイヤーの段階でやるのが一番安く済みます。
参考サイトの集め方と、社内での合意の取り方
実例を見たうえで、次は自社の話です。参考サイトを集める作業は、単なる素材集めではなく社内の意思決定プロセスとして設計すると効率が上がります。
「好き」ではなく「なぜ良いか」で集める
制作会社が参考サイトを求めるのは、デザインの好みを知りたいからだけではありません。言葉で表現しきれない要求を、実物で確認したいからです。だから、URLだけ送っても情報量は半分しか伝わりません。
参考サイトを出すときは、次の4項目をセットにしてください。
| 項目 | 書き方の例 |
|---|---|
| URL | https://example.com/ |
| 良いと思った点 | ファーストビューで商品の質感が伝わる／情報量が少なく迷わない |
| 真似したくない点 | 読み込みが遅い／文字が小さくて読みにくい |
| 自社との違い | 先方は商品1点、うちは12点あるので同じ構成は使えない |
「真似したくない点」を書くのが効きます。1つのサイトを丸ごと参考にするケースは実際にはほとんどなく、構成はA社、色はB社、写真の使い方はC社という形で分解して指定するほうが、仕上がりが要求に近づきます。
「自社との違い」も同じくらい重要です。参考サイトが成立している条件（商品点数が少ない、撮影素材が潤沢、認知がある）と自社の条件が違えば、同じ構成は機能しません。ここを先に書いておくと、制作会社から「その条件ならこの部分は変えたほうがいい」という提案が返ってきます。
社内の関係者から「先に」集める
参考サイトを担当者ひとりで集めると、デザイン提案の段階で上長や他部署から別案が出てきます。これが制作を止める最大の原因です。
ポイントは4番です。「落ち着いた」「余白のある」「写真で語る」といった言葉の段階で合意を取っておくと、デザイン提案に対する評価がぶれません。「思っていたのと違う」という差し戻しの多くは、この工程を飛ばしたことが原因です。
言葉に集約するときは、対になる言葉も一緒に決めると精度が上がります。「落ち着いた（＝賑やかではない）」「写真で語る（＝説明文で語らない）」のように、何を選ばないかまで書く。デザイン案を評価する場面で、この対の言葉が判断基準として機能します。
集めた参考サイトと決めた方向性は、そのまま発注資料に組み込めます。依頼内容のまとめ方はこちらで詳しくまとめています。
ホームページ依頼内容のまとめ方｜見積比較テンプレート【2026年】
Soreiine!!ギャラリーの使い方
参考サイトを探す作業そのものが負担になっているなら、Soreiine!!ギャラリーを使ってください。掲載サイトは色・レイアウト・業種で絞り込めるので、「ベージュ系」「スプリットレイアウト」「ブランドサイト」といった条件で候補を一気に並べられます。
各サイトには構成上の特徴を解説した講評が付いているので、「なぜ良いか」を自分で言語化する手間が省けます。社内共有用の一覧を作るとき、この講評をそのまま引用して議論の起点にする使い方が効率的です。
構成とデザインの判断が、コストに跳ねるポイント
参考サイトを選ぶ段階で、実は予算の大枠が決まっています。同じページ数でも、採用する表現によって工数は大きく変わります。ここを知らずに参考サイトを出すと、見積もりを見て驚くことになります。
制作費を押し上げやすい要素
| 要素 | 工数への影響 | 判断のポイント |
|---|---|---|
| 商品・空間の撮り下ろし撮影 | 大 | 手持ち写真の質で決まる。質感を見せる構成なら必須 |
| オリジナルイラスト・キャラクター | 大 | 点数で効いてくる。汎用性のある2〜3点から始める |
| ローディング演出・スクロール連動アニメーション | 中〜大 | 表示速度と引き換え。仕様を先に固定する |
| 動画の埋め込み・背景動画 | 中 | 素材制作費が別途。読み込み対策も必要 |
| 3カラム等の複雑なレイアウト | 中 | スマホ表示の設計次第で工数が変わる |
| 多言語対応 | 中〜大 | 翻訳費と、言語別の運用体制がセットで必要 |
| 独自のフォント・書体購入 | 小〜中 | ライセンス費用が年額で発生する場合がある |
上の3つは、参考サイトを見た瞬間に決まってしまう要素です。 「このサイトみたいにしたい」と伝えた時点で、撮影とアニメーションが見積もりに入ります。それ自体は悪いことではありませんが、予算内で優先順位をつけるなら、参考サイトを出す前に社内で「どこに金をかけるか」を決めておくほうが健全です。
なお、これらの要素に実際いくらかかるかは、規模・カット数・実装範囲・依頼先の体制によって大きく変わります。同じ「撮影あり」でも、半日1ロケーションと複数日程では別物です。金額の目安を知りたい場合は、条件を揃えた状態で複数社に当ててみるのが唯一の確実な方法です。
逆に、コストを抑えても品質が落ちにくい要素
- ページ数を減らす：情報を1ページに集約すると、デザイン・実装ともに工数が減ります。リンナイ青山の例のように、絞ることが品質になるケースもあります
- 既存素材を活用する：社内資料、既存の商品写真、過去の撮影データ。使えるものを棚卸しして渡すだけで、見積もりの構造が変わることがあります
- アニメーションを絞る：全要素にフェードインを付けるのではなく、ファーストビューのみに集中させる
- CMSの範囲を限定する：全ページを編集可能にするより、「更新するのはお知らせと事例だけ」と決めるほうが安く、運用も安定します
- 公開時のページ数を絞る：公開後に足す前提で設計しておけば、初期費用を抑えたまま拡張できます。ただし「後から足せる設計か」を先に確認しておくこと
予算の組み立て方そのものは、目的からの逆算で考えると整理しやすくなります。
相見積もりでは「参考サイトを統一する」
複数社から見積もりを取るとき、全社に同じ参考サイトを提示してください。これをやらないと比較が成立しません。
さらに、見積書に次の項目が明記されているかを確認します。
- 撮影の有無（あるなら日数・カット数・カメラマン手配の有無）
- イラスト・アイコンの制作点数
- アニメーションの実装範囲（どのページ・どの要素か）
- 原稿の執筆範囲（制作会社が書くのか、自社で用意するのか）
- CMS化するページの範囲
- スマートフォン専用デザインの有無（PCデザインの縮小か、別途設計か）
- 公開後の修正対応の範囲と期間
このうち「原稿の執筆範囲」と「スマホ専用デザインの有無」は、見積書に書かれていないことが多く、後から追加費用の話になりやすい項目です。安く見えた見積もりが実は原稿執筆を含んでいなかった、というのはよくある食い違いです。
なお、同じ要件でも会社によって金額に差が出るのは普通のことです。差が出る理由を聞いて納得できるかどうかが判断軸になります。「安い理由」の見抜き方はこちらにまとめています。
公開後に効いてくる、3つの設計判断
参考サイトを選ぶときに見落とされがちですが、公開してからの運用しやすさは、構成段階でほぼ決まります。制作会社は聞かれなければ説明しないことも多い部分です。
1. 更新できる場所があるか
赤城ふところの例で触れたお知らせバーのように、自社で更新できる枠を1か所以上確保しておくこと。これがないと、公開から数か月で情報が古いまま固定されます。
確認すべきは「どのページの、どの部分を、自社で編集できるか」です。見た目を保ったまま編集できる仕組みになっているか（誰が触ってもレイアウトが崩れないか）も含めて、納品前に実際に触らせてもらってください。文字数が想定より多いときにどう見えるか、画像を差し替えたら比率がどうなるかまで試しておくと、公開後の事故が減ります。
2. コンテンツが増えたときに破綻しないか
ミニマルな構成のサイトは美しい一方、要素を足すと均衡が崩れます。1年後に「事例を10件載せたい」「採用ページを足したい」となったときに、デザインの型がそれを受け止められるか。
制作会社への確認の仕方はシンプルです。「1年後にこういうページを足す可能性がありますが、今の設計で対応できますか」と聞く。答えが「その時に考えましょう」なら、拡張を想定していない設計です。それでも構わないケースはありますが、知らずに進めるのと、了解して進めるのは別です。
3. 表示速度を犠牲にしていないか
大きな写真、背景動画、ローディング演出。ブランドサイトで効果的な要素は、たいてい表示速度と引き換えです。
先に決めておく
- 演出を入れる範囲（トップのみ等）
- 画像の最適化を見積もりに含める
- 公開前に速度の実測値を確認する
- スマホ回線での表示を実機で見る
後から気づく
- 全ページに演出が入っている
- 写真が原寸のまま入っている
- 公開後に「重い」と社内から指摘
- 改修に追加費用が発生する
納品前のチェック項目に「表示速度の実測値」を入れておくのが確実です。制作会社に測定結果の提出を求めても構いません。断られることはまずありません。
公開後にアクセス状況を把握する仕組みも、制作と同時に入れておくべきものです。
よくある質問
参考サイトは何件くらい集めればいいですか？
制作会社に提示するのは3〜5件が適量です。それ以上出すと傾向が読み取れず、かえって方向性がぼやけます。社内で集める段階では10件程度集め、共通点を整理してから絞り込むのが効率的です。全部を1社に見せる必要はなく、「構成の参考」「色の参考」と役割を分けて渡すと伝わりやすくなります。
ブランドサイトとサービスサイト、どちらから作るべきですか？
売上に直結する課題があるなら、サービスサイトが先です。問い合わせや申込を増やす仕組みのほうが、効果を測りやすく社内での評価も得やすいためです。ブランドサイトは、認知や採用に課題がある場合や、既存顧客との関係を深めたい場合に優先度が上がります。予算が限られているなら、実務的なサイトを先に作り、ブランド表現は次フェーズに回す進め方が現実的です。
参考サイトと同じデザインにしてもらうことはできますか？
構成やレイアウトの考え方を取り入れることは一般的に行われますが、デザインをそのまま複製することは著作権上の問題があり、制作会社も受けません。参考サイトは「こういう方向性」を共有するためのものと考えてください。伝えるべきは見た目そのものではなく、そのサイトのどの判断が良いと思ったかです。そこを言語化できていれば、自社に合った形で提案が返ってきます。
制作会社から参考サイトを提案してもらうことはできますか？
できます。むしろ、自社の業種や目的を伝えて「参考になるサイトを3つ挙げてください」と依頼するのは、制作会社の力量を見る良い方法です。なぜそのサイトを選んだかを説明できる会社は、デザインを感覚ではなく理屈で組み立てています。相見積もりの段階でこの質問をすると、各社の考え方の違いがはっきり見えます。
デザインの好みが社内で割れたときはどうすればいいですか？
好みで議論しないことです。「どちらが目的に合っているか」に論点を戻します。ターゲットは誰か、そのサイトで何を達成したいのかを先に確認し、その基準でどちらが適しているかを判断する。それでも決まらない場合は決裁者に委ねます。多数決で決めると、誰の責任でもない中途半端なデザインになります。
まとめ
参考サイト集めは、デザインの素材集めではなく、社内の意思決定と発注準備を兼ねた工程です。
- ブランドサイトとサービスサイトは目的が違う。どちらを作るのか、あるいはどう両立させるのかを先に決める
- 参考サイトは「なぜ良いか」をセットで集める。URLだけでは半分しか伝わらない
- 真似したくない点も書く。構成・色・写真の使い方を分解して指定するほうが精度が上がる
- ファーストビューで伝えることを1つに決める。デザイン案を見る前に、文章の状態で合意しておく
- 参考サイトを選んだ時点で予算の大枠が決まる。撮影・イラスト・アニメーションは特に効く
- 相見積もりでは全社に同じ参考サイトを出す。要件が揃わないと比較にならない
- 更新できる場所、拡張の余地、表示速度の3点は、構成段階で確認しておく
今回紹介した10の視点は、いずれも「何を見せて、何を見せないか」の判断がはっきりしています。自社のサイトでも、まずはその判断から始めてください。足すことより、決めることのほうが難しく、そして効きます。
Soreiine!!ギャラリーには、ブランドサイト・サービスサイトの実例が業種・色・レイアウト別に掲載されています。社内共有用の候補一覧を作る場面でも使えます。
