株式会社トータルサポートケイの公式サイトは、性格の大きく異なる2つの事業を、1つの画面の中で対等に見せることに成功しているコーポレートサイトです。淡いミントグリーンと白でまとめられた静かな画面の中で、読者が自分に関係のある事業へ迷わず進めるように情報が整理されています。
複数の事業を1つのサイトに載せると、どちらの説明も中途半端になったり、片方がおまけのように見えたりしがちです。このサイトは、同じ形のブロックを左右反転させながら繰り返すという単純な操作で、その難しさを乗り越えています。
ここでは、ファーストビューの構図から配色、レイアウトの反復、書体の使い分け、ボタンや問い合わせの導線までを、実際の画面で確認できる範囲に絞って読み解いていきます。
性格の異なる2つの事業を対等に見せる情報設計が最大の特徴です
このサイトでいちばん際立っているのは、解体工事と経理・相続という距離のある領域を、どちらも主役として扱う構成です。片方を小さく添えるのではなく、同じ大きさ・同じ形式のブロックを対にして並べているため、読者はどちらの入口から入っても同じ密度の情報にたどり着けます。ここでは、その二軸の考え方が画面へどう落とし込まれているのかを順に見ていきます。
ファーストビューは1枚の写真で事業の二面性を伝えています
最初に目に入る大きな写真には、作業着姿の男性とスーツ姿の女性が並んで歩く場面が選ばれています。左に現場を担う人物、右にオフィス業務を担う人物を置くことで、2つの顔を持つ会社であることが、文章を読む前の一瞬で伝わる構図になっています。
写真の右側には半透明の白いパネルが重ねられ、その上に見出しと説明文が置かれています。パネルは写真の右端からわずかにはみ出す形で配置され、写真の枠と文字の領域がずれて重なることで、平面的になりがちな上部に奥行きが生まれています。人物の顔にかからない位置までパネルを寄せている点も、写真の力を損なわない配慮といえます。
冒頭の2つのボタンで読者を早い段階から振り分けています
説明文のすぐ下には、「解体工事について」と「経理・相続サポートについて」という2つのボタンが横並びで置かれています。どちらも塗りつぶしではなく細い枠線だけで描かれ、幅も高さもそろえられているため、一方が優先されている印象を与えません。
事業が複数あるサイトでは、読者が自分の目的と関係のない説明を読み続けてしまうことが起こりがちです。最初の画面で行き先を2つに分けておく設計は、読み手の時間を無駄にしないという意味でも理にかなっています。
グローバルナビゲーションをファーストビューの下に配置しています
グローバルナビゲーションは画面の最上部ではなく、ファーストビューの写真の下に横一列で置かれています。項目は「ホーム」「解体工事のご案内」「経理・相続のご案内」といった具合に事業ごとにまとめられ、いま開いているページの項目には淡い背景色が敷かれて現在地が分かるようになっています。
最上部には社名と連絡先だけを残し、ナビゲーションを一段下げたことで、開いた直後の視界から要素が減っています。まず写真と見出しに集中してほしいという意図が読み取れる配置です。
色数を絞ったミントグリーン中心の配色が清潔感を生んでいます
配色は、白とオフホワイトを土台にして、青みを帯びたミントグリーンを主役の1色として使う構成です。使う色を絞り込むことで画面全体が静かに整い、力仕事である解体工事と、落ち着いた印象の経理・相続という両極端な内容を、同じトーンの中に収めることに成功しています。
写真の中の色と画面の色を意図的にそろえています
ファーストビューの人物が着ている作業着は、サイトのアクセントカラーに近い淡いグリーンです。写真を選ぶ段階から配色の計画と合わせているため、写真と文字要素が別々に浮かず、1枚の絵としてまとまって見えます。
その一方で、解体現場の写真には黄色の重機や青空がそのまま写り込んでいます。彩度の高い色は写真の中だけに閉じ込め、見出しやボタンには使わないという役割分担ができているため、画面がにぎやかになりすぎません。
淡いミントの面でページの区切りをつくっています
ページの後半に入ると、背景が白から淡いミントグリーンへ切り替わる帯が現れます。ブログとよくあるご質問のまわりを広い面で囲うことで、上から続いてきた事業紹介との切れ目が、文字を読まなくても視覚的に伝わります。
罫線ではなく面の色で区切っているため、境目が硬くならず、スクロールの流れも途切れません。フッターも同じ淡いミントでまとめられ、ページの終わりが自然に閉じられています。
反復とずらしで組み立てられたレイアウトが読むリズムをつくります
2つの事業を紹介する4つのブロックは、同じ骨格を持ちながら左右の配置だけを入れ替えて並んでいます。同じ形を繰り返しつつ向きを変えるという操作で、単調さの回避と、対になっているという関係の提示を同時に果たしています。
左右を入れ替える千鳥配置で対の関係を見せています
解体工事部門の紹介では文章が左、写真が右に置かれ、続く経理・相続部門では写真が左、文章が右へと反転します。施工メニューとサポートメニューの2ブロックでも同じ入れ替えが行われ、下へ進むたびに視線が左右へ振られる仕組みです。
この配置は、読み進めるリズムをつくるだけでなく、2つの部門が並列の関係にあることを形そのもので示す役割も担っています。文章を読み飛ばしてスクロールした人にも、対になった構成であることが伝わります。
細い罫線の枠と大きな英字が余白を設計しています
各ブロックの背後には、細い罫線で描かれた長方形の枠が、写真やテキストから少しずらして重ねられています。塗りではなく線で領域を示しているため、余白を保ったまま、どこからどこまでが1つのまとまりなのかが伝わります。ブロックの脇には水平のヘアラインも伸ばされ、視線が横方向へ自然に流れます。
さらに、「About」「Menu」「Blog」「FAQ」といった英字が、淡いミントグリーンの大きな文字として背景に置かれています。横組みの大きな英字と、縦組みで細長く並べた英字を組み合わせることで、何も置かれていない余白が単なる空きではなく、意図を持った領域として見えるようになっています。
写真を重ねて現場の情報量を伝えています
施工メニューとサポートメニューのブロックでは、2枚の写真が角を少し重ねる形で置かれています。1枚では伝えきれない作業の幅を、重なりによって見せる工夫です。
手前に出した写真を少し小さくしているため、平面の中に奥行きが生まれています。横に並べて置くよりも視線が集まりやすく、そのブロックでは写真側が主役であることがはっきりと伝わります。
書体の使い分けで印象と読みやすさを両立させています
文字の扱いは、役割ごとにていねいに分けられています。印象をつくる部分と、内容を正確に読ませる部分とで書体や字間を変えており、それが画面全体の落ち着きにつながっています。
見出しは字間を広くとった細いゴシック体でまとめています
ファーストビューの見出しや各ブロックの見出しには、線の細いゴシック体が使われ、文字と文字の間隔が広めにとられています。細い線と広い字間の組み合わせは、余白の多いレイアウトとよく合い、大きな文字でも圧迫感を与えません。
長い見出しは2行に分けられ、意味の切れ目で折り返されています。行の途中で語が分断されないように改行位置が調整されているため、大きな文字でも一息で読み取れます。
よくあるご質問の設問だけ明朝体に切り替えています
興味深いのは、よくあるご質問の設問文だけが明朝体で組まれている点です。ほかの見出しや本文がゴシック体でそろえられている中で、ここだけ書体が変わることにより、読者からの問いかけという性格が視覚的に区別されています。
装飾として使われている大きな英字にも、同じくセリフのある書体が選ばれています。日本語のゴシック体と英字のセリフ体を組み合わせる構成は、堅さと柔らかさのバランスをとる手法として参考になります。
本文は小さめの文字と広い行間で圧迫感を抑えています
本文はやや小さめのサイズで、薄いグレーの文字色が使われています。見出しとの明度の差がはっきりしているため、視線はまず見出しへ向かい、そのあと本文へ自然に降りていきます。
1段落あたりの行数が抑えられ、行間も広くとられているので、文章量があっても窮屈に見えません。文字を詰め込まずに余白へ逃がすという判断が、ページ全体で一貫しています。
UIパーツの統一が迷いのない導線をつくっています
ボタンやラベルの形が最後までそろえられている点も、このサイトの完成度を支えています。同じ役割のものは同じ見た目にするという原則が守られているため、初めて訪れた読者でも操作に迷いません。
「Read more」ボタンを同じ形で繰り返しています
各ブロックの末尾には、細い枠線と広い字間で組まれた「Read more」ボタンが必ず置かれています。形も大きさも共通で、色も枠線と文字だけのミントグリーンにそろえられています。
詳細ページへ進む入口が同じ姿で繰り返されるため、読者は一度覚えた操作をそのまま使い続けられます。ブロックごとにボタンの表現を変えないという抑制が、結果として使いやすさにつながっています。
連絡手段をヘッダーとフッターの両方に置いています
ヘッダーの右上には電話番号と「Contact」が縦の区切り線を挟んで並び、ページを開いた直後から連絡手段が視界に入ります。左上には社名が置かれ、左右で「誰のサイトか」と「どう連絡するか」が整理されています。
フッターでは、枠線だけの電話ボタンと、ミントグリーンで塗りつぶされた「Contact」ボタンが横並びになっています。ページ全体を通して塗りつぶしのボタンはこの1か所だけなので、最終的に進んでほしい行き先がひと目で分かる設計です。
質問一覧はアコーディオン形式で縦の長さを抑えています
よくあるご質問は、開閉できるアコーディオン形式でまとめられています。各行は白に近い横長のカードで、左端に「Q」の文字、右端に開閉を示す「＋」のアイコンが置かれ、下辺にはミントグリーンの線が引かれています。
設問だけを一覧で見渡せるため、読者は自分に関係のある項目だけを開いて読み進められます。回答をすべて開いたまま並べる形に比べてページが縦に伸びず、必要な情報へ短い操作でたどり着けます。
サイトから読み取れる事業内容も確認しておきます
デザインの意図を理解する助けとして、掲載されている事業の内容も整理しておきます。株式会社トータルサポートケイは、解体工事を担う部門と、経理・相続を担う部門という2つの柱を持ち、それぞれに拠点が置かれていると紹介されています。
解体工事の窓口となるのは東京営業所で、所在地は東京都足立区梅田一丁目17-3と記載されています。施工メニューとして挙げられているのは、テナントを返却する際の内装の撤去、借りていた区画を元の状態へ戻す原状回復、看板やプレハブといった付帯物だけの撤去、他社の現場を手作業で支える撤去サポートなどです。対応する地域は、一都三県と福岡エリアと案内されています。
もう一方の経理・相続は福岡本社が担当します。会計ソフトへの入力を引き受ける記帳代行、ソフトの導入や社内の経理の進め方を整える記帳コンサルティング、生前の準備から手続きの整理までを扱う相続相談が並びます。工事の現場と会社のバックオフィスという、相談のきっかけがまったく異なる窓口を1つのサイトで受け止めている点が、ここまで見てきた画面構成にそのまま表れています。
2つの事業を1つのトーンでまとめた見本として参考になります
株式会社トータルサポートケイの公式サイトは、扱う領域が大きく異なる2つの事業を、配色とレイアウトの一貫性によって1つのブランドとしてまとめ上げた例です。色を絞る、同じ形のブロックを左右反転させて繰り返す、ボタンの形をそろえるという基本的な操作の積み重ねだけで、読みやすさと統一感が両立しています。
複数の事業やサービスを1つのサイトに載せると、情報を詰め込んだ結果どれも印象に残らなくなることがあります。このサイトのように、入口を早い段階で分け、対になる構成であることを形で示す方法は、そうした課題に対する現実的な答えの1つになります。
写真の質感や、アコーディオンの開閉、下へ進むにつれて背景色が切り替わる感覚は、実際の画面で見るほうがはるかによく伝わります。東京で内装解体の業者をお探しの方も、公式サイトで施工メニューをご確認ください。
