==========================================

• 長津：カドベヤCOO／弊社WEBディレクターの長(おさ)的存在
• 須田：UIデザイナー／ゲーム・ドラムに日々没頭
• 古川：PdM／クリエイティブ部マネージャー
• 飯野：PdM／カドベヤのお兄ちゃん、ゲーム・アニメ・SEOがすき
• 竹田：WEBディレクター／サウナのためなら全国に出没

==========================================

🔳　今週のピックアップ【FUJI GATEWAY】

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

今週の須田的ベストデザインは「FUJI GATEWAY」。

引用元：https://fuji-gateway.com/

須田(UID)：

今回紹介するのは、山梨県富士北麓エリアにオープンした体験型アドベンチャー施設「FUJI GATEWAY」のサイトです。

BEAMS×AMUSEが手掛ける「地域総合プロデュース」の一環として、大自然を活用したアクティビティ・イベントが満喫できるようです。

須田(UID)：

『富士北麓エリアを満喫できるアドベンチャー施設』という見出しタイトルの余白が、シームレスでサイト全体の背景色になっているんですよ。

外側の余白が背景色としてそのまま侵入してきてる感じの切り方が、独特で面白いですね。

長津(COO)：

スクロールで背景色も変わるんだね。

飯野(PjM)：

最上部のカルーセルがどんどん写真をめくりたくなる丸ポチで気持ちいいですね。

須田(UID)：

あと、全体的に黒い線で装飾をつくっていて、なかなかこれに縛るのは難しいのですが、見事に上手に見せていますね。

カルーセルって、いま自分が閲覧している箇所を黒く塗りつぶすのが一般的だと思うんですけど、このサイトのように、アウトラインで全部表現したい場合は閲覧箇所を引き伸ばすのもありですね。

長津(COO)：

紙っぽい世界観だね。

須田(UID)：

かなり雑誌に近い感覚で制作されていますね。

フォントも可読性が高くてシンプルで、フォント背景も黄色で大きさぐらいしか装飾がない。

それでもさみしさを感じさせない見せ方の上手なデザインだと思います。

長津(COO)：

スペシャルトピックまでスクロールすると、写真が余白を全部ぶち抜いてレイアウトされていてそこもおもしろいね。

須田(UID)：

もしかしたら技術的にパララックスかもしれないですね。

飯野(PjM)：

須田さんの言うように、このボーダーカラーは000なので、デザイン的にこれだけまとめあげているのはすごい！

須田(UID)：

デザインの引き出しがないと苦しいですよね。

飯野(PjM)：

真っ黒って結構目にうるさいんですけど、全然そんなことない。

長津(COO)：

アウトラインのカラーはロゴからきているんだろうね。

背景色のアースカラーは春夏秋冬の四季の移り変わりを表現していそう。

須田(UID)：

サイトで使っている唯一のキーカラーは黄色で、ほとんど白黒黄色と写真だけで構成されていますね。

引用元：https://www.nintendo.co.jp/n08/a2uj/mother2/index.html

飯野(PjM)：

特にスマホ版はMOTHER2に似てますね(笑)

長津(COO)：

Z世代は分からないぐらい古いよ(笑)

須田(UID)：

白黒灰色だけでこれをやるのは結構勇気がいりますね。

これでおしゃれに見えないと手抜きだと思われちゃうから…。

飯野(PjM)：

勇気いりますよね(笑)

全体的に世界観が踏襲できているから違和感がない。

引用元：https://fuji-gateway.com/activity/camp/

須田(UID)：

このチケットみたいな点線の入れ方も可愛いですね。

これは実線で切らないでプランっていうセクションの中で同列で扱いたいけど、縦に並んでいるから点線で区切りをぼかしている感じかな。

長津(COO)：

チケットとかバウチャーみたいな雰囲気もでていて素晴らしい。

こういうアイデアはどこからでてくるんだろう？

須田(UID)：

デザインファーストだと思います。

引用元：https://fuji-gateway.com/facility/

飯野(PjM)：

最上部の富士ゲートウェイっていう建物がカルーセルの右から 2 番目にあるんですけど、Fの輪郭が、全体のアウトラインに通じているんだろうなと思いました。

長津(COO)：

やっぱり時間かけてサイトは作り込みたいね。

じゃあ今日はここまで。アディオス！

〆