Eco Hybe 店舗サイト
「Eco Hybe」は、中古品の買取、リユース品・アップサイクル品の販売を行う架空のリサイクルショップです。 本サイトはポートフォリオ用に制作したもので、Webデザインのスキルやブランド表現力を伝えることを目的としています。
- Webデザイン
- コーディング
- 店舗サイト
プロジェクト概要
- カテゴリー：店舗サイト
- 制作種別：自主制作
- 担当領域：企画、デザイン、コーディング
- 使用ツール・言語等：Figma, HTML, CSS(Sass), JavaScript, git, Github
- 制作期間：1ヶ月
- リンク：店舗サイトはこちら
設計方針
店舗概要
店舗概要
EcoHybe（エコハイブ）は、「今日の選択が、明日を作る」というコンセプトを掲げる、サステナブル志向のリユースショップです。
ただの中古品販売ではなく、価値あるプロダクトの“再流通”と“再発見”を目的とし、販売・買取・リメイクの3つのサービスを展開。
環境への配慮はもちろん、デザイン性や品質にもこだわり、使う人の感性やライフスタイルに寄り添うアイテムを提供します。
店舗やWebも含めたすべての体験を通じて、「エコを楽しむ」文化を広めていくことを目指しています。
サイト制作の目的
- ブランドの理念や世界観を伝える、会社の“顔”となるWebサイトとして制作
- 単なる中古品売買ではなく、洗練されたサステナブルなライフスタイルを提案する企業イメージを表現
- Webを通じて興味・関心を喚起し、新規来店や利用へとつなげる導線を構築
ターゲット層
- お得にショッピングを楽しみたい方（家具・家電・ブランド品・服など）
- 不用品を売りたい方（引越し・断捨離・買い替えなど）
- 環境を考えたサステナブルな暮らしに関心がある方
- 高品質なリユース品やアップサイクル品を好む層
デザインコンセプト
- “サステナブルな未来を、洗練された体験として届ける” をコンセプトに、リサイクルショップの既存イメージを刷新し、上質で信頼感のあるブランド体験を設計。
- ただエコであるだけでなく、“選ぶ楽しさ”や“ライフスタイルの一部としてのサステナビリティ”を感じられるよう、ブランド性と機能性のバランスを重視しました。
情報設計
- 多機能なサービス内容（販売・買取・リメイク）をユーザーが迷わず理解できるよう、トップページでは導入→概要→サービス紹介→行動誘導という流れを意識し、構造を整理しました。
- また、ファーストビューではブランドの世界観を強く印象づけ、その後のセクションで「EcoHybeとは何か」→「できること」→「想い」へと段階的に理解が深まる構成としています。ナビゲーションもPC/SPともに視認性と操作性を確保し、回遊性を損なわない設計としました。
ビジュアル設計
- 「エコ＝安っぽい」「中古＝雑多」という先入観を払拭し、高品質で洗練された体験を伝えるため、配色・余白・タイポグラフィ・レイアウトを厳選して設計しました。 配色は、サステナブルや自然なイメージを連想させるグリーンの系統をメインに設定し、ボタンはアクセントとして、グラデーションを使用することで、単調にならず洗練された印象を与えるようにしています。 余白は基本的に広くとり、タイポグラフィーは可読性と視認性の確保を前提とした上で、洗練された印象となるように設計しています。
- ブランドロゴやメッセージの扱いにも注意し、世界観を壊さずに伝えるビジュアルトーンを意識しています。
Output
ロゴ
Eco Hybeのロゴは、サステナブルな価値循環と自然との調和を象徴しています。 中央の「E」は“Eco”と“Exchange”の頭文字を表し、葉と矢印のモチーフは、リユース・リメイクを通じたモノの再生と、人から人へとつながる循環の概念を示しています。 全体を円で構成することで、終わりのないサイクルと、持続可能な暮らしへの想いを表現しています。 グリーンを基調とした配色は、環境への配慮と、明るく先進的なブランドイメージを補強しています。
Webデザイン
Eco Hybeの店舗サイトはこちら
EcoHybe（エコハイブ）は、「今日の選択が、明日を作る」というコンセプトを掲げる、サステナブル志向のリユースショップです。