WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

業界

  • クリエイティブ制作

    201

  • 飲食・食品・飲料

    151

  • エンタメ・趣味・娯楽

    147

  • 製品・工業・素材

    78

  • IT・システム

    72

  • ファッション・アクセサリー

    68

  • 不動産・建築・施設

    68

  • ポータルサイト･メディア･マガジンWEB

    58

  • 事業・組織

    57

  • 教育・学校

    50

  • 医療・ヘルスケア・健康

    34

  • 行政・NPO・団体・協会

    32

  • 暮らし商品・サービス

    30

  • 旅行・ホテル・観光

    28

  • 美容

    28

  • 就職・人材サービス

    23

  • 広告・マーケティング

    20

  • 車・バイク他

    20

  • 金融・保険・会計・法律

    19

  • Web・クラウドサービス

    18

  • インテリア・雑貨

    17

  • CSR・サスティナビリティ

    16

  • アート

    13

  • インフラ

    13

  • ウェディング

    13

  • その他

    3

形式

  • コーポレートサイト

    308

  • 特設サイト

    205

  • 商品・製品紹介

    204

  • 店舗・施設紹介

    121

  • 企画・プロモーション

    119

  • サービス紹介

    70

  • 採用サイト

    70

  • LP (ランディングページ)

    66

  • メディア・ポータル

    62

  • EC・Webサービス

    61

  • ポートフォリオ

    39

  • キャンペーン

    12

デザイン

  • 写真が特徴的なサイト

    380

  • イラストが特徴的なサイト

    303

  • アニメーションが特徴的なサイト

    249

  • レイアウトが特徴的なサイト

    244

  • テキストが特徴的なサイト

    132

  • 多言語対応

    90

  • 動画が特徴的なサイト

    70

  • スマホ特化・モバイルファースト

    62

パーツ

  • スライダー

    327

  • スクロール追従

    305

  • リピートアニメーション

    277

  • ハンバーガーメニュー

    202

  • 動画

    174

  • モーダル

    63

  • ローディング

    62

  • 検索エリア

    43

下層ページ

  • Aboutページ

    508

  • 投稿一覧(記事/商品など)

    450

  • 投稿詳細(記事/商品など)

    398

  • サービス紹介

    327

  • お問い合わせ

    179

  • 採用サイト

    108

  • よくある質問

    83

  • プライバシーポリシー

    61

  • CSR

    33

  • 料金表

    33

  • 規約/法律に基づく表記

    24

  • メニュー

    13

  • カート

    9

  • ローディング

    2

  • ログイン

    2

  • 決済画面

    1

カラー

  • ホワイト・白

    242

  • ブルー・青

    233

  • ブラック・黒・グレー

    212

  • グリーン・緑

    145

  • カラフル・多色

    141

  • イエロー・黄色

    99

  • レッド・赤

    92

  • オレンジ・橙色

    73

  • ブラウン・茶色

    69

  • ピンク・桃色・桜色

    55

  • パープル・紫

    37

  • ベージュ・白茶

    22
2025.12.20

Colabs - Making space for transformative innovation.

https://colabs.com.au/

「Colabs（コーラボス）」は、オーストラリアのメルボルンを拠点とする、バイオテクノロジー分野に特化したコワーキングスペースおよびイノベーション・ハブを運営する社会的企業です。

このデザインを共有する

このデザインを共有する

Close

Design Infomation

Industry

不動産・建築・施設 CSR・サスティナビリティ

Page

投稿一覧(記事/商品など) お問い合わせ Aboutページ サービス紹介

Color

カラフル・多色

Format

コーポレートサイト

Parts

スライダー 動画
シンプル モダン
投稿者の画像

海外サイトならではのBento Gridと逆角丸の構成が、今っぽく先進的な印象が良い！
Colabs - Making space for transformative innovation.のPCサイズの画像
Colabs - Making space for transformative innovation.のモバイルサイズの画像

本ページは、本サイト掲載日時点で公開されているサイトより、画面キャプチャ画像を引用し掲載しています。
掲載取下げ依頼、または修正依頼はコチラよりご連絡ください。

このデザインを共有する

このデザインを共有する

Close

Design Infomation

Industry

不動産・建築・施設 CSR・サスティナビリティ

Page

投稿一覧(記事/商品など) お問い合わせ Aboutページ サービス紹介

Color

カラフル・多色

Format

コーポレートサイト

Parts

スライダー 動画
シンプル モダン

下層デザイン

  • サービス紹介

    Colabs - Making space for transformative innovation.のPCサイズのサービス紹介画像
    Colabs - Making space for transformative innovation.のモバイルサイズのサービス紹介画像

  • Aboutページ

    Colabs - Making space for transformative innovation.のPCサイズのAboutページ画像
    Colabs - Making space for transformative innovation.のモバイルサイズのAboutページ画像

  • 投稿一覧(記事/商品など)

    Colabs - Making space for transformative innovation.のPCサイズの投稿一覧(記事/商品など)画像
    Colabs - Making space for transformative innovation.のモバイルサイズの投稿一覧(記事/商品など)画像

  • お問い合わせ

    Colabs - Making space for transformative innovation.のPCサイズのお問い合わせ画像
    Colabs - Making space for transformative innovation.のモバイルサイズのお問い合わせ画像

このデザインを作ってみよう! 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を利用して配置することで、再現が可能です!

同系統のサイトデザイン