民宿 Haru.

① 要件定義

・サービス名と概要

島のお宿 Haru.

伝統的な日本家屋の1棟貸しを1日1組限定で宿泊体験を提供。

背景と目的

民宿「Haru」は、瀬戸内国際芸術祭や豊かな自然が魅力の豊島にあり、特にアートや自然を求める外国人観光客に人気。しかし、現状の公式ウェブサイトは情報が不足しており、民宿の魅力が十分に伝わっていない。このため、潜在的な宿泊客が予約に至らず、集客が進んでいない状況。

(1) 認知度向上と集客促進:

メインターゲットである外国人旅行者に向けて、Haruの魅力をわかりやすく発信し、宿泊予約を促進する。

(2) 情報提供の強化と予約管理の効率化:

民宿の特徴や周辺観光情報を豊富に提供し、訪問者の興味を引きつけるとともに、ゲスト・ホスト双方の利便性を向上させる予約システムを構築。

＊現状の公式webサイト

現状の課題と解決策

(1) 情報不足

現在のウェブサイトは情報が限られており、Haruの特徴や宿泊体験の魅力が十分に伝わっていない。

対策１：コンテンツの充実

予約サイトにはない民宿Haruの特徴や豊島に関する情報を提供。ブログ機能を活用し、最新情報や観光スポットを定期的に発信して訪問者の関心を引く。

対策２：視覚的魅力の向上

視覚的に魅力的なデザインを採用し、宿泊施設の雰囲気が伝わるように写真を多用して、視覚的にインパクトを与える。

(2) 外国人観光客向けの最適化不足:

英語対応が不十分で、海外からの観光客にとって情報がわかりにくく、予約に繋がりにくい状況。

対策１：多言語対応サイト

ウェブサイトを英語で常に提供し、外国人観光客の利用を促進。自動翻訳機能を活用して、より広範な国からのアクセスをサポート。

対策２：ユーザビリティの向上

レスポンシブデザインを採用し、様々なデバイスからも快適に情報を確認できるように修正。どのデバイスからでもスムーズにアクセスできる環境を整える。

(3) 外部予約サイトへの依存:

　Airbnbなどの外部予約サイトに依存しており、独自の予約システムがないため、予約管理や情報提供が統一されていない。

解決策１：独自の予約システムの導入

民宿Haru専用の予約システムを開発し、直接予約を促進。これにより手数料を削減し、予約管理を一元化して効率的な運営を実現。

解決策２：予約管理機能の強化

ゲストとホスト双方に予約状況を簡単に確認できるカレンダー機能を提供し、予約の把握を容易にすることで、利便性を向上。

差別化できる点

(1) 伝統的な日本家屋　(2) １棟貸し　(3) １日１組限定での宿泊

ターゲットユーザー

　年齢: 25-50歳

　性別: 男女問わず

　地域: ９割が欧米やヨーロッパからの外国人旅行者

　興味関心: アート、自然、文化的な体験を求める層

②使用技術

フロントエンド技術:　HTML / CSS / JavaScript:

シンプルな構成かつ動的な動きを持ったWebサイトのため、標準のHTML、CSS、JavaScriptを選定。

バックエンド技術:　Laravel 10 (PHP):

　(1) 使い慣れていて開発速度を上げる

　(2)リソースとサポートが豊富で問題の解決が容易

データベース:　MySQL:

　(1) 設定が容易でコストも低いため、小規模なプロジェクトに最適。

　(2) 安定性と信頼性を備えたリレーショナルデータベース

環境開発: Docker:

　(1) 軽量で速い為、作業が効率的

　(2) 開発環境をコンテナ化することで、環境差異による問題を軽減

ホスティングサービス:　ロリポップ！レンタルサーバ:

　(1) 低コストで、安定したパフォーマンス

　(2) 　安全なセキュリティー(SSL証明書の設定)

③必要な機能と画面の洗い出し

④ 画面遷移図

完成図 Figma版

⑤ DB設計 & ER図

DB設計

ER図

⑥ ユースケースモデリング

⑦ 実装機能の説明

ユーザー側、管理者側の機能についての詳細説明

(1) 予約カレンダーの表示

＊左側はユーザー用、右側は管理者用

予約カレンダーには、Ical形式と FullCalendar を組み合わせて使用しています。

Ical形式は、カレンダーやスケジュール情報の自動共有に対応しており、外部予約プラットフォームから予約情報を自動的に取得し、管理者のGoogleカレンダーに統合します。これにより、すべての予約情報を一元管理することが可能です。
FullCalendarは、Icalで統合された予約情報を視覚的にわかりやすく表示するJavaScriptライブラリ。予約状況をカレンダー上で直感的に把握でき、ユーザーが即座に予約状況を把握できるため、予約の確認がスムーズに行えます。

IcalとFullCalendarを組み合わせることで、外部予約サイトとGoogleカレンダーの情報を一つのカレンダーに自動統合し、効率的な予約管理を実装しました。また、ターゲットに応じて表示内容を柔軟に切り替え、ユーザー側には「予約可能日」、管理者側には「予約日」を表示するなど、それぞれのニーズに応じた予約管理を可能にしました。これにより、複数カレンダーの情報を一元化し、管理者の作業負担を軽減します。

(2) お問い合わせ管理

管理者が問い合わせを効率的に処理できるよう、ステータス管理機能や自動通知設定を導入し、対応状況を視覚的に把握できるように実装しました。

・ステータス管理機能:

お問い合わせには「完了」「未対応」「対応中」の３つのステータスを設定し、デフォルトを未対応としました。管理者はステータスを変更でき、対応状況が視覚的に把握できるため、優先度に応じた対応が可能です。また、Top画面では「未対応」と「対応中」のタスクのみを表示し、優先すべきタスクが一目で分かるようにしました。対応済みの問い合わせは削除でき、ページネーションにより必要なデータのみ表示されます。

・絞り込み機能

名前、メールアドレス、メッセージ内容、ステータス、日付などで検索可能にし、必要な情報を迅速に取得できるようにしました。

・自動通知とメール送信機能

ユーザーがお問い合わせを送信すると、管理者へと自動通知が届き、即座に対応できるフローを実現しました。また管理者はユーザーのメールアドレスをクリックして、メールサイトに遷移し、対応メッセージを送信できます。

(3) ブログ・コメントのCRUD機能と多対多のリレーション設計

管理者向けに、ブログとコメントの表示、作成、編集、削除ができる機能を実装しました。また、投稿内容を各項目（タイトル、日付、カテゴリなど）ごとに絞り込んで検索できる機能を追加し、必要な情報に迅速にアクセスできるよう工夫しています。

カテゴリ管理機能には、ブログとカテゴリを多対多の関係で関連付ける仕組みを導入しまし、1つの記事に複数のカテゴリを紐付けたり、カテゴリごとに関連する記事を効率的に管理できます。データの整合性を保ちながら、特定のカテゴリで記事を絞り込むなど柔軟な管理が可能で、閲覧者にとっても情報を見つけやすくなっています。

⑧ 工夫したこと

企画について

要件定義

企画段階でプロジェクトの目的や課題を明確にし、ターゲットユーザーを詳細に分析しました。これにより、クライアントと共有するビジョンを統一し、ビジネスニーズに合った要件を定義できました。ユーザー調査を元に使いやすい画面設計を策定し、クライアントとの密なコミュニケーションで要望を確認することで認識のズレを減らし、プロジェクトの成功に繋げました。

機能について

ドメイン駆動設計やクリーンアーキテクチャに基づいたシステム設計

システムの各層（ドメイン、ユースケース、リポジトリ、インフラストラクチャー）ごとに責務を明確に分離したことにより、ビジネスルールが他の層に依存せず、柔軟で保守性の高いシステムが実現しました。ビジネスロジックの変更が発生しても、UI層やインフラ層への影響を最小限に抑え、変更対応を容易にしました。

セキュリティー対策

予約サイトで顧客の個人情報などもを扱うため、セキュリティー対策（CSRF、XSS、SQLインジェクション、パスワード漏洩など）を以下の通りに行いました。

・ミドルウェアauth での認証 →管理者用ルートとユーザー用ルートを分離し、認証済みの管理者のみが特定のリソースにアクセス可能

・FormRequestでのバリデーション

・＠CSRFでのフォーム送信

・Eloquent ORM の使用

・Hash::make() でパスワードのハッシュ化

⑨ 振り返り

今後の実装予定・改善点をまとめました。

(1) 独自の予約システムの導入

外部予約サービスに依存せず、独自の予約システムを導入して、予約手数料の削減と利益率の向上を目指しました。

しかし、個人情報などのセキュリティ対策や決済システムの統合、二重予約防止などの課題が多く、システム設計が非常に複雑であると判断しました。そのため、独自システムの導入を見送り、外部サービスに依存する方向にシフトしました。

その代わり、予約管理機能を強化するため、ゲストとホストが予約状況を簡単に確認できるカレンダー機能を導入しました。この機能により、予約状況の把握が容易になり、利便性が大きく向上しました。

(2) 多言語対応の機能追加

メインターゲットの9割が外国人であることを踏まえ、自動翻訳機能を追加して多言語対応のサイトを構築していきたいです。これにより英語だけでなく、さらに多様な国からのアクセスに対応できるようになり、ユーザビリティの向上を図るとともに、新規顧客数の増加に繋げることを目指しています。

(3) SEO対策の強化

今後のプロジェクトでは、SEO対策を設計・開発段階から意識して実施していきたいと考えています。具体的には、キーワードリサーチやコンテンツ最適化などを初期段階で取り入れ、検索エンジンに有利なサイト構造を設計することの重要性を感じています。これにより、ターゲット層に確実にリーチし、最終的には利益や結果として反映されることを目指していきます。

⑩ 最後に

まずは最後までお読みくださり、誠にありがとうございます。

今回の民宿サイト制作は、私にとって初めて企画段階からの開発経験となり、クライアントと共に、「Haruの魅力を最大限に引き出し、効果的に伝えることで集客に貢献できるサイトを構築する」という課題解決に向き合いました。要件を一つずつ検討し、設計を進めていくプロセスの中で、サービスをより良くしていくことの喜びを感じる機会となりました。

また、これまで学習してきた知識やスキルを活かしつつ、新しい機能や技術にも挑戦することで、さらに多くの学びが得られました。改善すべき点はまだ多くありますが、今後も日々の学びを積み重ねを大切にし、自分のスキルを磨き続けていきたいと考えています。