■クリエイティブ部メンバー

• 長津：カドベヤCOO／弊社WEBディレクターの長(おさ)的存在
• 須田：UIデザイナー／ゲーム・ドラムに日々没頭
• 古川：PdM／クリエイティブ部マネージャー
• 飯野：PdM／カドベヤのお兄ちゃん、ゲーム・アニメ・SEOがすき
• 山口：Webディレクター／カドベヤ新メンバー、Apexにハマり中

🔳　今週のピックアップ【Vlag yokohama｜フラグヨコハマ【公式】】

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

今週の須田的ベストデザインは「ミニマルデザインが際立つ横浜のレンタルスペース｜Vlag yokohama」。

引用元：https://vlag.yokohama/

須田(UID)：

今回紹介するのは、事業共創を目的とした『新感覚レンタルスペース』のサイトです。

国家戦略住宅整備事業からはじまり、横浜を中心に、相鉄と東急がタッグを組んで生まれた「暮らし」をテーマにした共創事業らしいです。

コンセプト：「未来の兆し（＝Vlag）溢れる共創の場」

引用元：https://vlag.yokohama/about/

須田(UID)：

一見するとシンプルですが、ディテールにこだわったデザインが印象的でした。

長津(COO)：

どんなところ？

須田(UID)：

各所に細かいエフェクトが施されていますね。

例えば、ページを遷移する時のインタラクションが滑らかで、特にリロード時に表示される「読み込みパーセンテージ」のエフェクトが上品だなって思いました。

長津(COO)：

「おしゃれだな」って思うサイトの要素って、そういう細かい積み重ねだよね。

須田(UID)：

そうですね。リンク先のホバーエフェクトもただボタンの色が変わるだけじゃなくて、文字が上下にスライドする仕様になっていたり、写真がややパララックス効果を出していたりと、さりげなくリッチな印象を与えるデザインになってますね。

長津(COO)：

細部の作り込みが、全体の高級感を底上げしてるわけか。

須田(UID)：

もう一つ注目したいのが、写真自体のクオリティです。

シンプルなデザインだからこそ、画像の良し悪しがサイト全体の印象を大きく左右している気がします。

長津(COO)：

写真が微妙だったら、いきなり質が下がるってことね。

須田(UID)：

そうですね。そして写真の存在感をより際立たせているのが「フォント」ですね。

仮にフォントが少しでもサイトのテイストと合わなかった場合、それだけで「チープ」な印象を与えちゃう可能性があるので。その分、このサイトは洗練されたセリフ体を絶妙に使い分けているので、サイト全体で高級感が表現されていてすごいですね。

引用元：https://vlag.yokohama/about/

長津(COO)：

その辺ってクライアント側がしっかり運用しないと、あとで崩れることも多いよね。

須田(UID)：

そうですね。テンプレートがあったとしても適切なレタッチや写真選びをクライアント側が担保し続けないと一貫性が損なわれちゃいますね。

今回のサイトも、おそらくデザインガイドラインがしっかり整えられているんじゃないかなと思います。

飯野(PdM)：

「デザインシステムの運用」が重要ってことですよね。

須田(UID)：

最後に注目したいのが、レスポンシブの構成です。

単純にカラムが崩れる訳ではなく、ウィンドウ幅に応じてサイト全体を再描画してますね。なので、どのデバイスで見ても常にバランスの取れたレイアウトが維持されてます。

引用元：https://vlag.yokohama/event/

長津(COO)：

たしかにそのやり方だと崩れにくいけど、かなり計算された設計が必要だよね…。

須田(UID)：

そうなんです！ここまで緻密なレスポンシブ対応は、通常のCMSだとなかなか表現しにくいので、おそらく特注で設計されていると思います。

長津(COO)：

こだわりがあるデザインって、シンプルに見えても裏側はめっちゃ複雑なんだよな～。

須田(UID)：

結局、ここまで徹底した設計って「空間のブランド価値」を上げるためにやってるんだと思います。

これが単なる情報サイトだったらここまで細かい動きを入れる必要はないかなと。でも、このサイトは「上質な空間」を訴求するものだからこそ、細部まで磨き抜かれたUIが必要だったって感じですかね。

古川(PdM)：

「心地よさ」って無意識のうちに伝わるものだから、それを狙って設計してるんでしょうね。

須田(UID)：

例えば、高級ホテルには独自の香りがあるように、Webサイトのデザインも「記憶に残る心地よさ」を演出する手段の一つなのかもしれないですよね。

長津(COO)：

なるほど！これはUIだけの話ではなくて、UXとしてのブランディング戦略でもあるわけだ。

じゃあ今日はここまで！次回も新しいトピックでお会いしましょう！

〆