自主制作｜シェアハウスサイト制作
https://borderless.aoi-ds.com/
プロジェクト概要
制作概要
自主制作として、国際交流シェアハウスを想定したデモサイトを制作しました。
シェアハウスのコンセプト、選ばれる理由、一般賃貸との違い、物件概要、入居までの流れ、料金、空室状況、よくある質問、お問い合わせまで、入居を検討する方が必要な情報を順番に確認できる構成にしています。
制作範囲
情報設計 / デザイン / コーディング・実装 / レスポンシブ対応 / トップページ制作 / 物件情報整理 / 料金表設計 / 空室情報設計 / FAQ設計 / お問い合わせ導線設計
制作期間
3日
使用ツール
HTML・CSS / Photoshop / WordPress（Snow Monkey）
制作戦略
想定課題
国際交流をテーマにしたシェアハウスを想定し、住まいとしての安心感と、異文化交流ができる楽しさの両方が伝わるサイトとして制作しました。
シェアハウスは、一般的な賃貸物件と比べて、部屋の広さや料金だけでなく、共用スペースの使い方、入居者同士の雰囲気、生活ルール、入居までの流れなど、事前に知りたい情報が多いサービスです。
そのため、単に物件情報を並べるのではなく、「どんな暮らしができるのか」「どんな人に向いているのか」「一般賃貸と何が違うのか」が伝わる構成を意識しました。
制作の意図
今回の制作では、国際交流シェアハウスならではの魅力を伝えながら、入居検討者が不安なく問い合わせへ進める導線設計を重視しました。
ファーストビューでは、暮らしの楽しさや人とのつながりが伝わるメッセージを配置し、その後にコンセプト、選ばれる理由、一般賃貸との比較へとつなげることで、シェアハウスの価値を段階的に理解できる流れにしています。
また、個室スペースや共有スペース、料金、空室状況、入居までの流れを掲載することで、実際の生活イメージや入居後の流れが具体的に伝わるようにしました。
FAQでは、語学力、同室入居、ゲスト宿泊など、入居前に不安になりやすい内容を整理し、問い合わせ前の疑問を解消できるようにしています。
デザインの根拠
デザインは、国際交流の楽しさや開放感が伝わるよう、写真を大きく使用しながら、明るく親しみやすい印象になるよう設計しました。
一方で、住まいを探している方に向けたサイトでもあるため、料金、空室情報、入居までの流れなどは、見た目の雰囲気だけでなく、情報の分かりやすさを重視して整理しています。一般賃貸との比較や料金表、空室情報は、初めてシェアハウスを検討する方でも違いを理解しやすいよう、比較しやすさと視認性を意識しました。
また、スマートフォンで閲覧するユーザーも多いことを想定し、各セクションの余白、文字サイズ、写真の見せ方、問い合わせ導線の分かりやすさにも配慮しています。
活用イメージ
本サイトは、シェアハウス、ゲストハウス、民泊、留学生向け住居、コミュニティ型施設など、空間の魅力と利用イメージを伝えたいサービスに向けた制作例です。
物件の設備や料金だけでなく、そこでどのような時間を過ごせるのか、どのような人と出会えるのかを伝えることで、単なる住居紹介ではなく、暮らしの魅力まで伝わるサイト構成にしています。
「物件の魅力を写真と文章で分かりやすく伝えたい」
「料金や空室情報を整理して見せたい」
「一般賃貸との違いを分かりやすく説明したい」
「問い合わせや内覧予約につながる導線を整えたい」
「コミュニティや体験の価値が伝わるサイトにしたい」
そのようなケースを想定した制作例です。
