音楽とアウトドアを、ひとつのLPに。
JBLの新製品ポータブルスピーカーを、アウトドアブランド REWILD の施設で体験・プレゼントする、アソビュー主催のタイアップキャンペーン。3つのブランドと多くの情報が並ぶ縦長のランディングページを、PC・SPそれぞれのビジュアル／UIとして設計しました。
3つのブランドが同居するLPで、世界観の遠い「音楽」と「自然」をどう地続きに見せたか。色と写真の選び方が答えです。
実際に公開されたキャンペーンサイト（2024年5〜6月に実施）です。担当したのは LP の構成（ワイヤーフレーム）〜UI／ビジュアルデザインで、企画・コピー・実装は別の担当によるもの。ブランド名・製品名・写真素材は各権利者に帰属します。
3つのブランドが出会う、1枚のLP。
体験予約サービス「アソビュー！」が主催し、オーディオブランド JBL の新製品スピーカー（GO 4 / CLIP 5）を、アウトドアブランド REWILD の施設で体験・プレゼントする。3社によるタイアップキャンペーンの特設LPです。「対象施設でスピーカーに触れ、SNSに投稿すると、その場の抽選で当たる」という企画を、1枚の縦長ページで伝えます。
わたしが担当したのは、この LP の 構成（ワイヤーフレーム）から、UI／ビジュアルデザインまで。企画・コピー・実装は別の担当がいるなかで、決まった要素と写真素材を受け取り、ワイヤーフレームで構成を組み立て、迷わず読み進められる1枚として設計する役割です。
情報は多い。世界観は、遠い。
キャンペーンLPは、載せたいものがとにかく多いページです。キービジュアル、製品の魅力、対象製品2種、体験できる施設3件、応募のステップ、そして長い応募規約。これらが縦一列に続きます。詰め込めば散らかり、削れば伝わらない。密度の高い情報を、どう「流れ」にするかが最初の課題でした。
もう一つは、世界観の距離。音楽・ガジェットという JBL の世界と、自然・グランピングという REWILD の世界は、放っておくとちぐはぐに見えます。加えて主催のアソビュー。3つのブランドが、どれも立ちながらぶつからない。そんな1枚にする必要がありました。
考えたこと、決めたこと。
多くの要素を、静かにまとめる。そのために置いた3つの判断です。
3ブランドを、ひとつのトーンに束ねる。
自然を思わせる緑を土台に、JBLのオレンジをアクセントとして効かせる。写真素材が多くても、共通の色づかいと余白で全体を落ち着かせ、ページを通して1つの空気に揃えました。
音楽と自然を、写真と余白でつなぐ。
遠い2つの世界観を、キャンプに音楽が溶け込む写真の選び方と並べ方で橋渡し。「アウトドアで、いい音を」という体験が、無理なく地続きに見えるレイアウトにしました。
多い情報を、迷わない順序に。
キービジュアル→魅力→対象製品→体験施設→応募方法→規約。密度の高い縦長を、セクションの区切りとカード化で整理し、上から読むだけで自然と理解が進む順序に組み立てました。
対象製品は、大きな製品名タイポと1行の特長で主役に。読み手が「どっちがどんな製品か」を一目でつかめるよう、2枚を同じ型に揃えました。
体験できる場所を、選びたくなるカードに。
キャンペーンの舞台となる3つの施設は、写真・エリア・ひとことの紹介・予約への導線を、すべて同じ型のカードに揃えました。左右を交互に組んでリズムを出しつつ、比べて選べる一覧に。「どこへ行こうか」と迷う時間そのものを、楽しい体験にしたいと考えた部分です。
応募のステップも、同じ考え方です。「写真を撮る → ハッシュタグをつけて投稿 → その場で抽選」という流れを、STEP1〜3の図に落とし込み、複雑になりがちな応募条件を一目で追えるようにしました。
PCとSP、それぞれに積み直す。
情報量の多いLPは、画面幅で見え方が大きく変わります。PC（1440px）で横に並べていた要素を、SP（390px）では縦1列に積み直し、キービジュアルの重なりや製品の見せ方も組み替える。ただ縮めるのではなく、それぞれの幅で最適な順序と余白になるよう、PC・SPの2種類を設計しました。
自分が担当したこと。
このプロジェクトでのわたしの役割は、決まった企画・コピー・素材を受け取り、それを1枚のLPとして成立させる構成（ワイヤーフレーム）からのUI／ビジュアルデザインでした。ワイヤーフレームでの構成、全体のトーン設計、レイアウト、製品・施設・ステップといった各コンポーネントの設計、そしてPC・SPそれぞれへの展開までを担当しています。（企画・コピーライティング・コーディングは、別の担当によるものです。）
たくさんの要素を、静かにまとめる。
キャンペーンLPは、華やかで、要素が多い。だからこそ、うるさくせずに情報を届けられるかが問われます。異なるブランド、遠い世界観、多い情報量。それらを1つの見え方にまとめ、読み手が迷わず楽しめる流れにする。この「編集」こそが、この仕事のいちばんの手応えでした。
与えられた素材を、ただ並べるのではなく、意味の通る順序と余白に置き直す。派手なキャンペーンでも、cotozu が大切にしている静かなまとめ方は変わらない。そう確かめられた一枚です。