【HarThech架空案件】京都はんなり女子旅

制作の背景

SNSや個人旅行の普及により「観光地を巡るだけでなく、雰囲気や体験そのものを楽しみたい」という女性旅行者が増えていると感じ、本制作では京都×女子旅をテーマにした旅行パッケージサイトを想定して制作しました。

京都に初めて訪れる人にとっては「どこを、どの順番で回ればいいのか分からない」という不安があるため、本サイトでは、モデルコース形式で一日の流れを提示し、安心して旅のイメージができることを目的に制作しました。

また、20〜30代女性を主なターゲットとし、「一人でも、友人同士でも使いやすい」「写真映えだけでなく、落ち着いた京都らしさも感じられる」デザインを目指しています。

デザインの意図

  「はんなり」「やさしさ」「上品さ」をキーワードに、淡いピンクや生成りを基調とした配色で全体をまとめ、京都の和の世界観と女性向けの柔らかさを表現しました。 桜や和柄モチーフ、丸みのある装飾を取り入れることで、堅くなりすぎない親しみやすさを意識しました。

 カラーデザイン

京都の「はんなり」とした上品な雰囲気を表現するため、全体は淡いピンクや生成りを基調とした低彩度カラーで統一しました。 桜を想起させる柔らかな色味をベースにすることで、女性向けでありながら甘くなりすぎない落ち着いた印象を意識しています。 CTAボタンにはやや濃いグリーンを使用し、全体のトーンを崩さずに視線を集めるアクセントとして機能させています。

タイポグラフィ

タイトルやメインビジュアル周辺には筆文字風・和テイストの書体を使用し、京都らしさや特別感を演出しています。

一方、本文や説明文には親しみやすい文字を採用し、観光情報やスケジュールがストレスなく読めるよう配慮しました。

 装飾的なフォントと実用的なフォントを使い分けることで、 「世界観を伝える部分」と「情報を正確に伝える部分」の役割を明確にしています。 

情報設計（レイアウト・構成）

情報量の多い旅行サイトでも迷わず閲覧できるよう、**上から順に「世界観理解 → サービス概要 → 具体的な体験内容 → 行動導線」**という流れで構成しています。

モデルコース紹介では、時間順・番号付きの構成を採用し、 「何時に・どこへ行き・何をするのか」が一目で分かるよう設計しました。 写真・テキスト・アイコンをセットで配置することで、視覚的にも理解しやすくしています。

また、申し込みボタンをページ内に複数配置し、 「興味を持った瞬間に次のアクションへ進める」導線を意識しました。 情報の詰め込みすぎを避け、余白を活かすことで、京都旅行の“ゆったりとした時間の流れ”を感じられるUIを目指しています。

ワイヤーフレーム設計

本ワイヤーフレームは、「京都×女子旅」をテーマにした旅行パッケージサイトを想定し、初めて訪れるユーザーでも迷わず内容を理解し、行動に移せる構成を目的として設計しました。

全体構成の考え方

ページ全体は、 世界観の提示 → サービス理解 → 体験の具体化 → 行動（CTA） というユーザーの思考フローに沿って設計しています。

ファーストビューでは、サービス名・キャッチコピー・メインビジュアルを大きく配置し、サイトのコンセプトが一目で伝わる構成としました。 また、CTAをファーストビュー直下に配置することで、興味を持ったユーザーがすぐに次のアクションへ進めるようにしています。

CTA配置の工夫

CTAはページ内に複数配置し、 ・興味を持った直後 ・モデルコースを読み終えた後 ・プラン内容を理解した後 と、ユーザーの検討フェーズごとに自然に行動へ誘導できるよう工夫しています。

ワイヤーフレーム制作で意識した点

本段階では装飾を排し、情報の優先順位・視線誘導・余白バランスに集中して設計しました。 デザイン前に構造を明確にすることで、後工程でのビジュアルデザインやUI設計がスムーズに行えるよう意識しています。

工夫したポイント

・世界観と情報量のバランス設計

京都らしい「はんなり感」を大切にしつつ、情報過多にならないよう装飾は控えめに使用しました。 和柄やイラストは視線誘導や区切りとして配置し、コンテンツの読みやすさを損なわないよう工夫しました。

・時間軸を意識したモデルコース構成

モデルコースは「時刻＋番号」で整理し、スクロールするだけで一日の流れが把握できる構成にしました。 旅行初心者でも行程を具体的にイメージできる点を意識しています。

・写真・イラスト・アイコンの使い分け

実写写真でリアルさを、イラストで親しみやすさを補完することで、女性向けサイトとして安心感のある印象を演出しました。 それぞれに役割を持たせることで、情報が整理された印象になるよう調整しています。

・行動導線を考慮したCTA配置

ユーザーの検討タイミングを想定し、申し込みボタンを複数箇所に配置しました。 「興味を持った瞬間に次の行動へ進める」ことを意識した設計です。

この制作で身につけたこと

• ターゲットユーザーを明確に設定した上で、世界観と実用性を両立させるデザイン思考

• 情報量の多いコンテンツを、視線誘導や余白で整理する情報設計力

• 写真・イラスト・テキストそれぞれの役割を考えたビジュアルの使い分け

• 見た目だけでなく「どう行動してほしいか」を意識したUI・導線設計

改善点・次に活かしたい点

本制作では世界観づくりを重視したため、今後はさらに

• レスポンシブデザインを前提とした細かなUI調整
• 実際のユーザー行動を想定したABテスト視点でのCTA配置検討
• アクセシビリティ（文字コントラストや操作性）への配慮

といった点も意識し、より実務に近いWebデザインへブラッシュアップしていきたいと考えています。