インテリジェンス・モールは、北海道釧路市に本社を置き、住宅ローン、不動産、建築、保険、事業コンサルまでを一社で扱う会社のコーポレートサイトです。扱う分野が広い会社のサイトは情報が散らかりやすいものですが、このサイトは白とグレーの落ち着いた配色と、番号を振った整然とした構成でそれを防いでいます。
本記事では、釧路や根室で不動産仲介やリフォームの相談先を探す方が目にするこのサイトを、配色、ファーストビュー、写真、余白、フォント、導線の観点から分析します。複数の事業を一つのサイトにまとめたい方にとって、参考にしやすい見本です。
インテリジェンス・モールのサイトデザインの全体像
このサイトのデザインは、色数を抑えた画面に大きな写真と明朝体の見出しを置き、信頼感と親しみやすさを両立させている点に特徴があります。住まいと暮らしの相談を受ける会社として、派手さよりも落ち着きを優先した設計です。以下では、その土台になっている配色と文字の扱いを順に見ていきます。
白と淡いグレーを基調にした配色
背景は白と、わずかに温かみのある淡いグレーの2色で構成されています。導入部分と一部の事業紹介は淡いグレー、それ以外は白というように、区画ごとに背景を切り替えることで、罫線を引かなくても話題の区切りが伝わります。
差し色は多くありません。ボタンとフッターには濃いグレーを使い、事業紹介の番号には淡いベージュ、ロゴには茶系の色と小さな赤い点が使われています。お知らせの「NEWS」の文字だけは落ち着いた緑で、画面の中で控えめなアクセントになっています。色を絞っているため、写真の青空や木目の色が自然に引き立ちます。
明朝体とゴシック体の使い分け
見出しには明朝体、説明文には太めのゴシック体が使われています。大きな見出しを明朝体にすることで、住まいという長く付き合う分野にふさわしい上品さが生まれています。
一方で、説明文は小さめの太いゴシック体で、行間を広く取って組まれています。文字は小さくても線が太いため、淡いグレーの背景の上でも読みにくくなりません。日本語の見出しの下に小さな英語表記を添える組み方も全体で統一されており、ページに一定のリズムを与えています。
ファーストビューの構成
ファーストビューは、左側の白いナビゲーション領域と、右側の大きな写真という2つの要素で構成されています。画面を縦に分割するこの構図は、上部にメニューを置くサイトとは違う印象を与え、最初の画面で会社の姿勢と行き先の両方を示しています。ここでは3つの要素に分けて説明します。
左側に縦に並ぶナビゲーション
画面の左側には白い領域があり、上部にロゴ、その下にメニューが縦一列に並んでいます。住宅ローン、不動産、建築といった住まいの項目から始まり、保険、事業コンサル、会社案内、お問い合わせへと続きます。横並びのメニューと違って項目名が長くても窮屈にならず、事業の数が多い会社に合った形式です。
メニューの下には、プライバシーポリシーなどの方針に関するリンクが一段小さな文字でまとめられています。文字の大きさで主要なメニューと補足的なリンクを分けているため、目的の項目を見つけやすくなっています。
握手の写真と縦書きのコピー
右側には、スーツ姿の二人が握手を交わす写真が大きく配置されています。背景の窓から光が差し込む青みのある写真で、誠実さや清潔感が伝わります。顔を写さず手元に焦点を合わせているため、見る人が自分の相談の場面を重ねやすい構図です。
写真の右上には、事業を支える相手であることを伝えるコピーが白い明朝体の縦書きで添えられています。縦書きは横書きの多いウェブ上で目を引きやすく、写真の中央にある握手を隠さない位置に収まっています。
写真に重なるお知らせの帯
ファーストビューの下部には、白い横長の帯が写真に重なるように置かれています。帯の中には「NEWS」の文字とお知らせの見出しが1件、右端には矢印が表示されています。
写真と背景の境目をまたぐ配置のため、帯そのものが視線を引き留める役割を果たしています。お知らせを目立たせながら、写真の印象を損なわない大きさに抑えられています。
導入部分の写真と余白の使い方
ファーストビューの次に現れる導入部分は、大きな見出しと複数の写真を組み合わせ、余白をたっぷり取った構成です。会社が何を解決するのかを、文章と写真の両方で伝える区画になっています。写真の置き方と見出しの配置には、それぞれ工夫が見られます。
大きさの違う写真を重ねたレイアウト
この区画では、明るいリビングの写真、椅子と観葉植物の写真、パソコンを操作する手元の写真、複数の人が手を重ねる写真が、大きさと位置をずらして配置されています。写真の端が少しずつ重なっており、格子状に整列させた場合よりも動きのある画面になっています。
住空間の写真と仕事の場面の写真が混ざっている点も重要です。住まいの相談と事業の相談の両方を扱う会社であることが、説明を読む前に写真から伝わります。
2つの見出しによる視線誘導
導入部分には大きな明朝体の見出しが2つあり、1つ目は左側、2つ目は右側に置かれています。1つ目は住まいの問題を解決する会社であること、2つ目は事業の立ち上げを支えることを伝える内容です。
見出しの位置を左右に振り分けることで、視線は左上から右下へと自然に流れます。それぞれの見出しの下には数行の説明文が続き、周囲に広い余白があるため、文字量が多くても圧迫感がありません。
番号付きで整理された事業紹介の情報設計
トップページの中盤から後半は、01から06までの番号を振った紹介区画が続きます。住宅ローンから会社案内までの6つの入口を、同じ型で順番に見せる構成です。扱う内容が多いサイトで情報を整理する手法として、参考になる部分が多くあります。
淡い色の番号と見出しの組み方
各区画には、細い線の大きな数字が淡いベージュで添えられています。数字は大きいものの色が薄いため、主張しすぎずに順序だけを伝えています。
数字の近くには明朝体の見出し、小さな英語表記、短い説明文が決まった順で並びます。どの区画も同じ組み方なので、一度読み方を覚えれば、残りの区画を短い時間で読み進められます。
左右の入れ替えと全幅写真による変化
6つの区画は同じ要素で構成されていますが、配置は一つずつ変えてあります。写真が左で文章が右の区画、文章が左で写真が右の区画、画面の幅いっぱいに写真を置いてその下に文章を並べる区画が交互に現れます。
不動産の区画では青空の下に住宅が並ぶ街並みの写真、保険の区画では担当者と向き合って話す二人の写真が全幅で使われています。建築の区画には住宅模型と図面、住宅ローンの区画には木製の家の小物とノートの写真が選ばれており、写真を見るだけで区画の主題がわかります。背景色も白と淡いグレーが切り替わるため、縦に長いページでも単調になりません。
形をそろえたボタンによる導線
各区画の末尾には、詳細ページへ進むためのボタンが置かれています。濃いグレーの地に白い文字、両端が丸い横長の形、右端の小さな矢印という仕様が6つすべてで共通しています。
ボタンの色はフッターと同じ濃いグレーで、淡い背景の上でもはっきり見分けられます。文言も統一されているため、押すと詳しい説明に進めることが直感的に伝わります。装飾を増やさず、形と色の一貫性で導線をつくっている点は、多くのサイトで応用できる考え方です。
アクセス情報とフッターのまとめ方
ページの終盤には「ACCESS」という見出しの区画があり、その下に濃いグレーのフッターが続きます。フッターの左側には白いロゴと所在地、電話番号、方針に関する小さなリンクがまとめられ、右側には矢印付きのメニューが縦に並んでいます。
ファーストビューの左側にあったメニューと同じ項目がフッターにも用意されているため、ページを最後まで読んだあとに上へ戻らなくても次のページへ進めます。淡い色で進んできたページを濃い色で締めくくることで、全体の印象も引き締まっています。
釧路や根室で不動産仲介・リフォームの相談先を探すときの見方
釧路で不動産仲介の会社を探す場合も、根室で不動産仲介を検討する場合も、サイトを見る際は「何を相談できるのか」と「どこに連絡すればよいのか」がすぐにわかるかどうかが大切です。住まいの相談は、物件探しだけでなく、住宅ローンや建物の工事、保険といった話題に広がることが少なくありません。
インテリジェンス・モールのサイトでは、不動産のページで売買、投資、賃貸、テナントの各物件一覧への入口が案内されています。住宅ローンのページでは、住宅金融支援機構が提供する【フラット35】が取り上げられており、釧路でフラット35について調べている方が制度の概要に触れられる構成です。
建築のページには、釧路市内で手がけた新築注文住宅や増改築、リフォームの事例が掲載されています。釧路でリフォームを考えている方にとって、相談前に仕上がりの雰囲気を確かめられる材料になります。不動産、住宅ローン、建築の入口がトップページに同じ型で並んでいるため、関連する相談を一つのサイト内でたどりやすい点も、このデザインの利点です。
まとめ：インテリジェンス・モールのサイトから学べること
インテリジェンス・モールのサイトは、白と淡いグレーの配色、明朝体の見出し、左側に縦に並ぶメニュー、番号付きの事業紹介によって、幅広い事業を整然と見せています。写真の配置や背景色には変化をつけながら、見出しの組み方とボタンの形は統一しており、変化と一貫性のバランスが取れています。
運営する株式会社インテリジェンス・モールは、北海道釧路市愛国西に本社を置き、不動産仲介や新築・増改築、住宅ローン、保険、事業や資産設計の相談を取り扱っています。宅地建物取引業の免許と建設業の許可を持つことも、会社案内のページに記載されています。複数の事業をまとめるコーポレートサイトの設計を考える際は、実際の画面で余白や写真の重なり方を確認してみてください。
