TohL経営相談室の公式サイトは、省エネや化学物質管理、環境マネジメントシステムといった目に見えにくいテーマを、写真とアイコン、控えめな色面の組み合わせで分かりやすく見せているコーポレートサイトです。ヘッダーからフッターまで使う色と要素の型が絞り込まれており、縦に長いページでも印象がぶれません。
東京都杉並区に事務所を置くTohL経営相談室は、省エネルギーの支援や補助金の活用支援、エコステージの認証取得に向けた支援などを手がけています。この記事では、東京で省エネのコンサルや補助金の相談先を探している方にも役立つよう、サイトの配色、写真、情報設計、導線を画面から確認できる範囲で読み解いていきます。
専門知識が前提になるサービスほど、最初の数秒で「何をしている事務所なのか」を伝える工夫が欠かせません。コンサルティング業や士業のサイト制作を検討している方にとって、取り入れやすい手法が多く含まれています。
ファーストビューとヘッダーが伝える第一印象
ページを開いて最初に目に入るのは、色面で区切ったヘッダーと、都市を見下ろす写真に環境のアイコンを重ねたファーストビューです。ここでは、ヘッダーの構成、メインビジュアル、キャッチコピーの文字組み、サイト全体の配色という順に、第一印象を形づくっている要素を分解します。
三つの色面で役割を分けたヘッダー
ヘッダーは横方向に三つの領域へ分かれています。左端は落ち着いた緑の四角い面で、小さな「お問い合わせ」の文字、白い円に収めた封筒のアイコン、英字の「CONTACT」を縦に積み、ここが相談の入口であることを示しています。
中央には白いブロックを置き、「環境経営のパートナー」という短い肩書きとサイト名を二段で組んでいます。このブロックはヘッダーの下端より少し下まで伸びてメインビジュアルに重なり、上辺には紫がかったグレーと濃紺を交互に並べた細い帯が添えられています。ロゴまわりだけが一段前に出て見えるため、サイト名が自然と記憶に残ります。
右側には事務所の姿勢を表す一文を小さな文字で字間を空けて置き、右端は紫がかったグレーの面に、長さの異なる二本の線でメニューのアイコンを描いています。左右の端を色面で閉じることで、ヘッダー全体が一枚の看板のようにまとまっています。
都市の俯瞰写真と六角形アイコンのメインビジュアル
メインビジュアルには、緑の多い公園と高層ビル群が混在する街を上空から捉えた写真が使われています。写真全体に青緑の色調と細かな斜線のテクスチャを重ね、現実の風景を少しだけデジタルな質感に寄せています。
その上には、風車や太陽光パネル、リサイクルマーク、手のひらの上の植物、地球といった図柄を六角形で囲んだアイコンが、大小さまざまな大きさで散らされています。街の風景と環境のモチーフを一枚に同居させることで、企業活動と環境への配慮を結び付けて考えるという事務所のテーマを、文章を読む前に伝えています。
画面の内側には細い白線の枠が引かれ、縦の線で左右と中央の三つの列に区切られています。中央の列だけ色味をわずかに落としてあるため、そこに置かれたキャッチコピーが背景に埋もれずに読めます。
字間を広げたキャッチコピーと控えめなスクロール表示
中央のキャッチコピーは、白く太いゴシック体を大きな字間で二行に組み、「持続可能性」という言葉を鍵かっこで強調しています。その下には扱う分野を一行で示す短い副題が続き、視線が上から下へ無理なく流れる順番になっています。
画面下部の中央には縦書きの「Scroll」と細い縦線があり、続きがあることを控えめに知らせています。アイコンの多い写真の上でも文字情報を最小限にとどめているため、第一印象が散らかりません。
緑と紫がかったグレーを軸にした配色
サイトで使われている色は多くありません。問い合わせの入口に使う落ち着いた緑、見出しの英字やメニュー、フッターに使う紫がかったグレー、ヘッダー上部の帯や封筒アイコンに添えた濃紺、悩みの一覧に登場する明るい青が主な構成です。
本文の背景は白を基本にし、区切りには淡い地色と細い罫線を使っています。彩度の高い色は写真と問い合わせまわりに集められているため、読者が押すべき場所が自然に浮かび上がります。環境をテーマにしながら緑一色に頼らず、紫がかったグレーで知的で落ち着いた印象を加えている点も特徴です。
課題から解決策へ導く情報設計
トップページは、読者の疑問が生まれる順番に沿ってセクションが並んでいます。挨拶で考え方を示し、よくある悩みを並べて自分ごととして受け止めてもらい、事務所の立ち位置とサポートメニューへ進む流れです。この章では、見出しの型、悩みの見せ方、事務所紹介の文字組みを順に見ていきます。
同じ型を置き方で変える見出しデザイン
各セクションの見出しは、大きな英字のセリフ体と、その下に小さく字間を空けた日本語を組み合わせた型で統一されています。英字にはどのセクションでも紫がかったグレーを使い、同じ色で現在地を示しています。
挨拶、サポートメニュー、お客様の声、よくある質問の見出しは中央に置き、左右へ細い罫線を画面の端まで伸ばしています。一方で事務所紹介とアクセスの見出しは左寄せにして罫線を外し、悩みの一覧では日本語を大きく、英字を小さく添える逆の組み方を採用しています。同じ型を守りながら置き方を変えることで、単調さを避けつつ統一感を保っています。
四つの悩みを並べたチェックリスト
「こんなお悩みありませんか？」という問いかけの下には、横長の帯が四本、同じ寸法で並んでいます。帯の左端は青い正方形に白いチェックマークを入れ、右側は淡い地色の上に太字の本文を載せる構成です。
並んでいる悩みは、環境経営を担う人材の不足、有効な省エネの手法が見つからないこと、化学物質の規制対応の難しさ、補助金の申請手続きの分かりにくさの四つです。切り口がそれぞれ異なるため、読者は自社に当てはまる項目を探しながら読み進められ、その後に続くサポートメニューへの関心が高まります。
大きな字間で読ませる事務所紹介
事務所紹介のセクションは左寄せのレイアウトで、見出しの下に三行に分けた大きなキャッチコピーを置いています。文字はグレーの太字で、一文字ずつ大きく間隔を空けて組まれており、ゆっくり読ませるリズムが生まれています。
その下は、事務所が扱う分野を一文でまとめた説明だけにとどめ、角の丸い枠線のボタンで詳しいページへ案内しています。トップページでは要点だけを見せ、詳細は下層ページに任せるという役割分担が、このセクションからも読み取れます。
写真とカードのレイアウトが担う役割
このサイトでは、写真が飾りではなく、内容を先に伝える役割を担っています。配置にも一定の規則があり、余白の取り方と合わせて縦に長いページの読み心地を支えています。
左右に振り分けた二枚の写真
悩みの一覧の後には、二枚の写真が段違いに置かれています。一枚目は作業着の人物とスーツ姿の人物が握手する場面で、画面の左端まで写真を広げ、右側に余白を残しています。
二枚目は、手のひらに載せたガラスの地球儀の周りに六角形のアイコンが浮かぶ写真で、今度は右端へ寄せています。重心を左右で入れ替えることで視線に揺れが生まれ、製造の現場と経営をつなぐ支援、そして環境への配慮という二つのメッセージが順に伝わります。
三つの支援を示すサービスカード
サポートメニューでは、三つの支援内容が横並びのカードで紹介されています。どのカードも写真の上に細かな斜線のテクスチャを重ね、内側に細い白枠を入れて、白い太字の見出しと小さな説明文を中央に配置する共通のレイアウトです。
一枚目の環境マネジメントシステムと補助金を扱うカードには電卓、省エネルギー支援のカードには内側で木が育つ電球、化学物質管理支援のカードには分子模型と実験器具の写真が使われています。三枚目だけ青みを強めた色調になっており、写真の選び方と色の違いで内容の違いを言葉より先に伝えています。
一枚の写真と一文で見せるお客様の声とよくある質問
お客様の声とよくある質問のセクションは、横長の写真、短い説明文、枠線のボタンという同じ組み立てで構成されています。お客様の声には青い作業着を着た二人が笑顔で並ぶ写真、よくある質問には疑問符を描いた木製のブロックの写真が使われています。
写真を見ただけでセクションの内容が想像できるため、説明文は一文で足りています。同じ型を繰り返しているので、読者は次に何が出てくるかを予測しながらスクロールできます。
メインビジュアルを反復するコンテンツ欄
ページ下部のコンテンツ欄では、光を透かした若葉の写真を画面の幅いっぱいに敷いています。細い白線の枠と三つの列に分ける縦線、中央の列にかけた半透明の色面は、ファーストビューと同じ構成です。
中央の列には記事カードが置かれ、サムネイルの下に紫がかったグレーの帯を敷いて、日付とカテゴリー、記事の題名を白い文字で並べています。ページの冒頭と終盤で同じ枠組みを繰り返すことで、サイト全体にまとまりが生まれています。
問い合わせとアクセスへの導線
コンサルティングのサイトでは、相談したいと思った瞬間に入口が見つかるかどうかが大切です。このサイトは入口の数を絞り、色と位置で覚えてもらう方法をとっています。
上下で呼応する緑の問い合わせ入口
問い合わせの入口は、ヘッダー左端の緑の面と、フッターの直前に置かれた緑の帯という二か所に設けられています。どちらも白い円に収めた封筒のアイコンと英字の「CONTACT」を組み合わせているため、同じ入口であることがすぐに分かります。
下部の帯はページの幅いっぱいに広がり、周囲に他の要素を置いていません。ページを読み終えた読者の視線が集まる位置に、ヘッダーと同じ色の入口を用意している点が効果的です。
地図を大きく扱うアクセス欄
アクセス欄は左右二列の構成です。左側には英字の見出しと、杉並区を拠点に全国からの相談に応じていることを伝える短い説明、ピンのアイコンを添えた四角い枠線のボタンを置き、右側には所在地にピンを立てた地図を大きく埋め込んでいます。
住所を文字だけで示すより、周辺の街並みと一緒に地図で見せる方が位置は直感的に伝わります。地図を画面の右端まで広げているため、アクセス欄がページの中で一つの見せ場になっています。
紫がかったグレーでまとめたフッター
フッターは紫がかったグレーの帯に、主要なページへのリンクを縦の区切り線で区切って横一列に並べています。その下にプライバシーポリシーへのリンクと著作権表記を小さく置き、文字の大きさで情報の優先度を示しています。
ヘッダー右端のメニューアイコンと同じ色を使っているため、ページの上端と下端が色でつながり、サイト全体の輪郭がはっきりします。
東京で省エネのコンサルや補助金の相談先を探すときの視点
ここまで見てきたデザインは、TohL経営相談室が扱う仕事の内容と深く結び付いています。事務所が手がける分野と、東京で省エネや環境経営の相談先を探す際に押さえておきたい点を整理しておくと、なぜこの見せ方が選ばれているのかを理解しやすくなります。
省エネのコンサルに相談できること
一般に、省エネのコンサルティングでは、エネルギーの使用状況を把握するところから始まり、無駄の多い設備や運用を洗い出して改善策をまとめていきます。自社だけでは気付きにくい課題を外部の視点で整理できる点が、相談する大きな利点です。
TohL経営相談室の省エネルギー支援では、電力の使用量や設備の稼働状況といった実績データを基に、必要に応じてエネルギー消費量の計測も行いながら、省エネの余地を検討する進め方が紹介されています。支援の例としては、現状の課題を洗い出す簡易診断、実測に基づいて分析する詳細診断、継続的に伴走する省エネ顧問が挙げられています。
省エネと補助金をあわせて相談する意味
空調や照明、生産設備の更新といった省エネの取り組みでは、補助金の活用もあわせて検討されることがよくあります。ただし補助金は種類や対象、申請の方法がさまざまで、自社に合う制度を選び、適切な時期に手続きを進めることが求められます。
TohL経営相談室では、補助金の選定から申請書の作成、交付申請、実績報告までをまとめて支援しています。環境やエネルギーに関連する補助金、省エネ補助金、ものづくり補助金、自治体独自の補助金が主な対象として挙げられており、省エネの実施計画を立てる段階でも補助金などの制度の活用を考慮する方針です。東京で省エネと補助金の両方をコンサルに相談したい企業にとって、窓口を一本にまとめられる点は検討材料の一つになります。
東京でエコステージの認証取得を目指す企業へ
エコステージは環境マネジメントシステムの規格の一つです。TohL経営相談室のサイトでは、マネジメントの水準を5段階に分け、企業の体力や目的に合わせて目標を選びながら段階的に引き上げられる点が特徴として説明されています。ステージ2でISO14001とおおむね同じ水準になることや、各社の経営課題に応じたテーマを仕組みに組み込めることも紹介されています。
認証の評価は、（一社）エコステージ協会の下で評価機関の（一社）東京環境経営研究所が担っており、代表の福井 徹様はそこに所属するエコステージ評価員として認証取得を支援しています。既存の仕事の進め方をなるべく生かし、無理なく運用を続けられる仕組みづくりを重視している点も、東京でエコステージを検討する企業にとって心強い材料です。
運営者の経歴とデザインの一貫性
福井 徹様は、非鉄金属メーカーと調査会社で40年以上にわたり、製造技術の開発や量産設備の立ち上げ、生産管理などに携わってきた経歴をサイトで公開しています。中小企業診断士、熱エネルギー管理士、エコステージ評価員といった資格を持ち、東京都の補助事業である地域金融機関による脱炭素化支援事業の登録専門家にも名を連ねています。
技術と製造を理解したうえで経営を導くという趣旨のヘッダーの一文や、作業着とスーツの人物が握手する写真は、こうした経歴を視覚的に裏付ける役割を果たしています。デザインと事業内容が一貫しているからこそ、専門的なテーマでも信頼感のある見え方になっています。
まとめ：TohL経営相談室のサイトから学べるデザインの工夫
TohL経営相談室のサイトは、色数を絞った配色、色面で役割を分けたヘッダー、左右に振り分けた写真、同じ型を繰り返す見出しとボタンによって、専門性の高い内容を落ち着いて読める形に整えています。都市の写真に六角形のアイコンを重ねたメインビジュアルは、環境と経営を結び付ける事務所の姿勢を一目で伝える好例です。
トップページでは各セクションを短くまとめ、詳しい説明を下層ページへ渡しているため、読者は必要な情報だけを選んで進めます。コンサルティング業や士業のサイトを制作する際には、入口の色と位置をそろえる導線設計とあわせて参考にしてみてください。
実際の画面の雰囲気や支援内容は、東京で省エネのコンサルを手がけるTohL経営相談室の公式サイトで確認できます。
