制作期間
1ヶ月
サイトURL
作業内容
- ヒアリング
- 構成案作成
- セールスライティング
- 画像作成・加工
- デザインカンプ作成
- コーディング実施
- WordPress構築
使用ツール
- Visual Studio Code
- Adobe PhotoShop
- Adobe Illustrator
- Adobe XD
- Adobe Express
- Figma
- Local by Flywheel
- WordPress
離島とクルーズを中心とした旅行会社様「旅の輪九州株式会社」のホームページリニューアルを担当させていただきました。
本プロジェクトでは、私自身が旅行業資格を所持していることや、九州での生活経験、さらに多くの離島を訪れた思い出や知識を最大限に活かし、「離島とクルーズの魅力を存分に伝えるサイト作り」をテーマに進めました。九州の温かみや豊かな自然、旅へのワクワク感をサイト全体で表現することを目指しました。
1. 島別・カテゴリー別に一覧表示機能を導入
「離島とクルーズ」という特化型の旅行会社の特徴を活かし、膨大なツアーデータを「島別」「カテゴリー別」に整理して一覧表示できる機能を導入しました。この機能により、訪問者は興味のある地域やテーマをすばやく絞り込むことが可能です。特に、九州の離島を初めて訪れる方でも迷わずプランを選べるよう、地図や写真を活用した直感的なナビゲーションをデザインしました。お客様からは「探しやすい」「選びやすい」と好評をいただいています。
2. カスタム投稿タイプによるお知らせ機能の設定
旅行会社様が頻繁に発信する情報として、新着ツアーやイベント情報があります。それらを効率的に管理・表示するために、WordPressのカスタム投稿タイプを活用しました。この仕組みにより、従来は一括管理が難しかったお知らせ情報をカテゴリごとに整理し、更新作業の効率化を実現しました。また、訪問者はトップページや専用の「お知らせ一覧ページ」で必要な情報をすぐに確認できるようになり、使いやすさが向上しました。
3. 社長様のNoteブログをRSSで引用
「旅の輪九州株式会社」の社長様が執筆されるNoteのブログは、離島やクルーズに関する貴重なエピソードや旅行者への思いが詰まったコンテンツです。その魅力をサイト内でも伝えるべく、RSS機能を利用してブログ記事を自動的に反映する仕組みを実装しました。これにより、ブログの更新情報がリアルタイムでサイトに反映され、訪問者は常に新しい情報を受け取ることができます。また、これが社長様の個性や情熱を伝える重要な要素となり、訪問者との信頼感の構築にも貢献しています。
4. トップ画像をはじめとする画像加工
旅行サイトにおいて視覚的な訴求力は非常に重要です。そのため、九州の美しい離島やクルーズ船の写真をもとに、色調や構図を調整した画像加工を行いました。トップページでは、訪問者が一目で「旅に出たい」と感じるような印象的なビジュアルを配置。また、各離島ページやツアーページでは、現地の魅力を直感的に伝えるための高品質な画像を使用しました。これにより、サイト全体に一貫性のあるビジュアル体験を提供しています。
5. フッターにSVGアニメーションで波を演出
サイト全体を「海」というテーマで統一するため、フッター部分に波を模したSVGアニメーションを導入しました。この演出は動きが滑らかでありながら、サイトの邪魔にならない控えめなデザインを採用。訪問者がスクロールしてコンテンツを読み進める中で、九州の海を感じられるような細やかな工夫を施しました。このアニメーションは、単なる装飾以上の役割を果たし、サイトの雰囲気作りに大きく寄与しています。
6. 離島に行く船をイメージしたアニメーション
トップページに動きを取り入れることで、訪問者に「旅の始まり」を感じさせる体験を提供するため、船をイメージしたアニメーションを実装しました。このアニメーションは、クルーズや船旅の楽しさを視覚的に表現し、訪問者の期待感を高める要素として機能しています。また、アニメーションを表示させるタイミングや動作の速度にも工夫を凝らし、スムーズで自然な動きを実現しました。このインタラクションにより、訪問者のサイト滞在時間が延び、エンゲージメント率の向上にもつながっています。
これらの施策により、「旅の輪九州株式会社」の新しいホームページは、離島やクルーズに興味を持つ方々にとって、使いやすく、情報が探しやすいだけでなく、旅への期待をさらに高めるサイトへと生まれ変わりました。