この記事の対象: 家電・PC・モバイル業界のWeb担当者、制作会社でこの業種のサイトを手がけるデザイナー
読了時間: 約9分
Soreiine!!に掲載しているサイトの中で、「家電・PC・モバイル」カテゴリに分類されるのは5件です。母数としては小さいものの、この5件を色・レイアウトの軸で並べてみると、業種特有の作法のようなものが見えてきます。今回はその5件を実際に見ながら、なぜそのデザインが選ばれているのかを制作者目線で読み解いていきます。
数字で見る傾向：ホワイト系とブルー系が半数以上
まずは色とレイアウトの内訳から見てみましょう。
| カラー | 件数 |
|---|---|
| ホワイト系 | 2件 |
| ブルー系 | 1件 |
| グリーン系 | 1件 |
| パープル系 | 1件 |
| レイアウト | 件数 |
|---|---|
| 1カラム | 3件 |
| シングルページ | 1件 |
| スプリットレイアウト | 1件 |
5件という数なので統計的な断定はできませんが、傾向としては「ホワイト系＋1カラム」が最も多い組み合わせです。ガジェット系のサイトというと派手で近未来的なイメージを持たれがちですが、実際にSoreiine!!に掲載されている事例を見ると、意外なほど落ち着いた配色のものが目立ちます。
ホワイト系（2件）
- 製品の造形を主役にする
- アクセントカラーで差別化
それ以外（ブルー・グリーン・パープル各1件）
- 企業の世界観を色で表現
- 1件ずつ狙いが異なる
なぜホワイト系が多いのか。理由は単純で、家電・PC・モバイルは「モノ」そのものが主役になりやすい業種だからです。製品写真の質感やフォルムを引き立てるには、背景をニュートラルにするのが最も確実な手段になります。色で個性を出すより、製品の造形で語らせる。これがこのジャンルの基本的な戦略だと考えられます。
事例1：Melt Mouse ― 白背景で製品美を語らせる王道パターン
Melt Mouseは、革新的なマウス「Melt Mouse」を紹介するプロダクトサイトです。トップに掲げられた「Looks minimal. Feels infinite.」というコピーの通り、白背景の中に手がマウスへ触れる瞬間の写真が大きく配置されています。
【制作者目線】
このサイトの巧みなところは、色ではなく「余白」で製品を語らせている点です。派手な装飾を足さず、Apple的なミニマルデザインに徹することで、視線が自然とプロダクトの造形へ集まる構成になっています。見出しコピーの「Looks minimal. Feels infinite.」というブルーの大きなタイポグラフィだけをアクセントとして残し、それ以外は極力削ぎ落としている。1カラムのシングルスクロールなので、実装難易度としても比較的コントロールしやすい部類です。
【発注者目線】
Kickstarterへの導線が明確に設計されている点は、発注者として学べるポイントです。デザインが美しいだけでなく、「見て終わり」にしないための出口がきちんと用意されている。プロダクトの認知拡大と資金調達という目的に対して、デザインが手段としてぶれずに機能しています。
→ Melt Mouseのサイトを見る（Soreiine!!掲載ページ）
事例2：MI-6 ― ホワイト×ブルーで「先進性」と「親しみやすさ」を両立
MI-6のマテリアルズDX採用サイトは、同じホワイト系でもMelt Mouseとは違うアプローチを取っています。「問いを深め、技術を繋ぎ、明日を拓く。」というコピーとともに、チームメンバーがノートPCを囲んで議論する写真がメインビジュアルに使われています。
【制作者目線】
白背景にブルーのアクセントという組み合わせ自体はMelt Mouseと共通していますが、こちらは「製品」ではなく「人」を主役に据えている点が異なります。テック企業にありがちな無機質さを、人物写真とブルーの爽やかさで中和している構成です。ナビゲーションも「MI-6が目指す未来」「仕事を知る」「人を知る」「環境を知る」と、候補者の関心事に沿ってカテゴリ分けされており、情報設計の丁寧さがうかがえます。
【発注者目線】
採用サイトという性質上、製品の美しさよりも「ここで働くイメージが湧くか」が成果を左右します。チームで議論する写真を選んでいる時点で、単なる企業紹介ではなく「働く現場のリアル」を伝えようとする意図が読み取れます。採用サイトを作る際は、こうした「顔が見える写真」を用意できるかどうかが、デザインの前段階で問われる重要な準備事項になると考えられます。
→ MI-6のサイトを見る（Soreiine!!掲載ページ）
事例3：井上株式会社 ― ブルーグラデーションで技術力と事業の広がりを見せる
井上株式会社のコーポレートサイトは、鮮やかなブルーのグラデーション背景に「Borderless Spiral Solutions.」というダイナミックなタイポグラフィを配置したファーストビューが印象的です。「電気、システム、人の可能性。」というサブコピーが事業領域を端的に伝えています。
【制作者目線】
このサイトはレイアウト分類上「1カラム」ですが、社屋やスタッフの写真をコラージュ風に重ねることで、単調になりがちな1カラム構成に動きを出しています。電気・システム関連という複数の事業領域を持つ企業の場合、1枚の写真だけでは事業の多角性を伝えきれません。写真を重ねて見せる手法は、そうした「事業の幅」を視覚的に補う工夫として理にかなっています。
【発注者目線】
ブルーという色選びは、技術系企業にとって「信頼感」を担保する定番の選択です。派手すぎず、かといって地味にもならない。大胆なフォントサイズで企業のダイナミズムを演出しつつ、色そのものは手堅くまとめる。この「攻めと守りのバランス」は、事業内容が複雑な会社ほど参考にしやすい考え方だと思います。
→ 井上株式会社のサイトを見る（Soreiine!!掲載ページ）
事例4：ハイアール StepNew Label ― グリーンで「暮らしに溶け込む家電」を表現
ハイアールのStepNew Labelは、5件の中で唯一「シングルページ」に分類されるサイトです。自然光の中でカップルが洗濯物を干す、生活感のあるビジュアルがメインに据えられています。
【制作者目線】
家電メーカーのブランドサイトとして、あえて製品そのものを大写しにしていない点が特徴的です。グリーンのカラートーンで統一することで、環境配慮や新しい暮らし方という抽象的なコンセプトを、色の印象だけで伝えようとしています。シングルページ構成なので情報量は多くありませんが、洗濯物を干すシーンひとつに絞り込むことで、スペックの羅列よりも「使っている光景」を先に想像させる見せ方になっています。
【発注者目線】
家電は「スペック」で選ばれる商品と「暮らし方」で選ばれる商品の両方があります。このサイトは明らかに後者を狙っており、スペック訴求のページとは別に、こうしたブランディング専用のページを用意する価値があることを示しています。すべてを1つのサイトに詰め込まず、目的別にページを分けるという発想は、家電メーカーに限らず参考になります。
→ ハイアール StepNew Labelのサイトを見る（Soreiine!!掲載ページ）
事例5：Poolside AI ― パープルのスプリットレイアウトでAIの先進性を打ち出す
Poolside AIのエンタープライズAGIサイトは、5件の中で唯一「パープル系」かつ「スプリットレイアウト」を採用しています。「We build the models. You build the future.」というキャッチコピーを掲げ、左側に白背景のナビゲーション、右側にビビッドなパープルの大きなヒーローエリアという構成です。
【制作者目線】
スプリットレイアウトは実装コストが1カラムより高くなりますが、その分「機能（ナビゲーション）」と「世界観（ビジュアル）」を同時に見せられる利点があります。左を白、右をパープルと明確に分けることで、情報を探しに来たユーザーと、ブランドの世界観に浸りたいユーザーの両方に応える設計になっていると考えられます。
【発注者目線】
AI企業らしい先進性を打ち出すために、あえて業界の定番であるブルーではなくパープルを選んでいる点は注目に値します。「We build the models. You build the future.」という壮大なビジョンを掲げる企業にとって、色の選択そのものが差別化の一手になっている好例です。カラー戦略を考える際は、「業界の定番色を使うか、あえて外すか」を意識的に選ぶ必要があることがわかります。
→ Poolside AIのサイトを見る（Soreiine!!掲載ページ）
自社サイトに活かすポイント
5件を通して見えてきたのは、「家電・PC・モバイル」という業種であっても、デザインの正解は1つではないということです。むしろ、何を主役にするかによって色とレイアウトの選び方が変わっています。
製品を主役にする
- ホワイト背景＋1カラム
- 写真の質感を最優先
人・暮らしを主役にする
- ホワイト or グリーン
- 人物写真・生活シーンを配置
ビジョン・技術力を主役にする
- ブルー or パープル
- コラージュやスプリットで情報量を担保
自社サイトを作る前に、この3つのうちどれを主役にするかを最初に決めておくと、色とレイアウトの迷いが減ります。
もし自社サイトのリニューアルを検討しているなら、まず「何を主役にするか」を言語化することをおすすめします。製品写真に自信があるならホワイト系の1カラムで潔く見せる、採用や企業ブランディングが目的なら人物写真とアクセントカラーで親しみやすさを出す、といった具合に、目的が決まればデザインの方向性は自然と絞られてきます。
製品写真をどう見せるかという実装面では、以下の記事も参考になります。
また、Poolside AIのようなスプリットレイアウトや、井上株式会社の事例のように写真をコラージュ風に重ねる表現を実装する際は、画像の読み込み速度が体感速度を大きく左右します。特にファーストビューに大きな画像を複数配置する構成では、以下のような最適化の知識も欠かせません。
MI-6のように「仕事を知る」「人を知る」「環境を知る」といった複数カテゴリのナビゲーションをタブUIで切り替え表示にする設計を検討している場合は、こちらも参考にしてください。
よくある質問
家電・PC・モバイルのサイトはなぜホワイト系が多いのですか？
製品そのものの造形や質感を主役にするためです。背景をニュートラルにすることで、写真の色や形が際立ち、余計な装飾なしで製品の魅力を伝えられます。Melt MouseやMI-6の事例のように、ホワイトを土台にしつつアクセントカラーで差別化する手法が定番です。
家電系サイトはすべて白系にするべきですか？
そうとは限りません。ハイアールのStepNew Labelのように「暮らしに溶け込む家電」というコンセプトを打ち出したい場合はグリーンを、Poolside AIのように先進性を強く打ち出したい場合はパープルやブルーを選ぶなど、伝えたいメッセージによって最適な色は変わります。まず何を伝えたいかを決めてから色を選ぶ順番が重要です。
1カラムとスプリットレイアウト、どちらを選ぶべきですか？
情報量と目的次第です。今回の5件では1カラムが3件と多数派でしたが、これは実装のしやすさとスクロールの分かりやすさが理由と考えられます。一方でPoolside AIのように「ナビゲーションで探す機能」と「世界観を見せるビジュアル」を同時に成立させたい場合は、スプリットレイアウトが向いています。
採用サイトを作る際に参考にすべき点はありますか？
MI-6の事例が示すように、製品よりも「人」や「働く現場」を主役にする視点が重要です。候補者が知りたい情報（仕事内容、人柄、環境）に沿ってナビゲーションを整理し、チームで議論するような具体的なシーンの写真を用意できるかが、デザインの質を左右します。
この記事のデータはどこまで信頼できますか？
Soreiine!!に掲載しているサイトのうち、家電・PC・モバイルに分類される5件を対象にした実データです。母数が小さいため統計的な断定はできませんが、実在するサイトの実例に基づいた傾向として参考にしていただけます。
