友麻株式会社の公式サイトは、不用品回収という頼みにくさを感じやすい仕事を、淡いピンクを軸にした柔らかな画面で受け止めている点が特徴です。重い印象になりがちな題材を、色と写真とイラストの組み合わせによって生活者の側へ寄せています。
広島県福山市に拠点を構える友麻株式会社は、家庭の片付けを専門に扱う会社です。サイトは会社の姿勢とサービスの内容を並行して伝える作りになっており、初めて依頼する人が状況を判断しやすい順番で情報が置かれています。
この記事では、ファーストビュー、配色、タイポグラフィ、レイアウト、視線誘導、回遊導線という観点から、このサイトのデザインを読み解きます。片付けや回収を扱うサービスサイトを設計するときの見本として、参考になる部分を中心に取り上げます。
ファーストビューは実写と手描きイラストの重ね合わせで組み立てられています
最初に目に入る画面では、実際の作業風景を撮影した写真の上に、手描き風のイラストを重ねる手法が採られています。現場をそのまま見せて事業内容を伝えながら、絵の要素で場の空気をやわらげる二段構えです。写真とイラストのどちらか一方に寄せていない点が、このサイトの性格を決めています。
背景の作業写真が事業内容を文章より先に伝えます
背景には、軽トラックの荷台に段ボールや板材を積み上げた横長の写真が敷かれています。汎用の素材写真ではなく現場の一場面を使っているため、何を請け負う会社なのかが説明文を読む前に伝わります。荷台の輪郭が画面の中心線あたりに来る構図で、視線が横方向へ流れやすくなっています。
半透明の帯でキャッチコピーの読みやすさを確保しています
主となる一文は、くすんだピンクの半透明帯の上に白抜きで置かれ、情報量の多い写真に負けないよう処理されています。帯は文章の長さに合わせた幅で画面の左寄りに配置され、二行に折り返した文字が塊として認識できます。その下の補足文は帯を敷かずに細い白文字だけで置かれており、主と従の関係が一目で分かります。
手描きのモチーフが題材の重さを中和しています
写真の上には雲や小鳥が浮かび、画面の下端には家並みと木々、荷台付きの小さな車が横一列に並びます。写真だけであれば作業感が前へ出るところを、絵本のような描線が受け止めています。ファーストビュー全体は角を丸く落として切り取られ、周囲に淡いピンクの余白を残す額装のような見せ方です。
淡いピンクと暖色でまとめた配色設計
サイト全体の色は、白とクリーム、淡いピンク、そして操作要素に使う暖色のオレンジに絞られています。使う色の数を抑えたことで、色味の濃い写真が続く区画でも画面が散らかりません。読む要素と押す要素の役割が、色の段階で切り分けられています。
押せる場所だけを暖色のボタンで示しています
各区画の終わりには、角を大きく丸めたピル型のボタンが置かれています。塗りは暖色のオレンジで、載る文字は白抜きです。この色を見出しや本文にはいっさい使っていないため、読む場所と押す場所の区別が付きやすくなっています。ボタンの幅と高さが区画をまたいでほぼ揃っている点も、操作の目印として働いています。
お知らせの区画だけ寒色を差してリズムを付けています
お知らせの一覧へ進むボタンは、形をそのままに青緑へ置き換えられています。ピンクと暖色が続く流れの中で一か所だけ寒色が入るため、更新情報を扱う区画であることが色でも読み取れます。差し色の分量が控えめで、全体の調和を崩していないところが参考になります。
背景に薄いテクスチャと淡いにじみを敷いています
白い背景には縦方向の細いテクスチャがうっすらと入り、画面の左右の端にはピンクのにじみのようなぼかしが置かれています。単調な白場を避けながら、文字の読みやすさを損なわない濃度に抑えられています。装飾を主張させず、下地として機能させる使い方です。
見出しとタイポグラフィの組み立て
区画の入り口は、すべて同じ型で統一されています。読み手はページを下るほどこの型に慣れ、どこから新しい話題が始まるのかを迷わず判断できます。見出しの周りに広く余白を取っている点も、区切りの合図を強めています。
英字と日本語を二段に重ねた見出し
各区画の見出しは、上に小さめの英字、下に大きな日本語という二段構成です。日本語側はピンクで字間を広く取り、細めの太さで組まれています。中央揃えで置かれているため、スクロールの途中で目に入っても章の変わり目だと分かります。英字は色を落として小さく置かれ、装飾としての役割にとどめられています。
行間を広く取った本文の組み方
本文は黒に近いグレーで、行間をゆったり取っています。運営者の考えを述べた区画のように文章量がある場所では行間がさらに広く設定され、長い文章でも視線が迷いません。文字を詰め込まず、余白によって読む速度を落とす設計になっています。
レイアウトと視線誘導の工夫
トップページは、中央揃えの区画と左右交互の区画を組み合わせて単調さを避けています。区画ごとに構図が変わるため、縦に長いページでも読み進めるうちに飽きにくくなっています。どの区画も最後にボタンで締める形が共通しており、流れの終点が明確です。
会社紹介は中央揃えで簡潔にまとめています
私たちについての区画は、短い説明文を中央に三行だけ置き、その下に写真を二枚横並びにしています。写真は角丸で薄い影が付き、白い背景から少し浮かんで見えます。左は回収品を積んだ車両、右は室内で箱詰めをするスタッフという組み合わせで、屋外と屋内の両方の場面を一組で見せています。
サービスの区画は左右交互のジグザグ配置です
サービスについての区画では、写真と説明文が左右交互に並びます。ブロックが変わるたびに画像の位置が入れ替わるので、同じ形式が続いても視線が一か所に固定されません。各ブロックの末尾にはボタンが置かれ、詳細を知りたい人の出口が必ず用意されています。見出しと本文の文字サイズの差が小さく、落ち着いた読み心地にまとめられています。
会社概要は大きな一枚写真から入ります
会社概要の区画は、横幅いっぱいに近い一枚の写真から始まります。その下に太字の大きな一文を置き、続けて本文、最後にボタンという順序です。写真で場面を見せ、結論を短く述べ、理由を説明し、行動へ促すという並びが素直で、読み手が迷う要素を作っていません。
UIと回遊導線の設計
導線は画面上ではっきり見える形に絞られ、押せる場所が分かりやすくまとめられています。ここでは実際の画面で確認できた要素だけを取り上げます。
ヘッダーはロゴとメニューボタンだけの構成
画面の上部には白い帯があり、左に丸いシンボルマークと社名、右にメニューを開くためのボタンが置かれています。項目を横に並べず開閉式にまとめているため、ファーストビューの写真が最大限に生きます。帯の下には細い色線が引かれ、内容との境目が示されています。
お知らせはカード形式で横に送れます
お知らせの区画は、写真、区分のラベル、記事名、日付を縦に積んだカードが横に並ぶ形です。ラベルは角丸の枠線で囲われ、日付には時計のアイコンが添えられています。右端には次のカードへ送る矢印のボタンが重なっており、横方向に見ていけることが形で示されています。カードの写真はどれも実際の様子を撮ったもので、会社の動きが伝わる作りです。
フッターの手前に三つの入口を並べています
本文の終わりには写真を背景にした横並びの帯が置かれ、サービス内容、よくある質問、問い合わせという三つの入口が示されています。写真の上に暗い層を重ねて白文字を載せる処理により、どの帯も同じ読みやすさに揃えられています。その下にはくすんだピンクの帯で主要ページへのリンクをまとめ、最下部に著作権表記を置く構成です。帯の直前には手描きの街並みイラストが全幅で入り、ページの終わりを穏やかに締めています。
情報設計から読み取れる伝え方
トップページは、会社の性格、扱う仕事、動いている様子、運営者の姿勢という順に並んでいます。依頼を考える人が知りたい順序に近く、下層ページへ送る前に判断材料を渡す設計です。各区画が長くなりすぎないよう要点だけを置き、詳細は個別のページに預けています。
下層ページで具体的な内容を厚く見せています
私たちについてのページには、考え方をまとめた区画、選ばれる理由を番号付きで並べた区画、特徴的なサービスを紹介する区画が続きます。女性スタッフだけで作業する形、スタッフと顔を合わせずに済ませる形、夜間に回収する形といった選択肢が示され、依頼をためらう理由に個別に答える構成になっています。汚れや臭いが気になる部屋にも対応する旨や、作業の時間帯や車両の停め方など近隣への配慮を相談できる旨も並びます。
サービス内容のページでは、引っ越しに伴う片付けや家具・家電の引き取り、粗大ゴミの処分、ゴミ屋敷の片付けといった対応範囲が示され、続けて遺品整理や生前整理、草刈りや剪定、空き家対策といった周辺の仕事も紹介されています。さらに回収品目が、家具とインテリア、家電製品、生活用品、その他という区分で細かく列挙され、自分の手放したい物が該当するかを探しやすくなっています。
対応エリアと運営者を明示しています
対応できる地域は、広島県側が福山市・尾道市・三原市、岡山県側が笠岡市・井原市・倉敷市と示され、それ以外の地域も相談を受け付ける旨が添えられています。会社概要には所在地や連絡先、受付の時間帯、年中無休で動いている点に加え、代表取締役の石井 敏男様の名前と、社名に込めた思いを述べたメッセージが置かれています。誰が運営しているのかが分かる状態にしてあることは、住まいへ立ち入る仕事において読み手の安心につながります。
不用品回収のサイトを作るときに参考になる点
福山市で不用品回収や遺品整理を探す人は、部屋を早く空けたい、重い物を動かせない、どこから手を付ければよいか分からないといった事情を抱えています。こうした状況で開かれるサイトは、事業内容の説明よりも先に、相談してよい相手かどうかを示す必要があります。友麻株式会社のサイトは、その判断材料を色と写真とイラストで先に渡している点が学べる部分です。
頼みにくさを色と絵でほぐしています
片付けや回収を扱うサイトは、現場写真の情報量が多くなりがちで、画面が重く見えることがあります。このサイトでは、淡いピンクとクリームを土台に置き、手描きのイラストを要所へ差し込むことで印象を調整しています。写真を小さくして情報を減らすのではなく、周囲の色を整えて受け止め方を変えるという解決の仕方です。
迷いどころに先回りして答えています
ゴミ屋敷の片付けや遺品整理は、人に見られたくない、立ち会う時間が取れないといった心理的な壁が生まれやすい依頼です。そうした壁に対して、女性スタッフだけの作業、顔を合わせない方式、夜間の回収という具体的な選択肢を並べ、質問の多い事柄を集めたページも別に用意しています。読み手の不安を項目として言語化し、それぞれに答えを置く構成は、同じ業種のサイトで応用できます。
まとめ：友麻株式会社のサイトから学べること
友麻株式会社のサイトは、淡いピンクを基調とした配色、実写と手描きイラストを重ねたファーストビュー、左右交互に並ぶサービスの区画、カード形式のお知らせという要素を、一本の筋で通しています。装飾の量は控えめですが、色の役割分担と余白の取り方が丁寧で、初めて訪れた人でも読み進める順序に迷いません。
写真は現場の様子をそのまま使い、イラストは印象を和らげる役目に徹しています。この使い分けによって、事業の実態を伝えながら相談のしやすさも同時に打ち出すという、相反しがちな二つの目的が両立しています。生活に関わるサービスのサイトを作る際の見本として、色と写真の組み合わせ方は特に参考になります。
実際の画面の動きや細部の作り込みは、ぜひご自身の目で確かめてみてください。福山市でゴミ屋敷の片付けにも対応する友麻株式会社の公式サイトでは、ここで取り上げた配色や導線の設計をそのまま確認できます。
