ワイヤーフレーム

wire frame

お手数をおかけしますが上の画像はクリックして見ていただけると助かります。

ワイヤーフレーム(ウェブサイト)

作品名・概要: 架空の「思い出横丁タイムトラベルツアー株式会社」のウェブサイト向けワイヤーフレームです。昭和世代および昭和レトロに興味を持つ若い世代をターゲットに、ウェブサイトの骨格と情報構造を設計しました。

使用ツール・スキル: Adobe Photoshop

目的: ユーザーにツアーの魅力を伝え、最終的にツアーの予約へと導くことを目的としています。ターゲットユーザー(昭和世代や昭和レトロに興味を持つ若い世代)がスムーズに行動できるウェブサイトの骨格を構築することを目指しました。

工夫した点:

  • 情報設計: 訪問者が最初に目にするファーストビューでサイトの目的(タイムトラベル)が一目で伝わるよう、メインビジュアルとキャッチコピーの配置を重視しました。さらに、「プラン紹介」「お客様の声」「予約」「お問い合わせ」「会社情報」といった主要セクションを効果的な順序で配置し、ユーザーの興味を引き、予約へと繋がるよう設計しました。
  • ユーザー体験 (UX) と導線設計: ユーザーがサイト内で迷わず、スムーズに目的の情報(特にツアー予約)にたどり着けるよう、明確な導線を意識しました。主要なナビゲーションは分かりやすい位置に配置し、各セクションから予約ページへ複数のルートでアクセスできるように設計しました。
  • レイアウトと視覚バランス: 各セクションのコンテンツ量を考慮し、視覚的なバランスが良く、かつ情報が整理されて見えるようページの構成と要素の配置に工夫を凝らしました。メインビジュアルでインパクトを与え、その下に主要なコンテンツブロックを配置することで、ユーザーの視線が上から下へ自然に流れるように意識しました。
  • モバイル対応(レスポンシブデザイン): スマートフォンからのアクセスが増えている現状を考慮し、モバイルフレンドリーな表示を念頭に置いて設計しました。PCとスマートフォンで情報が適切に表示され、操作性が損なわれないよう、主要な要素の配置やメニュー形式(ハンバーガーメニューなど)を検討しました。

苦労した点: 多数の情報をどのように整理し、限られたページ空間に分かりやすく配置するかという点でした。特に、ツアーの魅力と予約への導線を両立させつつ、ユーザーが必要とする情報を過不足なく提供するバランスを見つけることに苦労しました。

反省点・改善点: 異なるユーザーペルソナに基づいたナビゲーションのバリエーションも検討すべきだった

制作期間・担当範囲: 約1時間 / ワイヤーフレーム設計全般

コメント