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を利用して配置することで、再現が可能です!
同系統のサイトデザイン
-
-
Gen Media AI Inference Platform & Serverless GPUs | fal
-
ユニフォームネット | 作業着・ユニフォームの販売・レンタル
-
gaaboo Inc.
-
アイグッズ株式会社 | 新卒採用サイト
-
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株式会社
-
ONE PIECE EGGHEAD EDITION
-
株式会社スリーエイ・システム
-
ブルーパドルのホームページ
-
墨東の隠れ家 向島花街
-
グッドエールJAPAN | KIRIN
-
コーディング代行・外注サービスならくまWeb
-
TSG 公式サイト | 最滴塗料メーカー
-
株式会社昭和設計|社会を支え未来を創造する
-
採用情報 | 株式会社dinos
CREATE - 株式会社ハタジルシ
-
A24 — Films
-
【公式サイト】Start Your FUJI ROCK!|意外と気楽なフジロック。
-
FANCL SKIN PATCH|ファンケルオンライン
-
最前線で活躍するイラストレーター170名のアートブック「VISIONS 2027」
-
TOKYO NONSENSE9 | HARE
-
株式会社ANDO Imagineering Group | AIG
-
works / neybell
-
ウマジョブ −馬のお仕事紹介サイト−
-
人生に、選択肢という自由を。ヴェゼル株式会社
-
mud Inc.
-
TAKANAWA GATEWAY Link Scholars' Hub
-
名古屋美容専門学校|愛知県名古屋市・金山駅徒歩1分NAGOYA BIYO|名古屋美容専門学校
-
art NIKKEI | 旅するように、次のアートへ。日本経済新聞社の文化事業サイト
-
アヴァント株式会社
-
こどもウェルネスジム UGOKKO(うごっこ)|produced by 桜十字UGOKKO
-
Spark Journal by KDDI
-
小コップコレクション|アサヒ空想開発局
-
AFURI BREWING / 阿夫利ブルーイング
海外サイトならではのBento Gridと逆角丸の構成が、今っぽく先進的な印象が良い!