徳島じゅうの遊びを、迷わず巡れる1枚に。
関西からの日帰り旅を後押しする、徳島県の観光・体験キャンペーンLP。県内全域に散らばる観光スポットと体験アクティビティを、エリアごとに整理し、探して選べる縦長1枚にまとめました。担当は、このLPのUI/ビジュアルデザインです。
全長14,000pxという情報量を、どうやって「探せる」構造に変えたか。エリアでの章立て・共通カード・地図という3つの骨格が答えです。
実際に公開された観光キャンペーンサイトです。担当したのは LP の構成(ワイヤーフレーム)〜UI/ビジュアルデザインで、企画・コピー・実装は別の担当によるもの。地名・写真・ロゴ等は各権利者に帰属します。
エリアで巡る、徳島まるごとの観光LP。
体験予約サービス「アソビュー!」が手がける、徳島県の観光・体験を紹介するキャンペーンLPです。「関西からひと足伸ばして」という切り口で、日帰りでも楽しめる徳島の自然・文化・体験を、県全域からエリア別に集めています。
わたしが担当したのは、この LP の 構成(ワイヤーフレーム)から、UI/ビジュアルデザインまで。決まった企画・原稿・写真素材を受け取り、膨大な情報の構成をワイヤーフレームで組み立て、県じゅうを「探しやすく、巡りやすい1枚」として設計する役割です。
とにかく、情報が多い。
県全域 × 複数のエリア × 数多くの観光スポット × 体験アクティビティ。載せる情報が非常に多く、ページの全長は 14,000px を超えます。ただ順番に並べるだけでは、読み手は「どこに、何があるのか」を見失ってしまう。
多い情報を、いかに「探せる」形に構造化するか。それが、このLPで最初に向き合った課題でした。
考えたこと、決めたこと。
「量」に圧倒されないための、3つの骨格づくりです。
エリアで章立てして、巡れるように。
県全体をエリアに分けて章立てし、上部のメニュータブでエリア間を行き来できるようにしました。長いページでも「今どこを見ているか」を見失わず、目的の地域へ一足で飛べる構造です。
スポットも体験も、同じカードに。
観光スポットの紹介と体験アクティビティを、共通のカード(写真+見出し+説明+価格+ボタン)に統一。数が増えても見え方が一貫し、読み手が同じ手順で比較・選択できます。
地図で、「どこで何ができるか」を。
四国・県内のマップにスポットをピンで配置。文字情報だけでなく地理的な位置で把握できるようにし、「日帰りで巡る」道のりをイメージできるようにしました。
エリアごとに、深く潜れる。
各エリアには、そのエリアのキービジュアル・紹介文・見どころスポット(Pick up)・体験アクティビティ・アクセスマップまでを、ひとつのまとまりとして用意しました。たとえば「西部エリア」なら、祖谷のかずら橋や大歩危・小歩危のラフティング。というように、エリア単位で徳島を深掘りできる構成です。
PCとSP、それぞれに。
情報量の多いLPは、モバイルでの見え方がとりわけ重要です。PC(1440px)で横に組んだスポット一覧やエリアの見せ方を、SP(375px)では縦1列に積み直し、メニュータブや地図もモバイルで扱える形に設計。PC・SPの2種類を用意しました。
自分が担当したこと。
このプロジェクトでのわたしの役割は、決まった企画・原稿・写真素材を受け取り、それを大規模なLPとして成立させる構成(ワイヤーフレーム)からのUI/ビジュアルデザインでした。ワイヤーフレームでの構成、全体のトーン設計、エリア別のレイアウト、スポット・体験・地図といった各コンポーネントの設計、そしてPC・SPそれぞれへの展開までを担当しています。(企画・コピーライティング・コーディングは、別の担当によるものです。)
多い情報ほど、静かに整える。
観光情報は、放っておくと「量」で圧倒してしまいます。だからこそ、エリアで章立てし、同じカードに揃え、地図で位置を示す。読み手が迷わず巡れる骨格をつくることが、このLPのデザインの核でした。
自然を主役にしたティールのトーンで、徳島のダイナミックさを損なわずに、静かに整理する。量の多い制作ほど、cotozuが大切にしている「編集」が効くと感じた一枚です。