いいデザイン、コピペで。
そのまま使える、きれいなHTML/CSSパーツ集。色やサイズを調整して、コピペするだけ。
基本パーツ
ボタン
36種
リンクや送信に使う基本のボタン。色・角丸・サイズを調整してそのまま使えます。
ボタン演出
15種
クリックしたときに反応するボタン。波紋・ロード切替・いいねなど(JS付き)。
バッジ・タグ
26種
ステータスやラベルの小さなタグ。新着・セール・分類などに。
チップ・タグ入力
15種
選択チップや絞り込みタグの見た目。色・角丸を調整。
区切り線
15種
セクションを分ける線。色・太さ・スタイルを調整できます。
テキスト・見出し
見出し装飾
48種
セクションのタイトル装飾。線・マーカー・囲みなど。色やサイズを調整。
テキストFX
19種
文字を目立たせる効果。影・光・グラデ・タイプ風など。色や速さを調整。
動く文字(キネティック)
10種
文字が動くタイポグラフィ演出。1文字ずつ出現・スクランブル・波打ち・3D回転など(一部JS付き)。
引用・強調
15種
引用文やハイライトブロック。色や角丸を調整できます。
レイアウト・ボックス
レイアウト
13種
ヘッダー・ナビバー・全体構成など、ページの骨格になる大きめのパーツ。
伝わるデザインを、すぐに。
選んで貼るだけ。あなたのサイトがすぐ整います。
無料ではじめる
セクション
20種
ヒーロー・機能紹介・統計など、ページを構成する大きめのブロック。色や文言を調整できます。
ベントグリッド
21種
大小の角丸カードを組み合わせた「弁当箱」型のモダンなレイアウト。色や角丸を調整できます。
© 2026 Decopi. All rights reserved.
フッター
13種
サイト末尾の情報ブロック。リンク集・SNS・コピーライトなど。色や列を調整できます。
カルーセル
16種
画像やレビューを横送り・フェード・自動再生などで見せるスライダー各種。矢印・ドット・サムネ付き(JS付き・貼るだけで動く)。
ギャラリー
15種
写真やサムネを並べるギャラリー。グリッド・マソンリー・拡大表示(ライトボックス)など。色や角丸を調整。
カード・ボックス
44種
情報をまとめるカード。お知らせ・商品・料金などに。色や角丸を調整。
テーブル装飾
16種
見やすい表のスタイル。ヘッダー色や角丸を調整できます。
価格・料金表
19種
料金プランの表示。色・角丸・文言を調整できます。
価格表示
8種
価格そのものの見せ方。大きな金額・通貨・割引・分割払いなど。色や数値を調整できます。
CTA・バナー
18種
行動を促すバナーや帯。色・角丸・文言を調整できます。
- 会社名
- 株式会社デコピ
- 設立
- 2020年4月
- 所在地
- 東京都渋谷区
- 事業内容
- Webデザイン支援
会社情報
15種
会社概要・沿革・お知らせ・チーム紹介など、コーポレートサイト定番の情報ブロック。
ナビ・操作
ナビ・パンくず
18種
パンくず・サイドナビ・ボトムナビなど、ページ内の道案内メニュー(静的な見た目)。色・角丸を調整できます。
ページネーション
15種
一覧やブログの番号送り。番号・矢印・省略・ロードモアなど。色や角丸を調整できます。
概要タブの内容です。
詳細タブの内容です。
レビュータブの内容です。
タブ
13種
クリックで内容を切り替えるタブ。下線・ピル・アイコン・縦型など(JS付き・貼るだけで動く)。
ここに開いたときの本文が入ります。回答や補足説明などを自由に書けます。
アコーディオン
11種
クリックで開閉する折りたたみパーツ。FAQ・詳細表示などに(JS付き・貼るだけで動く)。
ここまでは常に表示される導入文です。
「もっと見る」で展開される続きの文章。長い説明や補足をここに入れられます。
切替・展開
13種
クリックで表示を切り替える小さなパーツ。セグメント・トグルスイッチ・もっと見る・ステップなど(JS付き・貼るだけで動く)。
ダイアログ
これはモーダルダイアログです。背景の暗い部分か、下のボタンで閉じられます。
モーダル・オーバーレイ
12種
画面に重ねて表示するモーダル・ダイアログ・ドロワーなど(JS付き・貼るだけで動く)。
ドロップダウン
15種
クリックやホバーで開くメニュー・プルダウン各種。選択・ナビ・操作メニューに(JS付き・貼るだけで動く)。
ステップ・ウィザード
8種
申込フローや手順を示すステップ表示。番号・アイコン・進捗付きなど。色を調整できます。
スクロールすると上部のバーが伸びます。
ダミー本文。
ダミー本文。
ダミー本文。
ダミー本文。
ダミー本文。
ダミー本文。
ダミー本文。
ダミー本文。
最後まで読むとバーが満ちます。
スクロールUI
10種
スクロールに連動するUI。読了バー・トップ戻る・進捗ドットなど(JS付き・貼るだけで動く)。
フォーム部品
25種
入力欄やボタンなどのフォーム要素。色・角丸を調整できます。
SNS・シェア
15種
LINE・X・Facebook・URLコピーなどのシェア/フォローボタン。日本向けSNSを網羅。
キーボードキー
15種
ショートカット表示。Ctrl+S・⌘K・矢印キーなど。ドキュメントやコマンド案内に。
情報・フィードバック
アラート・注意書き
15種
お知らせや注意を伝えるボックス。色・文言を変えて使えます。
FAQ・よくある質問
15種
よくある質問のブロック。アコーディオン・2カラム・検索付きなど。色や角丸を調整(JS付き)。
吹き出し・ツールチップ
16種
会話やヒント表示に使う吹き出し。色・角丸を調整できます。
ローディング
19種
読み込み中の演出。スピナー・ドット・バーなど。色や速さを調整。
スケルトンUI
13種
読み込み中に枠だけを見せるプレースホルダ。リスト・記事・カードなど。光沢アニメ付き。
進捗・ステップ
16種
進み具合やステップ表示。色や進捗を調整できます。
チャート・グラフ
15種
円・棒・折れ線・レーダーなどのグラフ。CSSとSVGだけで動く軽量チャート。色や数値を調整。
統計・ダッシュボード
15種
数値サマリーやダッシュボードのタイル。KPI・達成率・ランキングなど。色や数値を調整できます。
タイムライン
19種
経歴や履歴を時系列で。色や角丸を調整できます。
‹2025年 1月›
日月火水木金土
28293012345678910111213141516171819202122232425
カレンダー・日付
12種
月間カレンダー・日付ピッカー・予定表など。色や角丸を調整できます(一部JS付き)。
評価・数値
15種
星レーティング・統計カード・切替スイッチ・数量ステッパーなど、よく使う小型UI。
アバター
16種
ユーザーアイコンやアバター。色・サイズ・角丸を調整できます。
リスト装飾
20種
箇条書きを見やすく。チェック・番号・アイコン付き。色を調整。
結果が見つかりません
別のキーワードでもう一度お試しください。
空状態
14種
データが無いとき・検索0件・エラー時に見せるプレースホルダ。アイコン+文言+ボタン。
装飾・演出
グラデーション
19種
背景やテキストに使える色のグラデーション。2色と角度を自由に。
グラスモーフィズム
10種
すりガラス風の半透明UI。カード・ナビ・ボタンなど、深みのある2026トレンドの質感。
影・グラス
18種
立体感を出す影と、すりガラスの質感。影の強さや色を調整。
背景パターン
15種
セクション背景に敷けるパターン。色と間隔を調整できます。
背景エフェクト
23種
動きのある背景。パーティクル・波・降雪・星空など、ヒーローやセクションの背景に(一部JS付き)。
ホバー演出
23種
マウスを乗せると動く効果(CSSのみ)。速さや色を調整できます。
カーソル・クリック演出
10種
マウス操作に反応する演出。波紋・追従スポットライト・磁石・飛散パーティクルなど(JS付き)。
アニメーション
14種
常に動き続ける演出。ふわふわ・回転・点滅など。速さや色を調整。
出現アニメ
15種
画面に現れたときに動くアニメ。フェードイン・カウントアップなど(JS付き)。
画像・メディア枠
16種
画像を飾る枠やアスペクト比の箱。角丸・枠色を調整。
★ SALE ★ 期間限定 ★ 送料無料 ★★ SALE ★ 期間限定 ★ 送料無料 ★★ SALE ★ 期間限定 ★ 送料無料 ★★ SALE ★ 期間限定 ★ 送料無料 ★
マーキー
15種
ロゴや文字が途切れず横に流れ続ける帯。速さや方向を調整できます(JS不要・CSSのみ)。
販促・LP装飾
15種
キャンペーンやLPで目を引く装飾。リボン・クーポン・割引・カウントダウンなど。色や文言を調整できます。
ここにメモを書きます。買い物リストやTo-Doに。
付箋・メモ
15種
メモや注釈に使う付箋風のボックス。めくれ角・テープ・ピン留めなど。色や傾きを調整。
別のキーワードでお試しください。