民泊ギャラリー鴇

アットホームでひとの温かみが感じられる

私の母が運営する民泊の公式サイトを制作いたしました。

民泊のアットホームで温かみのある雰囲気をサイト全体の配色で表現しています。アクセントカラーには民泊の名前に基づいた「鴇（とき）」からインスピレーションを得て、鴇色に近いピンクを設定しました。これにより、鴇と民泊をモチーフにしたロゴとの親和性、自主制作サイトならではのオリジナリティを表現しています。

ロゴにはネットの口コミだけでなく、実際に泊まった人が勧めたくなるような「人から人に伝えて訪れたくなる宿になってほしい」という願いを込めて制作しました。

これまでは楽天トラベルやBooking.comなどの予約サイトで簡易的な情報がまとめられているだけでしたが、今後は予約を迷っている方々の背中を押すようなサイトになれば良いなと思っています。

【Top】

【Room & Facility】

【Feature / Plan】

カード型モジュールを採用。ぱっと見でも印象に残りやすいように、実際に宿泊したお客様の写真を使用しました。また、民泊のお部屋の様子や共有スペースの特徴が分かりやすい写真を撮影し、掲載しております。

【Access】

【Contact】

【レタッチ】

レタッチ業務に関しましては、本来、デザイナーやカメラマンの業務になるかと思います。しかし、今回、個人制作をするにあたり、画面の内側だけでなく、外側の部分もアクセシビリティに含まれると考えました。そのため、サイトを閲覧しやすいように画像は全て自分でレタッチを行い、トーンの統一を図りました。

JavaScriptのエラーの特定に時間がかかりすぎてしまいました。
→原因と思われる部分を細分化して特定しましたが、時にはChatGPTの力を借りながら解決しました。
分かりにくいと感じたクラス名を途中で変更し、1つのパーツのコーディングに時間がかかりすぎてしまいました。
→汎用性を持ちつつ、ぱっと見てもすぐにイメージできるクラス名を心掛けました。
自分の設計したデザインに対して、それぞれの項目のまとめ方が曖昧になってしまい、途中でデザインや仕様を変更してコーディングの工数が増えてしまいました。
→今後は「なぜこのデザインにしたのか」という理由を最初の情報設計をもとに明確にし、途中でぶれないようにします。
Topページのデザインカンプが完成した時点でコーディングに着手したため、下層ページのデザインとコーディングの手戻りが多く発生してしまいました。
→今後はデザインが完成してからコーディングに着手するようにします。
撮影の際にカメラの設定でISO感度を上げすぎてノイズがのってしまい、何度も撮り直しが発生してしまいました。
→写真に詳しいオンラインサロンのメンバーの方にご教授いただき、再撮影しました。

公開日: 2024年9月4日
制作規模: 個人制作のため1名
制作担当: ディレクション / デザイン / コーディング/ 撮影 / レタッチ
制作期間: ディレクション(コンセプトワーク / 競合他社の分析 / プランニング) : 2ヵ月

デザイン：4ヵ月

コーディング : 9ヵ月

撮影 : 3日

レタッチ : 1ヵ月
制作時間: 1日あたり : 8~12時間
使用言語: HTML / CSS(Sass) / JavaScript
開発環境: webpack
使用ツール: Illustratior / Photoshop / Lightroom Classic / Visual Studio Code / Figma / GitHub
撮影機材: Nikon Zfc / NIKKOR Z DX 16-50mm f/3.5-6.3 VR
撮影場所: 熊本県　阿蘇熊本空港・民泊周辺の道やお店・桜町バスターミナルなど

つくったものをすべて見る

民泊 ギャラリー 鴇