エコピアは、遺品整理や生前整理、ゴミ屋敷・モノ屋敷の片付けなどを扱うサービスサイトです。運営しているのは東京都板橋区に本社を置く株式会社エコアスで、サイト内では東京・埼玉・神奈川・千葉を対応の範囲として案内しています。
デザインの結論から述べますと、このサイトは「不安を感じやすいテーマを、清潔感のある寒色と実際の現場写真で受け止める」という方針で組み立てられています。青からティール（青緑）へ流れるグラデーションを主役に据え、淡い水色の面と白い余白でセクションを切り替えることで、重くなりがちな題材を明るく見せています。
ここからは、ファーストビュー、配色、レイアウト、コンテンツ設計、問い合わせ導線という順に、画面から読み取れる工夫を具体的に見ていきます。
ファーストビューの構成と第一印象のつくり方
ファーストビューは、背景写真、重ねた見出し、下部の装飾という三つの層で組み立てられています。層ごとに役割がはっきり分かれているため、情報量が多いにもかかわらず散らかった印象になりません。ここでは写真と文字の重ね方、そして最下部に並ぶ装飾の役割を順に見ていきます。
屋外の人物写真に半透明の帯を重ねた見出し
背景には、作業着姿の男女が屋外で空を見上げる横長の写真が敷かれています。人物の視線が上を向いているため画面全体が前向きな印象になり、片付けという題材に伴いがちな重さが和らいでいます。
その上に、白抜き文字の見出しが半透明の青い帯とともに重なります。帯は一行ごとに分かれ、上から下へ幅を変えながら階段状に並ぶため、写真の情報量が多い場所でも文字が背景に埋もれません。さらに背景には地球儀とネットワークを思わせる線画がごく薄く敷かれ、ロゴの世界観がそのまま画面の下地として引き継がれています。
下部に並ぶ金色のメダル型バッジ
ファーストビューの下端には、リボンの付いた金色のメダル型バッジが四つ横並びで配置されています。寒色でまとめた画面の中で暖色のゴールドだけが浮き上がるため、スクロールを始める直前に視線がここで一度止まります。
勲章のような形と質感そのものが訴求の存在を伝える図案になっており、文字を読み込まなくても「押し出したい強みがある」ことが直感的に届きます。要素を四つにそろえて等間隔で並べている点も、内容を見比べやすくする工夫です。
配色とトーン＆マナーのつくり方
このサイトの印象を決めているのは、色数を絞った配色と、面の切り替えによるリズムです。ロゴから引き出した色をページ全体へ展開し、背景の色や写真の敷き方で場面転換を示しています。ここでは色の展開、セクションの塗り分け、書体と余白という三つの観点から整理します。
ロゴから展開した青・ティール・グリーン
ロゴは、円形のエンブレムとセリフ体の欧文ロゴタイプを組み合わせた形です。エンブレムには青い球体と緑の葉が描かれ、文字部分では「i」の点をオレンジにし、末尾に緑の葉のアクセントを添えることで、環境を扱う事業であることを控えめに示しています。
ページ全体の配色は、このロゴの色をそのまま拡張したものです。見出し、ボタン、アイコンには青とティールを使い、緑はロゴまわりの差し色にとどめています。使う色を絞っているため、掲載写真の色味が多彩でも画面がまとまって見えます。
淡い水色の面によるセクションの切り替え
白い背景を基調としながら、強みを並べたセクションだけが淡い水色の面で塗り分けられています。区切り線を引かずに背景色そのものを変える手法なので、読み進める途中で話題が変わったことが感覚的に伝わります。
加えて、写真を全幅で敷いたセクションや、青とティールのグラデーションで塗ったセクションが下部に挟まれています。白、淡い水色、写真、グラデーションという四種類の面が交互に現れるため、縦に長い一枚ものの構成でも単調になりません。
書体と余白のとり方
見出しと本文はいずれもゴシック体でそろえられ、見出しだけを太く大きくして強弱を付けています。装飾的な書体に頼っていないため、年齢を問わず読み取りやすい画面になっています。
行間と段落の間隔にはゆとりがあり、テキストブロックの左右にも十分な余白が確保されています。写真の情報量が多いサイトほど文字が窮屈になりがちですが、このサイトでは余白が緩衝材として働き、落ち着いた読み心地につながっています。
サービス紹介のレイアウトと情報設計
サービスを並べた中盤は、このサイトで最も面積を割いている部分です。同じ形式の説明が続いても飽きさせないよう、配置のリズムと写真の見せ方に工夫が施されています。ここではレイアウト、写真の役割、ボタンの統一という三点を取り上げます。
左右交互のジグザグレイアウト
サービス紹介は、写真とテキストを左右で入れ替えながら積み重ねるジグザグの配置です。一つ目は写真が左で説明が右、二つ目はその逆というリズムが生まれ、視線が左右に振られることで読み進める勢いが保たれます。
各ブロックの小見出しは黒の太字で、その下に水色のマーカーを引いたような帯が重なります。蛍光ペンでなぞったような表現なので、手書きに近いやわらかさが加わり、事務的になりすぎない印象に落ち着いています。
ビフォーアフター写真が担う説明の役割
整理作業や片付け、清掃を紹介するブロックには、作業前と作業後の写真が二枚一組で並びます。左上に「BEFORE」、隣に「AFTER」のラベルが載り、二枚の境目に白い三角形が置かれているため、どちらがどちらかを迷わず読み取れます。
いずれも実際の現場を撮影した写真で、加工や演出を重ねていません。文章を長くしなくても作業の中身が伝わるので、説明文を短く保ったまま説得力を確保できています。周辺の対応範囲を示すブロックでは、円形に切り抜いた写真をスタッフの写真に重ねたコラージュが使われ、扱える領域の広さを一枚で表現しています。
繰り返し使われるピル型のボタン
各ブロックの末尾には、角を大きく丸めた横長のボタンが置かれています。青からティールへ左右に流れるグラデーションで塗られ、白い文字と右端の小さな矢印が添えられた形です。
同じ形と同じ色のボタンをページ全体で繰り返しているため、読者は「詳細へ進む操作はこの形」と自然に学習でき、迷いが減ります。ボタンの周囲にゆったりと余白が取られている点も、押しやすさと視認性の両方に効いています。
強みの一覧と質問集に見るコンテンツ設計
文章量が増えやすいセクションでは、番号やアイコンを使って読み進める順序を示しています。長い説明をそのまま積み上げるのではなく、目印を置いて拾い読みできるようにしている点が特徴です。ここでは強みを並べた一覧と、質問をまとめた一覧を見ていきます。
連番と写真で読み解く強みの一覧
強みをまとめたセクションは、01から05までの連番を大きく置いた縦並びの構成です。数字は太い書体で淡い青に着色され、見出しよりも先に目へ入るため、項目がいくつあるのかが一目で把握できます。
各項目は、左に正方形に近い写真、右に見出しと本文という二列で組まれています。内容としては、運営会社が扱いにくい品目まで引き取れること、教育課程を修めた有資格者が対応すること、訪問から作業後のフォローまで同じ担当者が一貫して受け持つこと、不要になった品物をリユースする仕組みを整えていることなどが挙げられています。写真には車両やスタッフ、認定を示す書面が写り、文章の裏付けとして機能しています。
アコーディオン形式のよくある質問
よくある質問は、淡い水色の角丸バーを縦に積んだ一覧です。左端に濃い青の円形バッジ、右端に開閉を示す「＋」が置かれ、答えを閉じた状態で質問文だけを見渡せる形になっています。
急な相談への対応、当日の立ち会い、事前に準備しておくもの、現場の状況によって引き受けてもらえるかどうかなど、依頼前に気になりやすい点が並びます。閉じた状態で並べているぶん一覧の縦幅が短く保たれ、探している質問へ短いスクロールでたどり着けます。一覧の下にも詳細へ進むボタンが置かれ、続きを読みたい読者の受け皿になっています。
問い合わせ導線とフッターの情報整理
連絡手段への導線は、画面上部と下部の両方に用意されています。上部では常に見える位置に置き、下部では面全体を使って大きく見せるという役割分担です。ここでは header まわりと、ページ下部からフッターまでの流れを確認します。
ヘッダーに常設された連絡先
ヘッダーの右側には、受話器のアイコンを添えたフリーダイヤルと受付時間、その隣に封筒アイコン付きの角丸ボタンが並びます。電話番号は太く大きな数字で組まれ、画面上部で最も強い要素になっています。
その下には、選ばれる理由、お客様の声、よくある質問、会社概要といった項目が細い縦罫線で区切られて横一列に並びます。項目を絞り込んでいるため一つあたりの文字を大きく取れており、初めて訪れた読者でもサイトの全体像をつかみやすい並びです。
ページ下部の問い合わせセクションとフッター
ページ下部には、青からティールへ抜けるグラデーションの上に人物写真を薄く重ねたセクションが用意されています。白い文字で見出しと案内文を中央にそろえ、その下にフリーダイヤルと白いピル型のボタンを左右に並べる構成です。背景の彩度を落としているため、白い文字とボタンが強く浮き上がります。
問い合わせページでは、入力から確認、完了までの段階が上部に示され、依頼内容の種別、氏名、連絡先、相談内容、返信方法といった項目が順に並びます。フッターは白い背景に戻り、左にロゴと運営会社名・所在地、右に主要ページへのリンクを二列で配置し、最下部の細いグレーの帯へ著作権表示を収めています。上から下まで情報の密度が段階的に下がっていく構成で、読み終わりが自然に閉じられています。
板橋区で片付けを考えるときの視点とエコピアのサイトから学べること
最後に、遺品整理や不用品の整理を検討するときに押さえておきたい一般的な視点と、このサイトのデザインから学べる点を整理します。依頼する側の不安がどこにあるのかを知ると、なぜこの構成が採られているのかが見えてきます。
住宅が密集する市街地では、搬出の経路、車両を停められる場所、作業できる時間帯といった条件が進め方を左右します。家財の量が多い場合は、自治体の収集に出せるものと業者へ任せるものを切り分ける必要があり、家電や大型家具のように扱いが決まっているものもあります。相談の前に部屋ごとの状況を写真へ記録しておくと、現場の状態を言葉だけで説明せずに済みます。
また、貴重品や思い出の品が紛れ込んでいる可能性がある片付けでは、立ち会いができるかどうか、当日どのように確認しながら進めるのかを先に相談しておくと安心です。許可や資格の有無、片付けの後に清掃まで含めて任せられるかどうかも、依頼先を見比べるときの判断材料になります。
エコピアのサイトは、こうした不安をデザインの側から受け止めています。寒色を軸にした清潔感のある配色、実際の現場を写した対比写真、連番で追える強みの一覧、開閉式にまとめた質問集という組み合わせは、扱いにくいテーマを正面から伝えたいサイトを設計するうえで参考になります。写真とテキストのバランスや、繰り返し使うボタンの設計など、規模の大きくないサイトでもすぐ取り入れられる工夫が多い点も見どころです。
実際の画面や写真の使い方を確かめたい方は、板橋区で不用品回収や遺品整理に取り組むエコピアの公式サイトをご覧ください。
