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株式会社
-
ヒラギノフォント｜SCREEN
-
商品一覧 完全栄養食 BASE FOOD (ベースフード)
-
ホームページ作成ならペライチ｜無料から使える簡単ホームページ作成ツール
-
mount inc. | ブランド戦略+デザイン | design practice
-
findNew 牛乳乳製品の知識
-
Crafting your vision one dot at a time. | CREGG Paris
-
株式会社MIXI
CREATE - 株式会社GIG
-
クリエイティブアイランド中之島
-
Chatworkの日2026 | ビジネスチャットならChatwork
-
コクヨ｜好奇心を人生に
-
採用情報 | 株式会社kubell（旧 Chatwork株式会社）
-
JARUJARU TOWER ジャルジャルタワー
-
ヤマックス株式会社 採用サイト｜対話と成長を大切にする会社
-
株式会社はらぺこ
-
らくしふ | LINEにも対応するクラウドシフト管理
CREATE - 株式会社クーシー
-
George Davies
-
みんなの夢が地球をまわす | 三菱ケミカル株式会社 採用サイト
-
Climax Zine – le média plus chaud que le climat
-
Readymag – the design tool for outstanding websites
-
採用サイト制作 | 株式会社ibma(アイビーエムエイ)
-
株式会社Muture
-
BEAMS CREATIVE｜ビームス クリエイティブ
-
ずっと大好き！上野動物園のパンダたち｜YOU+MORE!｜フェリシモ
-
BOTCHAN オンラインストア
-
株式会社住宅ファミリー社｜大阪市東淀川区・淡路の賃貸管理・不動産事業
-
食いしん坊たちのコレ食べたい帖 | ロック・フィールド クリスマス＆迎春 HOLIDAY MENU 2025-2026
-
株式会社SOLUMINA｜採用サイト
-
日本自然保護協会オフィシャルサイト
-
Toyota Woven City
-
北川太我｜フリーランスウェブデザイナー
CREATE - 北川太我
海外サイトならではのBento Gridと逆角丸の構成が、今っぽく先進的な印象が良い！