株式会社幸栄美創の公式サイトは、クリーム色に近い生成りの下地に明るい青緑を差し色として重ねた、静かな雰囲気の清掃業のサイトです。エアコンクリーニングやハウスクリーニング、定期清掃、高所作業といった性格の異なる業務をひとつのページで扱いながら、使う色と装飾を絞ることで画面が散らかった印象になっていません。
この記事では、静岡県沼津市に拠点を置く同社のサイトを、Webデザインの見本として読み解きます。ファーストビューの写真の選び方、配色と書体の組み合わせ、画面の下に固定された連絡用のバー、各区画から下層ページへ送り出す導線といった観点から、地域に根ざしたサービス業のサイトに応用できる工夫を順番に取り上げます。
高所作業の場面を切り取ったファーストビュー
結論から述べますと、このサイトは最初の一画面だけで仕事の性格を伝える組み立てになっています。トップに置かれているのは、ロープで身体を支えながらガラス張りの建物を清掃する二人の作業員をとらえた横長の写真で、扱う業務の難度が言葉より先に伝わってきます。
明暗差の強い写真と白い明朝体の重ね方
写真は、明るいガラス面を背景に作業員がほとんど影絵のように写る構図で、暗い人物と淡い建物の明暗差がそのまま画面の骨格になっています。色味は青みがかった灰色に寄せられていて、その後に続く青緑の差し色とも無理なくつながります。
中央には白い明朝体のキャッチコピーが二行に折り返して置かれ、その下に一回り小さな文字で短い一文が添えられます。文字が重なるのは写真の中でも明るさが安定している中央付近だけなので、背景に沈まずに読み取れます。画面の下端には短い横線のスクロールの合図だけが控えめに置かれ、次の内容へ視線を送り出します。
ヘッダーの構成とロゴの図案
ヘッダーは写真に重ねるのではなく、その上に独立した生成り色の帯として置かれています。上段の右側にサイトの名称と短い一文が細い縦線で区切られて並び、下段に主要なページへのテキストリンクが横一列に続く二段構成です。
左端のロゴは、太い欧文の社名の背後に青緑の同心円を波紋のように広げ、文字の点の部分だけを橙色の丸に置き換えた図案です。その足元には小さな欧文の一行が添えられています。生成りの帯の中で青緑と橙色だけが色を持つため、面積が小さくても視線の起点として働きます。文字の色と大きさが揃えられたリンクの並びは、項目数があっても一続きの列として無理なく読めます。
色数を絞り、押せる場所だけを塗り分ける配色
このサイトの配色は、下地・文字・操作する部分の三つに役割がはっきり分かれています。画面の大部分を生成りと白が占め、彩度の高い色は先へ進むための場所に限って使われるため、どこを押せばよいのかが色だけで判別できます。
生成りと白でつくる下地
ヘッダーをはじめ、一覧を載せた区画やアクセス、お客様の声、Instagramの各区画には、わずかに黄みを帯びたクリーム色が敷かれています。純白ではない下地を選んだことで画面全体の明るさが少し抑えられ、白いカードや写真の白との間に自然な段差が生まれます。
文章を載せる箱は白で抜かれ、下地との色の差だけで区画の境目が示されます。枠線や影を強く使わずに面の色で領域を分ける手法が、全体の落ち着いた印象を支えています。
青緑から緑へ移るボタンの統一
各区画の末尾に置かれたボタンは、左が青緑、右へ向かうにつれて緑へ移るグラデーションで塗られ、角を丸めない長方形で統一されています。文言も「ブログへ」「ギャラリーへ」「アクセスへ」「お客様の声へ」「特徴へ」のように行き先だけを短く記す形でそろえられています。
同じ形と同じ色を見つけたら次のページへ進めるという約束が守られているため、読み手はボタンの文言を細かく読まなくても操作の見当がつきます。差し色の青緑はロゴの円、三つのサービスタイル、写真に重ねる半透明のプレート、見出しの下の細い罫線にも使われ、区画をまたいでもひとつのサイトとしてのまとまりが保たれています。
明朝体と文字間を広げた欧文の組み合わせ
区画の見出しに使われる欧文は、縦線と横線の太さの差がはっきりしたセリフ体で、濃い茶色に近い墨色で組まれています。「Gallery」「Access」「Voice」「Feature」といった単語が大きく置かれ、その下に短い横罫と日本語の小見出しが続く形が、ページ全体で繰り返されます。
本文の日本語も明朝体でそろえられ、電話番号や郵便番号、営業時間などの数字は文字間を広げた等幅風の書体で組まれています。書体の使い分けによって、読ませたい文章と確認するための情報が視覚的にも区別されています。
画面の下に固定された三分割の連絡バー
このサイトで最も特徴的なUIは、画面の下辺に貼り付いた白い横長のバーです。スクロールしても位置が変わらないため、どの区画を読んでいる途中でも連絡の手段にすぐ手が届きます。
電話・メール・SNSをアイコンの色で描き分ける
バーは横幅を三等分し、左に受話器のアイコンと電話番号、中央に封筒のアイコンとメールでの問い合わせ、右にInstagramのアイコンと閲覧の案内を並べています。文字はいずれも黒に近い色でそろえられ、種類の違いはアイコンの色が受け持ちます。
さらにバーの直下には細い帯が走り、左から緑、水色、赤紫の順に色が切り替わります。この帯の切れ目が三つの領域の境界を示すと同時に、それぞれのアイコンの色と対応しているため、押せる範囲がどこまでなのかを線一本で伝えています。文字を増やさずに区切りを見せる、無駄のない処理です。
先頭へ戻る矢印の置き方
バーの右端には、上を向いた細い矢印だけが独立して置かれています。周囲に説明の文字を添えず、三分割された領域の外に配置されているため、連絡用の三つとは性質の異なる操作であることが位置関係だけで伝わります。
縦に長いトップページでは、読み進めたあとに先頭へ戻る手段があるかどうかで読み手の負担が変わります。常に見えている場所に小さく置く判断は、画面を圧迫せずに移動の自由を確保する現実的な方法だといえます。
要約を積み重ねて下層へ送り出す情報設計
トップページは、業務ごとの詳細を書き切るのではなく、それぞれの内容を短くまとめて下層ページへ引き渡す構成になっています。読み手は上から順に眺めるだけで扱っている業務の全体像をつかめ、関心のある項目だけを選んで深く読みに行けます。
三つのタイルで主要な業務を示す
ファーストビューに続く区画では、写真の上に横並びの三つのタイルが重ねられ、ハウスクリーニング、定期清掃、高所作業が示されています。各タイルには白い線画のアイコン、日本語の名称、文字間を広げた欧文表記が縦に積まれ、三枚とも同じ寸法でそろえられています。
塗りはいずれも半透明の青緑ですが、中央の一枚だけが明るい水色に変えられています。同じ形が三つ並ぶときの単調さを避けながら、真ん中へ視線を集める効果も持たせた配色です。背後の写真がうっすら透ける濃度に調整されているため、タイルが写真から浮き上がりすぎることもありません。
英字見出しと日本語の小見出しでそろえたリズム
その後に続く各区画は、大きな英字の見出し、短い横罫、日本語の小見出し、説明文、ボタンという同じ順序で組み立てられています。順序が固定されているため、背景が写真に変わっても下地が生成りに戻っても、読み手は次にどこを見ればよいかで迷いません。
変えているのは背景と写真の置き方だけで、見出しまわりの装飾は最後まで共通です。長いページで起こりがちな単調さを、要素の作り替えではなく背景の入れ替えで和らげる考え方が読み取れます。
横に並べたカードで更新の様子を伝える
ブログの区画では、左半分に写真つきのカードが横方向に並び、右半分に見出しと説明文、ボタンが置かれています。カードは写真の下に白い帯があり、日付と内容を示す短い行が二段で収まる形です。
カードの列は画面の左端で切れており、まだ続きがあることが形だけで示されます。背景には明度を落とした写真が敷かれていますが、右側の文章の背後だけは明るさが保たれているため、読みやすさは損なわれていません。
一覧表と写真を組み合わせた区画
「Menu」と題した区画では、白いカードの中に清掃の内容ごとの項目が細い罫線で区切られて並び、その右側に作業中の写真が重ねられています。項目の見出しの前には短い青緑の線が引かれ、区分の始まりが分かるようになっています。
カードと写真は上下にずらして配置され、写真の左端がカードの上にわずかに乗ります。平面的になりがちな一覧の区画に奥行きを与えるための処理で、後に続く区画の重ね方とも考え方が共通しています。
写真とカードの重ね方でつくる奥行き
このサイトは、写真と文章を上下に並べるだけでなく、意図的に重ねたりずらしたりして層を作っています。同じ幅の箱が続く構成に比べて視線が動きやすく、区画ごとの表情の違いも生まれます。
半透明のプレートを写真に重ねる二列の区画
コンセプトとサービスの二つは左右に並べられ、それぞれ写真の左下寄りに半透明の青緑のプレートが重ねられています。プレートの中には文字間を広げた英字と日本語の一文が入り、写真の情報量を落とさずに見出しを読ませる形になっています。
説明の文章は写真の下に置かれ、二列とも同じ行幅でそろえられています。左右で内容が違っても視覚的な重さが等しいため、どちらを先に読んでもよい並列の関係であることが伝わります。
白いカードと写真をずらして置く特徴の区画
特徴を紹介する区画では、清掃用具を載せた台車が写る写真を全面に敷き、その上に白いカードを左寄せで重ねています。カードの中は青緑の小見出し、本文、ボタンという順に並び、上下左右に余白がたっぷり取られています。
右側には長い柄の道具で建物の外壁を清掃する写真が置かれ、白いカードの端にわずかに重なります。写真の背後には淡い緑の面が少しずらして敷かれ、影を使わずに浮き上がって見える効果が作られています。
背景をぼかしたギャラリーの見せ方
ギャラリーの区画は、泡の付いた窓を大きく引き伸ばした写真を背景に敷き、白く飛ぶほど明度を上げてあります。その上に施工の様子を写したサムネイルが横一列に並び、中央の一枚だけが大きく表示されます。
左右の端には細い山形の矢印が置かれ、横方向に送って見られることが示されます。写真の上には内容を表す短いハッシュタグが白抜きで重なり、どの業務の写真なのかが一目で分かる作りです。
会社の情報と利用者の反応の見せ分け
デザインの工夫は装飾だけでなく、初めて依頼を検討する読み手が知りたい情報の並べ方にも表れています。このサイトでは、会社そのものを説明する情報と、実際の仕事ぶりを伝える情報が別の区画に分けて置かれています。
項目名と内容を二列で整理したアクセスの区画
アクセスの区画では、白い面の上に左が項目名、右が内容という二列の行が積まれ、所在地、電話番号、FAX番号、営業時間、定休日、代表者、経営理念が順に並びます。行の間隔が広く取られているため、情報量があっても圧迫感がありません。
住所の下には地図で位置を確かめるためのリンクが緑色の文字で置かれ、他の本文とは色で区別されています。経営理念だけは太字で一段大きく組まれ、事務的な項目が続く中でその一節に自然と目が向く配置です。さらに下には対応の範囲を説明する短い文と、LINEとInstagramのアイコンが添えられています。
利用者の声と日々の投稿を別の区画に置く
お客様の声の区画は、白いカードを二列二段に並べた構成で、各カードにロゴ、依頼された作業の名称、人物を表す丸いアイコン、そして途中で省略された短い文が収まります。続きを読むには、カードの下に置かれたボタンから専用のページへ移る流れです。
一方でInstagramの投稿は別の区画にまとめられ、正方形のサムネイルが三列二段で並びます。読み物としての声と、日々の様子を伝える写真とを分けて置くことで、それぞれの情報の性格が混ざらないようにしています。区画の末尾には続きを読み込むためのボタンと、外部のアカウントへ移るためのボタンが横に並びます。
沼津を拠点とした対応の範囲の伝え方
掲載されている業務は、家庭用と業務用のエアコンの分解洗浄、ハウスクリーニング、定期清掃、高所作業、店舗の清掃、害虫駆除、遺品整理と幅が広く、建物にまつわる困りごとをまとめて受けられる体制が示されています。沼津で遺品整理を頼める相手を探している方にも、沼津のエアコンクリーニングを検討している方にも、どこまで任せられるのかが読み取りやすい構成です。
対応の範囲については、沼津を拠点として静岡県の東部・中部・西部に加え、神奈川県や東京都まで足を運ぶことが本文に記されています。また、電気工事士や遺品整理士といった資格を持つ担当者が作業にあたることや、高所での作業に必要な資格を保有していることにも触れられています。写真だけでは伝わりにくい技術面の裏づけを、文章の側で補う構成になっています。
まとめ：生成りと青緑で静かに整えた清掃業のサイト
株式会社幸栄美創のサイトは、生成りの下地と白い面で画面を落ち着かせ、青緑から緑へ移るグラデーションを操作できる場所だけに使い分けることで、扱う業務の幅広さと画面の静けさを両立させています。高所作業の写真を最初に置いて仕事の性格を伝え、その後は同じ順序の区画を積み重ねる作りは、情報量が多くなりがちなサービス業のサイトを設計するうえで参考になります。
画面の下に固定された三分割の連絡バーと、行き先だけを短く記した共通のボタンは、読み手をどこからでも次の行動へ運ぶための仕掛けです。装飾を増やさずに導線を確保したい場合の手本として、実際の画面と見比べてみる価値があります。
ここまで取り上げた配色や重ね方の工夫は、文章による説明よりも実際の画面で確かめるほうが早く伝わります。静岡県でビルメンテナンスに対応する株式会社幸栄美創の公式サイトで、ファーストビューから固定バーまでの流れをご覧ください。
