🔳 今週のピックアップ【グリーンパーク山東】

UIデザイナー須田によるデザインコーナーvol.42。 

引用元：https://greenpark-santo.com/

須田(UID)：
今日は、『グリーンパーク山東』という20種類以上のアウトドア・レジャー 施設が勢揃いする、総合アウトドア・スポーツ複合公園のWebサイトを紹介します。

長津(COO)：
素材数がすごい多いし、このレイアウトよく頑張ったなーって思ったわ。トップだけでこのタブ数で「すげえな」ってなる。

須田(UID)：
「About グリーンパーク」のセクションでは、周囲から写真が集まって、背景の絵具部分も動きつつ、中央に地図が浮かび上がる演出になっています。テキストもスクロールでスライドして、だいぶ賑やかな実装です。

長津(COO)：
横スクロールに切り替わってプレイエリア／ペンエリアと分けてるのも見やすいし、賑やかで楽しいよね。

須田(UID)：
マウスオーバーで素材が動いたり、背景の黄色いインタラクションも一つ一つ設定されていて、3種類の動きが楽しめますね。

長津(COO)：
一番下の山が出現する演出もいいよな。

そういえば前回紹介したビートルランド米原とUIが似てる気がしたけどなにか関係ある？

引用元：https://www.beetleland-maibara.com/

須田(UID)：
同じグループみたいです。

長津(COO)：
このサイト、滋賀県の湖畔エリアと提携してるらしい。温泉施設とも連携して、トータルブランディングしてる感じが強い。

須田(UID)：
あと、スクロールに応じたアニメーションが非常に手が込んでいて、重たくならないのが驚きです。

長津(COO)：
PC版のインタラクションが凝ってるから、スマホは要素を絞ってもいいかもしれないけど絵的には同じ質感で展開できると良いよね。

須田(UID)：
スマホでは背景の緑の角丸と写真がポンと現れるんですが、PCとの余白のバランスやフォントサイズにもルール化の跡が見えますね。

長津(COO)：
要素が多いと例外対応が発生しやすいけど、ここは先にコンポーネント定義してから写真挿入をオーダーした感じがあるよね。

須田(UID)：
リザーブボタン上のアニメーションや、仮想ページのビジュアル歪み表現まで、隅々まで作り込まれていますね。

長津(COO)：
これだけブランド体験を作り込んでいれば、AI予約後にWebでビジュアル確認する流れも生まれそう。

古川(PdM)：
素材数と動きのバリエーションが豊富で、Web上で体験の期待感が高まる設計でいいですね。

飯野(PdM)：
滋賀キャンプ場など地域キーワードからの流入も想定されていて、SEO設計もちゃんとできている。

山口(Dir)：
レジャー×デジタルがうまく表現されていて、おもしろい観光サイトでした。

〆

• ■クリエイティブ部メンバー
• 長津(COO)：カドベヤCOO／弊社WEBディレクターの長(おさ)的存在
• 須田(UID)：UIデザイナー／ゲーム・ドラムに日々没頭
• 飯野(PdM)：PdM／カドベヤのお兄ちゃん、ゲーム・アニメ・SEOがすき
• 古川(PdM)：PdM／建築×ブランディングにも関心あり
• 山口(Dir)：昨年入社したディレクター社員／晴れの日がすき