大阪府八尾市の便利屋「まきはらくらしサポート」のWebサイトは、濃紺と淡いブルーを基調にした静かな配色と、暮らしの現場を切り取った写真の組み合わせで、初めて連絡する人の心理的なハードルを下げる方向に設計されています。飾りを増やすのではなく、色の面と余白でセクションを仕切っていく作り方が、最初から最後まで一貫しています。
この記事では、八尾市で不用品回収や粗大ごみ回収の依頼先を探している読者を思い浮かべながら、ファーストビューの構図、配色の使い分け、トップページの情報設計、下層ページのテンプレート、連絡までの導線という順に画面を読み解きます。取り上げるのは、実際の画面で確認できた要素だけです。
写真と余白を左右に振り分けたファーストビュー
最初に目に入る画面は、大きな写真を左側に寄せ、右側に白い余白を残す非対称な構図でまとめられています。全面を写真で覆う作り方に比べて画面の印象が軽くなり、上に載る文字も読み取りやすくなっています。ここでは構図、文字の置き方、写真の切り替わりという三つの点を見ていきます。
横幅のおよそ7割を占める大判の写真
写真は画面の左端から横幅のおよそ7割までを占め、残りの右側は白いままです。庭先で草を刈る手元を写した横位置のカットが使われており、真っ白な面と隣り合うことで写真の緑がいっそう際立ちます。
写真には白いベールをかけたような淡い加工が施され、上に重なる文字とのコントラストが確保されています。人物の顔を大きく見せず、手元や庭の様子を主役に据えている点も、仕事の内容を素直に伝える選び方になっています。
写真と白地をまたいで置かれた明朝体の見出し
見出しは字間を広くとった明朝体で二行に組まれ、写真の上から白い余白の側へ文字がまたぐように配置されています。性質の違う二つの面を一本の文で橋渡しする置き方なので、視線が左から右へ自然に流れていきます。
文言は、不用品や日々の困りごとをその日のうちに片づけないかと呼びかける問いかけの形です。その下には小さなゴシック体のサブコピーが二行添えられ、大きな明朝体と小さなゴシック体という対比が、落ち着いた雰囲気と情報の読み取りやすさを両立させています。
複数のカットが入れ替わる背景写真
ファーストビューの写真は時間の経過とともに別のカットへ切り替わります。庭仕事の場面から室内での作業の場面へと移り変わり、扱う仕事が一種類ではないことを、言葉を足さずに伝えています。
切り替わっても見出しとサブコピーの位置は動きません。読んでいる途中で文字を見失う心配がなく、背景だけが静かに入れ替わる作りになっています。
濃紺と淡いブルーで統一した配色
サイト全体の色は、濃紺と淡いブルー、そして白のほぼ三色に絞られています。写真の色数が多いぶん、背景と文字の色を抑えることで画面がにぎやかになりすぎないよう調整されています。ここでは背景の面の使い分けと、ボタンの色の決め方に注目します。
区画ごとに背景の色面を入れ替える
自己紹介の区画は濃紺の帯で塗られ、その中に淡いブルーグレーのカードが置かれています。続くメニューと事例の区画では淡いブルーのパネルへ切り替わり、依頼の流れとよくある質問では白い背景に戻ります。
見出しの組み方や罫線の細さは共通のままで、背景の色だけが入れ替わる構成です。読み進める人は色の変化を手がかりに区切りを認識できるため、境目に太い線や大きな装飾を置く必要がなくなっています。
押してほしい場所だけを濃紺で塗る
ページ内のボタンは、濃紺で塗りつぶした長方形に白い文字を載せた形が基本です。背景が白や淡いブルーの場所では、この塗りボタンが画面の中でもっとも濃い要素になるため、視線が自然に集まります。
一方、濃紺の面の上に置かれたボタンは、白い細枠と白文字の抜き型に反転します。同じ役割のボタンでも背景に応じて表現を切り替えることで、どの場所でも押せる要素だとわかる明るさの差が保たれています。
トップページの情報設計と視線の運び方
トップページは、当社について、便利屋メニュー、事例の紹介、依頼の流れ、よくある質問、コンテンツ、会社概要、問い合わせという順に区画が積まれています。それぞれの区画には概要と入口だけを置き、詳しい内容は下層ページに預ける役割分担です。ここでは見出しの型と並べ方を確認します。
英字ラベルと日本語見出しを重ねた二段構え
各区画の先頭には、小さな青い英字のラベルと、その下に字間を広げた明朝体の日本語見出しが置かれています。ABOUTと当社について、MENUと便利屋メニューのように、同じ意味を二重に示す型が繰り返されます。
英字は装飾として小さく、日本語は読ませる文字として大きくという役割分担が明快です。型が最後まで崩れないため、スクロールの途中でも自分がどのあたりを読んでいるのかを見失いにくくなっています。
写真とテキストを左右交互に並べるジグザグ
便利屋メニューの区画は左側に写真の集まり、右側に説明パネルという並びで、次の区画では左右が入れ替わります。同じ形を続けずに反転させることで、単調さを避けながらページにリズムを作る手法です。
説明パネルの角には斜めの線を使った薄い装飾が添えられ、四角い面の硬さがやわらげられています。写真は複数枚を隙間なく組み合わせたモザイク状の配置で、片付けや庭仕事といった作業の幅が一目で伝わります。
カード型で並べた補助的な区画
依頼の流れとよくある質問は、写真の下に白いカードを少し重ねた形で横に二枚並びます。縦に積まずに横並びにすることで、この二つが同じ重さの補足情報だとわかる構成です。
カードの中のボタンは細い枠線だけの控えめな形で、濃紺の塗りボタンとは差がつけられています。さらに下にはコンテンツの区画が薄いグレーの帯で置かれ、情報発信の入口が一つにまとめられています。
下層ページに共通するテンプレート
下層ページは、ページヘッダー、パンくず、本文、問い合わせ、フッターという同じ骨格で作られています。ページごとに差し替わるのは主に写真で、レイアウトの型そのものは変わりません。ここでは共通部分と、内容に合わせて作り分けられている部分を順に見ていきます。
写真の帯とパンくずで現在地を示すページヘッダー
各ページの上部には横長の写真の帯が置かれ、中央に白い明朝体のタイトルと小さな英字が重ねられています。タイトルの左上と右下には細い線のかぎ括弧のような飾りが添えられ、文字の位置が引き締められています。
その直下には白い帯のパンくずが続き、左端に濃紺の短い縦線が差し色として入ります。写真の帯とパンくずの帯がわずかに重なって配置されているため、階層のつながりが視覚的にも伝わります。
番号と写真で手順を見せるステップ表現
依頼の流れのページでは、淡いブルーの細い枠で囲んだ横長のブロックが縦に五つ並びます。左に写真、右に段階の番号と見出しと説明文という並びで、写真と文章は細い線と小さな丸で結ばれています。
段階の番号は英字と数字だけの軽い表示にとどめ、日本語の見出しより目立たないよう抑えられています。最初の段階にだけ問い合わせへ進むボタンが置かれ、読み始めてすぐ行動に移せる作りです。
作業前と作業後を左右に並べる比較レイアウト
事例を紹介するページでは、淡いブルーの枠の中に見出しと二枚の写真が置かれ、左に作業前、右に作業後という並びで見比べられるようになっています。それぞれの写真の左上には濃紺の丸いバッジが重なり、どちらの状態かが一目で判別できます。
写真の下には説明文と、所在地や作業内容といった項目を並べた表組みが続きます。写真で状態の変化を見せ、文章と項目で条件を補うという役割分担がはっきりしています。
連絡までの導線設計
このサイトは相談を受け取ることを目的にしているため、連絡先への入口が画面のあちこちに用意されています。ただし数を増やすだけでなく、置き場所ごとに形を変えて重複した印象が出ないよう調整されています。ここでは四つの入口を順に見ていきます。
ヘッダーに常設された電話番号と問い合わせ
画面上部のヘッダーには、左にロゴ、右に受話器アイコン付きの電話番号と営業時間、封筒アイコン付きの問い合わせリンクが並びます。トップページでは背景が透けた状態で写真の上に重なり、下層ページでは白い帯に変わります。
電話番号は太めの数字で組まれ、その下に営業時間が小さく添えられています。番号だけを見せるのではなく、いつ電話してよいのかまで同じ位置で示す配慮がうかがえます。
右から開くドロワーメニュー
ヘッダーの右端にある三本線のアイコンを押すと、画面の右側に濃紺のパネルが開き、各ページへのリンクが縦一列で並びます。パネルの上部には白い閉じるアイコンが置かれ、開いた状態からすぐ元の画面へ戻せます。
リンクの一覧の下には、問い合わせのブロックと電話番号のブロックが色を変えて重ねられています。メニューを開いた人がそのまま連絡へ進めるよう、末尾に手段がまとめられた構成です。
電話とメールを左右に分けた問い合わせ区画
各ページの下部には共通の問い合わせ区画があり、細い枠の中が中央の縦線で左右に分けられています。左が電話、右がメールという分担で、それぞれに濃紺のボタンが置かれています。
左のボタンには番号と営業時間、右のボタンには封筒のアイコンと案内文が入ります。二つの手段を同じ大きさで並べているため、どちらを選んでもよいという姿勢がそのまま形になっています。
地図と会社概要を並べた締めくくり
トップページの終盤には、左に地図、右に濃紺のパネルという会社概要の区画が置かれています。パネルの中は項目名と内容を細い罫線で区切った一覧で、会社名や住所、電話番号、営業時間、定休日を続けて確認できます。
記載されている住所は大阪府八尾市本町1-1-1で、営業時間は9時から18時まで、定休日は不定休とされています。地図を隣に並べることで、文字の住所だけでは伝わりにくい場所の感覚が補われています。
まとめ：暮らしまわりの相談先を静かに伝えるデザイン
まきはらくらしサポートのWebサイトは、濃紺と淡いブルーという抑えた色面と、暮らしの現場を写した写真の対比だけで組み立てられたシンプルなデザインです。特別な仕掛けを持ち込まず、背景色の切り替え、左右の反転、共通の見出しの型という三つの手数だけで最後まで読ませており、小規模な事業者のサイトを設計するときの参考になります。
運営しているのは元介護職の夫婦で、代表の牧原 直希様とスタッフの牧原 夕子様が現場に伺うと紹介されています。不用品の回収や部屋の片付けと掃除、家具の移動や組み立て、草むしりをはじめとする庭の手入れ、引っ越しの手伝い、電球の交換のような細かな用事まで引き受けており、八尾市と東大阪市を中心とした近郊エリアへ最短で当日中に向かえると記載されています。
依頼を考えている人にとっては、何を頼めるのか、誰が来るのか、どんな手順で進むのかをページをまたいで順に確認できる点が安心につながります。地域に根ざしたサービス業のサイトをどう設計するかという視点でも学べる点が多いので、画面の作りが気になった方は八尾市で便利屋を探している方に向けたまきはらくらしサポートの公式サイトをご覧ください。
