営繕リサイクルセンター

深い紺と淡い水色を交互に重ね
作業写真で仕事を伝える便利屋サイト

営繕リサイクルセンターの公式サイトは、深い紺と淡い水色という近い系統の色だけで画面を組み立て、作業中の写真を大きく見せることで事業の中身を先に伝えています。装飾を増やすのではなく、色の濃淡と余白の取り方で情報の優先順位を示している点が、このサイトの分かりやすさを支えています。

静岡県伊東市赤沢に拠点を置く営繕リサイクルセンターは、不用品の回収や草刈り、庭木の伐採伐根、住まいの修繕まで引き受ける便利屋です。扱う作業の種類が多い事業では、何をどこまで頼めるのかが伝わりにくくなりがちですが、このサイトは写真の並べ方と短い説明文の組み合わせでその課題に応えています。

この記事では、ファーストビュー、配色、レイアウト、タイポグラフィ、導線設計という観点から画面を読み解きます。地域に根ざしたサービス業のサイトをつくるときの見本として、応用できる部分を中心に取り上げます。

ファーストビューは作業風景の写真と明朝体の見出しで印象を決めています

最初の画面では、屋外の作業写真を背景に敷き、その上へ大きな明朝体の見出しを重ねています。写真は白を含ませた明るい調子に整えられ、文字を置いても読みにくくならない下地として機能しています。写真の力と文字の可読性を両立させるための下処理が、最初の一画面に集約されています。

現場の作業写真が事業の中身を先に伝えています

背景には、作業着と長靴を身につけた人が草刈り機を動かしている場面が使われています。人物の全身を写すのではなく、脚元から機械の先端までに寄った構図で、伸びた草の緑と機械の金属質がそのまま画面の質感になっています。抽象的なイメージ写真ではないため、読者は説明を読む前に何を請け負う事業者なのかを見当づけられます。

字間を広げた明朝体が落ち着いた語り口をつくっています

主となる見出しは二行で組まれ、一文字ずつ間隔を空けた明朝体が使われています。ゴシック体を詰めて組めば勢いが出ますが、明朝体で字間を広げると、声を張らずに語りかけるような調子に近づきます。屋外の力仕事を扱う事業でありながら荒さや押しつけがましさを感じさせないのは、この書体と字間の選択によるところが大きいです。見出しの下には対応する作業と地域を補う小さな一行が添えられ、主と従の関係が文字の大きさだけで示されています。

写真の右側に余白を残した非対称の構図です

背景写真は画面の幅いっぱいには広がらず、右側に白の余白が残されています。左に写真、右に余白という重心の偏りが、整いすぎない動きを生んでいます。左右対称に収めるより、あえて片側を空けるほうが視線が滞留せず、下の区画へ流れやすくなります。

更新情報は帯にまとめて日付とともに並んでいます

画面の下部では、薄いグレーの横長の帯が写真の右下に重なる形で置かれ、その中に二行の更新情報が並びます。各行は左端に英字の小さな分類ラベル、続いて日付と見出し、右端に一覧へ進む短いリンクという順序で、行をまたいで同じ位置に同じ役割の要素がそろっています。読み方の型が共通しているため、二行を同じ目の動きで追えます。

深い紺と淡い水色に絞った配色が画面をまとめています

配色は、濃い紺、その中間にあたる青みがかった灰色、淡い水色、白、薄いグレーという青系の階調でそろえられています。使う色数を抑えたことで、写真に写る草の緑や木材の茶色が、そのまま画面のアクセントとして働きます。

紺は操作する要素と会社情報に集中しています

最も濃い紺は、区画ごとのボタン、電話とメールの入口、会社概要のブロックというように、押す場所と押さえておきたい情報に集めて使われています。本文の中で濃い色を散らさず、行動につながる要素だけを濃くしているため、どこを見て何を押せばよいかが色だけで判断できます。

背景色の切り替えが章の変わり目を示しています

区画ごとに背景の色を替える手法も一貫しています。会社紹介は青みの強い帯、サービスと実績は淡い水色のパネル、記事の紹介は薄いグレー、最下部のリンク一覧は淡い水色と、色が変わるたびに話題も変わります。見出しを読まなくても、スクロールしているだけで章の区切りが把握できる作りです。

差し色のターコイズが記事の分類を際立たせています

全体が青系でそろう中で、記事のサムネイル左下に置かれた分類のラベルだけが明るいターコイズになっています。面積が小さいので画面の調和は崩れず、それでいて写真の上でも埋もれません。限られた一点にだけ別系統の色を置く判断は、統一感と識別のしやすさを両立させる方法として参考になります。

左右を入れ替えるブロック構成が視線を運んでいます

中盤の情報設計では、写真の塊とテキストのパネルを左右に組み合わせ、区画ごとに配置を反転させています。同じ形が続く単調さを避けながら、読み方の型そのものは変えないという構成です。

サービスと実績の区画を鏡合わせに配置しています

サービスを紹介する区画は左に写真、右にテキストパネルという並びで、続く実績の区画では左右が入れ替わります。写真側は一枚で見せるのではなく複数の写真をタイル状に敷き詰めており、草刈り機の刃、床材を押さえる手元、木材を積んで幌をかけた軽トラックの荷台といった異なる場面が同時に目に入ります。扱う作業の幅を、文章ではなく画像の並びで示す方法です。実績側の写真は、日の差す床や芝生、手すりのある階段といった仕上がりの場面に寄せられており、作業中と作業後で写真の性格を分けています。

パネルの角の斜め図形が余白を締めています

テキストのパネルは細い線で囲まれ、内側の角には斜めに切り取った淡い青の図形が重ねられています。文字数の少ないパネルは間延びしやすいものですが、角の図形が視線の止まる場所をつくり、余白が空白に見えないよう支えています。見出しの下にはパネルの幅いっぱいまで細い罫線が引かれ、実績の区画では罫線の先端に小さな丸が添えられていて、線の終わりが写真との境目を指し示します。

見出し周りの並び方をすべての区画で統一しています

どの区画も、英字の小さなラベル、明朝体の日本語見出し、説明文、ボタンという順序で並びます。要素の順番と間隔が共通しているため、初めて目にする区画でも読み方に迷いません。英字ラベルは字間を広げた小さな文字で、日本語の見出しに入る前の助走として働いています。

ボタンの塗り分けと問い合わせの並べ方に優先度が表れています

導線の設計では、同じ文言のボタンでも塗りつぶしと線囲みを使い分けています。形や大きさだけでなく、色の強さの差で優先順位を伝える考え方です。

塗りのボタンと線のボタンで重みを分けています

会社紹介、サービス、実績の各区画には紺で塗りつぶした角の立ったボタンが置かれ、利用の流れ、よくある質問、記事の一覧には白地に細い枠線のボタンが置かれています。前者は事業内容を知るための主要な入口、後者は補足を確かめるための入口という位置づけの違いが、色の濃さの差として素直に現れています。

流れと質問は写真に重ねたカードで並んでいます

利用の流れとよくある質問は横並びの二枚で示され、それぞれ上に写真を置き、その下端に少し重ねる形で白いカードが配置されています。写真とカードをわずかに重ねることで、二つの要素が別々に浮かずひとまとまりとして認識できます。白い手袋で作業する手元や、疑問符を記した木のブロックというように、内容を連想させる写真が選ばれている点も理解を助けています。

電話とメールの入口を同じ大きさで並べています

最下部の問い合わせ区画は、細い枠で囲んだ箱を縦の罫線で二つに分け、左に電話、右にメールの入口を置いています。どちらの側にも一行の案内文と紺のボタンが同じ寸法で並び、片方へ強く誘導しない中立な見せ方です。電話側のボタンには受付の時間帯が小さく添えられ、掛けてよい時間をその場で確かめられます。

会社情報の見せ方が全体のトーンを引き締めています

会社情報の区画は、ほかの区画とは違う扱いで画面に置かれています。信頼につながる情報を、色と配置の両方で目立たせる設計です。

会社概要を紺のブロックで画面の右半分に寄せています

会社概要は、画面の右半分だけを濃い紺で塗ったブロックにまとめられ、左半分は白のまま残されています。左右を均等に埋める代わりに重心を片側へ寄せることで、そこだけ性質の違う情報であることが視覚的に伝わります。中身は項目名と内容を二列に分けた表の形式で、行ごとに細い横線が引かれ、社名や所在地、連絡先、営業の時間帯、休みの曜日が同じ書式で並びます。白い文字が紺の地に浮かび、区画の中では文字だけで構成が成立しています。

連絡先を三か所で確認できるようにしています

電話番号は、画面上部のヘッダー、会社概要の表、最下部の問い合わせ区画という三か所に現れます。スクロールの途中でどこを見ていても連絡手段にたどり着ける配置で、地域で依頼を受ける事業者のサイトとして実用的です。ヘッダーでは受話器と封筒の記号が文字に添えられ、用件の種類を読む前に判別できるようになっています。右端には三本線のアイコンが置かれ、ヘッダーに並べる情報量を絞る構成が取られています。

明朝体とゴシック体の役割を分けています

見出しは明朝体、本文と英字ラベルはゴシック体という分担が、どの区画でも守られています。明朝体の線の強弱が落ち着いた雰囲気を、ゴシック体の均一な線が読みやすさを担い、それぞれの役割が混ざりません。説明文は中央そろえで短くまとめられ、行間も広めに取られているため、読み進めるときの負担が小さく抑えられています。

不用品回収を頼む前にサイトで確かめたい情報を整理します

ここまで見てきた設計は、片付けを人に頼もうとする読者にとってどのような意味を持つのでしょうか。実際の依頼では、作業そのものの内容と同じくらい、頼む前に画面から確かめられる情報の量が判断材料になります。この観点で見直すと、このサイトの構成の意図がより分かりやすくなります。

対応する作業の範囲が写真から読み取れます

不用品の回収を扱う事業者には、家財の運び出しだけを担うところもあれば、庭の手入れや住まいの修繕まで請け負うところもあります。このサイトはサービスと実績の区画を分けて用意し、それぞれに作業中と仕上がりの写真を配しているため、どこまで相談できるのかを画面から推し量れます。依頼したい内容が一つに収まらないときほど、こうした見せ方が助けになります。

連絡の取りやすさは画面の構成に表れます

電話とメールの両方が用意されているか、受付の時間帯が書かれているか、どの位置からでも連絡先に戻れるかは、サイトの構成を見れば判断できます。営繕リサイクルセンターのサイトでは、上部と下部の両方に連絡先が置かれ、対応できる時間帯も併記されています。問い合わせの前に確かめたいことが、探し回らずに見つかる配置です。

流れと質問の入口が最初の不安を受け止めます

初めて依頼するときは、連絡した後に何が起きるのかが分からず迷いやすいものです。利用の流れとよくある質問を独立した入口として並べたサイトは、その迷いを先回りして受け止めています。事業内容を理解した直後にあたる中ほどの位置へ置いている点も、読者の関心が移り変わる順序に沿っています。