株式会社エヌビングのコーポレートサイトは、白と広い余白を土台にしながら、深みのあるグリーンと山吹色に近いオレンジだけを差し色として使い分けた、落ち着いた雰囲気の企業サイトです。中小企業の業務改善やDX支援という、形として見えにくいサービスを扱っていますが、画面の要素がていねいに整理されているため、読み手は迷わずに内容をたどれます。
この記事では、横浜市中区に事務所を構える同社のサイトを、Webデザインの見本として読み解きます。ファーストビューの見せ方、配色の役割分担、セクションの並べ方、ボタンの形の統一といった観点から、企業向けサービスを扱うコーポレートサイトに応用できる工夫を順番に取り上げます。
写真一枚で場面を伝えるファーストビュー
結論から述べますと、このサイトの入り口は語りすぎない設計になっています。最初の画面に置かれているのは横長の写真と白いヘッダーだけで、大きな文字のキャッチコピーやスライドショーは使われていません。受け取る情報を絞ることで、続くメッセージへ視線を送り出す形が選ばれています。
文字を重ねないヒーローエリア
ヒーローの写真は画面の左右いっぱいまで広がり、下端はまっすぐ水平に切られています。写っているのは、手を動かしながら話す人物の手元と、テーブルを挟んで向き合う相手の腕、そして開かれたノートパソコンです。背景のガラス張りのオフィスは大きくぼかされ、明るい光だけが残ります。
写真の上に文字を重ねていないため、最初に伝わるのは打ち合わせの場面という空気だけです。スクロールして初めて言葉によるメッセージが現れる流れになっており、画像と文章の役割がはっきり分かれています。読ませる前にまず雰囲気をつかんでもらう順序といえます。
ヘッダーの並びと右上に置かれたボタン
ヘッダーは白い帯で、左端にロゴマークと社名、右側に事業内容・会社概要・お知らせ・ブログ・採用情報などのテキストリンクが並びます。文字色と文字サイズが揃えられているため、項目数があっても一続きの並びとして無理なく読めます。
その右端だけが山吹色に近いオレンジで塗られ、問い合わせの入口になっています。ナビゲーションの中で色が付いているのはこの一か所だけで、しかも画面の右上隅まで届く四角いブロックとして置かれているため、視線が右へ流れきったところで自然に止まります。
ロゴマークは、頭文字を右肩上がりの階段状に配置し、それぞれの文字の足元に金色のブロックを敷いた形です。明朝系の細い欧文と金色の面が組み合わさり、白い帯の中でも小さな面積で存在感を保っています。
無彩色を土台にして、色は押せる場所だけに使う
配色の設計は、このサイトでもっとも参考になる部分です。面積の大きい背景と本文は白と黒に近いグレーでまとめられ、彩度の高い色は操作できる要素にだけ現れます。色数を絞る判断が、そのまま迷いにくさにつながっています。
白と余白がつくる読みやすさ
背景は基本的に白で、本文の文字は黒に近い色です。見出しの欧文は細めのゴシック体を大きく使い、字間をゆったり取っています。日本語の見出しも同じように字間が空けられ、線の細い書体で組まれているため、堅くなりすぎません。
セクションとセクションの間には、たっぷりとした空白が挟まれています。行間も広く取られ、考え方を述べたブロックの文章は一文ずつ改行されているため、量のわりに圧迫感がありません。文章を読ませたい場所と、視覚で見せたい場所の切り替えが明快です。
グリーンと山吹色の役割分担
差し色は二系統です。ひとつは深みのあるエメラルドグリーンで、丸い矢印ボタンの輪郭、お知らせのカテゴリーを示す小さなバッジ、下部にある専用の窓口へ進むボタンに使われています。もうひとつは山吹色に近いオレンジで、ヘッダー右上のボタンと、フォームへ進むボタンに限って登場します。
さらに、電話番号を載せたボタンや採用情報のボタンには、白とほとんど差のないベージュが当てられています。同じボタンでも、強く押してほしいものは彩度の高い塗り、そうでないものは淡い塗りという具合に、優先度が色の濃さで表現されています。
問い合わせのブロックだけは、背景がクリーム色から淡いミントグリーンへ横に流れるグラデーションになり、その上に白いカードが浮かびます。ページの終盤で色味が一段やわらぐため、締めくくりの場所だと感覚的に伝わります。
セクションの並べ方に表れた情報設計
ページは、大切にしている考え方の提示から事業内容、強み、お知らせ、採用情報、問い合わせへと進みます。会社を知ってもらう順番と、行動してもらう順番が重ねられており、下へ読み進むほど具体的な情報に近づく構造です。
英字見出しと日本語のサブタイトルで揃えたリズム
各セクションの見出しは、大きな欧文の下に小さな日本語を添える形で統一されています。Our Vision、Service、Strength、News、Recruit、Contactと続く並びは書体も大きさも共通で、スクロールの途中で話題が変わる合図として働きます。
見出しの位置は、左寄せと中央揃えが使い分けられています。文章を読ませるセクションでは左寄せ、写真の上に重ねるセクションでは中央揃えとなっており、同じ型の繰り返しが単調にならないよう調整されています。
事業内容を支援の順番どおりに並べる
事業内容は三つの行に分かれ、左に角丸の写真、中央に見出しと説明文、右端に詳細へ進む小さなリンクという同じ型で並びます。行と行の間は細い罫線だけで区切られ、カードで囲い込まないぶん軽やかに見えます。
並び順は、業務の整理と推進の設計、システムの導入と活用の設計支援、運用の定着と社内展開という流れです。支援が進む順番がそのまま上から下への並びになっているため、読み手は自社の状況を当てはめながら読み進められます。それぞれの詳細ページでは、担当する範囲がさらに細かい項目に分けられ、相談から契約までの進み方も段階を追って示されています。
写真を敷いた一面で流れに区切りを入れる
強みを紹介するセクションだけは、打ち合わせ中の手元を写した写真を背景いっぱいに敷き、その上にグレージュのベールをかけています。白い見出しと六枚の白いカードが重なり、明度が反転するため、白基調のページの中で強い区切りになります。
カードは横三列を二段に並べ、左上に淡いミントグリーンの数字、その隣に短い言葉という構成です。説明文ではなく短いラベルで並べることで、六つの特徴を一目で見渡せるようにしています。数字の色を淡くしているので、読ませたい言葉のほうが前に出ます。
迷わせないUIと問い合わせの導線
操作できる要素の形は、ページ全体でよく揃えられています。同じ意味のものは同じ形にするという原則が守られているため、初めて訪れた人でも次に何が起きるのかを予想しやすい画面になっています。
丸い矢印ボタンで続きがあることを示す
考え方を述べたブロックの末尾、事業内容の各行、お知らせの一覧へ進む位置には、いずれも細い円の中に右向きの矢印を入れた同じボタンが置かれています。輪郭はグリーン、内側は白で、大きさもほぼ共通です。
矢印の向きがすべて右に揃えられている点も見逃せません。読み進む方向と矢印の方向が一致しているため、押した先に話が続くという感覚が自然に生まれます。装飾としてではなく、意味を持たせて形を統一した例です。
問い合わせの入口を色で描き分ける
問い合わせのブロックには、白いカードの中に性格の違うボタンが並びます。左側には電話番号と受付の時間帯を載せた淡いベージュのボタン、右側にはフォームへ進むオレンジのボタンが横並びで置かれ、その下に、提案や紹介のための窓口がグリーンのボタンとして分けられています。
用件によって進む先が変わる場面では、同じ見た目のボタンを並べると迷いが生まれます。ここでは塗りの色と大きさを変えることで、押し間違いが起きにくい形に整えられています。ボタンの間隔も十分に取られています。
情報を集約したフッター
フッターは濃いチャコールグレーで、ページ全体の中で唯一の暗い面です。左側に社名と郵便番号を含む所在地、最寄り駅からの所要時間が並び、住所の行末には外部リンクを示す小さなアイコンが添えられています。
右側には、業務分野、事務所について、お知らせや採用情報といったリンクが列ごとに分けて配置されています。左下にはセキュリティへの取り組みを示すマークと外部サービスのロゴが縦に並び、最下段に方針やポリシーへのリンクと著作権表示が置かれています。
中小企業のDXというテーマの伝え方
デザインの話から少し視点を移して、扱うテーマと構成の関係も見ておきます。DXという言葉は指す範囲が広く、読み手によって思い浮かべるものが違うため、どこからどこまでを扱うのかを画面で示せるかどうかが、伝わり方を大きく左右します。
現場の困りごとから考える入口
社内の情報管理では、エクセルでの管理をやめたいという声や、同じ内容を別のシステムへ入れ直すデータ入力の二度手間に悩む場面がよく聞かれます。担当者が代わるたびに手順を思い出せず、引き継ぎのマニュアルが作れないまま運用が続いてしまうこともあります。
こうした困りごとは、ツールを増やすだけでは解きほぐしにくい種類の課題です。このサイトでは、事業内容の一つ目に業務の流れを整理する工程が置かれ、導入より前に現状を見える化するという考え方が説明されています。読み手の困りごとと支援の入口が対応する並びになっている点が、内容の分かりやすさにつながっています。
整理・導入・定着という三つの段階
紙のファイルで顧客情報をまとめたい、あるいは探しやすい形に置き換えたいといった相談も、道具を選ぶだけでは終わりません。誰がいつ更新するのかという決めごとが整わなければ、新しい仕組みは使われなくなってしまいます。
サイトの構成は、整理、導入、定着という三つの段階に分けられています。段階ごとに見出しと説明が独立しているため、読み手は自社の状況に近いところから読み始められます。情報設計とサービスの組み立てが同じ骨組みで揃えられている例として参考になります。
まとめ：白と余白で信頼感を組み立てた企業サイト
株式会社エヌビングのサイトは、派手な演出に頼らず、余白と統一されたパーツで内容を伝えるコーポレートサイトです。白と黒に近いグレーを土台に、グリーンと山吹色を操作できる場所だけに使うという方針が全体で守られており、色そのものが道案内の役割を果たしています。
セクション見出しの型、丸い矢印ボタン、罫線だけで区切る一覧など、繰り返し使う要素が少ない種類にまとめられている点も学べるところです。要素の種類を絞ることは、公開後の更新のしやすさにも効いてきます。落ち着いたトーンで専門的なサービスを紹介したい企業にとって、下敷きにしやすい作りです。
余白の取り方やスクロールしたときの見え方は、実際の画面で確かめるほうが分かりやすいはずです。横浜でDXを頼みたいときに参考になる株式会社エヌビングの公式サイトもあわせてご覧ください。
