これから来るInverted Border Radius Cards -デザイン例・デザイン作成方法・code例

2024年8月17日 01:32

はじめまして。とま（@bath_ito）と申します。

本記事では個人的にこれからUIデザインの密かなトレンドになるのでは、と思っているInverted Border Radius Cardsについて紹介します。
Inverted Border Radius Cardsという名称はおそらく一般的なものではないので、正式名称をご存じの方は本記事またはXにてコメントいただけますと幸いです。

私がここで紹介するInverted Border Radius Cardsがどのようなものか、イメージの画像がこちらです。

主な特徴としては下記の2点です。

四角を他の四角で切り抜いた形
角丸が切り抜かれたそれぞれの角に適用されている

ゲームの画面のようで先進的な印象もありながら、角丸で柔らかさもある、というこの表現がとても好きです。ただどうしてもこのデザインの探し方が分からず、ずっと探し回っていました…。

Inverted Border Radius Cardsをデザインに活かしている例

まずは私が集めてきた、Inverted Border Radius Cardsを用いたWebサイトを紹介いたします。

とまとと様

はい、もう見ての通り可愛すぎます。私がInverted Border Radius Cardsが好きになった理由はとまとと様のWebサイトがきっかけだったかもしれません。2020年頃からこちらの素敵なデザインのWebサイトを運営しているようです。

実装としては、左下のテキスト・右上の気温に、Webサイト全体のクリーム色の背景色を置いているようです（上記画像ではデベロッパーツールで水色に変更しています）
さらに、角丸を表現するために左下テキスト・右上気温にそれぞれ疑似要素で背景色と同様の色の角丸の端の部分のパーツを置いています。

画像だと小さく見えづらいですが、クリーム色の画像が疑似要素で配置されています。

scramberry（スクランベリー）

株式会社NTT Digitalが運営するscramberryというサービスのWebサイトです。

ユーザーにとって優先度の高い（またはユーザーに見せたい）情報であるナビゲーションやテキストを見せつつ、奥行きのある世界観を表現出来ています。こちらのWebサイトでは、Inverted Border Radius Cardsによって、ゲームの世界のような近未来的な印象を受けます。

こちらのWebサイトはアニメーションが凝っていて、スクロールに応じて枠の形状が変化しています。マウスの移動に応じたパララックス効果と、手前のInverted Border Radius部分の平面感が相まって、奥側の立体感が強調されています。

こちらのWebサイトではThree.jsでのcanvas描画で奥行きのある世界観を表現し、clip-pathで最終的な形状をInverted Border Radiusにしているようです。

ノジマホールディングス新卒採用サイト

ノジマホールディングス様の新卒採用サイトでは、Webサイト全体を通してInverted Border Radiusを使用しています。良質な画像が角丸で切り抜かれており、全体的に柔和な雰囲気です。また、日本ではあまり見ないデザインのため、競合のWebサイトとの差別化にもなっていると思います。