Works
Case Study

徳島じゅうの遊びを、迷わず巡れる1枚に。

関西からの日帰り旅を後押しする、徳島県の観光・体験キャンペーンLP。県内全域に散らばる観光スポットと体験アクティビティを、エリアごとに整理し、探して選べる縦長1枚にまとめました。担当は、このLPのUI/ビジュアルデザインです。

Role構成設計(ワイヤーフレーム)・UIデザイン・ビジュアルデザイン(LP)
Year2025
Domain観光キャンペーンLP
Clientアソビュー!(徳島観光プロモーション)
SurfacePC / SP(レスポンシブ)
ToolsFigma
注目ポイント

全長14,000pxという情報量を、どうやって「探せる」構造に変えたか。エリアでの章立て・共通カード・地図という3つの骨格が答えです。

徳島観光キャンペーンLPのファーストビュー。「関西からひと足伸ばして!ダイナミックな自然と遊ぶ徳島旅」の見出しと、ラフティング・渦潮・家族・グルメなどの写真、徳島県のシルエット
ファーストビュー(PC)— 自然を主役に、徳島のダイナミックさを

実際に公開された観光キャンペーンサイトです。担当したのは LP の構成(ワイヤーフレーム)〜UI/ビジュアルデザインで、企画・コピー・実装は別の担当によるもの。地名・写真・ロゴ等は各権利者に帰属します。

01 / Overview

エリアで巡る、徳島まるごとの観光LP。

体験予約サービス「アソビュー!」が手がける、徳島県の観光・体験を紹介するキャンペーンLPです。「関西からひと足伸ばして」という切り口で、日帰りでも楽しめる徳島の自然・文化・体験を、県全域からエリア別に集めています。

わたしが担当したのは、この LP の 構成(ワイヤーフレーム)から、UI/ビジュアルデザインまで。決まった企画・原稿・写真素材を受け取り、膨大な情報の構成をワイヤーフレームで組み立て、県じゅうを「探しやすく、巡りやすい1枚」として設計する役割です。

導入セクション:四国地方の地図で徳島県を強調し、「自然と文化が交差する、徳島にしかないワクワクを。」という見出しと、関西圏から車で日帰りできることを伝える紹介文
導入 — 地図で「関西から近い徳島」を印象づける
02 / Challenge

とにかく、情報が多い。

県全域 × 複数のエリア × 数多くの観光スポット × 体験アクティビティ。載せる情報が非常に多く、ページの全長は 14,000px を超えます。ただ順番に並べるだけでは、読み手は「どこに、何があるのか」を見失ってしまう。

多い情報を、いかに「探せる」形に構造化するか。それが、このLPで最初に向き合った課題でした。

03 / Design decisions

考えたこと、決めたこと。

「量」に圧倒されないための、3つの骨格づくりです。

01Structure

エリアで章立てして、巡れるように。

県全体をエリアに分けて章立てし、上部のメニュータブでエリア間を行き来できるようにしました。長いページでも「今どこを見ているか」を見失わず、目的の地域へ一足で飛べる構造です。

02System

スポットも体験も、同じカードに。

観光スポットの紹介と体験アクティビティを、共通のカード(写真+見出し+説明+価格+ボタン)に統一。数が増えても見え方が一貫し、読み手が同じ手順で比較・選択できます。

03Map

地図で、「どこで何ができるか」を。

四国・県内のマップにスポットをピンで配置。文字情報だけでなく地理的な位置で把握できるようにし、「日帰りで巡る」道のりをイメージできるようにしました。

エリアごとの体験アクティビティ一覧:藍染め体験・大谷焼の電動ろくろ・いちご狩りが、写真+見出し+説明+価格の共通カードで3枚並ぶ
System — 体験も観光も、共通カードで一覧に
アクセスマップ:大阪・神戸・関西国際空港・和歌山港などから徳島駅/ICまでの所要時間を、地図上にピンと所要時間ラベルで示す
Map — 地図と所要時間で「関西からの近さ」を可視化
04 / Area sections

エリアごとに、深く潜れる。

各エリアには、そのエリアのキービジュアル・紹介文・見どころスポット(Pick up)・体験アクティビティ・アクセスマップまでを、ひとつのまとまりとして用意しました。たとえば「西部エリア」なら、祖谷のかずら橋や大歩危・小歩危のラフティング。というように、エリア単位で徳島を深掘りできる構成です。

エリアセクションの例(西部エリア):エリアのキービジュアルと紹介、祖谷のかずら橋・脇町うだつの町並み・小便小僧展望台・祖谷そばなどのPick upスポット、体験アクティビティのカードが縦に続く
エリアセクションの例(西部エリア)— 紹介〜スポット〜体験を1つのまとまりに
05 / Responsive

PCとSP、それぞれに。

情報量の多いLPは、モバイルでの見え方がとりわけ重要です。PC(1440px)で横に組んだスポット一覧やエリアの見せ方を、SP(375px)では縦1列に積み直し、メニュータブや地図もモバイルで扱える形に設計。PC・SPの2種類を用意しました。

徳島観光LPの全体像(PC)。ファーストビューから導入・エリア別セクション・アクセスマップ・FAQ・フッターまでの縦長1枚
PC — 全体(枠内をスクロール)
徳島観光LPの全体像(SP)。PC版の内容を縦1列に積み直したモバイル向けレイアウト
SP — 全体(枠内をスクロール)
06 / My role

自分が担当したこと。

このプロジェクトでのわたしの役割は、決まった企画・原稿・写真素材を受け取り、それを大規模なLPとして成立させる構成(ワイヤーフレーム)からのUI/ビジュアルデザインでした。ワイヤーフレームでの構成、全体のトーン設計、エリア別のレイアウト、スポット・体験・地図といった各コンポーネントの設計、そしてPC・SPそれぞれへの展開までを担当しています。(企画・コピーライティング・コーディングは、別の担当によるものです。)

担当した範囲
ワイヤーフレーム ビジュアルデザイン UIデザイン エリア別レイアウト設計 配色・トーン設計 コンポーネント設計 PC+SP対応 Figma
07 / Reflection

多い情報ほど、静かに整える。

観光情報は、放っておくと「量」で圧倒してしまいます。だからこそ、エリアで章立てし、同じカードに揃え、地図で位置を示す。読み手が迷わず巡れる骨格をつくることが、このLPのデザインの核でした。

自然を主役にしたティールのトーンで、徳島のダイナミックさを損なわずに、静かに整理する。量の多い制作ほど、cotozuが大切にしている「編集」が効くと感じた一枚です。

Contact

感想やご連絡は、気軽にどうぞ。

Contact

ほかの制作を見る(Works)