コンサルタントエージェント社の公式サイトは、深い緑を主役に据えた落ち着いた画面と、要素を詰め込みすぎない余白の取り方が印象に残るコーポレートサイトです。組織活性化や階層別研修のように成果が数字で見えにくいテーマを扱いながら、画面のトーンだけで腰を据えて相談できる相手という印象を先に伝えている点が、デザイン面での大きな特徴になっています。
ここでは、大阪府松原市に拠点を置く同社のサイトを、Webデザインの見本という視点で読み解きます。配色、ファーストビューの構図、課題の見せ方、ボタンの統一、下層ページへの導線という順に、画面から確認できる要素にしぼって整理します。
深い緑と黄緑の対比でつくる配色設計
このサイトの配色は、深い緑と黄緑という二つの緑にほぼ絞り込まれています。色数を増やさずに濃淡と面積で差をつけているため、スクロールしても印象がぶれず、どのブロックを見ても同じ会社のページを読んでいる感覚が続きます。
面で使われる深緑が全体を引き締める
深緑は、ヘッダー左の電話ブロック、お悩みリストのチェックマーク、コンテンツ一覧の背景、フッターのナビゲーションといった、画面の骨格になる部分に繰り返し使われています。白に近い明るいグレーの背景と組み合わせているため、緑の面が現れるたびに視線が自然とそこへ集まります。
写真の上に緑を重ねる処理も一貫していて、ファーストビュー、サービスの三枚のカード、コンテンツ一覧の背景まで同じ考え方でそろえられています。素材となる写真の色味がばらついても全体の空気が乱れないので、写真点数の多いサイトを設計するときの参考になります。
差し色の黄緑が行動の入口を示す
黄緑が使われているのは、ヘッダーのメール問い合わせブロックと、ページ最下部にある同じ役割のブロックだけです。深緑が続く画面の中で一か所だけ明度の高い色が置かれているため、問い合わせの入口が探さなくても見つかります。
色で役割を固定する考え方は、リンクやボタンの数が増えるサイトほど効いてきます。ここでは黄緑をメールでの問い合わせ専用の色と決め切っているので、読者は色を手がかりに次の行動を判断できます。
三分割の構図で組み立てたファーストビュー
ファーストビューは、打ち合わせの場面を写した横長の写真に、深い緑の半透明レイヤーと細かい斜線のテクスチャを重ねた構成です。写真の情報量を意図的に抑えているため、中央に置かれた見出しの文字が最初に目へ入ります。
白い縦線が画面に落ち着きを与える
画面は白い細い縦線で三つのブロックに分けられ、外周にも細い枠線が引かれています。写真を大きく敷きながらも間延びせず、額装したような落ち着きが生まれています。
この縦線はページ終盤のコンテンツ一覧でも繰り返し登場します。上下で同じ分割の考え方を使うことで、離れた位置にあるブロック同士がつながって見えます。
中央寄せの見出しと縦組みのScroll表示
見出しは白い文字で二行にまとめられ、字間を広くとって中央に配置されています。その下に二行の説明文が続き、上から下へ文字サイズが段階的に小さくなるため、読む順番が迷わず決まります。
ファーストビューの下端中央には、縦に組まれたScrollの文字が小さく置かれています。目立つボタンではなく細い文字で示すことで、画面の静けさを保ったまま次の動作を促しています。
悩みの提示から解決策へ運ぶ情報設計
ファーストビューのすぐ下には淡い緑の帯が渡され、濃い緑のラベルと更新情報の日付や見出しが横一列に並びます。その先は、読者の悩みを並べるブロック、会社の考え方、サービス紹介という順に進み、初めて訪れた人が知りたい順番に沿って情報が積み上げられています。
チェックマークで整理したお悩みリスト
「こんなお悩みありませんか？」という見出しの下には、四つの項目が横長のバーで並びます。左端に深緑の四角と白いチェックマークを置き、右側の淡い緑の面に文章を載せる形で、幅も高さもすべてそろえてあります。
研修の後に現場の動きが元へ戻ってしまう、社員が受け身になりやすいといった、担当者が抱えがちな状態が短い一文で書かれているため、読者は自社に当てはまる項目を数秒で見つけられます。装飾を足さずチェックマークだけで視線を導く、再現しやすい手法です。
図解と動画で見えにくい部分を説明する
お悩みリストの下には、氷山を使った大きな図解が差し込まれています。水面の上に行動や成果、対応力といった目に見える要素を置き、水面の下に価値観や信念、組織の空気といった見えにくい要素を配置した構成で、文章だけでは伝わりにくい考え方を一枚で示しています。
図解に続けて動画も埋め込まれ、再生や音量を操作する部分がそのまま表示されています。読み物と図と映像という三つの形式を並べることで、読者が自分に合った受け取り方を選べます。
四行の大きな見出しで立ち位置を示すABOUT US
会社紹介のブロックは、それまでの中央寄せから一転して左寄せになります。淡いグレーの大きな文字を四行に折り返し、字間を広くとった見出しが置かれ、その下に三行の説明文と角丸のボタンが続きます。
文字を大きくしても色は濃くしていないため、主張が強くなりすぎず、読み進める速度が落ちません。研修ともコンサルティングとも異なる立ち位置を短い言葉で示す内容が、広い余白と合わさって静かに伝わります。
三枚のカードで見せるサポートメニュー
サポートメニューのブロックでは、三枚のカードが横に並びます。それぞれ写真に緑を重ね、内側に細い白の枠を置き、中央に白文字でサービス名と短い補足を載せる形にそろえてあります。
掲載されているのは、マインド変革、部門別問題解決、90日行動変容という三つです。左から右へ、意識を整える段階、部門の課題に取り組む段階、行動として身につける段階という順に並ぶため、支援の流れがカードの並び順そのもので伝わります。
繰り返しの形で迷わせない導線設計
このサイトは、同じ形のパーツを何度も使うことで導線を分かりやすくしています。新しい形のボタンを増やすのではなく、決めた形を守り続ける方針が全体から読み取れます。
上下に置かれた二つの問い合わせ入口
ヘッダーは左から順に、電話番号を載せた深緑のブロック、CONTACTと記した黄緑のブロック、白地に赤い円と欧文ロゴを置いたブロックが並び、右端には横線を重ねたメニューアイコンが置かれています。ナビゲーションを横一列に広げない代わりに、連絡手段を最上部へ固定して見せる作りです。
ページ最下部にも、同じ配色と並びで電話とメールの二つのブロックが大きく置かれています。上まで戻らなくても同じ判断ができるので、長いページを最後まで読んだ読者を取りこぼしません。
その手前のアクセスのブロックには、郵便番号と大阪府松原市という所在地、地図へ進む小さなボタンが左寄せで置かれています。連絡先と所在地が近い位置にまとまっているため、問い合わせの前に確認したい情報が一度で済みます。
各ブロックの末尾にそろえた角丸のボタン
当社について、サポートメニュー、お客様の声、スタッフ、よくある質問、コンテンツと、それぞれのブロックの終わりには同じ角丸のボタンが置かれています。白地に細い緑の枠線と緑の文字という組み合わせで、大きさもそろえられています。
ボタンの形が共通していると、読者はこの位置に押せるものがあると学習し、次のブロックでも同じ動きで下層ページへ進めます。トップページを目次として働かせるうえで有効な作り方です。
見出しと写真に通したトーン＆マナー
ブロックの区切り方と写真の選び方にも、共通のルールが敷かれています。細部までそろっているため、ページの途中から読み始めても違和感がありません。
英字と日本語を重ねた二段の見出し
ABOUT US、MENU、VOICE、STAFF、FAQ、CONTENTS、ACCESSといった見出しは、字間を広げた英字を大きく置き、その下へ小さな日本語を添える二段構成でそろえられています。英字の左右へ細い横線が伸びる形も繰り返し使われています。
ABOUT USとACCESSだけは左寄せで、ほかは中央寄せという違いがあります。同じ形を保ちながら配置だけを変えているので、単調になりすぎないリズムが生まれています。
人物写真と余白の取り方
使われている写真は、打ち合わせや対話の場面を写したものが中心です。表情が大きく写るものより、手元や姿勢から場の様子が伝わる構図が選ばれていて、研修という形のないサービスを具体的に見せています。
各ブロックの上下には広めの余白が確保され、写真、短い説明文、ボタンという三点の組み合わせが淡々と続きます。情報量を抑えた分だけ一つひとつの要素が読みやすくなり、落ち着いた読後感につながっています。
濃い緑の帯でまとめたコンテンツ一覧
更新記事を並べるブロックだけは、ぼかした写真に濃い緑を重ねた帯になっていて、白い縦線によってファーストビューと同じ三分割の形が再現されています。明るい背景から切り替わるため、ページの終盤でもう一度視線が引き締まります。
カードは上下二段に分かれ、上段に記事の見出し、下段に日付と分類、記事名が並びます。緑の濃さをわずかに変えて段を分けているので、太い罫線を引かなくても情報のまとまりが伝わります。
大阪で組織活性化や階層別研修の相談先を探すときの見方とサイトのまとめ
研修やコンサルティングは形のないサービスなので、サイトの作り方そのものが判断の材料になります。このサイトのように、悩みの提示、考え方、サービスの流れ、担当者の情報、問い合わせ手段が同じ順序で並んでいると、初めて見る会社でも輪郭をつかみやすくなります。
サイトから読み取れる会社の輪郭
コンサルタントエージェント社は大阪府松原市に拠点を置き、代表の廣川 智彦様が研修とコンサルティングの企画を手がけています。サイトでは、2,000名以上の講師ネットワークから組織の課題に合う専門家を選ぶ進め方や、90日間にわたって現場の行動を見守る支援の考え方が紹介されています。
主な研修テーマとしては、理念構築研修やチームビルディング研修、各種の階層別研修、中間管理職に向けたコミュニケーション研修、コーチング研修などが挙げられています。スタッフやお客様の声、よくある質問といったページも用意され、トップページのボタンからそれぞれ確認できます。
依頼先を見比べるときの手がかり
組織活性化や階層別研修の依頼先を探す段階では、掲載されている内容の並び方に注目すると比較しやすくなります。次のような点は、サイトを見るだけでも確かめられます。
- 研修の名称だけでなく、実施した後にどう定着させるのかまで書かれているか
- 誰が担当するのかを知るための情報が用意されているか
- 問い合わせの手段と連絡先が、探さなくても見つかる位置にあるか
- 更新されている記事から、考え方や関心の方向が読み取れるか
深い緑と黄緑という限られた色でまとめた画面、三分割で構成したファーストビュー、形をそろえたボタンの繰り返しなど、コンサルタントエージェント社の公式サイトには、これからサイトを作る方が取り入れやすい工夫が並んでいます。大阪で階層別研修や組織づくりの相談先を探している方は、コンサルタントエージェント社の公式サイトで、実際の画面と掲載内容を確かめてみてください。
