2025.12.20
Colabs - Making space for transformative innovation.
https://colabs.com.au/「Colabs（コーラボス）」は、オーストラリアのメルボルンを拠点とする、バイオテクノロジー分野に特化したコワーキングスペースおよびイノベーション・ハブを運営する社会的企業です。
このデザインを共有する
このデザインを共有する
Close
Design Infomation
Industry
Color
Format
このデザインを共有する
このデザインを共有する
Close
Design Infomation
Industry
Color
Format
下層デザイン
-
サービス紹介
-
Aboutページ
-
投稿一覧(記事/商品など)
-
お問い合わせ
このデザインを作ってみよう! How to create a design
このサイトの各コンテンツに使われているConcave Corner（逆角丸）のシェイプはとても魅力的ですよね！
海外で人気の「Bento Grid」と相性が良く、最近は国内のモダンなサイトでも定番のデザインです。この「くぼみ」が境界を滑らかに繋ぎ、単調なレイアウトに洗練された印象を与えてくれます。
このデザインの作り方
Figmaでは、2つのシェイプを「減算（Subtract selection）」で組み合わせるだけで、この逆角丸を驚くほど簡単に再現できちゃいます!
早速作っていきましょう!
1. シェイプの準備
まずはベースとなる大きな長方形（背景用）と、角を型抜くための小さな正方形の2つを用意します。
この時、小さな正方形にはあらかじめ「角丸」を設定しておきましょう。
2. 「減算（Subtract selection）」を実行
作成した小さな正方形を、大きな長方形の角（削りたい位置）に重ねて配置します。
次に、Shiftキーを押しながら両方のシェイプを選択します。
ツールバー上部のブーリアン演算メニューから「減算（Subtract selection）」をクリックします。
3. 細部の調整
型抜きされた部分の形を見ながら、サイズや位置を微調整しましょう。
Figmaのブーリアン演算は非破壊編集なので、後からでも中の正方形を動かして「くぼみ」の深さを自由に変えることができます。
これでFigmaでのConcave Corner（逆角丸）の作成は完了です!
実装する際は、CSSの疑似要素（::before / ::after）にbox-shadowを利用して配置することで、再現が可能です!
同系統のサイトデザイン
-
-
アイグッズ株式会社 | 新卒採用サイト
-
monopo london | Tokyo-born design-driven creative agency.monopo london
-
gumroad-LP
-
ライブ・コンサートチケット先行 DISK GARAGE（ディスクガレージ）
-
HOLON Inc. - 株式会社ホロン
-
Stryds
-
CASIO DESIGN | CASIO
-
ZERODOIS
-
UNBOX 2nd | Between Box and Bag
-
株式会社Bot Express｜スマホ市役所ならBot Express
-
NEW DAY, NEW LIGHT.日光
CREATE - たきコーポレーション
-
ALBION｜アルビオンのスキンケアシリーズ［フラルネ］ 特設サイト
-
クーピーペンシル50周年特設サイト｜株式会社サクラクレパス
-
イラスト・漫画(マンガ)教室 egaco(エガコ)
CREATE - 株式会社LIG
-
株式会社エブリー｜every, Inc.
CREATE - 株式会社GIG
-
Career Palette（キャリアパレット）｜神戸女子大学・神戸女子短期大学
CREATE - 株式会社ペンク
-
Chatwork株式会社
-
Will Style Inc.｜神戸のWeb制作会社
CREATE - ウィルスタイル株式会社
-
vivace | 女性向けコンテンツに強い、編集プロダクション
-
TATEKA（タテカ）｜立て替え、割り勘、精算の記録・計算アプリ
-
Momentia
-
全国空き家対策コンソーシアム
-
Favourite
-
装飾ガラスデザイン研究所｜中日ステンドアート
-
FANY Rewards（リワード）｜特別な体験を、もっと一緒に。
-
FANY IDってなぁに？｜FANY IDでできることをぜーんぶ教えます
-
おもしろいを、もっと一緒に。 | FANY
-
青森の配電工事・電気工事士採用｜株式会社アペック【東北電力指定の配電工事会社】
-
Satoshi Watanabe
-
kobako design｜熊本のデザイン制作｜Webサイト・グラフィック・イラスト
CREATE - kobako design
-
Shed | Home
-
株式会社Gotoschool | 障がい者への療育事業と就労支援
-
Airtable: Build Enterprise-ready AI Workflows, Apps & Agents - Airtable
-
NUSET｜皮膚科専門医開発のスキンケアブランド(ニュセ)
-
【公式】習字教室の日本習字【毛筆、ペン字、通信講座】
-
Switch-Lit • Collaborative Writing App
-
Framer: Create a professional website, free. No code website builder loved by designers.
-
協業・新規事業開発・スタートアップ支援｜株式会社ユニッジ
-
The Best Bed for Better Sleep | Casper Online Mattress Store
-
Nike. Just Do It. Nike.com (JP).オンラインストア (通販サイト)
-
ヒラギノフォント｜SCREEN
-
商品一覧 完全栄養食 BASE FOOD (ベースフード)
-
ホームページ作成ならペライチ｜無料から使える簡単ホームページ作成ツール
-
mount inc. | ブランド戦略+デザイン | design practice
-
findNew 牛乳乳製品の知識
-
Crafting your vision one dot at a time. | CREGG Paris
-
株式会社MIXI
CREATE - 株式会社GIG
海外サイトならではのBento Gridと逆角丸の構成が、今っぽく先進的な印象が良い！