MENU

無料Webアプリ、Webコーディング事例集、PC・IT用語Wiki、EC-CUBEカスタマイズなど

【Claude Design 採用前】Webデザイン集

Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）
実装方法などは別記事にコードや実装ポイントを公開していますので、自由にご覧ください。

レイアウト（Flexbox）

1

2

3

justify-content: flex-start

実装方法を見る

レスポンシブデザイン

1

2

3

現在: スマホ幅 / 縦並び

実装方法を見る

テーブル

月	売上	経費
4	500	400
5	800	650
6	400	320

シンプル

月	売上	経費
4	500	400
5	800	650
6	400	320

シマシマ

実装方法を見る

説明リスト

商品名: エコバッグ
価格: 600円
サイズ: 10cm × 20cm
素材: ポリエステル

現在: 下線スタイル

実装方法を見る

回転 / 縦書き表示

Rotate!

吾輩は猫である

SECTION

サイドラベルを使ったレイアウトの例です。

現在: transform: rotate(90deg)

実装方法を見る

テキストの前にアイコン

Information text

Check Point here

Likes and more

現在: content: '\2714'

実装方法を見る

画像に影（シャドウ）

現在: box-shadow: 0 0 30px rgba(0,0,0,0.4)

実装方法を見る

固定配置ヘッダー
アニメーションなし

実装方法を見る

固定配置ヘッダー
アニメーションあり

実装方法を見る

固定配置バナー
アニメーションなし

実装方法を見る

ハンバーガーメニュー

LOGO

実装方法を見るデザイン集

タブメニュー

タブ1
タブ2
タブ3

タブ「1」の内容です。

タブ「2」の内容です。

タブ「3」の内容です。

実装方法を見るデザイン集

立体的なボタン

タッチパネルではスムーズに動作しません。

実装方法を見る

ダイアログ

実装方法を見るデザイン集

コピーボタン

Good Morning

Good Afternoon

Good Evening

実装方法を見る

入力フォームを増減

連絡事項： ×

連絡事項： ×

実装方法を見る

動的ドロップダウンリスト

大分類：

小分類：

実装方法を見る

アコーディオン

実装方法を見るデザイン集

モーダルウィンドウ

実装方法を見るデザイン集

ポップアップ

実装方法を見るデザイン集

お知らせ表示

お知らせ

NEW 新機能リリースのご案内 2026.04 ›
INFO メンテナンスのお知らせ 2026.04 ›
利用規約改定について 2026.05 ›

実装方法を見る

ホバー時にズーム＆ダーク

HELLO
WORLD

実装方法を見る

スライドイン表示

スライドイン表示します

左からスライドイン表示

実装方法を見る

一定時間毎に表示変更
フェードアウト

こんにちは！

Hello!

你好！

Bonjour!

Guten Tag!

実装方法を見る

一定時間毎に表示変更
ズームイン＆フェードアウト

01 Nature

02 Ocean

03 Sunset

実装方法を見る

点滅表示

● ゆっくり点滅

● はやく点滅

実装方法を見る

ローディングアイコン

実装方法を見る

プログレスバー（不定型）

速度: 2s

実装方法を見る

プログレスバー（決定型）

0%

Task 1 Task 2 Task 3

実装方法を見る

拡大表示

ホバー / クリックで拡大

Hover

Click

実装方法を見る

拡大表示（モーダル）

実装方法を見る

カルーセル（スライダー）

Slide 1

Slide 2

Slide 3

Slide 4

1 / 4

実装方法を見る

ドラッグ＆ドロップ

Item 1
Item 2
Item 3
Item 4

実装方法を見る

ダークモード

Header

実装方法を見る

郵便番号検索

–

実装方法を見る

効果音

実装方法を見る

BGMの再生・停止

▮▮ 停止中

VOL 50%

実装方法を見る

グラスモーフィズム

Glass Card

背景が透けるUI

実装方法を見る

スケルトンスクリーン

実装方法を見る

Web・UIのデザイン集