横浜市戸塚区に拠点を置くトラスティンライフの公式サイトは、住まいまわりのサービスを扱う事業者がWebサイトを整えるときの見本として参考になります。青と白を軸にした配色と、上から順に読み進めるだけで事業の輪郭がつかめる情報の並べ方が、サイト全体で一貫しているからです。
この記事では、実際の画面を見ながら、配色、ファーストビュー、写真とカードの使い方、問い合わせ導線、下層ページの統一感という順に読み解いていきます。清掃や家事代行のように、依頼者の自宅へスタッフが入るサービスでは、任せて大丈夫だと感じてもらえるかどうかが画面の印象に大きく左右されます。トラスティンライフのサイトは、その部分を色と写真の選び方で丁寧に組み立てています。
全体の印象を決めるブルーの配色設計
このサイトの第一印象をつくっているのは、濃いブルーと淡いスカイブルー、そして白という三色に絞った配色です。清掃サービスで伝えたい清潔感と、依頼先に求められる落ち着きを、色数を増やさずに両立させています。ここでは色の役割分担と、差し色の扱い方を見ていきます。
濃いブルーと淡いブルーを役割で分ける
ヘッダーとフッターには、はっきりとした濃いめのブルーを敷いています。ページの上端と下端を同じ色で締めているため、あいだに挟まれた本文がひとつのまとまりとして見え、縦に長い1ページでも構造が崩れません。
本文側は、白い背景と淡いスカイブルーの帯を交互に置く作りです。選ばれる理由と保護犬への取り組みは淡いブルーの帯、サービス紹介と作業成果は白い背景というように、区切り線を引かずに背景色の切り替えだけでセクションの境目を示しています。白い面の左右には、さらに薄いブルーの円が部分的に重ねられていて、余白が単調にならないよう配慮されています。
黄色はボタンだけに使う
色の面積という観点で見ると、このサイトで黄色が使われている場所はごく限られています。作業成果の下に置かれたボタン、保護犬への取り組みのボタン、そしてページ下部の電話ボタンだけで、見出しや本文の文字には黄色が入りません。
青系の面のなかに置かれた黄色は、小さくても視界に飛び込みます。押してほしい場所だけに差し色を残す考え方は、説明を足さなくても操作の対象が伝わる素直な設計だといえます。ボタンの角を大きく丸めて、右端に小さな矢印を添えている点も、押せる要素だと判断しやすくしています。
ファーストビューの組み立て方
トップページを開いて最初に目に入るのは、画面いっぱいに広がる作業風景の写真です。文字情報は最小限にとどめ、写真の情報量で事業内容を伝える構成になっています。ここでは写真とテキストの重ね方、そして視線の運び方を確認します。
全面写真に白いテキストを重ねる
写真は、紺色のポロシャツを着たスタッフが室内から窓を拭いている場面です。屋外の緑や観葉植物が一緒に写り込んでいるため、明るく風通しのよい住空間という印象も同時に伝わります。人物が斜め上を見上げる構図になっていて、その視線と反対側に生まれた余白へテキストが収まっています。
重ねる文字はすべて白で、キャッチコピー、社名、補足の一文という三段構成です。写真の上に濃い帯を敷いて文字を読ませる手法もありますが、ここでは写真そのものの明るさを保ったまま、文字のまわりに十分な余白を確保して読みやすさを支えています。
社名の見せ方と下方向への誘導
社名の左側には細い縦の罫線が引かれ、その内側に小さな欧文表記と、字間を広くとったカタカナの社名が並びます。文字を詰めずにゆったり組むことで、名称そのものが記号のように扱われ、キャッチコピーとの主従関係がはっきりします。
画面の下側の中央には、小さな文字と細い縦線による下方向の合図が置かれています。最初の1画面に情報を詰め込まない代わりに、続きがあることを控えめに知らせる役割を担っています。
セクションを整えるカードレイアウト
2画面目から下は、写真と短い文章を組み合わせたカードの連なりで構成されています。要素の形と間隔をそろえることで、扱う内容が違っても同じリズムで読み進められます。セクションごとの並べ方を順に見ていきます。
サービスは写真カードを2列2段で並べる
サービスを紹介する区画では、ハウスクリーニング、家事代行、空室清掃、安全教育という4つの項目を、2列2段の写真カードで見せています。写真の角は丸く落とし、やわらかい影を付けて、白い背景からわずかに浮かせた見た目に整えています。
写真の下にサービス名を中央ぞろえで置くだけの簡素な作りですが、エアコンの清掃、台所での調理、室内の床清掃、屋外で子どもと向き合う場面と、写真の内容が互いに重ならないよう選ばれています。そのため、文字を読む前の段階で扱う領域の広さが伝わります。
選ばれる理由は3枚の白いカードで見比べさせる
淡いブルーの帯のなかに、白い角丸のカードが3枚横並びで置かれています。上から写真、太字の見出し、説明文という順序がすべてのカードで統一され、見出しが2行に折り返しても中央でそろうよう調整されています。
使われている写真は、説明している様子、清掃している様子、ユニフォーム姿で並ぶ様子と、いずれも同じ紺色の制服で撮影されたものです。3枚のあいだで色味の差が小さいため、カードが一つのまとまりとして見え、内容を見比べやすくなっています。
作業成果は枠の大きさをそろえて示す
作業成果の区画は、灰色の枠が3つ横に並び、それぞれの中央に準備中である旨の短い文字が入っています。写真が用意されていない領域を空白のまま放置せず、同じ大きさの枠で示しているため、レイアウトの骨格が崩れません。
枠の下には黄色いボタンが中央に置かれ、上下の間隔もゆったり取られています。素材がそろった段階で写真を入れれば、全体の見え方を大きく変えずに更新できる作りで、制作の途中段階でも体裁を保てる考え方が読み取れます。
保護犬への取り組みは左右2分割で見せる
保護犬への取り組みの区画だけは、カードを並べる他のセクションと異なり、左に文章、右に写真という左右2分割の構成です。太字の一文を先頭に置き、その下に短い段落を重ねる並びで、読む分量が急に増えないよう調整されています。
右側の写真は、スタッフが2頭の犬と公園を歩いている場面で、背景には横浜らしい建物の輪郭が入ります。サービスの紹介が続いたあとに横位置の写真を大きく挟むことで、ページ全体のリズムが変わり、下部の問い合わせまで読み進めやすくなっています。
問い合わせ導線とフッターの構成
このサイトは、連絡手段を電話とLINEに絞り、それを画面の上部と下部の両方に置いています。入力項目の多いフォームを前面に出さない判断は、思い立ったときにすぐ連絡したい生活者向けのサービスと相性がよい作りです。ここでは導線の置き方と、フッターのまとめ方を見ていきます。
電話とLINEを画面の上と下に置く
ヘッダーの右側には、受話器のアイコンと電話番号、受付時間が小さく2行で組まれ、その右にInstagramとLINEのアイコンが並びます。ナビゲーションの項目とは間隔を空けて配置されているので、連絡先の区画だと一目で判別できます。
ページ下部の問い合わせ区画では、横浜の海沿いを写した写真を背景に、白い見出しと案内文が中央ぞろえで置かれています。その下には黄色い電話ボタンと緑のLINEボタンが横並びで置かれ、連絡手段を2つから選べる形にまとまっています。背景写真をやや明るく抑えているため、白い文字とボタンの色が沈まずに読み取れます。
フッターは3つのロゴで締める
フッターは濃いブルーの一色で、中央に3つのロゴを横並びに置き、その下へ著作権表示を添えています。左は保護犬の活動を示す肉球のロゴ、中央は会社のロゴ、右は関連団体のエンブレムです。
リンクの一覧を細かく並べる代わりに、事業の姿勢が伝わる要素だけを残しているため、最後まで読んだ人の記憶に残ります。ページの上端と同じ色で閉じることで、全体が枠に収まったようにも見えます。
会社概要ページに見る下層ページの作り
トップページが事業の全体像をまとめる役割を担っているのに対し、会社概要ページは運営者について詳しく伝える役割を持っています。ここでは、トップページと同じ色と余白の感覚を保ちながら、見出しの様式を切り替えている点に注目します。
ページヘッダーと見出しの様式
会社概要ページの先頭には、横浜の街並みを写した横長の写真が置かれ、その上に半透明の白い箱が重なります。箱の中は小さな欧文と大きな日本語という2段組で、トップページのファーストビューとは違う様式にしながら、色調と余白のとり方はそろえてあります。
本文の見出しは、中央の文字の左右へ細い罫線を伸ばした形です。トップページでは淡い英字を背面に敷いて日本語を重ねる見出しを使っていましたが、下層では読みやすさを優先した控えめな装飾に切り替えています。ページの性格に応じて見出しの主張を変えるという、分かりやすい使い分けです。
代表挨拶は写真と文章の2列で組む
代表挨拶の区画は、左に角を丸めた人物写真、右に文章という2列の構成です。文章の右下には肩書と代表取締役の藤田勇輔様の名前が署名のように置かれ、誰の言葉なのかが視覚的に分かる並びになっています。
本文では、治安の維持に長く携わってきた経歴を持つスタッフであることが説明されています。自宅に人を招くことへの不安に文章で応える内容を写真とセットで見せることで、文字だけで伝えるよりも受け止めやすい形に整えています。
表組みと囲みで読ませる会社情報
会社情報は、白い角丸のカードの中に項目名と内容を左右へ分けて並べ、行ごとに細い罫線で区切っています。項目名を青、内容を黒に近い色にしているため、視線が左の列を縦に流れ、必要な行だけを拾えます。
プライバシーポリシーは枠で囲んだ領域にまとめられ、番号付きの見出しの左に短い青いバーが添えられています。分量の多い規約類をページの流れから独立させることで、その手前にある会社情報までの読みやすさが保たれています。
清掃や家事代行のサイトづくりで参考にできる点
横浜で家事代行やハウスクリーニングを探している人は、作業の手順そのものよりも、誰が来るのか、どこまで頼めるのかを先に知りたいと考えます。トラスティンライフのサイトは、制服姿のスタッフを繰り返し写真に登場させ、対応できる領域を4つに整理することで、その2点へ上から順番に答えています。
個人の住まいを対象にする場合と、不動産会社のような事業者を対象にする場合とでは、求められる説明が変わります。このサイトでは選ばれる理由の区画で、一般家庭から不動産会社まで幅広い依頼に応じられる体制を整えている点に触れており、読み手の立場が違っても同じページで受け止められる構成になっています。
写真がまだ用意できていない区画を無理に埋めず、枠と間隔だけを整えて置いている点も、これから内容を充実させていくサイトの参考になります。素材の有無に関わらずレイアウトの骨格と配色を先に決めておけば、差し替えの際も全体の印象を保てます。個人の依頼と法人の依頼を同じサイトで受ける場合は、写真とカードの形をそろえて情報の粒をそろえる作り方が有効です。
まとめ：色と写真で安心を伝えるサイト
トラスティンライフは、横浜市戸塚区を拠点として、ハウスクリーニングや家事代行、空室清掃、安全教育に取り組んでいる事業者です。横浜市を中心に、鎌倉市や藤沢市、茅ヶ崎市、大和市までを対応の範囲として案内しています。
サイトのデザインは、濃いブルーと淡いスカイブルー、白の三色に黄色の差し色を加えた構成で、清潔感と落ち着きを同時に表しています。写真は制服姿のスタッフを中心にそろえ、カードの形と余白をそろえることで、上から下まで同じ読み心地が保たれています。連絡手段を電話とLINEに絞った導線も、迷わせない作りの一例です。
配色の組み立て方や導線の置き方を実際の画面で確かめたい方は、鎌倉でハウスクリーニングを検討している女性にも参考になるトラスティンライフの公式サイトをご覧ください。
