神奈川県鎌倉市を拠点とするNico合同会社の公式サイトは、白と黒だけで組み立てた静かな画面と、大きく取った余白で自社の考え方を伝えるコーポレートサイトです。装飾を足すよりも要素を減らす方向で設計されているため、置かれている言葉と写真が自然と目に入ってきます。
この記事では、ファーストビューの見せ方から配色、書体、写真の選び方、セクションごとのレイアウト、そして導線の組み立て方までを、実際の画面をもとに読み解いていきます。表現やものづくりに関わる企業のサイトを検討している方が、構成のヒントを得やすい一例だと感じました。
白と余白でブランドの姿勢を伝えるモノトーン設計
このサイトの第一の特徴は、色数を極端に絞ったモノトーンの設計にあります。背景は白かごくわずかに温かみのあるグレーで、文字はほぼ黒に近い濃色、写真も大半がモノクロで統一されているため、画面全体が一冊の作品集のような落ち着いた印象にまとまっています。
色で目を引く手法をとらない代わりに、余白の量と要素の並び方で強弱をつくっているところに、このサイトの設計思想がよく表れています。
色を許すのは写真だけという配色ルール
画面の中で彩度の高い色が出てくるのは、ファーストビューの写真と、ページ下部にあるお知らせ枠のサムネイル画像、そして見出しに添えられた細いオレンジ系のラインだけです。文字やボタンには色を持たせず、色は写真の役目にしているため、少ない要素でもメリハリが生まれています。
配色を絞ると単調になりやすいのですが、写真そのものが持つ色の情報量が高いため、画面が寂しく見えません。色数を増やさずに印象をつくりたいサイトにとって、参考になる考え方です。
明朝体を主役にした文字組み
見出しにも本文にも明朝体系の書体が使われ、英字の見出しは一文字ずつ字間を広げて配置されています。線の細い書体を大きめのサイズで置き、行間もゆったり取っているため、読みやすさと落ち着いた空気が同時に生まれています。
日本語の本文は、行の長さをそろえるためではなく意味の区切りで改行されている箇所が多く、詩のような読み心地になっています。文章量を絞ったサイトだからこそ成立する組み方で、言葉をひとつずつ受け取ってほしいという意図が読み取れます。
ファーストビューの構成と視線誘導
ページを開いて最初に目に入るのは、黒を基調にした横長の写真と、その上に重ねられた白い英文の見出しです。ここでサービスの説明を並べるのではなく、世界観を先に提示する組み立てになっています。
額装のように余白を残した写真の置き方
ヘッダーの下に置かれた写真は画面いっぱいには広げず、左右と上に白い余白を残した状態で配置されています。写真が画面から切り離されて一枚の作品のように見えるうえ、白いヘッダーとの境目もはっきりするため、上部のメニューが写真に埋もれません。
写真の中では、電球を思わせる被写体と濡れた面の反射が虹色に光っており、モノトーンのページの中でここだけが強い彩度を持ちます。写真の情報量が多い分、重ねる文字は白一色に絞られていて、両者がぶつからないよう配慮されています。
縦組みの「SCROLL」と二行に分けた見出し
見出しは「Life is about」と「Creating Yourself」を二行に分けて左寄せで配置し、字間を大きく開けることで写真の上でも読み取りやすくしています。行を分けたことで、視線が左から右へ、そして下へと自然に流れます。
写真の右端には縦組みの小さな「SCROLL」の文字と細い縦線が置かれ、続きが下にあることを静かに知らせています。大きな矢印を置くような主張の強い方法をとらず、余白の中に小さく添える形にした点が、全体のトーンとよく合っています。
セクションごとに構図を変える情報設計
このサイトは扱う情報の性格に合わせて、セクションごとにレイアウトの型を切り替えています。同じ幅の文章が続くのではなく、中央揃え、二段組み、左右交互といった構図が順番に現れるため、下へ読み進めても単調になりません。
Our Mission ― 中央揃えと白いカードの対比
ミッションを紹介するセクションは、中央揃えの英字見出しの下に短い横線を引き、その下に同じ英文のコピーを添える構成です。見出しと本文の間に線を挟むことで、区切りがはっきりします。
その下は左右二段の構成で、左側には影の付いた白いカードの中に円を描いた筆跡のロゴマークが置かれ、右側に日本語の文章が並びます。文章量の多い右側に対して左側はほとんどが余白のため、視線がまずロゴへ向かってから文章へ移っていきます。
WHAT WE DO ― 一段組みの読み物として整理する
事業領域を説明するセクションは、中央に置いた英字見出しの下に、幅を抑えた一段組みの文章が続く構成です。行の長さが画面幅いっぱいに広がらないよう制限されているため、長めの文章でも目線の折り返しが短く済みます。
ここでは、アートに関わる企画やクリエイティブディレクション、音楽や映像といったコンテンツづくり、ソフトウェアやシステムの設計と開発、Webサイトやデジタル製品の制作と運営、さらにシーシャに関わる店舗の運営や商品開発まで、幅広い領域に取り組んでいることが説明されています。
Our Creative ― 三つの領域を左右交互に並べる
三つの取り組みを紹介するセクションでは、背景がわずかに温かみのあるグレーへ切り替わり、前後のセクションと区別されています。中央揃えの見出しと短いリード文の下に、写真と文章の組が三つ続きます。
見出しはArt / Creative Project、Product Development、Design & Systemと英字で並び、それぞれに日本語の説明が添えられます。二つ目では、シーシャミックスを記録するアプリ「Mokulog」の企画から運営までを手がけていることが紹介されています。
配置は、一つ目が写真左、二つ目が写真右、三つ目がふたたび写真左というように左右を交互に入れ替えた形です。同じ形の繰り返しにならないため、三つを並列の情報として読み比べやすく、縦に長いページでもリズムが生まれています。写真はいずれもモノクロで、柔らかい影が添えられている点も共通しています。
News ― 書体と色を切り替えて更新情報を見せる
お知らせの枠では、それまでの明朝体と中央揃えから一転して、左寄せのゴシック体の見出しに短いオレンジ系のラインが添えられます。世界観を語る上のセクションと、更新されていく情報を扱うこの枠とで、役割の違いが見た目からも伝わります。
記事は、左にサムネイル画像、右に日付と見出しと短い説明を縦に積んだ横並びのカードで表示されます。彩度の高いサムネイルが白い背景の中で目立つため、ページ下部でも視線が止まりやすくなっています。
余白と写真の使い方に学べる点
このサイトでもっとも印象的なのは、余白を惜しまない構成です。要素を詰め込まずに空いた場所を残すことで、置かれているものの重みが増しています。
ほぼ白一色の写真が生む間
ページの中ほどには、画面いっぱいに広がる雪原の写真が挟まれています。ほとんどが白で占められ、小さな人物がひとりだけ横切っている構図のため、一見すると余白のようにも見えますが、これは意図してつくられた間です。
セクションとセクションの境にこの写真が入ることで、読み手の呼吸が一度整い、続く事業説明が頭に入りやすくなります。写真を大きく使いながら情報量は増やさないという、思い切った使い方です。
背景色のわずかな差でセクションを区切る
区切りに線を多用せず、白とごく薄いグレーの切り替えでセクションの境目を示している点も特徴です。色の差が小さいため、境目が主張しすぎることなく、それでいて場面が変わったことは伝わります。
線や囲みを増やすと画面が硬くなりがちですが、背景の明度差だけで区切ると、静かな印象を保ったまま構造を示せます。落ち着いたトーンを崩したくないサイトで応用しやすい手法です。
ナビゲーションと導線の考え方
情報を詰め込まない方針は、メニューや導線の設計にも一貫しています。選択肢を増やして迷わせる代わりに、見せたい順番をページの縦の流れで表現する組み立てです。
三項目に絞ったグローバルナビ
画面上部のヘッダーは白い背景で、左にロゴタイプ、右に「Top」「About」「Contact」の三項目だけが並びます。項目数を絞ったことで、文字を小さめにしても押し間違えにくく、ファーストビューの写真の邪魔にもなりません。
グローバルナビの「Contact」から進むページには問い合わせフォームが用意され、返信までの目安や、打ち合わせを希望する場合に日程の候補を添えてほしいという案内が書かれています。送ったあとの流れが事前に分かるため、問い合わせる側の不安が小さくなります。
フッターまでトーンを崩さない締めくくり
ページの最後は、細い罫線と円を描いた筆跡のロゴマークだけを置いた静かなフッターです。リンクを大量に並べる作りではないため、読み終えた余韻がそのまま残ります。
フッターに情報を集める設計も一般的ですが、このサイトでは本編の流れを最後まで乱さないことが優先されています。ページ全体をひと続きの読み物として設計したい場合の参考になります。
映像やアート表現を扱う会社のサイトづくりで意識したいこと
ここからは、映像やアートといった表現を扱う会社がサイトをつくる際の一般的な考え方を整理します。制作物そのものが仕事の証しになる分野では、サイトの見え方が仕事の印象に直結します。
世界観と実務情報のバランス
世界観を伝える表現に偏りすぎると何を相談できるのか分からなくなり、逆に実務的な情報だけを並べると印象が残りません。上から順に、世界観、考え方、取り組む領域、問い合わせという流れをつくると、両者を無理なく両立させられます。
Nico合同会社のサイトも、最初に大きな写真とコピーで印象をつくり、そのあとで領域の説明へ進む順序になっています。読み手の関心が高まった段階で具体的な話へ移る構成です。
写真のトーンをそろえる
複数の分野を扱う会社ほど、載せる写真の系統がばらつきやすくなります。モノクロに統一する、明るさをそろえる、影の付け方を合わせるといった処理を先に決めておくと、扱う領域が広くてもひとつの会社としての印象がまとまります。
色や質感の異なる写真を並べたい場合でも、置く枠の大きさや余白の取り方を共通化しておけば、統一感を保ちやすくなります。写真の選び方は、言葉以上に会社の姿勢を語る要素です。
まとめ：Nico合同会社の公式サイトに学ぶ、余白で語るデザイン
Nico合同会社の公式サイトは、色数と要素を絞り込み、余白と写真の力で自社の考え方を伝えるコーポレートサイトです。額装のように余白を残したファーストビュー、明朝体を主役にした文字組み、左右交互に並ぶ三領域の紹介、背景の明度差による区切りなど、静けさを保ちながら情報を整理する工夫が随所に見られます。
装飾を足して目を引くのではなく、引き算で印象を残したいサイトにとって、実践しやすいヒントの多い構成です。写真の質感や画面の間の取り方は実際に見たほうが伝わりますので、気になった方は公式サイトで確かめてみてください。
