この記事の対象: デザイン事務所・制作会社のWeb担当者、これから自社サイトをリニューアルしたい制作会社経営者
読了時間: 約7分
Soreiine!!のギャラリーに掲載している全162件のうち、デザイン事務所・制作会社カテゴリに分類されるのは12件です。母数としては決して大きくありませんが、この業種特有の「作り手が自分自身を売る」という難しさが、カラーとレイアウトの選び方にはっきり表れていました。今回はこの12件を分解しながら、なぜそういう傾向になるのかを制作者目線で解説します。
数字で見る傾向：ホワイト系4件、シングルページ9件
まずは実測データから。カラーの内訳とレイアウトの内訳をそれぞれ見てみます。
| カラー系統 | 件数 |
|---|---|
| ホワイト系 | 4 |
| ブラック系 | 3 |
| ネイビー系 | 1 |
| グレー系 | 1 |
| ピンク系 | 1 |
| レッド系 | 1 |
| ブルー系 | 1 |
| レイアウト | 件数 |
|---|---|
| シングルページ | 9 |
| 1カラム | 2 |
| スプリットレイアウト | 1 |
12件中9件がシングルページという結果は、正直かなり偏っています。他の業種カテゴリ（飲食店やEC、BtoBなど）と比較すればするほど、この数字の異様さが際立つはずです。カラーについてはホワイト系とブラック系で7件を占め、残りの5件がそれぞれ1色ずつバラける「二極化＋少数の冒険色」という構図になっていました。
定番（計7件）
- ホワイト系 4件
- ブラック系 3件
冒険色（各1件）
- ピンク・レッド・ブルー・ネイビー・グレー
この図が示すのは、デザイン事務所のカラー選びが「王道か、極端か」の二択に寄っているということです。中間色でまとめたサイトがほぼ存在しないのが特徴的でした。
なぜシングルページが9割近くになるのか
【制作者目線】
デザイン事務所や制作会社のサイトは、コンテンツ量そのものは実はそれほど多くありません。会社概要、実績、サービス内容、採用情報――これらを別ページに分けて回遊させるより、1本のスクロールで「世界観→実績→思想→問い合わせ」という物語として読ませたほうが、ブランドの一貫性を保ちやすいという判断が働きます。ページ遷移を挟むたびにトーンが途切れるリスクがあるので、あえて避けているケースが多いと考えられます。
【発注者目線】
発注する側からすると、シングルページ構成はサイト全体を「1枚の名刺」として使える利点があります。特に営業資料やSNSでの拡散時に、トップページのURLひとつで会社の全てを見せられるのは強みです。ただし情報量が増えてくると縦に伸びすぎて離脱を招くリスクもあるため、サービス数や実績数が今後増える見込みがあるなら、1カラムやスプリットレイアウトとの併用も検討する価値があります。
実際に掲載している事例を見ながら、この傾向がどう表れているか具体的に見ていきましょう。
sukima（クリエイティブカンパニー）
sukimaのクリエイティブカンパニーサイト は、ライトグレーの背景に「あなたの人生の隙間に笑顔を届けます。」というコピーを大きく配置した1カラム構成です。社名の「sukima（隙間）」というコンセプトを、画面の余白の量そのものでメタ的に表現しているのが面白いところで、単に空けているのではなく「隙間」というテーマとリンクさせた余白設計になっています。「の」の一文字にだけイエローグリーンのアクセントを添える処理も細かく、Work・Who we are・Cultureといったナビ構成から、単なる制作会社ではなく「企業としての在り方」を打ち出そうとする姿勢が読み取れます。
詳しくはSoreiine!!の掲載ページでも確認できます。
commono inc.（ブランディング会社）
commono inc.のブランディング会社サイト は、今回の12件の中で唯一スプリットレイアウトを採用している事例です。ダークトーンの背景にスマートフォン型のUIとポスタービジュアルを組み合わせ、右サイドにはカラフルなグラデーション球体のナビゲーションを配置しています。「ブランドとビジネスの間を、デザインでつなぐ。」というメッセージが同社のポジショニングを明確にしており、北海道拠点のブランディングファームとして、サイト自体がポートフォリオを兼ねる作りになっています。実験的でありながら操作感は直感的という、両立が難しいバランスを取った例です。
掲載ページはこちら。
ホワイト系とブラック系、それぞれが選ばれる理由
【制作者目線】
ホワイト系を選ぶ事務所は、デザインそのものの完成度で勝負するタイプが多い印象です。背景を白くすることで、タイポグラフィの美しさやレイアウトの余白のバランスが際立ちます。逆にブラック系を選ぶ事務所は、実績や経歴といった「重み」をコンテンツの中心に据えるタイプが目立ちます。暗い背景は文字を沈める効果があり、テキスト主体の構成と相性がよいためです。
【発注者目線】
自社サイトを作るときに白か黒かで迷ったら、「何を主役にしたいか」で決めるのが実務的です。ビジュアルや世界観そのものを見せたいならホワイト系、実績や専門性の重みを見せたいならブラック系、というのが今回のデータからも読み取れる傾向でした。
Goodpatch Anywhere（グッドパッチのリモートデザインチーム）
グッドパッチのリモートデザインチーム は、ホワイト系×シングルページの典型例です。デザイン会社グッドパッチが展開するフルリモートデザインチーム「Goodpatch Anywhere」のサイトで、白基調のミニマルなデザインが信頼感を醸成しています。場所にとらわれない働き方を提案するサービスの特性を、開放的なレイアウトで体現しているのが特徴です。UI/UXのプロフェッショナル集団らしく、サービス内容と実績を端的に伝える構成力も高く仕上がっています（掲載ページ）。
夜.（デザイナー横澤由香里のポートフォリオ）
対してブラック系代表として挙げたいのが、デザイナー横澤由香里のポートフォリオ です。漆黒の背景に白文字で経歴と実績が淡々と並ぶ、装飾を極限まで削ったテキスト主体の1カラム構成。Web、UI、グラフィック、空間デザインと幅広い領域をカバーする実力を、タイポグラフィだけで語らせています。功有会のリブランディングやシヤチハタ100周年サイトといった実績が並ぶことで、デザインを超えた説得力が生まれているのが印象的です（掲載ページ）。
syncity（クリエイティブカンパニー）
もう一件、ブラック系の事例としてクリエイティブカンパニーsyncityの公式サイト も紹介します。「境界を越え、未来をデザインする」をビジョンに掲げ、ダーク背景にネオンカラーのライティングで照らされた人物写真を大胆に配置しています。「Sync with Purpose」のヘッドラインと、01〜04のセクション切り替えUIが多角的な事業展開を示唆する構成です（掲載ページ）。
採用サイト・転職・求人のWebサイトデザイン事例15選｜傾向と実例
少数派カラーが物語る「攻めの姿勢」
【制作者目線】
ピンクやレッド、ブルーといった単色を全面に使う選択は、デザイン会社にしかできない冒険とも言えます。一般企業がこの色使いをすると「奇抜」で終わってしまうリスクがありますが、デザイン力そのものを証明する場であるデザイン事務所のサイトなら、色の説得力がそのままブランドの実力証明になります。
【発注者目線】
このアプローチを自社に取り入れる場合は要注意です。単色使いが効くのは「色を選んだ理由」を語れるだけの世界観やコンセプトが背景にあるときに限られます。理由のない奇抜な色選びは、単に読みにくいサイトになってしまうだけなので、真似る場合はコンセプト設計とセットで検討すべきポイントです。
RightDesignInc.
ライトデザインのインパクトあるサイト は、画面全体をビビッドなピンクで塗りつぶし、右上に白抜きの「RIGHT」ロゴだけを配置するという、今回の12件で最も大胆な事例です。色面だけでブランドの個性と攻めの姿勢を伝えており、デザイン会社ならではの、色の力を最大限に活かしたビジュアルコミュニケーションと言えます（掲載ページ）。
自社サイトに活かすポイント
ここまでの分析を踏まえて、デザイン事務所・制作会社がサイトをリニューアルする際に押さえておきたいポイントを整理します。
- コンテンツ量が少ないうちはシングルページを軸に検討する。9割近くがこの構成を選んでいる背景には、ブランドの一貫性を保ちやすいという合理性があります
- 色を選ぶ前に「何を主役にするか」を決める。ビジュアル勝負ならホワイト系、実績・専門性勝負ならブラック系という傾向が実データからも読み取れます
- 単色の冒険をするなら、色を選んだ理由をセットで用意する。RightDesignInc.のようにロゴ一つで押し切るには、色そのものがブランドを代弁できる強度が必要です
- サービスや実績が増えてきたら1カラムやスプリットレイアウトへの移行も視野に。commono inc.のように、情報が多層化するタイミングでレイアウトを切り替える選択肢もあります
なお、シングルページ構成で実績やサービスを開閉式に見せたい場合は、アコーディオンやモーダルの実装知識があると設計の幅が広がります。
アコーディオンをdetails summaryで実装｜開閉アニメーション付きの作り方
実績一覧をカルーセルで見せたい場合はこちらも参考になります。
よくある質問
デザイン事務所のサイトはシングルページとマルチページどちらがいいですか
実績やサービス数が少ないうちはシングルページが有利です。ブランドの世界観を1本のスクロールで一貫して見せられ、URLひとつで全体像を伝えられます。実績数が増えて情報が多層化してきたら、1カラムやスプリットレイアウトへの移行を検討するとよいでしょう。
デザイン事務所のサイトの配色はどう決めればいいですか
「何を主役にしたいか」で決めるのが実務的です。デザインそのものの完成度やビジュアルを見せたいならホワイト系、実績や経歴の重みを見せたいならブラック系が、今回分析した12件の傾向からも読み取れます。
単色を大胆に使うデザインは自社にも取り入れられますか
理由が語れる場合に限り有効です。単色使いが効くのは、その色を選んだ根拠となるコンセプトやブランドストーリーが背景にあるときです。理由のない奇抜な色選びは、単に読みにくいサイトになってしまうため注意が必要です。
なぜデザイン事務所は白か黒に偏るのですか
今回の12件では、白黒で7件と過半数を占め、残りの5色はそれぞれ1件ずつという分布でした。白黒はデザインそのものやタイポグラフィの完成度を際立たせる効果があり、汎用性の高い選択として選ばれやすいためと考えられます。
まとめ
デザイン事務所・制作会社12件を分析した結果、シングルページ構成が9件、カラーは白黒で過半数という、はっきりした傾向が見えてきました。これは単なる流行ではなく、「自分たちの実力をどう見せるか」という業種特有の課題に対する合理的な回答の積み重ねだと考えられます。自社サイトを見直す際は、まず「何を主役に据えるか」を言語化してから、レイアウトと配色を選ぶ順序をおすすめします。
