36. 静的グリッドレイアウト

A

B

C

D

01-05-01

bentoグリッド

大小の矩形を組み合わせた非対称の枠組みです。WordPressのトップページで機能や実績を強弱つけて並べる区画に使えます。

CSS onlystaticcss</> コードを見る

メイン記事

記事A

記事B

記事C

01-05-02

雑誌風非対称グリッド

大きな写真枠と複数の小記事枠を非対称に配置した構図見本です。WordPressのニュース一覧や特集ページの骨組みに使えます。

CSS onlystaticcss</> コードを見る

迅速な対応

お問い合わせに素早く返信

安心の品質

厳選した素材のみ使用

選ばれる理由

累計利用者数No.1

01-05-03

3カラム均等グリッド

アイコン・見出し・説明文を3列に整列させた構図です。WordPressのサービス紹介や特徴一覧のセクションに使えます。

CSS onlystaticcss</> コードを見る

1

2

3

4

5

01-05-04

モザイクタイルグリッド

高さの異なるタイルを敷き詰めた配置見本です。WordPressのギャラリーページやポートフォリオ一覧のレイアウトに使えます。

CSS onlystaticcss</> コードを見る

01-05-05

サイドバー2カラムレイアウト

メインコンテンツと右サイドバーで構成した見本です。WordPressのブログ記事ページや一覧ページの土台に使えます。

CSS onlystaticcss</> コードを見る

全幅バナー帯

01-05-06

フルブリード帯+余白コンテンツ

画面いっぱいの帯と中央寄せの余白コンテンツを対比させた構図です。WordPressの固定ページでセクションの区切りを見せる際に使えます。

CSS onlystaticcss</> コードを見る

1

2

3

4

01-05-07

均等4分割グリッド

シンプルな2×2の均等配置です。WordPressのサービス比較やカテゴリ一覧など、要素の重みを揃えたい区画に使えます。

CSS onlystaticcss</> コードを見る

主要トピック

階層グリッド

1つの大枠と周囲の小枠群で構成した見本です。WordPressの特集記事ページで主題と関連項目の関係を示す区画に使えます。

CSS onlystaticcss</> コードを見る

SIMPLE 余白を活かした静かな構成

01-05-09

余白基調ミニマルグリッド

広い余白と少ない要素で構成した静的なレイアウトです。WordPressのブランドページやトップの導入部に使えます。

CSS onlystaticcss</> コードを見る

セクション1

セクション2

セクション3

01-05-10

縦積みセクション区切りレイアウト

色の異なる帯が縦に積み重なる構成見本です。WordPressの固定ページで複数セクションの境目を色分けして示す際に使えます。

CSS onlystaticcss</> コードを見る

col-4 col-8

col-3 col-3 col-3 col-3

col-12

01-05-11

12カラムグリッドシステム見本

col-4+col-8やcol-3×4など、12分割の組み合わせパターンを並べた静止見本です。WordPressのカスタムレイアウトを設計する際のグリッド基準表として使えます。

CSS onlystaticcss</> コードを見る

header

nav

main

aside

footer

01-05-12

ホーリーグレイルレイアウト構成

ヘッダー・サイドナビ・メイン・サイドバー・フッターの5領域からなる定番レイアウトの骨組みです。WordPressテーマの全体設計を確認する土台として使えます。

CSS onlystaticcss</> コードを見る

37. 静的コンテンツ構成パターン

オフセット配置

画像とテキストを少しずらして重ねる構成です。

01-06-01

オフセット画像+テキスト構成

画像がわずかに右へずれて本文と重なる非対称なレイアウトです。WordPressの固定ページで単調になりがちな画像+文章のセクションに変化を付けられます。

CSS onlystaticcss</> コードを見る

FEATURE

フレーム付きセクション

内側に細い罫線を配した落ち着いた構成です。

01-06-02

フレーム付きセクション

コンテンツブロックの内側を細い枠線で囲んだ構成です。WordPressのお知らせ欄やサービス紹介の一区画として、境界をはっきり示したい場面に向きます。

CSS onlystaticcss</> コードを見る

見出しバンド

全幅の色帯見出しの下に、中央寄せの説明文を配置した構成です。

01-06-03

フルブリード見出し+中央寄せ本文

全幅に広がる色帯の見出しと、中央寄せの本文で構成したセクションです。WordPressのページ区切りやカテゴリ紹介の導入部に使えます。

CSS onlystaticcss</> コードを見る

囲み枠パネル

影を用いないフラットな枠線だけのパネル構成です。

01-06-04

囲み枠コンテンツ(パネル型)

影を付けずフラットな線だけで囲んだパネル構成です。WordPressの料金プランや注意事項など、控えめに情報をまとめたい箇所に適しています。

CSS onlystaticcss</> コードを見る

DESIGN

DEVELOP

01-06-05

対角線分割セクション

clip-pathで斜めに区切った2色のコンテンツを並べた静止構成です。WordPressの2つのサービス紹介や比較コーナーの背景装飾に利用できます。

CSS onlystaticcss</> コードを見る

CONCEPT

中央に強調された言葉

左右にゆったりとした余白を取った構成です。

01-06-06

センター強調セクション

中央に大きく配置した見出しの左右に広い余白を取った構成です。WordPressの理念紹介やコンセプトページなど、印象を強めたい部分に向きます。

CSS onlystaticcss</> コードを見る

非対称2カラム

画像を広く、テキストを狭く配置した構成です。

01-06-07

左右非対称2カラム

画像側を広く、テキスト側を狭く割り当てた比率の異なる2カラム構成です。WordPressの実績紹介や商品説明で画像を主役にしたい場合に使えます。

CSS onlystaticcss</> コードを見る

アイキャッチ画像の説明キャプション

01-06-08

アイキャッチ画像+キャプション帯

画像の下に暗めのキャプション帯を添えた構成です。WordPressの記事一覧やギャラリーページのサムネイル表示にそのまま利用できます。

CSS onlystaticcss</> コードを見る

editorial

雑誌のような広い余白と控えめな罫線を用いた組み方です。

01-06-09

余白多めエディトリアル型

雑誌の誌面を思わせる広い余白と細い罫線だけで構成した静かなレイアウトです。WordPressのコラムやインタビュー記事の導入部に適しています。

CSS onlystaticcss</> コードを見る

01企画

02設計

03制作

04公開

01-06-10

境界線グリッドセクション

各項目を細い罫線で仕切ったグリッド構成です。WordPressの制作フローや特徴一覧など、項目を等分に整理して見せたい場面に向きます。

CSS onlystaticcss</> コードを見る

2023年
サービス開始
2024年
利用者1万人突破
2026年
大型リニューアル

01-06-11

縦型タイムライン構成

1本の縦線と丸ドットで年表・沿革を示す静止レイアウトです。WordPressの会社概要ページや沿革紹介セクションの骨組みに使えます。

CSS onlystaticcss</> コードを見る

従来

紙の書類で申請、承認まで数日

VS

導入後

オンライン申請、即日承認

01-06-12

シンメトリー2カラム比較構成

中央の区切りを軸に左右対称で対比させる静止レイアウトです。WordPressの導入前後比較や2つのプラン対比セクションの骨組みに使えます。

CSS onlystaticcss</> コードを見る

43. 静的ヒーロー構図バリエーション

暮らしに、余白を。

素材と手仕事にこだわった家具で、静かな時間をつくる。

コレクションを見る

01-07-01

左右分割ヒーロー(画像+テキスト)

左に写真代わりの色ブロック、右に見出しとボタンを配置する定番構図です。WordPressトップページのファーストビューに使えます。

CSS onlystaticcss</> コードを見る

NEW COLLECTION

ミニマルという、豊かさ。

不要なものを削ぎ落とした先に、本当に必要なものが見えてくる。

詳しく見る

01-07-02

中央揃えミニマルヒーロー

画面中央に見出し・サブテキスト・ボタンだけを置くシンプルな構成です。WordPressのブランドサイトなど装飾を抑えたいトップに向きます。

CSS onlystaticcss</> コードを見る

景色が変わる、瞬間へ。

新しい体験は、いつも静かにはじまる。

01-07-03

フルスクリーン背景ヒーロー(静止)

全面に大きなグラデーションを敷き中央にテキストを重ねる構図です。WordPressのイベントやサービス紹介ページの導入部に使えます。

CSS onlystaticcss</> コードを見る

SPRING SALE

季節の、はじまりに。

新作アイテムを、いち早くチェック。

見る

01-07-04

非対称オフセットヒーロー

テキストブロックを中心からあえてずらして配置し、余白で緊張感を出す構図です。WordPressのファッション・雑貨系サイトに向きます。

CSS onlystaticcss</> コードを見る

整える、という美学。

細部までこだわり抜いた、静かなデザイン。

Learn more

01-07-05

フレーム付きヒーロー

内側にゆとりを持たせ細い枠線で囲むことで上品な印象を与える構図です。WordPressのギャラリーサイトやアトリエ系サイトに使えます。

CSS onlystaticcss</> コードを見る

見て、感じる、選ぶ。

写真とともに伝える、ブランドの世界観。

01-07-06

上下2段ヒーロー

上段にテキスト、下段に写真代わりの色帯を置く縦構成です。WordPressのポートフォリオや雑誌風サイトのトップに向きます。

CSS onlystaticcss</> コードを見る

境界線が、個性になる。

ふたつの色が交わる場所に、物語が生まれる。

01-07-07

斜めライン区切りヒーロー(静止)

clip-pathで2色を斜めに区切り画面全体に緊張感のある構図をつくります。WordPressのブランディングサイトの導入部に使えます。

CSS onlystaticcss</> コードを見る

SIMPLE
IS BEST.

タイポグラフィだけで魅せる、余白の力。

01-07-08

ミニマルテキストのみヒーロー

白背景に大きな文字だけを置き余白で見せる構図です。WordPressのタイポグラフィ重視なブランドサイトのトップに向きます。

CSS onlystaticcss</> コードを見る

重なりが、奥行きをつくる。

01-07-09

画像コラージュヒーロー

複数の色ブロックを重ねて写真コラージュ風の奥行きを表現する構図です。WordPressのクリエイティブ系ポートフォリオに使えます。

CSS onlystaticcss</> コードを見る

枠の中に、世界がある。

太い輪郭が、コンテンツに存在感を与える。

はじめる

01-07-10

ボーダー付きヒーロー

ヒーロー全体を太めの枠線で囲みコンテンツ範囲を強調する構図です。WordPressのアート系・雑貨系ブランドサイトに向きます。

CSS onlystaticcss</> コードを見る

細部に宿る、こだわり。

小さな点の積み重ねが、静かな奥行きをつくる。

01-07-11

ドットパターン背景ヒーロー

細かい点を敷き詰めた背景に見出しとリード文を重ねる構図です。WordPressのクラフト系・アトリエ系サイトの落ち着いたファーストビューに使えます。

CSS onlystaticcss</> コードを見る

01

物語は、ここから。

ブランドの原点を伝えるヒーローセクション。

01-07-12

大型背景文字ヒーロー

背景に薄い色の巨大な数字をあしらい、その手前に見出しを配置する構図です。WordPressのストーリー訴求やブランドサイトの導入部に使えます。

CSS onlystaticcss</> コードを見る

44. 静的フッター構成バリエーション

01-08-01

シンプル1行フッター

ロゴとコピーライトのみを1行に収めた最小構成です。WordPressの情報量が少ないランディングページの締めに使えます。

CSS onlystaticcss</> コードを見る

01-08-02

3カラムリンクフッター(静止)

会社情報とリンク2列を並べた3カラム構成です。WordPressの企業サイト共通フッターの土台として使えます。

CSS onlystaticcss</> コードを見る

01-08-03

中央ロゴ+リンクフッター

中央にロゴを配置し、その下に横並びのリンクを並べる構成です。WordPressのシンプルなコーポレートサイトに向いています。

CSS onlystaticcss</> コードを見る

01-08-04

二段構成フッター(上部CTA+下部リンク)

上段に登録の呼びかけ、下段にリンク一覧を並べた二段構成です。WordPressの会員登録・購読導線に使えます。

CSS onlystaticcss</> コードを見る

01-08-05

サイドバー型フッター

左に大きめのロゴ、右にリンク群を並べた非対称配置の構成です。WordPressのサービスサイトの個性づけに使えます。

CSS onlystaticcss</> コードを見る

01-08-06

ミニマル罫線区切りフッター

上部に一本の罫線を引き、その下にロゴとコピーライトだけを置いた簡潔な構成です。WordPressの余白を活かしたデザインに合います。

CSS onlystaticcss</> コードを見る

01-08-07

アイコン列挙フッター

SNSアイコンを横並びで列挙しただけの構成です。WordPressのSNS導線を簡潔に見せたい場合に使えます。

CSS onlystaticcss</> コードを見る

01-08-08

住所+リンク併記フッター

左に住所と電話番号、右にサイトマップリンクを併記した構成です。WordPressの店舗・事務所紹介サイトに使えます。

CSS onlystaticcss</> コードを見る

01-08-09

ブランド色帯フッター

ブランドカラーの帯を背景に敷いた構成です。WordPressでコーポレートカラーを印象付ける締めくくりに使えます。

CSS onlystaticcss</> コードを見る

01-08-10

グリッド型サイトマップフッター

4列のリンクグループを並べたサイトマップ形式の構成です。WordPressの情報量が多いサイトの全体案内に使えます。

CSS onlystaticcss</> コードを見る

01-08-11

メール登録欄付きフッター

ロゴ・コピーライトと並べてメールアドレス入力欄風の登録フォームを配置した構成です。WordPressのメルマガ購読導線をフッターに常設したい場合に使えます。

CSS onlystaticcss</> コードを見る

01-08-12

2色ブロック分割フッター

左右を異なる背景色で分割し、左にブランドメッセージ、右にリンク一覧を配置した構成です。WordPressで個性を出したいコーポレートサイトのフッターに使えます。

CSS onlystaticcss</> コードを見る

61. 静的マガジンレイアウト応用

01-09-01

見開き2ページ風レイアウト

中央に区切り線を持つ左右対称の誌面構成。左に本文、右に写真枠を配置し、雑誌の見開きページをそのまま静止画として再現する。

CSS onlystaticcss</> コードを見る

特集：都市を変えるデザイン

小さな工夫が街の風景を変えていく——その現場を追った。

01-09-02

大見出し+リード文+本文の階層構成

見出し・リード文・本文が上から順に配置された、雑誌記事冒頭の定番構成。情報の優先順位を視覚的階層で示す固定レイアウト。

CSS onlystaticcss</> コードを見る

01 朝霧に沈む港町の情景。

01-09-03

写真主体のフォトエッセイレイアウト

大きな写真枠と短いキャプションのみで構成した誌面。文章を最小限にし、画像の印象を前面に出したいページに用いる。

CSS onlystaticcss</> コードを見る

サイドバー付き記事レイアウト

本文と右サイドバー(関連情報)による2カラム構成。本文を補足する情報を並置する、コラムや解説記事向けのページ構成。

CSS onlystaticcss</> コードを見る

01巻頭特集

02連載コラム

03読者の声

04今月の一冊

01-09-05

グリッド雑誌目次風レイアウト

複数の記事タイトルがグリッド状に並ぶ目次ページ風の構成。号内の主要コンテンツを一覧できる案内ページに用いる。

CSS onlystaticcss</> コードを見る

Q

今回のプロジェクトで意識したことは？

A

使う人の日常に溶け込む形を探しました。

01-09-06

インタビュー記事レイアウト

質問と回答を色分けした枠で視覚的に区別した誌面構成。インタビューや対話形式の記事を整理して見せたい場合に適する。

CSS onlystaticcss</> コードを見る

No.128

SPECIAL
ISSUE

特集：静けさのある暮らし

01-09-07

表紙(カバー)風レイアウト

大きなタイトル・号数・特集見出しで構成した表紙デザイン。冊子形式のコンテンツやランディングページの扉として使える。

CSS onlystaticcss</> コードを見る

COLUMN

01-09-08

コラム記事の枠囲みレイアウト

本文中に囲み枠のコラムが挿入された誌面構成。補足情報や豆知識を本文と区別して配置したい記事ページに用いる。

CSS onlystaticcss</> コードを見る

田中

最初はどんな印象でしたか。

佐藤

正直、驚きの方が大きかったです。

鈴木

私は逆に納得していました。

01-09-09

対談・座談会記事レイアウト

複数の発言者を色分けして表示した対談形式の誌面構成。座談会やパネルディスカッションの記事化に用いる固定レイアウト。

CSS onlystaticcss</> コードを見る

特集：暮らしを整える道具たち

01-09-10

特集ページの帯見出しレイアウト

上部に太い帯見出し、下に複数の小記事が並ぶ構成。特集ページの冒頭やカテゴリまとめページに用いる誌面レイアウト。

CSS onlystaticcss</> コードを見る

三段組み特集記事

01-09-11

三段組み本文レイアウト

新聞や専門誌に見られる縦3分割の段組み構成。文字量の多い特集記事を紙面のように詰め込みたいページに使える。

CSS onlystaticcss</> コードを見る

季刊マガジン MIDORI

発行人：編集部　発行日：毎月10日

発行所：株式会社サンプル出版

01-09-12

奥付・広告ページ風レイアウト

広告枠と発行情報をまとめた巻末ページの構成。冊子コンテンツの最終ページや発行者情報の掲載に用いる。

CSS onlystaticcss</> コードを見る

62. 静的ダッシュボードレイアウト構成

01-10-01

サイドバー+メインコンテンツの管理画面構成

左に固定ナビゲーション、右にコンテンツを配置する定番の管理画面レイアウト。WordPress管理画面や会員マイページの基本骨格として利用できる。

CSS onlystaticcss</> コードを見る

128 +12%

3,204 +4%

¥52万 -2%

87% +1%

01-10-02

カード羅列型ダッシュボード

複数の統計カードをグリッドで並べる構成。会員マイページの利用状況サマリーなど、数値指標をまとめて見せたい場面に適する。

CSS onlystaticcss</> コードを見る

売上¥1.2M

注文842

顧客1,930

返品率1.8%

01-10-03

上部KPIバー+下部詳細エリア構成

上段に主要指標を横並びで表示し、下段に詳細情報を配置する構成。管理画面のトップページで全体像を先に見せたい場合に用いる。

CSS onlystaticcss</> コードを見る

01-10-04

左右2カラムの分析画面構成

左に棒グラフ、右に項目リストを並列配置する分析画面の骨格。売上分析ページやレポート画面のレイアウトサンプルに適する。

CSS onlystaticcss</> コードを見る

概要売上顧客設定

01-10-05

タブ切替前提のダッシュボード枠組み

上部にタブ、下部にコンテンツエリアを配置した静止状態の骨格構成。会員マイページで複数セクションを切り替える画面設計の見本になる。

CSS onlystaticcss</> コードを見る

01-10-06

通知パネル付きダッシュボード

右端に固定の通知エリアを持つ管理画面構成。メイン領域とは独立して重要なお知らせを常に表示させたい画面に向く。

CSS onlystaticcss</> コードを見る

01-10-07

プロフィール+アクティビティの2ブロック構成

上段にプロフィール情報、下段に活動履歴を配置する構成。会員マイページのアカウントページに用いる静止レイアウトの見本。

CSS onlystaticcss</> コードを見る

staticcss</> コードを見る

01-10-08

テーブル中心の管理画面レイアウト

上部にフィルタ操作、下部にデータテーブルを配置する構成。会員一覧や注文一覧など、一覧管理画面の基本骨格として使える。

CSS only

01-10-09

ウィジェット自由配置風グリッド

大小のウィジェットが不規則に組み合わさるグリッド構成。ダッシュボードのカスタムレイアウト案として見せる静止サンプル。

CSS onlystaticcss</> コードを見る

01-10-10

縦積みモバイル向けダッシュボード構成

カードが縦一列に並ぶシンプルな構成。スマートフォン幅の会員マイページで数値情報を上から順に確認させたい場合に適する。

CSS onlystaticcss</> コードを見る

01-10-11

カレンダー+予定リストのダッシュボード構成

左に月間カレンダー、右に当日の予定一覧を配置する構成。予約管理画面やスケジュール確認ページの骨格として使える。

CSS onlystaticcss</> コードを見る

保存する

01-10-12

設定画面フォーム中心レイアウト

入力欄とトグルスイッチが縦に並ぶ設定画面の構成。会員マイページのアカウント設定や通知設定画面に用いる。

CSS onlystaticcss</> コードを見る

63. 静的ランディングページ全体構成見本

LOGO あなたの毎日を、もっと快適に 今すぐ申し込む

3つの特徴

導入実績

1,20098%4.8

お申し込みはこちら

01-11-01

王道LP構成(ヒーロー→特徴→実績→CTA)

最も標準的な縦積み構成のミニチュア見本。WordPressの新規LP制作時にセクション配分の下敷きとして使える。

CSS onlystaticcss</> コードを見る

サービス名

こんなお悩みありませんか？

解決策

課題 → 解決 → 効果

料金プラン

¥980¥2,980¥5,980

よくある質問

Q. 期間は？

Q. 解約は？

01-11-02

サービス紹介LP構成(課題→解決→料金→FAQ)

課題解決型のストーリーで進める構成見本。SaaSや士業などのサービス訴求LPの雛形として利用できる。

CSS onlystaticcss</> コードを見る

スペック

サイズ重量素材

レビュー ★4.7

カートに入れる ¥6,600

01-11-03

商品訴求LP構成(ビジュアル→スペック→レビュー→購入)

EC寄りの商品単体販売ページ構成のミニチュア見本。ネットショップの商品LPやセールスページに応用できる。

CSS onlystaticcss</> コードを見る

私たちは、挑戦を楽しむ人と働きたい

働き方

社員紹介

エントリーはこちら

01-11-04

採用LP構成(メッセージ→働き方→社員紹介→応募)

採用サイト向けのストーリーテリング構成見本。企業の採用特設ページや新卒採用LPの骨組みに使える。

CSS onlystaticcss</> コードを見る

Web制作セミナー 2026 2026.09.12 (Sat) オンライン開催

登壇者

タイムテーブル

13:00 開場13:30 講演15:00 Q&A

参加申込フォーム

01-11-05

セミナー・イベントLP構成(概要→登壇者→タイムテーブル→申込)

イベント告知に特化した情報整理型の構成見本。オンラインセミナーやウェビナー告知ページに転用できる。

CSS onlystaticcss</> コードを見る

導入事例まとめ資料を無料配布中

導入企業

資料請求フォーム

送信する

01-11-06

資料請求LP構成(訴求→実績ロゴ→フォーム)

要素を絞ったリード獲得特化の短い構成見本。ホワイトペーパー配布やメルマガ登録の獲得ページに適する。

CSS onlystaticcss</> コードを見る

「誠実に、より良い未来を」

事業内容

沿革

2010 設立2018 上場2024 海外進出

アクセス

01-11-07

会社紹介LP構成(理念→事業→沿革→アクセス)

コーポレートサイトの企業紹介向け構成見本。会社案内ページや採用兼用のコーポレートLPに使える。

CSS onlystaticcss</> コードを見る

主な機能

App Store Google Play

01-11-08

アプリ紹介LP構成(スクリーンショット→機能→ダウンロード)

スマホアプリの機能訴求に適した構成見本。アプリストアへの誘導を目的としたプロモーションページに使える。

CSS onlystaticcss</> コードを見る

選ばれる理由

他社比較

項目自社他社

価格◎△

サポート◎○

導入事例

01-11-09

比較検討LP構成(自社優位性→比較表→導入事例)

BtoBの検討材料を提示する構成見本。競合比較を軸にした資料請求前の検討支援ページに適する。

CSS onlystaticcss</> コードを見る

ロングセラー商品、ここに誕生

課題提起

選ばれる理由①

選ばれる理由②

お客様の声

価格・特典

今すぐ購入する

01-11-10

単一商品訴求の縦長LP構成(複数セクションが長く連なる)

じっくり読ませる縦長型の構成見本。健康食品や通販商品などの説得型セールスレターLPに用いられる形式。

CSS onlystaticcss</> コードを見る

グリーンヒルズ 302号室 賃料 12.8万円 / 2LDK / 徒歩8分

間取り図

内見予約はこちら

01-11-11

不動産・物件紹介LP構成(外観→物件情報→間取り→内見予約)

物件写真と間取りを軸にした不動産系ランディングページの構成見本。賃貸・売買物件の紹介ページに転用できる。

CSS onlystaticcss</> コードを見る

この技術を、もっと多くの人へ。

達成率 168%

支援総額 ¥3,360,000 / 目標 ¥2,000,000

リターン一覧

¥5,000¥10,000¥30,000

このプロジェクトを支援する

01-11-12

クラウドファンディングLP構成(ストーリー→達成率→リターン→支援)

達成率バーと支援リターンを見せる購入型クラウドファンディング風の構成見本。プロジェクト応援ページに応用できる。

CSS onlystaticcss</> コードを見る

64. 静的印刷物風レイアウト

M

Midori Design Studio

山田太郎

Creative Director

03-1234-5678

taro@midori-design.jp

01-12-01

名刺風カードデザイン

会社名・氏名・連絡先を配した名刺サイズの構成。スタッフ紹介ページやプロフィールカードの表現に利用できます。

CSS onlystaticcss</> コードを見る

SUMMER EVENT

夏祭りマルシェ

2026年8月2日(日) 10:00-16:00

会場：中央公園特設広場

01-12-02

チラシ風告知デザイン

大見出しと日時・会場情報を配したイベントチラシ風の構成。店舗やイベントの告知バナーに応用できます。

CSS onlystaticcss</> コードを見る

ADMIT ONE

音楽フェスティバル

2026.09.12 開場 17:00

No.0158

01-12-03

チケット風デザイン(ミシン目付き)

半券風の点線区切りを配したチケットデザイン。イベント告知や特典クーポンの表現に利用できます。

CSS onlystaticcss</> コードを見る

ご招待状

結婚披露宴のご案内

謹啓　時下ますますご清祥のこととお慶び申し上げます

2026年10月18日

01-12-04

招待状風デザイン

装飾枠と丁寧な文面を配したフォーマルな招待状の構成。式典やセミナー案内のページに応用できます。

CSS onlystaticcss</> コードを見る

Cafe Ren 領収書

ブレンドコーヒー￥480

チーズケーキ￥520

サンドイッチ￥650

合計￥1,650

01-12-05

領収書・レシート風デザイン

罫線区切りの明細リストを持つレシート風の構成。注文確認画面や購入履歴の表示に利用できます。

CSS onlystaticcss</> コードを見る

CERTIFICATE OF COMPLETION

認定証

佐藤花子　殿

上記の者は所定の課程を修了したことを証します

代表　鈴木一郎

01-12-06

賞状・認定証風デザイン

中央装飾枠と署名欄を持つ賞状デザイン。修了証や受賞ページの静的な表示に利用できます。

CSS onlystaticcss</> コードを見る

AOI

葵商事株式会社

〒100-0001 東京都千代田区1-2-3

TEL 03-9876-5432

01-12-07

封筒・レターヘッド風デザイン

ロゴと差出人情報を配したレターヘッドの構成。案内状や公式文書のヘッダー部分に応用できます。

CSS onlystaticcss</> コードを見る

スタンプカード

✓ ✓ ✓

3個貯まるとドリンク1杯無料

01-12-08

スタンプカード風デザイン

複数のスタンプ枠が並ぶポイントカードの構成。店舗の会員特典ページや来店促進の表示に利用できます。

CSS onlystaticcss</> コードを見る

01-12-09

メニュー表(飲食店)風デザイン

品名と価格が並ぶメニュー表の構成。飲食店サイトの料理紹介やコース案内の表示に利用できます。

CSS onlystaticcss</> コードを見る

PHOTO

拝啓　旅先より一筆。

穏やかな海辺の町で過ごしています。

01-12-10

ポストカード風デザイン

表面に大きな写真枠、余白に一言メッセージを配したポストカードの構成。旅行記や日記ページに利用できます。

CSS onlystaticcss</> コードを見る

〒150-0001

東京都渋谷区神宮前1-2-3

佐藤花子様

〒150-0001

東京都渋谷区神宮前1-2-3

佐藤花子様

01-12-11

宛名ラベル・シール風デザイン

ミシン目で区切られた宛名ラベルシートの構成。発送案内ページや会員証発行の見本表示に利用できます。

CSS onlystaticcss</> コードを見る

SEPTEMBER
2026

月火水木金土日 12

01-12-12

卓上カレンダー風デザイン

月名と週表示を配した卓上カレンダーの一枚構成。イベント告知ページや店舗の営業日案内に利用できます。

CSS onlystaticcss</> コードを見る

116. 静的タイル・ボックスレイアウト集

特集記事

写真

新着

統計

01-14-01

bento box風大小混在タイル

大小のタイルを不揃いに組み合わせた区画見本です。WordPressのトップページで特集記事と補足情報を強弱をつけて並べる際に使えます。

CSS onlystaticcss</> コードを見る

01-14-02

モザイクタイル配色パターン

同一サイズの正方形を色違いで敷き詰めたモザイク見本です。WordPressのギャラリーページの背景装飾やブランドカラー一覧の提示に使えます。

CSS onlystaticcss</> コードを見る

A

B

C

D

01-14-03

パズルピース風非対称ボックス

各ボックスの内側の角だけを丸めてはめ込み型の継ぎ目を表現した区画見本です。WordPressのチーム紹介やサービス連携図の背景装飾に使えます。

CSS onlystaticcss</> コードを見る

1

2

3

4

5

6

7

8

01-14-04

正方形タイルのみのグリッド

すべて同じ縦横比の正方形だけで構成した整然としたグリッドです。WordPressの実績一覧やアイコンカタログの土台に使えます。

CSS onlystaticcss</> コードを見る

1 2 3 4

01-14-05

対角線状に並ぶタイル配置

左上から右下へ規則的にずらしたタイル配置の見本です。WordPressのプロセス紹介やステップ説明のセクションに使えます。

CSS onlystaticcss</> コードを見る

戦略設計運用

01-14-06

重なり合うレイヤードボックス

複数の矩形を少しずつずらして重ねた奥行きのある構図です。WordPressのサービス比較や工程の重なりを表現するセクションに使えます。

CSS onlystaticcss</> コードを見る

01-14-07

額縁風の枠付きタイル配置

太い縁取りで写真立てのように見せたタイルの並びです。WordPressのフォトギャラリーや受賞歴の紹介コーナーに使えます。

CSS onlystaticcss</> コードを見る

Web Design Photo Video SNS

01-14-08

色分けカラーブロックレイアウト

ジャンルごとに色を変えた帯を横に並べた構成見本です。WordPressの事業内容一覧やカテゴリ別ナビゲーションの装飾に使えます。

CSS onlystaticcss</> コードを見る

Less is more

01-14-09

余白を活かしたミニマルボックス配置

要素数を絞り広い余白で静けさを演出した配置見本です。WordPressのブランドページやラグジュアリー系サイトの導入部に使えます。

CSS onlystaticcss</> コードを見る

March April May

01-14-10

斜めにずれて積み重なるボックス

カードを軽く回転させながら斜めに積んだ静止スタック表現です。WordPressの実績カードやレビュー一覧の見出し装飾に使えます。

CSS onlystaticcss</> コードを見る

01 02 03

04 05

01-14-11

ハニカム型六角形タイルグリッド

六角形を互い違いに組み合わせたハニカム構造のタイル配置です。WordPressのサービス一覧やスキルアイコンの並びに、四角形とは違う有機的な印象を加えられます。

CSS onlystaticcss</> コードを見る

01

02

03

04

05

06

01-14-12

点線アウトラインのワイヤーフレーム風タイル配置

塗りつぶさず点線の輪郭だけで区画を示すワイヤーフレーム風のタイルです。WordPressの制作中ページのプレースホルダーや、控えめな装飾を求めるミニマルサイトの区画分けに使えます。

CSS onlystaticcss</> コードを見る

117. 静的スティッキー2カラムレイアウト見本

コンテンツエリア

01-15-01

左サイド固定+右コンテンツ2カラム(30:70)

左側のナビゲーションを固定し、右側のコンテンツだけがスクロールする定番の2カラム構成です。WordPressの会員ページやマニュアルサイトのメニュー付きレイアウトに使えます。

CSS onlystaticcss</> コードを見る

記事タイトル

01-15-02

右サイド固定プロフィール+左記事スクロール2カラム

右側にプロフィールカードを固定し、左側の記事本文だけがスクロールする構成です。WordPressの個人ブログで著者情報を常に見せたい場合に使えます。

CSS onlystaticcss</> コードを見る

第1段

第2段

01-15-03

左右均等2カラム記事レイアウト

同じ幅の2カラムに記事本文を均等配置するシンプルな構成です。WordPressの規約ページや新聞風コラムなど、情報量が多い文章を読みやすく2分割したいときに使えます。

CSS onlystaticcss</> コードを見る

01-15-04

細身サイドナビ固定+広いメインエリアの管理画面2カラム

アイコンのみの細いナビゲーションを固定し、右側の広いメインエリアだけをスクロールさせる管理画面向けのレイアウトです。WordPressの独自管理画面やメンバー専用ダッシュボードに応用できます。

CSS onlystaticcss</> コードを見る

FEATURE STORY

特集記事の見出し

T

01-15-05

画像固定+テキスト流し込みの雑誌風2カラム

左の写真パネルを固定し、右側の記事テキストだけを縦にスクロールさせる雑誌のような構成です。WordPressの特集記事やインタビューページの導入部に向きます。

CSS onlystaticcss</> コードを見る

概要

インストール

設定

API

FAQ

概要

01-15-06

目次固定+本文スクロールの技術ドキュメント2カラム

左に目次(TOC)を固定表示し、右側の本文だけをスクロールできる技術文書向けの構成です。WordPressのナレッジベースやFAQドキュメントページに活用できます。

CSS onlystaticcss</> コードを見る

ブログ記事タイトル

AD AD

01-15-07

コンテンツ+右サイド広告固定のブログ2カラム

本文を左に流し込み、右側の広告枠を固定表示するブログの定番レイアウトです。WordPressのブログテンプレートで記事を読みながら広告枠を常に見せたい場合に使えます。

CSS onlystaticcss</> コードを見る

PREVIEW

01-15-08

入力フォーム固定+プレビューエリアの2カラム

左側の入力フォームを固定しながら、右側のプレビューエリアをスクロールして確認できる編集画面向けの構成です。WordPressのカスタム投稿編集画面やフォームビルダーに応用できます。

CSS onlystaticcss</> コードを見る

PLAN A

VS

PLAN B

01-15-09

左右対称の比較2カラムレイアウト

同じ構造の2つのプランを左右対称に並べて比較しやすくした静止レイアウトです。WordPressの料金プラン比較やビフォーアフター紹介のセクションに使えます。

CSS onlystaticcss</> コードを見る

商品の説明

01-15-10

メインコンテンツ+右サイド附録情報固定のEC商品2カラム

左に商品説明やレビューを流し込み、右側に価格や購入ボタンなどの附録情報を固定表示するEC商品ページ向けの構成です。WordPressのWooCommerce商品詳細ページのレイアウト検討に使えます。

CSS onlystaticcss</> コードを見る

2026年7月

日月火水木金土 1234567 891011121314

ご予約リスト

10:00カット

11:30カラー

13:00パーマ

14:30トリートメント

16:00カット

01-15-11

左固定ミニカレンダー+右予約リストスクロール2カラム

左側に小さなカレンダーを固定表示し、右側の予約一覧だけがスクロールする構成です。WordPressの予約サイトやサロンの当日予約状況ページのレイアウトに使えます。

CSS onlystaticcss</> コードを見る

▶

製品紹介動画

再生時間 3:24

コメント (12)

田中

とても分かりやすい説明でした!

佐藤

続編も期待しています。

鈴木

画質も綺麗で見やすかったです。

高橋

保存版にします。

01-15-12

左固定動画プレビュー+右コメント欄スクロール2カラム

左側に動画のサムネイルを固定し、右側のコメント一覧だけをスクロールできる構成です。WordPressの動画配信サイトやYouTube連携ページのレイアウト検討に使えます。

CSS onlystaticcss</> コードを見る

38. タイポグラフィスケール見本

見出しの力強さを伝える

中見出しは情報を整理する役割

本文は読みやすさを最優先し、太さと大きさを抑えて長文でも疲れにくい組み方にしています。

02-03-01

見出し-本文フォントペアリング

大見出し・中見出し・本文でサイズと太さを段階的に変えた組み合わせ見本です。WordPressの固定ページや記事テンプレートの基本タイポ設計に使えます。

CSS onlystaticcss</> コードを見る

Aa 12px Aa 14px Aa 18px Aa 24px Aa 32px

02-03-02

モジュラースケール一覧

一定の比率で拡大していくフォントサイズを縦に並べた見本です。WordPressテーマの見出しレベル設計やスタイルガイド作成の基準表として役立ちます。

CSS onlystaticcss</> コードを見る

当店のWeb Designサービスは、2024年度Good Design Awardを受賞し、国内外120社の導入実績があります。

02-03-03

和欧混植サンプル

日本語と英数字が混在する一文で、字間・行間を調整した組み見本です。WordPressの製品紹介文やお知らせ本文の可読性確認に使えます。

CSS onlystaticcss</> コードを見る

行間 1.3

情報を密に伝えたいときに使う詰まった行間の段落見本です。一覧性が求められる場面に向きます。

行間 2.0

ゆったりと読ませたいときに使う広い行間の段落見本です。読み物やコラムに向きます。

02-03-04

行間・字間比較

詰まった行間と広い行間の段落を並べて比較できる見本です。WordPressの本文スタイルを決める際の比較検討に使えます。

CSS onlystaticcss</> コードを見る

この記事では、初めてWordPressでサイトを構築する方向けに、テーマ選びから公開までの流れを丁寧に解説します。

まずはサーバーとドメインの準備から始めましょう。

02-03-05

リード文(導入文)スタイル

記事冒頭に置く、やや大きめで薄いグレーのリード文の型です。WordPressのブログ記事や特集ページの書き出しに使えます。

CSS onlystaticcss</> コードを見る

良いデザインとは、できるだけ少ないデザインのことである。 — ディーター・ラムス

02-03-06

引用テキストの型

左に太い縦線を添え、斜体で組んだ引用文のスタイルです。WordPressの記事内での他媒体からの引用や名言紹介に使えます。

CSS onlystaticcss</> コードを見る

写真イメージ

図1. 新オフィスのエントランス(2026年撮影)

02-03-07

キャプション・注釈スタイル

画像に添える小さく控えめなキャプションや脚注の見本です。WordPressの記事内画像やギャラリー下の説明文に使えます。

CSS onlystaticcss</> コードを見る

01

ヒアリング

02-03-08

番号見出しスタイル

大きな数字を添えた見出しデザインの見本です。WordPressのサービス紹介や制作フローの各工程見出しに使えます。

CSS onlystaticcss</> コードを見る

太字は重要語を、斜体は書名や補足を、下線は必読箇所を、マーカーは強調をそれぞれ示します。

02-03-09

強調表現の使い分け

太字・斜体・下線・マーカーそれぞれの見た目の違いを並べた見本です。WordPressの本文で強調表現を使い分ける際の基準に使えます。

CSS onlystaticcss</> コードを見る

お知らせ

下記の通り、夏季休業期間を設けさせていただきます。

休業期間: 8月13日〜8月16日
お問い合わせ対応: 8月19日より順次

02-03-10

段落スタイルガイド

見出し・本文・リストが一続きになった文章組みの見本です。WordPressのお知らせページや規約ページの基本レイアウトに使えます。

CSS onlystaticcss</> コードを見る

Light 300 Regular 400 Medium 500 Bold 700 Black 800

02-03-11

フォントウェイト比較見本

300から800まで太さ違いの同じテキストを並べた静止見本です。WordPressテーマのウェイト設計や見出し・本文の太さ選定基準として使えます。

CSS onlystaticcss</> コードを見る

字間 -0.02em

タイトなトラッキングの見出し例

字間 0.2em

ゆったりしたトラッキングの見出し例

02-03-12

字間(トラッキング)比較見本

詰めた字間と広げた字間の見出しを並べて比較できる静止見本です。WordPressのロゴタイプやセクション見出しの字間設計に使えます。

CSS onlystaticcss</> コードを見る

65. 静的引用・ブロッククオートスタイル集

伝えたいことをシンプルに、しかし力強く。左端のカラーラインが視線を引き寄せる、定番の引用スタイルです。

02-04-01

左太線引用

左端に太いカラーラインを配したシンプルな引用ブロック。記事本文中で読者の目を引く一文の強調に使えます。

CSS onlystaticcss</> コードを見る

“ 言葉には、背景を静かに支える大きな引用符が似合う。装飾としての存在感を残しながら本文を読ませます。

02-04-02

大型引用符装飾

巨大な引用符グラフィックを背景に配した装飾的な引用。コラムやインタビュー記事の名言紹介に向きます。

CSS onlystaticcss</> コードを見る

背景を淡い色でベタ塗りにすることで、地の文と明確に区切られたボックス型の引用に仕上がります。

02-04-03

背景色ベタ塗り引用

淡い背景色で囲んだボックス型の引用。注意書きや補足的な引用文をやわらかく囲みたい場合に使えます。

CSS onlystaticcss</> コードを見る

余白と斜体が生む静かなリズム。中央に据えた一文が、エディトリアル誌のような佇まいをつくります。

02-04-04

斜体+中央寄せ引用

斜体のテキストを中央に配置したエディトリアル風の引用。雑誌記事風のレイアウトで印象的な一文を見せたいときに。

CSS onlystaticcss</> コードを見る

上下の二本線に挟まれることで、文章がひとつの独立した区画として静かに際立ちます。

02-04-05

二重罫線引用

上下に細い二重線を配した引用ブロック。フォーマルな記事や規約文書内での引用表示に適しています。

CSS onlystaticcss</> コードを見る

現場の声を丁寧に届けることが、信頼できる情報発信の第一歩だと考えています。

田中美咲／編集部リーダー

02-04-06

出典付き引用(著者名・役職)

引用文の下に著者名と役職を添えた形式。インタビュー記事や監修者コメントの掲載に活用できます。

CSS onlystaticcss</> コードを見る

[ 大きな角括弧が本文全体を静かに包み込み、引用であることを一目で伝えます。 ]

02-04-07

角括弧装飾引用

大きな角括弧記号で本文を囲む引用スタイル。テクニカルな記事やドキュメント内の注記表現に向きます。

CSS onlystaticcss</> コードを見る

やわらかなグラデーションが背景に広がることで、引用ボックス全体に奥行きのある印象が生まれます。

02-04-08

グラデーション背景引用

淡いグラデーション背景を持つ引用ボックス。デザイン性を重視したブログや商品紹介ページの引用に。

CSS onlystaticcss</> コードを見る

手描きのノートを思わせる破線の枠が、かしこまらないカジュアルな雰囲気を演出します。

02-04-09

破線囲み引用

破線の枠で囲んだカジュアルな引用ブロック。コラムやレビュー記事内の軽めのコメント表示に使えます。

CSS onlystaticcss</> コードを見る

言葉は縦に流れ、静かに佇む。和文らしい趣を添えた引用の見せ方です。

02-04-10

縦書き風引用(和文)

writing-modeを用いた縦書きの引用表現。和のテイストを持つ記事やコラムのアクセントに使えます。

CSS onlystaticcss</> コードを見る

丸みのある吹き出し形状が、会話の一部を切り取ったような親しみやすさを演出します。

02-04-11

吹き出し型引用(スピーチバブル)

三角形の尻尾を持つ吹き出し形状の引用ブロック。対話形式のコンテンツやチャット風UIの発言表示に使えます。

CSS onlystaticcss</> コードを見る

小さな改善の積み重ねが、大きな信頼につながると実感しています。
高橋健一／プロダクトマネージャー

02-04-12

アバター付きカード型引用

丸いアバターアイコンと発言を横並びに配置したカード型の引用。お客様の声や推薦コメントの掲載に適しています。

CSS onlystaticcss</> コードを見る

66. 静的リスト・箇条書きスタイル集

記事の要点を整理する
参考資料を確認する
下書きを作成する
最終チェックを行う

02-05-01

チェックマーク付きリスト

各項目の先頭にカスタムのチェックマークを配置した箇条書きです。記事内のポイント整理やまとめセクションに使えます。

CSS onlystaticcss</> コードを見る

企画の立案と目的の明確化
構成案の作成とレビュー
本文執筆と画像の準備
公開前の最終確認

02-05-02

番号付き丸数字リスト

①②③のような装飾的な丸数字を使った番号リストです。手順や工程の紹介記事で順序を分かりやすく示せます。

CSS onlystaticcss</> コードを見る

速度の最適化について
セキュリティ対策の要点
デザインの基本ルール

02-05-03

アイコン先頭リスト

各項目の先頭に小さなインラインSVGアイコンを配置したリストです。カテゴリー別の記事一覧などに向いています。

CSS onlystaticcss</> コードを見る

フロントエンド
- HTML / CSS
- JavaScript
バックエンド
- PHP
- データベース

02-05-04

二階層ネストリスト

親項目と字下げされた子項目からなる階層構造のリストです。目次や分類の説明に使いやすい構成です。

CSS onlystaticcss</> コードを見る

目的を明確にする
ターゲットを設定する
構成を組み立てる
公開して振り返る

02-05-05

矢印マーカーリスト

「→」を先頭マーカーに使ったシンプルなリストです。流れやステップの並びを軽やかに示す用途に向いています。

CSS onlystaticcss</> コードを見る

資料準備必要な素材と情報を集める
制作作業デザインと文章を仕上げる
公開対応サイトへの反映と告知を行う

02-05-06

カード型リスト項目

各項目を薄い罫線カードで区切って表示するリストです。工程紹介やサービス内容の一覧表示に適しています。

CSS onlystaticcss</> コードを見る

企画開始
制作中
レビュー完了
公開済み

02-05-07

タイムライン風縦リスト

左側に縦線とドットを配置し、右側に項目を並べたタイムライン風のリストです。経過や進行状況の説明に使えます。

CSS onlystaticcss</> コードを見る

企画書
台本
撮影素材
編集データ

02-05-08

グリッド配置チェックリスト

2カラムに並んだチェック項目のリストです。準備物や確認事項をコンパクトにまとめたいときに使えます。

CSS onlystaticcss</> コードを見る

アカウントを作成する
プロフィールを設定する
最初の投稿を公開する

02-05-09

番号バッジ付きステップリスト

丸背景の番号バッジが先頭に付くステップリストです。始め方ガイドや手順解説の記事にそのまま使えます。

CSS onlystaticcss</> コードを見る

CMS: 記事や画像を管理するためのシステム
SEO: 検索結果での表示順位を高める施策

02-05-10

区切り線付き定義リスト

用語とその説明がペアになった定義リストです。専門用語の解説や用語集ページの構成に活用できます。

CSS onlystaticcss</> コードを見る

デザイン制作
コーディング
最終テスト

02-05-11

進捗バー付きリスト

各項目に達成率を示すバーを添えたリストです。プロジェクトの進行状況や工程の完了度を一覧で見せたいときに使えます。

CSS onlystaticcss</> コードを見る

高サーバー障害の復旧対応
中デザイン修正の反映
低ドキュメントの更新

02-05-12

優先度カラーラベル付きリスト

各項目に優先度を色分けしたタグを添えたリストです。タスク管理画面やお知らせの重要度表示に活用できます。

CSS onlystaticcss</> コードを見る

67. 静的コードブロック・シンタックス風スタイル

12345function sum(a, b) {
  return a + b;
}

// call it

02-06-01

ダークテーマコードブロック

暗い背景に行番号付きでコードを表示する定番スタイルです。WordPressの技術ブログでサンプルコードを掲載する際に使えます。

CSS onlystaticcss</> コードを見る

<div class="box">
  Hello
</div>

02-06-02

macOS風ウィンドウ枠コードブロック

上部に赤黄緑の丸ボタンが並ぶウィンドウ枠でコードを囲むデザインです。チュートリアル記事のスクリーンショット風演出に向きます。

CSS onlystaticcss</> コードを見る

const user = {
  name: "Aki",
  age: 28
};

02-06-03

ライトテーマコードブロック

明るい背景で読みやすさを重視したコード表示です。印刷物にも近い配色なのでドキュメント系記事との相性が良好です。

CSS onlystaticcss</> コードを見る

style.css index.html

.card {
  border-radius: 8px;
  padding: 16px;
}

02-06-04

ファイル名タブ付きコードブロック

上部にファイル名タブを並べて複数ファイルを扱っているように見せる表示です。設定手順を紹介する記事の見出し代わりに便利です。

CSS onlystaticcss</> コードを見る

段落中で npm install のように、コマンドや変数名を background-color と組み合わせて説明する例です。

02-06-05

インラインコード装飾(文中埋め込み)

本文中にコード風の装飾テキストを埋め込む表現です。手順解説記事でコマンド名やプロパティ名を目立たせたい場合に使えます。

CSS onlystaticcss</> コードを見る

  function greet() {
-   console.log('hi');
+   console.log('hello');
  }

02-06-06

差分(diff)表示風コードブロック

追加行を緑、削除行を赤の背景で示す差分表示です。変更点を説明するリリースノートや修正解説記事に適しています。

CSS onlystaticcss</> コードを見る

curl -X POST /api/users \
  -d '{"name":"Aki"}'

02-06-07

コピーボタン付きコードブロック外観(静止)

右上にコピー用アイコンが配置された枠の見た目だけを再現したものです。API手順などコードを引用してほしい記事の装飾に使えます。

CSS onlystaticcss</> コードを見る

$ npm run build
＞ webpack compiled successfully
$ ▌

02-06-08

コマンドライン(ターミナル)風表示

プロンプト記号付きでコマンド入力を再現したターミナル風表示です。CLIツールの使い方を説明する記事の見出し画像として使えます。

CSS onlystaticcss</> コードを見る

123body {
  margin: 0;
}

02-06-09

行番号+ハイライト行付きコードブロック

特定の行だけ背景色を強調して注目させる表示です。どこを修正すべきか指し示したい設定解説記事に役立ちます。

CSS onlystaticcss</> コードを見る

{
  "name": "Aki",
  "age": 28,
  "active": true,
  "tags": ["admin"]
}

02-06-10

JSON/データ構造風カラーコード表示

キーと値の種類ごとに色分けしたデータ表示です。APIレスポンスの例を掲載する開発ブログでの利用に向いています。

CSS onlystaticcss</> コードを見る

server:
│ host: localhost
│ port: 8080
database:
│ name: app_db

02-06-11

インデントガイド付きYAML設定ファイル風表示

階層を縦線で示したYAML風の設定ファイル表示です。サーバー設定やCI/CD手順を説明する開発記事に利用できます。

CSS onlystaticcss</> コードを見る

Markdown

# 見出し

**重要**な項目です。

Preview 見出し

重要な項目です。

02-06-12

Markdown原文とプレビューの左右比較表示

記法とレンダリング結果を左右に並べて見せる比較表示です。Markdown記法の解説記事やヘルプページに利用できます。

CSS onlystaticcss</> コードを見る

68. 静的見出し番号・セクションラベルスタイル

01 Our Service
提供サービス

02-07-01

大型連番見出し

巨大な連番数字と見出しテキストを組み合わせたスタイル。サービス紹介ページの各セクション冒頭に使える。

CSS onlystaticcss</> コードを見る

FEATURE

機能紹介セクション

02-07-02

タグ風セクションラベル

角丸ピル型の小さなラベルを見出し上部に配置。カテゴリや種別を先に提示したいセクションの導入に向く。

CSS onlystaticcss</> コードを見る

お知らせ一覧

02-07-03

下線+アクセントドット見出し

見出し下に短いアクセント線と丸ドットを添えたシンプルな装飾。お知らせ欄やブログ一覧の小見出しに適する。

CSS onlystaticcss</> コードを見る

重要なお知らせ

02-07-04

括弧装飾見出し(【】風)

和文の隅付き括弧を模した装飾を左右に配置する見出し。和風・和文サイトのお知らせタイトルに合う。

CSS onlystaticcss</> コードを見る

Company Profile
会社概要

02-07-05

サイドライン付き大見出し

左に縦長のカラーバーを伴う大見出し。会社概要や事業紹介などのセクショントップに向くスタイル。

CSS onlystaticcss</> コードを見る

SERVICE

サービス内容

02-07-06

二段構成見出し(英字+和文)

小さな英字ラベルの下に大きな日本語見出しを重ねる二段構成。サービスサイトの章立て見出しに使いやすい。

CSS onlystaticcss</> コードを見る

CONTACT US

02-07-07

背景帯付きセクション見出し

色帯を背景に敷いた見出しスタイル。カード内やページ区切りのセクションタイトルとして目を引かせられる。

CSS onlystaticcss</> コードを見る

MEMBERSHIP

02-07-08

枠線囲み見出しバッジ

見出し全体を角丸枠で囲んでバッジのように見せるスタイル。会員限定コンテンツなどの案内見出しに適する。

CSS onlystaticcss</> コードを見る

★おすすめメニュー★

02-07-09

星・記号装飾見出し

見出しの両脇に星マークをあしらった装飾スタイル。飲食店メニューやおすすめ商品の見出しに向く。

CSS onlystaticcss</> コードを見る

Special Design

02-07-10

グラデーション文字見出し(静止)

文字にグラデーション色を適用した見出し。動きは伴わない静止表現で、特集ページの目立たせたい見出しに使える。

CSS onlystaticcss</> コードを見る

[ SECTION_02 ]
導入事例

02-07-11

モノスペース角括弧見出し(タイプライター風)

等幅フォントと角括弧を組み合わせたタイプライター風の見出し。開発者向けページやテック系記事の章立てに合う。

CSS onlystaticcss</> コードを見る

RANKING

リボンバナー見出しラベル

左右が三角に切れ込んだリボン風のラベルを見出し上部に配置。ランキングや期間限定企画のセクション導入に使える。

CSS onlystaticcss</> コードを見る

お知らせ一覧

02-07-13

二重罫線見出し(細線+太線)

細い線と太い線を上下に重ねて見出しを挟むスタイル。落ち着いた印象のお知らせ欄やコラムの区切り見出しに使える。

CSS onlystaticcss</> コードを見る

サービス一覧 P.04

02-07-14

ドットリーダー目次見出し

見出し文字の後ろに点線のドットリーダーが伸び、右端にページ番号などの補足を添える目次風スタイル。

CSS onlystaticcss</> コードを見る

✓

お申し込み完了

02-07-15

チェックマーク完了ラベル見出し

丸いチェックアイコンを添えた確認・完了系の見出し。フォーム完了画面や手続き完了通知の見出しに向く。

CSS onlystaticcss</> コードを見る

料金プラン/PRICING

02-07-16

和英スラッシュ複合見出し

日本語見出しと英語表記をスラッシュで区切り横並びにした複合スタイル。料金表や価格ページの章見出しに使える。

CSS onlystaticcss</> コードを見る

{Custom Order}

02-07-17

ブレース(波括弧)見出し

波括弧を模した装飾記号で見出しテキストを囲むスタイル。テック系・開発系サービスの特集見出しに合う。

CSS onlystaticcss</> コードを見る

NEW

インラインバッジ添え見出し

見出し文の左に小さな反転バッジを添えるスタイル。新着記事や更新情報の一覧見出しにさりげなく使える。

CSS onlystaticcss</> コードを見る

選ばれる理由

02-07-19

ドット3連ブレッドクラム見出し

見出しの上に小さなドットを3つ並べて位置づけを示すスタイル。長文コンテンツ内の章の切り替わりに向く。

CSS onlystaticcss</> コードを見る

お問い合わせ

02-07-20

二重枠見出しボックス

外側の細線と内側の太線を組み合わせた二重枠の見出しボックス。案内ページの重要な区画見出しに適する。

CSS onlystaticcss</> コードを見る

季節のご案内

02-07-21

縦書き見出し

writing-modeによる縦書き表示の見出し。動きは伴わない静止表現で、和風サイトのサイドタイトルなどに使える。

CSS onlystaticcss</> コードを見る

Notebook
学習メモ

02-07-22

ノートブック風パンチ穴見出し

ノートの綴じ穴を模した丸ドットを縦に並べた見出し。学習系コンテンツやメモ風ブログの章見出しに合う。

CSS onlystaticcss</> コードを見る

1

お申し込み方法

02-07-23

丸囲み番号付き見出し

手書き風の丸で囲んだ数字を見出しの先頭に添えるスタイル。手順説明やステップ紹介の各見出しに使える。

CSS onlystaticcss</> コードを見る

Premium Collection

02-07-24

グラデーションボーダー見出し

枠線にグラデーションカラーを用い、文字色は単色に抑えた見出し。特集ページやプレミアム訴求の見出しに向く。

CSS onlystaticcss</> コードを見る

Best Choice

02-07-25

オフセット影文字見出し

本文の背後に薄いグレーの影文字を軽くずらして重ねた落ち着いた二重文字見出し。特集タイトルなどに使える。

CSS onlystaticcss</> コードを見る

🏷️

キャンペーン情報

CAMPAIGN INFO

02-07-26

アイコン+キャプションスタック見出し

アイコン・見出し文・英字キャプションを縦に積んだラベル型見出し。キャンペーンや案内カードの導入に使える。

CSS onlystaticcss</> コードを見る

←Section 02→

02-07-27

両矢印区切り見出し

見出しテキストの両脇に矢印記号を配して区切りを示すスタイル。ページ送りやセクション番号の表示に使える。

CSS onlystaticcss</> コードを見る

先着100名様限定キャンペーン

02-07-28

ハイライトブロック見出し

見出し文の一部だけを塗りつぶしのブロックで反転表示するスタイル。キャンペーンや数量限定訴求の中で条件部分だけを強調したいときに使える。

CSS onlystaticcss</> コードを見る

三角マーカー見出し

見出しの両脇にCSSで描いた小さな三角形を内向きに配置するスタイル。注目してほしい特徴紹介や強調ポイントの見出しに使える。

CSS onlystaticcss</> コードを見る

Welcome to Our Studio

02-07-30

ドロップキャップ見出し

頭文字だけを大きく落とし込む欧文雑誌風の装飾見出し。英語表記のブランドメッセージやコラム記事の書き出しに使える。

CSS onlystaticcss</> コードを見る

特別企画

02-07-31

チェッカー見出し

見出しを1文字ずつタイル状に区切り、背景色を交互に変えるスタイル。イベントページやセール告知の目を引く見出しに使える。

CSS onlystaticcss</> コードを見る

“お客様満足度No.1”

02-07-32

クォーテーション見出し

見出しテキストを大きめの引用符で挟み込むスタイル。お客様の声や実績アピールの一文見出しに信頼感を添えられる。

CSS onlystaticcss</> コードを見る

07 JUL

サマーセール開催

02-07-33

日付ラベル付き見出し

カレンダー風の日付バッジを見出しに添えるスタイル。開催期間のあるキャンペーンやイベント告知セクションの見出しに使える。

CSS onlystaticcss</> コードを見る

OUTLINE STYLE

02-07-34

アウトラインライン見出し

文字の輪郭に細いラインを一本添えて縁取るスタイル。動きを伴わない静止表現で、スポーティーな特集ページの見出しに向く。

CSS onlystaticcss</> コードを見る

Our Portfolio

02-07-35

グリッド背景見出し

方眼紙のような薄いグリッド線を背景に敷いた見出し。制作実績やポートフォリオセクションのタイトルに落ち着いた印象を与える。

CSS onlystaticcss</> コードを見る

送料について:

FREE SHIPPING

02-07-36

コロンラベル見出し

見出し末尾にコロンを添え、補足ラベルを下線付きで並べるスタイル。条件や補足情報を一言添えたい案内見出しに使える。

CSS onlystaticcss</> コードを見る

NEW ARRIVAL

02-07-37

プライスタグ型見出し

値札を模した五角形の穴あきタグ形状で見出しを包むスタイル。新着商品や限定アイテムの紹介見出しに使える。

CSS onlystaticcss</> コードを見る

Special Thanks

02-07-38

水玉背景見出し

薄い色の水玉模様を背景に敷き詰めた見出し。ギフトや女性向けサービスなど柔らかい雰囲気を出したいセクションに使える。

CSS onlystaticcss</> コードを見る

成長率レポート

02-07-39

バーインジケータ見出し

高さの異なる棒を並べたミニグラフ風の飾りを見出し左に添えるスタイル。実績データや成長を伝えるレポート見出しに使える。

CSS onlystaticcss</> コードを見る

OFFICIAL

02-07-40

スタンプ風見出しラベル

破線の円を少し傾けたスタンプ風の見出しラベル。認定・保証マークのような信頼感を出したい案内見出しに使える。

CSS onlystaticcss</> コードを見る

今だけ特別価格

02-07-41

マルチカラーワード見出し

見出しを単語ごとに区切り、それぞれ異なる背景色のブロックで見せるスタイル。セール文言など複数要素を並べる見出しに使える。

CSS onlystaticcss</> コードを見る

ご招待券

✂

02-07-42

ミシン目チケット見出し

チケットの切り取り線を模したドット罫線とハサミアイコンを添えた見出し。招待券や引換券デザインのタイトルに使える。

CSS onlystaticcss</> コードを見る

107. 静的見出し装飾・アンダーラインスタイル集

ハイライト見出しテキスト

02-10-01

蛍光マーカー風見出し

文字の下半分に蛍光マーカーで引いたような帯を重ねる装飾。ブログ記事内の重要キーワードやお知らせ見出しの強調に使える。

CSS onlystaticcss</> コードを見る

サービス案内

02-10-02

二重下線見出し

見出し下に太さの異なる2本の下線を重ねて配置するスタイル。案内ページや料金表の章見出しに落ち着いた印象を与える。

CSS onlystaticcss</> コードを見る

波線アクセント見出し

02-10-03

波線下線見出し

CSSのtext-decorationプロパティで波線の下線を引く見出し。手書き感を出したいカジュアルなサイトの小見出しに向く。

CSS onlystaticcss</> コードを見る

お知らせ
ニュース一覧

02-10-04

二連カラーバー見出し

見出し左端に色の異なる2本の太バーを並べる装飾。ニュース一覧やお知らせセクションの区切りとして目立たせられる。

CSS onlystaticcss</> コードを見る

FOCUS TITLE

02-10-05

コーナーブラケット見出し

四隅にカメラのフォーカス枠のような線を配置し見出しを囲むスタイル。特集ページや注目コンテンツの見出しに使える。

CSS onlystaticcss</> コードを見る

グラデーションライン

02-10-06

グラデーション下線見出し

見出し下に複数色のグラデーション帯を敷くスタイル。イベントページやキャンペーンサイトの華やかな見出しに合う。

CSS onlystaticcss</> コードを見る

キャンペーン情報

02-10-07

破線囲み見出しボックス

見出し全体を破線の角丸ボックスで囲む静的な装飾。手作り感やカジュアルさを出したい告知・キャンペーン見出しに向く。

CSS onlystaticcss</> コードを見る

SPECIAL

02-10-08

斜めストライプ背景見出し

斜めストライプ模様の背景の上に白抜きの見出しラベルを重ねるスタイル。セール情報や限定コンテンツの見出しに使える。

CSS onlystaticcss</> コードを見る

“

お客様の声

02-10-09

引用符アイコン付き見出し

大きな引用符を背景装飾として見出し上部に配置するスタイル。お客様の声やインタビュー記事の導入見出しに適する。

CSS onlystaticcss</> コードを見る

BEFOREAFTER

02-10-10

スプリットカラー見出し

見出しを2色に塗り分け、中央に区切り線を挟むスタイル。比較コンテンツやビフォーアフター紹介の見出しに使える。

CSS onlystaticcss</> コードを見る

SALE

02-10-11

リボンタグ見出し

見出しテキストをclip-pathで作った旗形のリボンで包み込む静的な装飾。WordPressのセール告知やおすすめ商品ラベルなど、目を引くバッジ的な見出しに使える。

CSS onlystaticcss</> コードを見る

DESIGN STUDIO

発想を、かたちに。

02-10-12

キッカー付きグラデーション見出し

小さな英字キッカーの下に、紫から緑へのグラデーションで塗りつぶした大きな見出しを配置するスタイル。WordPressのLPやサービス紹介ページのヒーローセクション見出しに向く。

CSS onlystaticcss</> コードを見る

お知らせ一覧

02-10-13

点線下線見出し

見出し下に太めのドット下線を敷いたシンプルな装飾。ブログ一覧やお知らせページの小見出しに軽やかなアクセントを添えられる。

CSS onlystaticcss</> コードを見る

テーパー下線見出し

02-10-14

テーパー下線見出し

左端が太く右に向かって細くなるくさび形の下線を敷いたスタイル。特集記事やコラムの導入見出しに動きのある印象を与える。

CSS onlystaticcss</> コードを見る

((限定オファー))

02-10-15

二重丸括弧見出し

見出しの前後を二重の丸括弧で軽く囲むスタイル。キャンペーンや限定情報の見出しにやわらかな強調を加えられる。

CSS onlystaticcss</> コードを見る

ジグザグ見出し

02-10-16

ジグザグ三角下線見出し

見出し下に三角形が連続するジグザグ模様の帯を敷いたスタイル。カジュアルなショップサイトやイベント告知の見出しに使える。

CSS onlystaticcss</> コードを見る

オフセット蛍光見出し

02-10-17

オフセットハイライト見出し

蛍光ペンで斜めに引いたようなハイライト帯を文字の背後にずらして重ねるスタイル。ブログの重要ポイント紹介などに使える。

CSS onlystaticcss</> コードを見る

ソフトカード見出し

02-10-18

ソフトカード見出し

見出し全体を丸角の淡い色面カードで軽く包むスタイル。サービス紹介カードや料金プランの各見出しに落ち着いた統一感を与える。

CSS onlystaticcss</> コードを見る

導入ステップ

→→→→→→→→→→→→→→

02-10-19

矢印下線見出し

見出し下に小さな矢印を連続で並べた帯を敷くスタイル。手順紹介やフロー説明の導入見出しに進行感を持たせられる。

CSS onlystaticcss</> コードを見る

サービス案内

02-10-20

L字型見出し

見出しの左端と下端だけを太線で囲みL字を描くスタイル。角に視線を集めたい会社案内や事業紹介の見出しに向く。

CSS onlystaticcss</> コードを見る

ストライプ見出し

02-10-21

シャドーストライプ見出し

見出し文字の背後にごく薄い横縞を重ねるスタイル。派手さを抑えつつ質感を出したいコラムやコラムタイトルに使える。

CSS onlystaticcss</> コードを見る

::function main()

02-10-22

二重コロンコーディング風見出し

先頭に二重コロンを添えた等幅フォントの見出し。開発者ブログやIT系サービスサイトの章タイトルに合う。

CSS onlystaticcss</> コードを見る

階段下線見出し

02-10-23

階段下線見出し

見出し下に長さの異なる短い線を3本、段違いに並べたスタイル。ステップ紹介やランキングの見出しに軽快なリズムを与える。

CSS onlystaticcss</> コードを見る

<お知らせ>

02-10-24

山括弧タグ風見出し

見出しを山括弧で挟みHTMLタグのように見せるスタイル。テック系メディアや開発者向けページの見出しに使える。

CSS onlystaticcss</> コードを見る

ツートン下線見出し

02-10-25

ツートン下線見出し

見出し下線の左右をはっきり異なる2色に塗り分けたスタイル。比較記事やカテゴリ分けを示したい見出しに使える。

CSS onlystaticcss</> コードを見る

キャンペーン開催中

02-10-26

ドットグラデーション背景見出し

見出しの背景に淡い水玉模様を敷いたスタイル。セールやキャンペーン告知のバナー見出しに華やかさを加えられる。

CSS onlystaticcss</> コードを見る

octagon

02-10-27

八角形フレーム見出し

見出し全体を細い二重線の八角形フレームで囲むスタイル。会員証や認定バッジ風の見出しラベルに使える。

CSS onlystaticcss</> コードを見る

オーバーライン見出し

02-10-28

オーバーライン見出し

下線ではなく見出しの上に細い線を敷くスタイル。段落の冒頭で章の切り替わりを静かに示したいコラム見出しに向く。

CSS onlystaticcss</> コードを見る

RETRO PRINT

02-10-29

レトロ印刷風オフセット見出し

文字の左右に色ずれ印刷のような影を重ねるスタイル。レトロ・ヴィンテージ感を出したい特集見出しやイベントタイトルに使える。

CSS onlystaticcss</> コードを見る

◆おすすめ商品◆

02-10-30

菱形フランク見出し

見出しの両脇に小さな菱形記号を配したスタイル。ECサイトのおすすめ商品や特集タイトルに上品なアクセントを添える。

CSS onlystaticcss</> コードを見る

手描き風見出し

02-10-31

手描き風不均一下線見出し

太さが均一でない歪んだ線を見出し下に敷き、手描きのような柔らかさを演出するスタイル。カフェやハンドメイド系サイトの見出しに合う。

CSS onlystaticcss</> コードを見る

限定セール

02-10-32

斜線ハッチング背景見出し

見出しの背景に薄いクロスハッチング模様を敷いたスタイル。セール告知やアウトレット案内の見出しに手仕事感を加えられる。

CSS onlystaticcss</> コードを見る

ラフ下線見出し

02-10-33

虫食いラフ下線見出し

見出し下の線を不均等な長さの破片で構成し、虫食いのようなラフさを出すスタイル。フリーマーケットやDIY系サイトの見出しに合う。

CSS onlystaticcss</> コードを見る

BEFORE/AFTER 比較

02-10-34

縦帯2色分割背景見出し

見出しの背景を縦に2色へ分割するスタイル。ビフォーアフター紹介や2択の比較コンテンツの見出しに使える。

CSS onlystaticcss</> コードを見る

モールス風見出し

02-10-35

モールス信号風下線見出し

見出し下に点と線を交互に並べたモールス信号風の装飾。通信・テック系サービスや無線関連コンテンツの見出しに使える。

CSS onlystaticcss</> コードを見る

点線楕円囲み見出し

見出しの周囲を点線の楕円で軽く囲むスタイル。スタンプのような柔らかい印象で、おすすめ商品やピックアップ見出しに使える。

CSS onlystaticcss</> コードを見る

// コラム更新 //

02-10-37

スラッシュ囲み見出し

見出しの前後にダブルスラッシュを添えたコメントアウト風のスタイル。テック系ブログや更新情報の見出しに使える。

CSS onlystaticcss</> コードを見る

フェード下線見出し

02-10-38

フェード下線見出し

見出し下線が左から右へ徐々に透明になっていくスタイル。すっきりとしたデザインのLPやサービス紹介見出しに使える。

CSS onlystaticcss</> コードを見る

NEWSPAPER HEADLINE

02-10-39

新聞風罫線見出し

太さの異なる罫線2本で見出しを上下に挟む新聞見出し風のスタイル。プレスリリースやコラム記事の見出しに信頼感を与える。

CSS onlystaticcss</> コードを見る

特集記事

02-10-40

斜めカット背景分割見出し

見出しの背景を斜めに切り取った色面で部分的に敷くスタイル。特集ページやマガジン風レイアウトの見出しに動きを与える。

CSS onlystaticcss</> コードを見る

今週のピックアップ

★

02-10-41

ワンポイントアイコン見出し

見出しの右下にだけ小さな星アイコンを添えるスタイル。控えめな装飾でピックアップ記事や注目情報の見出しに使える。

CSS onlystaticcss</> コードを見る

お知らせ

02-10-42

ソフトリボン型見出し

左右を台形にカットした淡い色のリボン型で見出しを軽く囲むスタイル。案内欄やお知らせカードの見出しにやわらかい印象を与える。

CSS onlystaticcss</> コードを見る

120. 静的縦書き・回転タイポグラフィ見本

和の心を、現代へ。

伝統と革新が交わる場所で、私たちは新しいものづくりに挑戦し続けています。長く愛される価値を、丁寧に届けます。

02-13-01

縦書き見出し×横書き本文レイアウト

縦書きの大見出しと横書き本文を左右に並べた組み合わせレイアウトです。WordPressの企業サイトトップやブランドストーリーページの導入部に使えます。

CSS onlystaticcss</> コードを見る

SINCE 1985

四季を纏う、暮らしの道具。

02-13-02

和風縦書きキャッチコピー

淡い和紙調の背景に大きな縦書きキャッチコピーを配した見本です。WordPressで作る工芸品ブランドや和食店のトップビジュアルに使えます。

CSS onlystaticcss</> コードを見る

02-13-03

斜め見出しバナー

中央に一定角度で傾けた帯状の見出しを配置した見本です。WordPressのセール告知セクションやトップページの目立たせたいお知らせに使えます。

CSS onlystaticcss</> コードを見る

新着人気限定

02-13-04

縦書きラベルタグ

短い語句を縦書きで表示した小さなラベルタグの見本です。WordPressの商品一覧やお知らせ一覧のステータス表示に使えます。

CSS onlystaticcss</> コードを見る

02-13-05

円形バッジの縁取りテキスト

SVGのtextPathで円の縁に沿わせた回転文字列と、中央の固定ラベルを組み合わせたバッジ見本です。WordPressの認定マークや受賞バッジ表示に使えます。

CSS onlystaticcss</> コードを見る

令和7年12月25日開催

02-13-06

縦中横(たてちゅうよこ)日付表記

縦書きの中に半角数字を横向きのまま組み込む縦中横を使った日付表記の見本です。WordPressのイベント告知や案内状ページの日付表示に使えます。

CSS onlystaticcss</> コードを見る

古池や
蛙飛びこむ
水の音

松尾芭蕉

02-13-07

縦書き俳句カード

短冊のように縦書きの句と作者名を並べたカード見本です。WordPressの文化施設サイトや文芸イベントの紹介ページの装飾要素に使えます。

CSS onlystaticcss</> コードを見る

DESIGN CODE LAUNCH

02-13-08

回転90度の縦積みラベル

横書きテキストを90度回転させて縦に積み重ねた見本です。WordPressのサイドバーの工程インデックスやフローティングラベルに使えます。

CSS onlystaticcss</> コードを見る

本日のおすすめ

季節の御膳

特製丼ぶり

02-13-09

縦書きメニュー項目リスト

黒板風の背景に縦書きの品目を並べた飲食店メニューの見本です。WordPressで作る和食店・カフェのメニューページやおすすめ紹介ブロックに使えます。

CSS onlystaticcss</> コードを見る

OPEN

本日より新規オープンいたしました

02-13-10

斜め帯見出し(コーナーリボン)

四隅の一箇所に斜めの帯を固定配置した見出しリボンの見本です。WordPressの新着記事サムネイルやショップページの「新商品」表示に使えます。

CSS onlystaticcss</> コードを見る

山田花子

代表取締役 / デザイナー

02-13-11

縦書き氏名・肩書きの名刺風プロフィールカード

丸いプロフィール写真の横に、氏名と肩書きを縦書きで並べた名刺のようなカード見本です。WordPressの会社概要ページや代表挨拶コーナーのプロフィール表示に使えます。

CSS onlystaticcss</> コードを見る

説明会のご案内

オンラインにて開催いたします。奮ってご参加ください。

詳細を見る →

02-13-12

縦書き見出し+横書きCTAボタンの案内カード

縦書きの見出しの隣に説明文と横書きのボタンを配置した案内カードの見本です。WordPressのセミナー告知やイベント案内セクションで、和の雰囲気を保ちつつ行動を促したいときに使えます。

CSS onlystaticcss</> コードを見る

121. 静的キャプション・ラベルテキストスタイル集

Photo

静かな朝の光が差し込む書斎の様子。

02-14-01

画像下の斜体キャプション

写真の直下にイタリック体の説明文を添えるシンプルなキャプション。ブログ記事やギャラリーページの画像説明に使える。

CSS onlystaticcss</> コードを見る

出典総務省統計局「人口推計」2026年版より作成

02-14-02

枠線付きの出典表記ラベル

細い枠線で囲み「出典」ラベルを左端に配置した表記。グラフや図版の下に置く出典クレジットに適する。

CSS onlystaticcss</> コードを見る

FEATURED WORK

建築写真プロジェクト

02-14-03

オーバーラインラベル

大文字と広めの字間トラッキングを効かせた小さなラベルを見出し上部に配置。ポートフォリオの作品紹介に向く。

CSS onlystaticcss</> コードを見る

NEW 人気 4.5★

丸背景の小さなタグラベルを並べたサンプル

02-14-04

丸背景の小さなタグラベル

円形に近い角丸の背景を持つ極小ラベル。商品カードやブログ記事に付与するステータス・カテゴリ表示に便利。

CSS onlystaticcss</> コードを見る

価格は全て税込表示です※1となります。詳細は店舗にてご確認ください。

※1 一部商品は軽減税率の対象外です。

02-14-05

上付き注釈風のミニラベル

本文中に小さく上付き表示する注釈マーク。価格表や規約文の補足説明を本文を邪魔せずに示せる。

CSS onlystaticcss</> コードを見る

京都の紅葉、11月中旬撮影

02-14-06

写真重ね半透明キャプションバー

画像下部に半透明の帯を重ねてキャプションを表示するスタイル。ギャラリーやスライダーのサムネイル説明に使える。

CSS onlystaticcss</> コードを見る

デザインとは、単に見た目や感触ではない。デザインとは、動作そのものである。

— Steve Jobs

02-14-07

引用元クレジット表記

引用文の下に右寄せでクレジットを添えるスタイル。インタビュー記事やお客様の声セクションの引用に適する。

CSS onlystaticcss</> コードを見る

Photo

2026.07.10 · レポート

02-14-08

日付+カテゴリの複合キャプション

日付とカテゴリを中黒で区切って横並びにした複合キャプション。ニュース一覧や更新情報の投稿メタ情報に使える。

CSS onlystaticcss</> コードを見る

撮影地長野県上高地

撮影日2026年6月

機材35mm フィルム

02-14-09

点線区切りのメタ情報ラベル

項目名と値の間を点線でつなぐリスト表記。写真の撮影データや商品スペック情報の一覧表示に使える。

CSS onlystaticcss</> コードを見る

Fig. 03

四半期別の売上推移を示すグラフ。第3四半期に大きな伸びが見られる。

02-14-10

二段組み図表番号+説明キャプション

図表番号を左側の縦帯に、説明文を右側に配置する二段組みキャプション。論文調・レポート調の資料デザインに使える。

CSS onlystaticcss</> コードを見る

SALE Photo

期間限定セール対象商品のイメージ画像

02-14-11

コーナーリボン風バッジキャプション

画像の左上に斜めのリボンバッジを重ねた装飾キャプション。ECサイトのセール商品画像やキャンペーンバナーに目印として使える。

CSS onlystaticcss</> コードを見る

Photo

03/08 京都嵐山、渡月橋からの眺め

02-14-12

ページ送り風インデックスキャプション

現在の枚数と総数を「03 / 08」のように示すインデックス表記付きキャプション。写真ギャラリーやスライダーの静止プレビュー画像の説明に使える。

CSS onlystaticcss</> コードを見る

169. 静的見出しセット(h2/h3/h4連動デザイン)

サービスのご案内

個人のお客様へ

お申し込みの流れ

02-16-01

縦線の太さで階層を示す見出しセット

h2は6pxの太い縦線、h3は2pxの細い縦線、h4は行頭に短い横線という3点セット。WordPressの固定ページで章・節・項を一貫したルールで書き分けたいときの基本形として使える。

CSS onlystaticcss</> コードを見る

料金プラン

スタンダードプラン

オプション費用について

02-16-02

背景面積で階層を示す見出しセット

h2は全幅のべた塗り帯に白抜き、h3は薄い背景色、h4は下線のみと、色で塗る面積を段階的に減らして深さを表す。料金ページや規約ページなど情報量の多いページの整理に向く。

CSS onlystaticcss</> コードを見る

導入の流れ

お問い合わせ

ヒアリングシートの記入

02-16-03

連番サイズで階層を示す見出しセット

h2は大きなセリフ体の連番、h3は小さな連番、h4は丸ドットだけを行頭に置く3段構成。手順解説やマニュアル記事で入れ子の深さを番号の大きさから読み取らせられる。

CSS onlystaticcss</> コードを見る

会社案内

事業内容

主要取引先

02-16-04

左罫線の色濃度で階層を示す見出しセット

左罫線の太さは4pxで統一し、h2は濃紺、h3は中間の青、h4は淡い水色へと色を段階的に薄くする。会社案内のような硬めのページで、うるさくならずに階層を示せる。

CSS onlystaticcss</> コードを見る

よくあるご質問

ご契約について

解約手続きの期限

02-16-05

下線の太さで階層を示す見出しセット

下線の幅は全幅で揃え、太さだけをh2=5px、h3=3px、h4=1pxと段階的に細くする。FAQやサポート記事など、装飾を最小限にしたまま階層だけ伝えたい場面に向く。

CSS onlystaticcss</> コードを見る

採用情報

募集職種

応募資格

02-16-06

枠→線→無装飾で階層を示す見出しセット

h2は四辺を囲む枠、h3は左線だけ、h4は装飾なしの色替えテキストと、装飾の要素数そのものを減らして深さを表す。採用ページや募集要項のような箇条書きの多いページに合う。

CSS onlystaticcss</> コードを見る

私たちの強み

技術力について

対応可能な言語

02-16-07

英字ラベルの有無で階層を示す見出しセット

h2は上に大きめの英字ラベル、h3は行頭に小さな英字ラベルをインラインで添え、h4は和文のみ。コーポレートサイトの特徴紹介セクションでよく使う欧文併記スタイルを3レベルに展開したもの。

CSS onlystaticcss</> コードを見る

イベント情報

開催スケジュール

当日の持ち物

02-16-08

行頭ドットのサイズ差で階層を示す見出しセット

行頭に置く丸ドットの直径をh2=12px、h3=8px、h4=4pxと変え、色も濃淡で連動させた統一感のあるセット。イベント告知やお知らせ記事の見出しに軽やかなリズムを与える。

CSS onlystaticcss</> コードを見る

商品ラインナップ

季節限定アイテム

在庫状況について

02-16-09

バッジ形状で階層を示す見出しセット

h2はべた塗りの角丸バッジ、h3は輪郭だけのピル型、h4はカラードットを添えたテキストと、囲みの強さを段階的に弱める。ECサイトの商品カテゴリ見出しなど並びの多いページに向く。

CSS onlystaticcss</> コードを見る

利用規約

第1条総則

用語の定義

02-16-10

線種で階層を示す見出しセット

下線をh2=二重線、h3=単線、h4=点線と線種だけで描き分ける、装飾を足さない硬派なセット。利用規約やプライバシーポリシーなど条文構造を持つ固定ページで読みやすさが出る。

CSS onlystaticcss</> コードを見る

お客様の声

製造業のお客様

導入後の変化

02-16-11

影の強さで階層を示す見出しセット

h2は影付きの白カード、h3は影のないフラットな面、h4はテキストだけと、浮き上がりの度合いで階層を表現する。導入事例やお客様の声のような読み物ページの区切りに使える。

CSS onlystaticcss</> コードを見る

施工事例

住宅リフォーム

キッチンの改修

02-16-12

四角マーカーのサイズ差で階層を示す見出しセット

行頭の四角マーカーをh2は10×24pxの縦長ブロック、h3は9px角、h4は5px角と、大きさだけでなく形でも差をつけた3点セット。工務店や施工事例ページの実直な印象に合う。

CSS onlystaticcss</> コードを見る

お知らせ

メンテナンス情報

対象サービス

02-16-13

括弧の種類で階層を示す見出しセット

h2は隅付き括弧【】、h3は鉤括弧「」、h4は中黒と、和文組版の記号だけで3レベルを描き分ける。日本語サイトのお知らせ一覧や社内向けページに馴染みやすい。

CSS onlystaticcss</> コードを見る

キャンペーン

対象商品一覧

適用条件

02-16-14

グラデーション帯から線へ階層を示す見出しセット

h2はグラデーション帯に白抜き、h3は単色の薄い帯、h4は単色の細い下線と、同じ色相のまま彩度と面積を落としていく。キャンペーンやLPの華やかな見出し体系に向く。

CSS onlystaticcss</> コードを見る

ごあいさつ

代表メッセージ

創業からの歩み

02-16-15

配置と余白で階層を示す見出しセット

h2は中央寄せ+短い中央線+大きめ余白、h3は左寄せ、h4は左寄せのままインデントと、装飾を足さず配置だけで深さを表す。ごあいさつや理念ページなど静かな読み物に合う。

CSS onlystaticcss</> コードを見る

アクセス

電車でお越しの方

駐輪場のご案内

02-16-16

下線の長さで階層を示す見出しセット

下線の太さは2pxで固定し、伸びる長さをh2=全幅、h3=6割、h4=3割弱と縮めていく。線の長さがそのまま見出しの守備範囲に見えるので、アクセス案内など短い節が続くページに向く。

CSS onlystaticcss</> コードを見る

特集記事

季節のおすすめ

編集部より

02-16-17

色面積を減らして階層を示す見出しセット

h2は全面べた塗り、h3は左半分だけに色を敷き、h4は行頭の小さな色面だけを残す。塗られた面積の減り方がそのまま階層になるので、雑誌風のブログ記事ページで見出しが目立つ。

CSS onlystaticcss</> コードを見る

開発ドキュメント

環境構築

依存パッケージ

02-16-18

Markdown記法風に階層を示す見出しセット

行頭に等幅フォントで ## / ### / #### を表示し、Markdownの見出しレベルをそのまま視覚化する。技術ブログや社内マニュアルなど、書き手も読み手もエンジニアのページに向く。

CSS onlystaticcss</> コードを見る

受賞歴

グッドデザイン賞

審査員コメント

02-16-19

リボンからドットへ階層を示す見出しセット

h2は右端が切り欠かれたリボン風、h3は小さな四角タグ、h4はドットだけと、ラベルの立体感を段階的に落とす。受賞歴や実績紹介のように格を見せたいページに向く。

CSS onlystaticcss</> コードを見る

研究テーマ

基礎研究部門

共同研究の実績

02-16-20

上下線で挟む→下線→無装飾の見出しセット

h2は上下2本の罫線で挟み、h3は下線のみ、h4は罫線なしと、囲む線の本数を2→1→0と減らして階層を作る。論文調の研究紹介や大学・病院サイトの落ち着いた誌面に合う。

CSS onlystaticcss</> コードを見る

ご利用の手順

会員登録

メール認証

02-16-21

丸囲み数字のサイズ差で階層を示す見出しセット

行頭の丸囲み数字を32px・22px・16pxと縮め、色も濃紺から水色へ薄めていく3点セット。会員登録の手順や申込フローなど、順序が重要なページの見出し体系として使える。

CSS onlystaticcss</> コードを見る

品質へのこだわり

原材料の選定

産地について

02-16-22

縦線の本数で階層を示す見出しセット

行頭の縦線をh2=3本、h3=2本、h4=1本と減らす、線の本数がそのまま階層になるセット。繰り返しグラデーションで描いているので線の間隔がずれない。製造業やブランドサイトの読み物に合う。

CSS onlystaticcss</> コードを見る

FAQ

支払い方法

領収書の発行

02-16-23

背景の透過度で階層を示す見出しセット

同一色のアルファ値だけをh2=14%、h3=8%、h4=4%と落として背景を敷く、色数を増やさない省エネなセット。既存テーマのアクセントカラーを1色決めれば全レベルに展開できる。

CSS onlystaticcss</> コードを見る

ブログ

制作の裏側

使用したツール

02-16-24

下線オフセットで階層を示す見出しセット

text-underline-offsetをh2=11px、h3=7px、h4=3pxと詰め、太さも3→2→1pxと連動させる。線が文字に寄るほど下位に見えるという細かい調整だけで階層を作れるので、ブログ本文に自然に馴染む。

CSS onlystaticcss</> コードを見る

お手続き案内

必要書類の準備

本人確認書類

02-16-25

三角マーカーのサイズ差で階層を示す見出しセット

行頭の三角マーカーをCSSのborderで描き、h2は大きく濃く、h3は中くらい、h4は小さく淡くする。方向を持つ記号なので、下位ほど「その先の細目」に見えるのが利点。手続き案内ページに向く。

CSS onlystaticcss</> コードを見る

ミッション

私たちの価値観

行動指針

02-16-26

ウェイトの段階で階層を示す見出しセット

文字サイズの差を小さく抑え、font-weightを900→700→500、色を黒→濃灰→中灰と落として階層を作る。同じ左バーを共通装飾に据えているので、サイズを揃えたい狭いカラムでも階層が崩れない。

CSS onlystaticcss</> コードを見る

ギャラリー

常設展示

作品リスト

02-16-27

字間の段階で階層を示す見出しセット

letter-spacingをh2=0.24em、h3=0.12em、h4=0.03emと詰めていき、上位ほど広がって見えるようにした静かなセット。ギャラリーや美容系サイトなど、余白で見せるデザインの見出し体系に向く。

CSS onlystaticcss</> コードを見る

お問い合わせ

法人のお客様

お電話でのご相談

02-16-28

枠線の太さで階層を示す見出しセット

四辺を囲む枠線の太さをh2=3px、h3=2px、h4=1pxと細くし、角丸と余白も連動して小さくしていく。囲みの形が3レベルで揃うため、問い合わせ導線のように見出しが並ぶ画面でも整って見える。

CSS onlystaticcss</> コードを見る

スクール案内

受講コース

開講時間

02-16-29

斜めカット装飾の大きさで階層を示す見出しセット

skewXで傾けた平行四辺形をh2は太いブロック、h3は細いバー、h4は小さなスラッシュとして行頭に置く。傾きの角度を全レベルで揃えているのでスピード感が統一され、スクールや塾のサイトに合う。

CSS onlystaticcss</> コードを見る

サイトマップ

サービス一覧

保守プラン

02-16-30

インデントとL字罫で入れ子を示す見出しセット

h2は行頭の太バー、h3とh4は左インデントを段階的に深め、ファイルツリーのようなL字の罫線でつなぐ。目次ページやサイトマップなど、親子関係そのものを見せたい場面で効果が大きい。

CSS onlystaticcss</> コードを見る

45. 静的ナビゲーション見た目バリエーション

03-03-01

フラットナビ(下線なし)

下線や背景などの装飾を一切持たない、文字だけで構成したシンプルな横並びメニューです。WordPressの落ち着いたコーポレートサイトのヘッダーに向いています。

CSS onlystaticcss</> コードを見る

03-03-02

ピル型ナビ

各メニュー項目が丸いピル形状の背景を持つ静止したナビゲーションです。現在地の項目だけ塗りつぶし色で強調する構成にWordPressのメニューでよく使われます。

CSS onlystaticcss</> コードを見る

03-03-03

ボーダー区切りナビ

メニュー項目の間に縦の細い罫線を挟んで区切る静止したナビゲーションです。文字数が多いメニューでも視覚的な境目が分かりやすくなります。

CSS onlystaticcss</> コードを見る

03-03-04

センター配置ナビ

ロゴを置かず、メニュー項目だけを画面中央に整列させた構成です。WordPressのシンプルなランディングページのヘッダーに適した見た目です。

CSS onlystaticcss</> コードを見る

LOGO

03-03-05

左ロゴ+右メニューナビ

左にロゴ、右にメニュー項目を配置する定番構成の静止見本です。WordPressのヘッダーテンプレートとして最も採用されやすい基本形です。

CSS onlystaticcss</> コードを見る

COMPANY

03-03-06

二段ナビ(ロゴ行+メニュー行)

上段にロゴを中央配置し、下段にメニュー行を分けて並べる2段構成のヘッダーです。項目数が多いWordPressサイトでも整理して見せられます。

CSS onlystaticcss</> コードを見る

03-03-07

アイコン+テキスト併記ナビ

各メニュー項目に小さいインラインSVGアイコンを添えた静止ナビゲーションです。文字だけより意味を直感的に伝えやすくWordPressのフッターナビにも転用できます。

CSS onlystaticcss</> コードを見る

03-03-08

ミニマル文字のみナビ

罫線も背景色も持たせず、文字の余白だけでリズムを作った最小構成のナビゲーションです。ミニマルなデザインのWordPressサイトに合わせやすい見た目です。

CSS onlystaticcss</> コードを見る

03-03-09

背景色ブロックナビ

メニュー全体が色付きの帯の上に乗る構成の静止ナビゲーションです。ページ内の他のセクションと明確に区切りたいWordPressヘッダーに向いています。

CSS onlystaticcss</> コードを見る

03-03-10

縦書き風サイドナビ(静的)

writing-modeを使い、文字を縦に流したサイド固定メニューの静止見本です。和風テイストを打ち出したいWordPressサイトの側面ナビに使えます。

CSS onlystaticcss</> コードを見る

03-03-11

アンダーラインタブ型ナビ

現在地の項目だけ下に太い線を添えたタブ風の静止ナビゲーションです。WordPressの管理画面風UIやダッシュボードページのメニューに向いています。

CSS onlystaticcss</> コードを見る

SHOPLOGO

検索...

03-03-12

検索ボックス付きヘッダーナビ

ロゴ・メニューに加えて右端に検索欄風の要素を配置したヘッダー見本です。WordPressのECサイトやメディアサイトの商品・記事検索導線に向いています。

CSS onlystaticcss</> コードを見る

69. 静的パンくずリストスタイル集

03-05-01

シンプルスラッシュ区切りパンくず

「/」記号で階層を区切る最も基本的な形。企業サイトや商品ページの現在地表示に使える定番レイアウトです。

CSS onlystaticcss</> コードを見る

03-05-02

矢印区切りパンくず

「>」の矢印記号で階層をつなぐ形。ブログ記事や情報サイトの導線表示にわかりやすく使えます。

CSS onlystaticcss</> コードを見る

03-05-03

ピル型パンくず

各階層を丸みのあるピル形状で表示する形。採用サイトやコーポレートサイトの柔らかい印象づくりに向きます。

CSS onlystaticcss</> コードを見る

03-05-04

背景帯付きパンくず

全体が薄い色の帯に収まり、ページ上部の区切りとして機能する形。ECサイトの商品ページ上部に適しています。

CSS onlystaticcss</> コードを見る

03-05-05

ドット区切りパンくず

「・」の中黒で階層を区切るミニマルな形。文字数を抑えたいシンプルなお知らせページなどに使えます。

CSS onlystaticcss</> コードを見る

03-05-06

現在地強調パンくず

末尾の現在地だけ太字と色付きで目立たせる形。ユーザーが今どのページにいるか一目で把握しやすくなります。

CSS onlystaticcss</> コードを見る

03-05-07

アイコン付きホームパンくず

先頭にホームアイコンを配置しトップページへの起点を示す形。店舗サイトや施設案内ページに向きます。

CSS onlystaticcss</> コードを見る

03-05-08

縮小版モバイル向けパンくず

中間階層を「…」で省略し、狭い画面でも1行に収まる形。スマートフォン表示のヘッダー下などに適します。

CSS onlystaticcss</> コードを見る

03-05-09

カード型パンくず(枠線区切り)

各階層を縦罫線で仕切りカード風にまとめた形。事例紹介やコラムページのタイトル上に配置しやすい構成です。

CSS onlystaticcss</> コードを見る

03-05-10

大きめタイポグラフィパンくず

文字サイズを大きくとり視認性を高めた形。読みやすさを重視したメディアサイトや特集ページに向きます。

CSS onlystaticcss</> コードを見る

03-05-11

ダークテーマパンくず

暗い背景に白文字で表示するパンくずリストです。ダークデザインのコーポレートサイトやポートフォリオに向きます。

CSS onlystaticcss</> コードを見る

03-05-12

ステップ番号付きパンくず

各階層に丸背景の番号を振ったパンくずリストです。会員登録フォームのような段階的な手順の現在地表示に使えます。

CSS onlystaticcss</> コードを見る

70. 静的ページネーションスタイル集

03-06-01

丸型番号ページネーション

円形の番号ボタンが横に並ぶ基本形。ブログ一覧やニュース記事一覧の下部ページ送りに使いやすいデザインです。

CSS onlystaticcss</> コードを見る

03-06-02

角丸四角ページネーション

角丸の四角ボタンが並ぶページ送り。商品一覧やコラム一覧など、四角い枠デザインのサイトと相性が良い形です。

CSS onlystaticcss</> コードを見る

03-06-03

前後矢印付きページネーション

「‹ 1 2 3 ›」の定番構成。前後ページへの矢印記号を両端に添えた、一覧ページで広く使われる形です。

CSS onlystaticcss</> コードを見る

03-06-04

現在ページ強調型ページネーション

現在表示中のページ番号だけを色付き背景で目立たせる形。今どのページを見ているかが一目で分かります。

CSS onlystaticcss</> コードを見る

03-06-05

省略記号付きページネーション

中間のページ番号を「…」で省略し、最初・現在・最後のページのみ表示。ページ数が多い一覧に向いた形です。

CSS onlystaticcss</> コードを見る

03-06-06

下線インジケーター型ページネーション

アクティブなページ番号の下に短い線を配置して現在地を示す形。タブに近い落ち着いた印象の一覧向けです。

CSS onlystaticcss</> コードを見る

03-06-07

ドットのみページネーション

番号を持たない小さなドットが並ぶ、スライダーでよく見る形。画像ギャラリーの現在位置表示に向いています。

CSS onlystaticcss</> コードを見る

03-06-08

テキストラベル付きページネーション

「前へ」「次へ」の文字ラベルと矢印を組み合わせた形。現在ページと総ページ数も併記し、迷いにくい構成です。

CSS onlystaticcss</> コードを見る

1-10件 / 全50件

03-06-09

件数表示付きページネーション

「1-10件 / 全50件」のような件数表示を添えた形。商品一覧や検索結果ページで全体量を伝えるのに役立ちます。

CSS onlystaticcss</> コードを見る

03-06-10

大きめタッチ対応ページネーション

ボタンサイズを大きく確保した、モバイル閲覧向けの形。指でのタップを想定した一覧ページの下部送りに適しています。

CSS onlystaticcss</> コードを見る

03-06-11

縦線区切りミニマルページネーション

数字の間に細い縦線を挟んだ余白重視のミニマルな形。装飾を抑えたシンプルなブログやポートフォリオに向きます。

CSS onlystaticcss</> コードを見る

Page 4 / 10

03-06-12

プログレスバー型ページネーション(現在位置表示)

全体に対する現在ページの位置を横棒の塗りで示す形です。読み物コンテンツやスライド形式の記事の進行表示に向きます。

CSS onlystaticcss</> コードを見る

71. 静的タブUIの見た目

概要仕様レビュー

選択中のタブに対応する内容がここに表示されます。

03-07-01

下線インジケーター型タブ(静止)

アクティブなタブの下に線を配置した定番の見た目。商品ページや管理画面の切替UIの見本として使えます。

CSS onlystaticcss</> コードを見る

日次週次月次

週次で集計されたデータの表示エリアです。

03-07-02

背景塗りつぶし型タブ(静止)

選択中タブの背景を塗りつぶして強調する表現。ダッシュボードの期間切替などに適した見本です。

CSS onlystaticcss</> コードを見る

リストグリッドマップ

03-07-03

ピル型セグメントタブ(静止)

角丸の枠内でアクティブな項目だけが白背景で浮くセグメントコントロールの見本。表示切替UIに使えます。

CSS onlystaticcss</> コードを見る

受信箱送信済み下書き

送信済みメッセージの一覧枠(見本)。

03-07-04

枠線囲みタブ(静止)

アクティブなタブだけを枠線で囲み目立たせる控えめな表現。管理画面のフォルダ切替などの見本です。

CSS onlystaticcss</> コードを見る

プロフィールセキュリティ通知課金情報

セキュリティ設定の内容エリア(見本)。

03-07-05

縦型サイドタブ(静止)

左側に縦並びのメニューを配置し、選択中項目を左ボーダーと背景で強調した設定画面向けの見本です。

CSS onlystaticcss</> コードを見る

★お気に入り ☉ホーム ⚙設定

03-07-06

アイコン+ラベル併記タブ(静止)

アイコンと文字ラベルを併記したタブのアクティブ状態。モバイル的なUIの見本として利用できます。

CSS onlystaticcss</> コードを見る

概要詳細履歴

手前に浮き上がって見えるアクティブタブに接続したコンテンツ面(見本)。

03-07-07

カード型タブ(浮き上がり表現・静止)

アクティブタブがパネルと地続きに手前へ浮いて見える静止表現。資料やレポート画面の見本です。

CSS onlystaticcss</> コードを見る

受信箱3 重要12 アーカイブ99+

03-07-08

番号バッジ付きタブ(静止)

各タブに件数バッジを添えた見た目。通知や未読件数を伴うメールUIなどの見本になります。

CSS onlystaticcss</> コードを見る

プラン請求先履歴

03-07-09

太字強調のみのミニマルタブ(静止)

背景や枠線を使わず太字だけでアクティブ状態を示す簡素な表現。テキスト主体のページ向けの見本です。

CSS onlystaticcss</> コードを見る

商品注文顧客

全て公開中下書き

03-07-10

二段タブ(親子関係、静止)

上段の親カテゴリと下段のサブタブを組み合わせた二階層構成。管理画面の一覧フィルタなどの見本です。

CSS onlystaticcss</> コードを見る

チーム個人ゲスト

個人モードで表示中のコンテンツ枠(見本)。

03-07-11

ドットインジケーター型タブ(静止)

各タブラベルの前に小さな丸ドットを添え、アクティブ時だけ色を変える見た目。切替範囲を柔らかく示したいUIの見本です。

CSS onlystaticcss</> コードを見る

おすすめ新着人気

新着タブのコンテンツ表示エリア(見本)。

03-07-12

グラデーション背景タブ(静止)

アクティブなタブの背景にグラデーションを敷いて華やかに強調する表現。キャンペーンページの切替UIなどの見本です。

CSS onlystaticcss</> コードを見る

110. 静的サイドバー・フィルターナビゲーション見た目

03-10-01

ブログカテゴリ一覧サイドバー

カテゴリ名と件数を一覧表示する静止したサイドバーです。WordPressのブログ記事一覧ページの右カラムなどにそのまま配置できます。

CSS onlystaticcss</> コードを見る

絞り込み

価格帯

〜¥3,000

¥3,000〜¥6,000

¥6,000〜

カテゴリ

アウター

トップス

03-10-02

チェックボックス絞り込みフィルターパネル

価格帯やカテゴリをチェックボックスで選ぶECサイト風の絞り込みパネルの静止見本です。WordPress製品一覧ページのサイドフィルターUIのデザイン参考になります。

CSS onlystaticcss</> コードを見る

03-10-03

階層ツリー構造のディレクトリサイドバー

フォルダとファイルをインデントで階層表示する静止したツリー型サイドバーです。WordPressのマニュアルサイトやドキュメントポータルのナビゲーションに応用できます。

CSS onlystaticcss</> コードを見る

03-10-04

アイコン付きダッシュボードサイドバー

各項目にラインアイコンを添えた濃色背景の管理画面向けサイドナビです。WordPressの独自管理画面や会員マイページのメニューデザインに使えます。

CSS onlystaticcss</> コードを見る

価格で絞り込む

¥1,200¥8,900

03-10-05

価格レンジスライダー付きフィルターパネル

2つのつまみで価格帯を指定するスライダーを静止状態で見せるフィルターパネルです。WordPress製品一覧の価格絞り込みUIのデザイン下敷きとして使えます。

CSS onlystaticcss</> コードを見る

03-10-06

タグクラウド型サイドウィジェット

使用頻度に応じて文字サイズを変えたタグを並べる静止したタグクラウドです。WordPressのブログサイドバーで人気トピックを直感的に見せる用途に向いています。

CSS onlystaticcss</> コードを見る

03-10-07

目次(TOC)サイドバー

見出しの階層を字下げで表現し、現在地を左ボーダーで示す静止した目次サイドバーです。WordPressの長文記事ページに固定表示する目次デザインの参考になります。

CSS onlystaticcss</> コードを見る

03-10-08

ソーシャルリンク付きプロフィールサイドバー

アバター・肩書き・自己紹介文とSNSアイコンをまとめた静止したプロフィールカードです。WordPressの著者ページやブログサイドバーの執筆者紹介欄に活用できます。

CSS onlystaticcss</> コードを見る

03-10-09

絞り込みチップ(選択済みタグ表示)付きフィルターバー

選択中の絞り込み条件をチップ形式で並べる静止したフィルターバーです。WordPressの検索結果ページや商品一覧ページの適用中フィルター表示に応用できます。

CSS onlystaticcss</> コードを見る

03-10-11

星評価で絞り込むレビューフィルターサイドバー

星アイコンの数で評価段階を示し、該当件数を添えた静止したレビュー絞り込みサイドバーです。WordPressの商品レビュー一覧ページで評価別に商品を探すUIのデザイン参考になります。

CSS onlystaticcss</> コードを見る

カラー

サイズ

S M L XL

03-10-12

カラースウォッチ選択パレット付きフィルターサイドバー

色見本の丸とサイズチップで選択中の条件を示す、ECサイトによくある絞り込みパネルの静止見本です。WordPress製品一覧ページのカラー・サイズフィルターUIのデザイン参考になります。

CSS onlystaticcss</> コードを見る

123. 静的メガメニュー・フルワイドナビ見た目

LOGO

デザイン

Web制作 UI/UX設計ロゴ制作

開発

システム開発アプリ開発保守運用

マーケティング

SEO対策広告運用 SNS運用

03-12-01

3カラム構成メガメニュー(開いた状態)

「サービス」を開いた状態を固定表示した3カラムのメガメニュー見本です。WordPressのコーポレートサイトでサービス項目が多い場合のヘッダー設計の参考になります。

CSS onlystaticcss</> コードを見る

SHOP

シューズ

バッグ

アクセサリー

アパレル

03-12-02

商品カテゴリ画像付きメガメニュー

カテゴリごとに画像サムネイルを並べた開いた状態のメガメニューです。WordPress + WooCommerceのカテゴリ一覧ナビとしてそのまま参考にできます。

CSS onlystaticcss</> コードを見る

STORE

カテゴリ

レディースメンズキッズ

ブランド

A社 B社 C社

SALE

限定コート ¥12,800

03-12-03

リンク一覧+おすすめ商品ECメガメニュー

左にカテゴリリンク、右におすすめ商品カードを配置したECサイト向けメガメニューです。WordPress + WooCommerceのセール訴求ナビに応用できます。

CSS onlystaticcss</> コードを見る

LOGO

ダッシュボード

分析レポート

スケジュール

チーム管理

請求管理

連携アプリ

03-12-04

アイコン付き2カラムメガメニュー

各項目にアイコンを添えた2カラム構成のメガメニューです。SaaS系WordPressサイトの「機能」メニューを開いた状態の見本として使えます。

CSS onlystaticcss</> コードを見る

会社情報料金プランサポート

ライト ¥980/月個人・小規模向け

人気 スタンダード ¥2,980/月チーム利用に最適

プレミアム ¥5,980/月大規模組織向け

03-12-05

タブ切り替え型メガメニュー(1タブ表示状態)

複数タブのうち「料金プラン」タブを選択している状態を固定表示したメガメニューです。WordPressのタブ型ナビの見た目デザインを検討する際の参考になります。

CSS onlystaticcss</> コードを見る

MENU

03-12-06

フルスクリーンオーバーレイ型ナビ(静止見本)

画面全体を覆うオーバーレイ状態を固定表示したフルスクリーンナビゲーションです。WordPressのハンバーガーメニューを開いた瞬間のデザイン検討に役立ちます。

CSS onlystaticcss</> コードを見る

SITE サイトマップ

会社情報

概要沿革採用

サービス

制作運用相談

サポート

FAQ お問い合わせ資料請求

法的情報

利用規約個人情報特商法

SNS

X Instagram YouTube

03-12-07

サイトマップ風の全リンク一覧メガメニュー

サイト内の全カテゴリを一覧化した密度の高いメガメニューです。WordPressの情報量が多いサイトでフッターに近い網羅型ナビを作る際に参考になります。

CSS onlystaticcss</> コードを見る

LOGO

新作

春夏コレクション限定アイテム

定番

ベーシックアウトレット

03-12-08

特集バナー付きメガメニュー

リンク一覧の横にグラデーションの特集バナーを添えたメガメニューです。WordPressのキャンペーン訴求を兼ねたナビゲーション設計の参考になります。

CSS onlystaticcss</> コードを見る

GLOBAL

メニュー

会社概要拠点一覧採用情報

言語を選択

日本語 English 中文 한국어

03-12-09

言語・地域選択を含むメガメニュー

通常のリンク一覧に加えて言語切り替えグリッドを組み込んだメガメニューです。WordPressの多言語サイト(WPML等)のグローバルナビ設計に応用できます。

CSS onlystaticcss</> コードを見る

LOGO

商品名・キーワードを検索

検索ボックス統合型フルワイドナビ

ヘッダーの検索ボックスをタップした際に開くサジェストパネルを固定表示した見本です。WordPress + WooCommerceの検索体験を強化するナビに活用できます。

CSS onlystaticcss</> コードを見る

BLOG

カテゴリ

デザインマーケティング開発運用ノウハウ

拠点ミニマップ付き会社概要メガメニュー

会社情報リンクの横に簡易的な地図イメージと拠点ピンを配置したメガメニュー見本です。WordPressのコーポレートサイトで「会社概要」メニューの充実に活用できます。

CSS onlystaticcss</> コードを見る

124. 静的アイコンオンリーナビゲーション見た目

03-13-01

左端固定アイコンレール

画面左端に縦一列でアイコンだけを並べたダッシュボード風の静止ナビです。管理画面テンプレートのサイドバーとしてWordPressの会員サイトなどに転用できます。

CSS onlystaticcss</> コードを見る

03-13-02

下部固定水平タブバー

スマートフォンアプリのような画面下部に固定される水平アイコンタブバーの静止見本です。WordPressのモバイル向けフッターナビに応用できます。

CSS onlystaticcss</> コードを見る

03-13-03

円形展開FABメニュー(静止状態)

中央のメインボタンから円弧状にサブアイコンが展開した状態を静止表示したFAB風メニューです。WordPressの投稿編集画面のクイック操作UIの見本になります。

CSS onlystaticcss</> コードを見る

03-13-04

丸背景付きアイコンボタン列

各アイコンに淡い円形の背景を敷いてボタンらしさを出した横並びナビの静止見本です。WordPressのツールバーやアクションバーに使いやすい構成です。

CSS onlystaticcss</> コードを見る

03-13-05

選択中アイコンのみ強調ナビ

非選択のアイコンは淡いグレーに沈め、選択中のアイコンだけ濃い色と背景で強調した静止ナビです。ECサイトの現在地表示にわかりやすく使えます。

CSS onlystaticcss</> コードを見る

03-13-06

ラベル付きアイコン縦積みメニュー

アイコンを主役にしつつ下に小さな補助ラベルを添えた縦積みメニューの静止見本です。WordPressのサイドバーウィジェットナビに向いています。

CSS onlystaticcss</> コードを見る

03-13-07

ツールバー風アイコングループ

区切り線でグループ分けした編集ツールバー風のアイコン列です。WordPressブロックエディタのカスタムツールバーの見た目見本として使えます。

CSS onlystaticcss</> コードを見る

03-13-08

通知バッジ付きアイコンナビ

未読件数や新着を示す小さな数字バッジ・ドットを右上に添えたアイコンナビの静止見本です。WordPressの会員向けヘッダーの通知表示に応用できます。

CSS onlystaticcss</> コードを見る

03-13-09

SNSアイコン横並びナビ

SNSアイコンだけをシンプルに横一列に並べた静止ナビです。WordPressサイトのフッターに置くソーシャルリンク集の定番見た目です。

CSS onlystaticcss</> コードを見る

03-13-10

モノクロラインアイコンのミニマルナビ

細い線画アイコンのみをグレースケールで淡く並べた最小構成のナビゲーションです。装飾を抑えたいWordPressの管理ツール系サイトに向いています。

CSS onlystaticcss</> コードを見る

03-13-11

個別浮遊カード型アイコンボタン列

アイコンひとつひとつを影付きの独立したカードに収めた静止ナビです。カードとカードの間に余白を大きく取り、上品な雰囲気のWordPressサイトのツールバーに使えます。

CSS onlystaticcss</> コードを見る

03-13-12

グラデーションピル背景の選択中アイコンナビ

選択中の項目だけ紫〜ピンクのグラデーションピル背景とラベルを表示し、他はアイコンのみに留めた静止ナビです。WordPressのモバイルアプリ風UIで現在地を強調したい場合に使えます。

CSS onlystaticcss</> コードを見る

167. 静的検索候補・オートコンプリート見た目

ワイヤレスイヤホン

ワイヤレスイヤホンワイヤレスイヤホン防水ワイヤレスイヤホンノイズキャンセリングワイヤレス充電器ワイヤレスマウス

03-16-01

シンプルテキスト候補リスト(開いた状態)

検索窓の下に候補が展開されたまま静止したシンプルな見本です。WordPressのサイト内検索窓にオートコンプリート候補を実装する際のデザイン下敷きとして使えます。

CSS onlystaticcss</> コードを見る

イヤホン

イヤホン 完全ワイヤレス イヤホン Bluetooth 5.3 防水 イヤホン スポーツ用子供用 イヤホン 有線

03-16-02

一致部分を太字強調した候補リスト

入力中のキーワードと一致する文字だけ太字にした静止候補パネルです。WordPress検索結果ページの入力補助UIでどこが一致しているか視覚的に示す際の参考になります。

CSS onlystaticcss</> コードを見る

デザイン

商品

デザイン雑貨セットデザインノート A5

記事

配色デザインの基本デザインレビューの進め方

03-16-03

カテゴリ見出し付きグループ化候補リスト

「商品」「記事」などカテゴリごとに候補を区切って表示した静止パネルです。WordPressで商品と記事を横断検索するサイトの候補表示デザインの参考になります。

CSS onlystaticcss</> コードを見る

検索キーワードを入力

検索履歴アイコン付き候補リスト

入力前に過去の検索履歴を時計アイコン付きで一覧表示した静止パネルです。WordPress会員サイトの検索窓でリピーターの再検索を助けるUIの参考になります。

CSS onlystaticcss</> コードを見る

スニーカー

ランニングスニーカー¥8,900 キャンバススニーカー¥5,400 キッズスニーカー¥3,800

03-16-05

画像サムネイル付き商品検索候補パネル

候補それぞれに商品サムネイルと価格を添えたECサイト風の静止パネルです。WordPress + WooCommerce系サイトの商品検索オートコンプリートのデザイン参考に使えます。

CSS onlystaticcss</> コードを見る

検索キーワードを入力

人気キーワード

福袋アウター母の日ギフトタイムセール新生活在庫処分

03-16-06

選択中候補がハイライトされたリスト

キーボード操作で選択中の候補行だけ背景色を変えた静止状態の見本です。WordPressサイトの検索候補で矢印キー操作の現在地を示すUIデザインの参考になります。

CSS onlystaticcss</> コードを見る

ずぱばぱぱ

「ずぱばぱぱ」に一致する候補が
見つかりませんでした

キーワードを変えてお試しください

03-16-08

候補ゼロ件「見つかりません」表示

一致する候補がない状態をアイコンとメッセージで静止表示した見本です。WordPress検索窓でヒットなしの状態を利用者にわかりやすく伝えるデザインの参考になります。

CSS onlystaticcss</> コードを見る

東京× 1LDK× 駅近

東京 1LDK 駅近敷金礼金なし東京 1LDK 駅近ペット可東京 1LDK 駅近新築

03-16-09

複数キーワードタグ+候補リストの複合UI

入力欄に確定済みキーワードをタグ表示し、続く候補を下に並べた静止パネルです。WordPress不動産・求人サイトの多条件検索UIのデザイン参考になります。

CSS onlystaticcss</> コードを見る

近くのレストラン

近くのレストラン個室近くのレストラン深夜営業近くのレストラン子連れ歓迎

03-16-10

音声検索アイコン付き検索バー

入力欄の右側にマイクアイコンを添えた音声検索対応の静止検索バーです。WordPressのモバイル向けサイト内検索フォームのデザイン参考として使えます。

CSS onlystaticcss</> コードを見る

イアホン

もしかして: イヤホン ではありませんか?

イヤホンワイヤレスイヤホン有線イヤホン収納ケース

03-16-11

スペル訂正提案「もしかして」表示

入力ミスに対して正しいと思われるキーワードを冒頭で提案する静止パネルです。WordPress検索窓での表記ゆれ・誤入力対策UIのデザイン参考になります。

CSS onlystaticcss</> コードを見る

ノートPC

ノートPC 軽量モデルノートPC 15インチノートPC ゲーミング

すべての検索結果を見る(24件)→

03-16-12

フッターリンク付き候補パネル

候補リストの下部に全件表示への導線を添えた静止パネルです。WordPress + WooCommerceサイトの検索候補から検索結果一覧ページへ誘導するUIの参考になります。

CSS onlystaticcss</> コードを見る

72. 静的ボタンスタイルキット

04-05-01

プライマリ/セカンダリ/ゴーストボタン3種セット

塗り・枠線・透明の基本3系統をまとめて配置。CTAと補助リンクの使い分け見本としてWordPressのボタンブロック設計に使える。

CSS onlystaticcss</> コードを見る

04-05-02

サイズバリエーションボタン(S/M/L)

同一デザインのボタンを3段階のサイズで並べた見本。フォームの重要度や画面幅に応じたサイズ選定の参考になる。

CSS onlystaticcss</> コードを見る

04-05-03

角丸バリエーションボタン(直角/やや丸/ピル型)

border-radiusの違いだけを比較できるボタン見本。サイト全体のトーンに合わせた角丸量の検討に便利。

CSS onlystaticcss</> コードを見る

04-05-04

アイコン付きボタンセット(左/右/アイコンのみ)

アイコンの配置パターンを並べた静止見本。ダウンロードや外部リンクなど用途別ボタンのレイアウト検討に使える。

CSS onlystaticcss</> コードを見る

04-05-05

無効化(disabled)状態ボタン表示

通常状態と操作不可状態を並べて比較できる見本。フォーム未入力時のボタン表現をそのまま流用できる。

CSS onlystaticcss</> コードを見る

04-05-06

危険操作用ボタン(赤系警告色)

削除や退会など取り消せない操作向けの警告色ボタン見本。塗りと枠線の2パターンを掲載。

CSS onlystaticcss</> コードを見る

04-05-07

成功・完了ボタン(緑系)

承認や確定など肯定的な操作を示す緑系ボタンの見本。濃い塗りと淡い背景の2種を並べている。

CSS onlystaticcss</> コードを見る

04-05-08

グラデーションボタンセット

異なる配色のグラデーションボタンを3種並べた見本。キャンペーンLPなど華やかさを出したいボタンに使える。

CSS onlystaticcss</> コードを見る

04-05-09

影付き立体ボタンセット(静止)

常時ボックスシャドウを付けて浮き上がって見せるボタン見本。フラットデザインに立体感を加えたい場面に使える。

CSS onlystaticcss</> コードを見る

詳しく見る資料をダウンロード

04-05-10

ミニマル下線ボタン(テキストリンク風)

背景を持たず下線のみで構成したリンク風ボタンの見本。テキスト主体のシンプルなセクションに馴染む。

CSS onlystaticcss</> コードを見る

04-05-11

ステータスドット付きボタンセット

ボタン内に小さな状態ドットを添えた見本。稼働状況やオン/オフ状態を伴う操作ボタンの表現に使える。

CSS onlystaticcss</> コードを見る

04-05-12

スプリットボタン(本体+矢印区切り)

主操作と補助オプションを区切り線で分けた分割ボタンの見本。エクスポート形式の選択などに使える構成。

CSS onlystaticcss</> コードを見る

73. 静的フォームフィールドスタイル集

お名前

04-06-01

アウトライン枠テキスト入力欄

枠線のみのシンプルな入力欄です。Contact Form 7の氏名欄など、標準的な問い合わせフォームの入力項目に使えます。

CSS onlystaticcss</> コードを見る

メールアドレス

04-06-02

塗りつぶし背景型入力欄

枠線を使わず背景色で入力範囲を示すデザインです。フラットなデザインのフォームやニュースレター登録欄に馴染みます。

CSS onlystaticcss</> コードを見る

電話番号

04-06-03

下線のみ型入力欄(ミニマル)

下線だけで構成したミニマルな入力欄です。装飾を抑えたいシンプルな予約フォームやアンケートに適しています。

CSS onlystaticcss</> コードを見る

会社名

法人名を正式名称でご入力ください

04-06-04

ラベル上付き入力欄セット

ラベルを入力欄の上に配置し補足テキストを添えた形です。項目数の多い資料請求フォームなどで視認性を高めます。

CSS onlystaticcss</> コードを見る

検索

🔍

04-06-05

アイコン付き入力欄(検索・メール等)

入力欄の左側にアイコンを配置したデザインです。サイト内検索窓やメールアドレス入力欄に用途を明示できます。

CSS onlystaticcss</> コードを見る

メールアドレス

⚠ 正しいメールアドレスを入力してください

04-06-06

エラー状態表示入力欄(静止)

赤い枠線とエラーメッセージを表示した状態のデザインです。入力チェック機能付きの問い合わせフォームの見本になります。

CSS onlystaticcss</> コードを見る

ユーザー名

✓

このユーザー名は使用できます

04-06-07

成功状態表示入力欄(静止)

緑色の枠線とチェックマークで入力内容が有効であることを示す状態です。会員登録フォームの検証結果表示に使えます。

CSS onlystaticcss</> コードを見る

お名前必須

04-06-08

必須マーク付き入力欄セット

ラベルに「必須」バッジを添えた入力欄です。回答が必要な項目を明確に示したいエントリーフォームに向いています。

CSS onlystaticcss</> コードを見る

お問い合わせ内容

ご質問の詳細をこちらにご記入ください。

04-06-09

テキストエリア(複数行)スタイル

複数行の入力に対応したテキストエリアの見た目です。お問い合わせフォームの本文欄やご意見欄に利用できます。

CSS onlystaticcss</> コードを見る

都道府県

東京都 ▾

04-06-10

セレクトボックス静止デザイン

ドロップダウン矢印付きのセレクト欄の見た目です。配送先の都道府県選択など、選択式フォーム項目の見本になります。

CSS onlystaticcss</> コードを見る

お名前

04-06-11

フローティングラベル型入力欄

枠線に重なるようラベルを浮かせて配置した入力欄です。入力済みの状態を保ったまま項目名を常時表示したいフォームに使えます。

CSS onlystaticcss</> コードを見る

認証コード

4 8 2 1

04-06-12

分割ボックス型コード入力欄

1文字ずつ個別の枠に収める入力欄の見本です。SMS認証コードやワンタイムパスワード入力画面のデザインに使えます。

CSS onlystaticcss</> コードを見る

74. 静的チェックボックス・ラジオボタンデザイン

04-07-01

角丸四角チェックボックス(未/済)

未選択と選択済みを並べたシンプルな角丸チェックボックス。同意欄やオプション選択欄のデザイン見本として使える。

CSS onlystaticcss</> コードを見る

04-07-02

丸型ラジオボタン(未/済)

未選択と選択済みの状態を並置した丸型ラジオボタン。料金プランや配送方法などの単一選択項目に使える。

CSS onlystaticcss</> コードを見る

04-07-03

トグルスイッチ型チェックボックス(OFF/ON静止表示)

OFFとONの2状態を並べて表示するスイッチ風チェックボックス。設定画面のON/OFF項目デザインに応用できる。

CSS onlystaticcss</> コードを見る

プランA

プランB

04-07-04

カード選択型ラジオ(枠強調)

カード全体の枠線と背景色で選択状態を示すラジオデザイン。料金プラン比較などの選択UIに使える。

CSS onlystaticcss</> コードを見る

04-07-05

チェックマークSVG付きチェックボックス

SVGアイコンではっきりとしたチェックマークを表示するボックス。フォームの完了項目表示に向いたデザイン。

CSS onlystaticcss</> コードを見る

04-07-06

カラーバリエーション付きチェックボックス

複数の配色のチェック済みボックスを並べたバリエーション見本。カテゴリごとの色分けタグ選択などに使える。

CSS onlystaticcss</> コードを見る

04-07-07

大きめタッチ対応チェックボックス(モバイル向け)

指でも押しやすいサイズを想定した大きめのチェックボックス見本。モバイル向けフォームのデザインに適する。

CSS onlystaticcss</> コードを見る

親カテゴリ
子項目A
子項目B

04-07-08

インデント付きネストチェックボックス

親子関係をインデントで示す階層構造のチェックボックス。カテゴリ選択やフィルターツリーの表示に使える。

CSS onlystaticcss</> コードを見る

★ ★ ★ ★ ★

04-07-09

星型評価チェック(レーティング風・静止)

星の選択状態を固定表示したレーティング風チェック見本。商品レビューや満足度の表示欄に使える。

CSS onlystaticcss</> コードを見る

通知
自動更新
公開設定

04-07-10

スイッチ+ラベル横並びセット

複数のトグルスイッチとラベルが並ぶリスト形式の見本。設定画面の項目一覧デザインに応用できる。

CSS onlystaticcss</> コードを見る

04-07-11

アウトラインのみチェックボックス(塗りなし)

背景を塗りつぶさずチェックマークの色だけで選択状態を示す見本。ミニマルなデザインの同意欄などに向きます。

CSS onlystaticcss</> コードを見る

朝食付き駐車場 Wi-Fi 禁煙

04-07-12

ピルタグ型複数選択チェック

チェックマークの代わりにピル形状の背景色で選択状態を示す見本。宿泊施設の条件絞り込みなどの複数選択項目に使えます。

CSS onlystaticcss</> コードを見る

75. 静的トグル・スイッチデザイン

ON

OFF

04-08-01

標準iOS風トグルスイッチ

丸ノブが左右どちらかに寄った定番形状のスイッチです。WordPressの設定画面でON/OFF項目の表示に使えます。

CSS onlystaticcss</> コードを見る

ON

OFF

04-08-02

四角ノブ型トグルスイッチ

角ばったノブを持つシャープな印象のスイッチです。管理画面のフラットデザインに馴染みます。

CSS onlystaticcss</> コードを見る

ON OFF

04-08-03

ラベル内蔵型トグル

スイッチ内部にON/OFFの文字を表示する形状です。状態が一目で分かるため設定一覧に向きます。

CSS onlystaticcss</> コードを見る

🌙 ダーク

☀️ ライト

04-08-04

アイコン切替型トグル

太陽と月のアイコンでモードを表すスイッチです。ダーク/ライトモード切替の設定項目に適します。

CSS onlystaticcss</> コードを見る

04-08-05

カラーバリエーション付きトグル

ON状態の配色を複数並べた見本です。カテゴリごとに色分けしたい設定項目に活用できます。

CSS onlystaticcss</> コードを見る

通知を受け取る
自動更新
コメント承認制

04-08-06

大型トグルスイッチ(設定項目リスト風)

項目名の右端に大きめのスイッチを並べたリスト形式です。管理画面の設定ページを想定しています。

CSS onlystaticcss</> コードを見る

OFF 自動 ON

04-08-07

三段階トグル(セグメント3択・静止)

OFF・自動・ONの3状態を横並びのセグメントで表す静止見本です。動作モードの選択項目に使えます。

CSS onlystaticcss</> コードを見る

04-08-08

小型ミニトグルスイッチ

コンパクトなサイズに縮小したスイッチです。表の行内など省スペースな箇所への設置に向きます。

CSS onlystaticcss</> コードを見る

04-08-09

枠線のみのアウトライントグル

塗りつぶしを持たず輪郭線だけで表現するスイッチです。ミニマルな設定画面のデザインに合います。

CSS onlystaticcss</> コードを見る

メール通知
プッシュ通知
SMS通知
ニュースレター

04-08-10

グループ化されたトグルリスト(複数設定項目)

複数のラベルとスイッチを縦にグループ化した一覧です。通知設定などまとまった項目の表示に使えます。

CSS onlystaticcss</> コードを見る

04-08-11

縦型トグルスイッチ(静止)

ノブが上下に動く縦向きのスイッチ形状です。狭い縦スペースの設定パネルや行内コントロールに使える見本です。

CSS onlystaticcss</> コードを見る

04-08-12

グラデーション背景トグルスイッチ

ON状態の背景に鮮やかなグラデーションを敷いたスイッチの見本です。目立たせたいプレミアム設定項目などに使えます。

CSS onlystaticcss</> コードを見る

112. 静的マルチステップフォーム・ウィザード見た目

✓ 情報入力

2 内容確認

3 完了

04-10-01

丸数字3ステップインジケータ(進行中固定)

3つの丸番号を線でつないだステップ表示を、2番目が進行中の状態で固定表示します。資料請求フォームや会員登録フォームの現在地表示に使えます。

CSS onlystaticcss</> コードを見る

お申し込みフォーム

60%

ステップ 2 / 3：お届け先情報の入力

04-10-02

横棒プログレスバー付きフォーム見出し

進捗率60%地点で固定した横棒バーとパーセント表示です。セミナー申込みや資料ダウンロードフォームの見出し部分に活用できます。

CSS onlystaticcss</> コードを見る

04-10-03

パンくず風ステップナビの見た目

階層をたどるパンくずのようにステップ名を並べたナビです。ECサイトの購入フローや複数ページの申込みフォームの上部案内に使えます。

CSS onlystaticcss</> コードを見る

✓基本情報
2住所入力
3内容確認
4完了

住所を入力してください

04-10-04

左サイド縦並びチェックリスト式ステップ

左側に縦並びのステップリスト、右側に入力エリアを配置したレイアウト見本です。会員登録や予約フォームの2カラム構成に応用できます。

CSS onlystaticcss</> コードを見る

2/4

配送設定

残り2ステップで完了します

04-10-05

円形プログレスリング付きステップ見出し

円グラフ状のリングで進捗を表現した静止見出しです。会員登録ウィザードやアンケートフォームの現在ステップ表示に向いています。

CSS onlystaticcss</> コードを見る

完了アカウント作成
進行中プロフィール設定
未着手本人確認

04-10-06

完了/進行中/未着手バッジ付きステップリスト

各ステップの状態をバッジ色で示すリスト表示です。会員マイページの登録手続き状況や設定ウィザードの案内表示として使えます。

CSS onlystaticcss</> コードを見る

STEP 3

ご注文内容の確認

お名前: 山田太郎
お届け先: 東京都渋谷区〜1-2-3
お支払い: クレジットカード

04-10-07

確認画面のサマリーカードレイアウト

入力内容を項目ごとに一覧表示する確認画面のカード見本です。注文フォームや予約フォームの最終確認ステップに使用できます。

CSS onlystaticcss</> コードを見る

1基本情報

2詳細情報

3確認

04-10-08

ステップ番号+ラベル横並びタブ風見た目

タブのように番号とラベルを横に並べたステップ表示です。設定画面や複数ページの申込みフォームの上部ナビとして活用できます。

CSS onlystaticcss</> コードを見る

お手続き状況

3 / 5 完了

04-10-09

進捗ドットインジケータ(静止)

丸ドットの並びで進み具合を示すミニマルな表示です。アンケートフォームやオンボーディング画面のページ位置表示に使えます。

CSS onlystaticcss</> コードを見る

STEP 2 OF 4

お届け先情報

04-10-10

フォーム全体のカード型レイアウト枠

ヘッダーのステップ表示とフッターの操作ボタンだけを配置したカード枠です。多段階の申込みフォーム全体の外枠デザインの土台に使えます。

CSS onlystaticcss</> コードを見る

お申し込み受付
10:02 完了
内容確認
10:15 完了
審査中
対応中
完了通知
未対応

04-10-11

縦型タイムラインステップ(静止)

完了・進行中・未対応の状態を縦につないだタイムライン風の静止ステップ表示です。会員登録の審査状況や注文処理の進捗案内ページに使えます。

CSS onlystaticcss</> コードを見る

完了まで

2ステップ

04-10-12

残りステップ数を大きく見せるカウントカード

残りステップ数を大きな数字で強調した静止カードです。無料相談フォームや資料請求フォームで、あと少しで完了することを直感的に伝えたいときに使えます。

CSS onlystaticcss</> コードを見る

126. 静的スライダー・レンジ入力デザイン集

音量

65%

04-12-01

シンプルな単一つまみスライダー

単一のつまみを特定位置に固定表示したシンプルなスライダー見本です。WordPressの音量設定や数値プレビュー用UIのモックとして利用できます。

CSS onlystaticcss</> コードを見る

¥3,000¥8,000

04-12-02

価格帯デュアルスライダー

2つのつまみで価格帯の範囲を指定する見本です。ECサイトの商品絞り込みフィルターのデザイン確認に使えます。

CSS onlystaticcss</> コードを見る

彩度

04-12-03

グラデーショントラックスライダー

トラックに虹色グラデーションを施したスライダーです。カラーピッカーや彩度調整UIのビジュアルサンプルに向きます。

CSS onlystaticcss</> コードを見る

品質レベル

低中高

04-12-04

目盛り付きステップスライダー

5段階の目盛りを表示したステップ式スライダーです。アンケートの評価尺度やプラン選択UIの見本として使えます。

CSS onlystaticcss</> コードを見る

70%

04-12-05

円形(サーキュラー)スライダー

円形のリングでパーセンテージを表す静止スライダーです。ダッシュボードの進捗表示や設定値プレビューに活用できます。

CSS onlystaticcss</> コードを見る

🔊

04-12-06

縦向きスライダー(音量調整風)

縦方向に配置した音量調整風のスライダーです。動画プレイヤーや音楽アプリのUIモックアップに利用できます。

CSS onlystaticcss</> コードを見る

42

04-12-07

ラベル吹き出し付きスライダー

つまみの上に現在値を示す吹き出しを添えたスライダーです。数値入力の直感的な見え方を伝えるサンプルに適します。

CSS onlystaticcss</> コードを見る

健康スコア

04-12-08

複数セグメント色分けスライダートラック

赤・黄・緑にゾーン分けしたトラックを持つスライダーです。健康スコアやリスクレベル表示のUI見本として使えます。

CSS onlystaticcss</> コードを見る

💥

🔆

04-12-09

アイコン両端付きスライダー(明るさ調整風)

トラックの両端に明暗アイコンを配置した明るさ調整風のスライダーです。設定画面の輝度調整項目のデザイン例に使えます。

CSS onlystaticcss</> コードを見る

明るさ調整

04-12-10

太めつまみのモバイル向けスライダー

太いつまみと厚みのあるトラックでタップしやすさを表現したモバイル向けスライダーです。スマホ設定画面のUIサンプルとして活用できます。

CSS onlystaticcss</> コードを見る

配送日数の目安

0255075100

04-12-11

細かい目盛り付きルーラー型スライダー

10%刻みの細かい目盛りと25刻みの数値ラベルを添えたルーラーのようなスライダーです。日数や距離など精密さを見せたい数値設定UIの見本に使えます。

CSS onlystaticcss</> コードを見る

自動更新

OFF ON

04-12-12

ON/OFF文字入りトグルスタイルスライダー

横長のトラックにON/OFFの文字を焼き込み、つまみの位置で状態を示す静止スライダーです。設定画面のスイッチ項目を大きく見せたい場合のデザイン見本に使えます。

CSS onlystaticcss</> コードを見る

127. 静的評価・星入力フォームパーツ見た目

評価を選択してください

★ ★ ★ ★ ★

04-13-01

5段階星入力欄(一部塗りつぶし固定表示)

枠付きカードに星アイコンを並べた評価入力欄の見た目。ECサイトのレビュー投稿フォームの星選択欄デザイン見本として使える。

CSS onlystaticcss</> コードを見る

04-13-02

ハート型評価入力(SVGアイコン)

SVGのハートアイコンを並べた評価選択欄。コスメやアパレルなど「かわいい系」ショップのレビュー入力デザインに合う。

CSS onlystaticcss</> コードを見る

😞 😕 😐 🙂 😄

04-13-03

顔文字(絵文字)スケール評価入力

表情の絵文字を5段階に並べた満足度入力欄。アンケートフォームやNPS調査の直感的な評価選択UIに使える。

CSS onlystaticcss</> コードを見る

満足度を数字で選択

1 2 3 4 5 6 7 8 9 10

04-13-04

数値ボタン式評価入力(1〜10)

1〜10の数字ボタンを格子状に並べた評価選択欄。サービス満足度調査や採点フォームのデザイン見本に使える。

CSS onlystaticcss</> コードを見る

不満満足

72%

04-13-05

スライダー式満足度入力(静止表示)

つまみを固定位置で表示したスライダー型の満足度入力見本。アンケートやWeb診断コンテンツの評価UIに応用できる。

CSS onlystaticcss</> コードを見る

👍 ❤️ 😂 😮 😢

04-13-06

絵文字リアクション選択パネル

SNS風の絵文字リアクションを横並びにしたパネル見本。ブログ記事末尾の「読んだ感想」選択UIなどに使える。

CSS onlystaticcss</> コードを見る

0 1 2 3 4 5 6 7 8 9 10

おすすめしないおすすめする

04-13-07

NPS風0〜10段階ボタン列

0〜10の数字ボタンを色分けで並べたNPS調査風の評価入力見本。顧客満足度アンケートフォームのデザインに使える。

CSS onlystaticcss</> コードを見る

とても悪い

悪い

普通

良い

とても良い

04-13-08

5段階ラベル付き評価入力(とても悪い〜とても良い)

ラジオ風のドットとラベルを縦に並べた5段階評価入力欄。満足度アンケートや商品レビューフォームに使える。

CSS onlystaticcss</> コードを見る

★ ★ ★ ★ ★

レビューを入力してください…

送信する

04-13-09

星+コメント欄の複合評価フォーム

星評価とコメント入力欄、送信ボタンをまとめたカード型フォーム見本。商品レビュー投稿フォームのデザインに使える。

CSS onlystaticcss</> コードを見る

味 ★★★★★

接客 ★★★★★

雰囲気 ★★★★★

04-13-10

カテゴリ別複数評価入力(味・接客・雰囲気)

複数の評価項目ごとに星評価を並べた入力欄。飲食店レビューや宿泊施設の詳細評価フォームのデザイン見本に使える。

CSS onlystaticcss</> コードを見る

この記事は役に立ちましたか？

128

12

04-13-11

サムズアップ/ダウン二択評価パネル

「役に立った/立たなかった」を件数付きの2択ボタンで表現した評価パネルの静止見本です。ブログ記事末尾やヘルプページのフィードバック収集UIに使えます。

CSS onlystaticcss</> コードを見る

鮮度・満足度

04-13-12

しずく(涙滴)アイコンの鮮度評価入力

星の代わりに水滴型アイコンを使った評価入力の静止見本です。青果や鮮魚、スキンケア商品など「鮮度」「うるおい」を訴求するショップのレビュー欄に合います。

CSS onlystaticcss</> コードを見る

168. 静的アンケート・チェックリスト見た目

Q3 / 5 60%

このサービスを友人に勧めたいと思いますか?

04-15-01

進捗バー付きアンケート質問カード(60%地点)

回答の進捗を示すバーを60%地点で固定表示した質問カード。WordPressのアンケートフォームや診断コンテンツの途中経過表示に使える。

CSS onlystaticcss</> コードを見る

とても満足
満足
普通
不満

04-15-02

単一選択済みラジオカード一覧

4択の中から1つが選択された状態を固定表示したラジオリスト。満足度調査やアンケートの単一回答項目デザイン見本として使える。

CSS onlystaticcss</> コードを見る

価格
品質
デザイン
サポート体制

04-15-03

複数選択済みチェックリスト

複数項目にチェックが入った状態を固定表示したリスト。購入理由アンケートや要望調査の複数回答欄デザインに応用できる。

CSS onlystaticcss</> コードを見る

対応スピードについて評価してください

1 2 3 4 5

低い高い

04-15-04

5段階評価スケール(選択済み)

1〜5の数値スケールから1つが選択された状態のアンケート項目。満足度や評価アンケートの5段階評価UI見本として使える。

CSS onlystaticcss</> コードを見る

このプランの継続を希望しますか?

はいいいえ

04-15-05

はい/いいえ選択済みトグルカード

2択のうち「はい」が選択された状態を固定表示したトグルカード。継続確認や同意有無を尋ねるアンケート項目に使える。

CSS onlystaticcss</> コードを見る

質問 3 / 5

04-15-06

質問番号インジケータ付きアンケートヘッダー

ドットで現在の質問位置を示すアンケートヘッダー見本。複数ページ形式のアンケートフォームの進行状況表示に使える。

CSS onlystaticcss</> コードを見る

1⋮⋮価格の安さ
2⋮⋮配送の速さ
3⋮⋮品揃え

04-15-07

優先順位が並べ替え済みのリスト(静止)

ドラッグハンドル付きで順位が確定した状態を固定表示したリスト。重要度ランキングアンケートのUI見本として使える。

CSS onlystaticcss</> コードを見る

サービス全体の満足度は?

😞 😐 😊 😀 🤩

04-15-08

絵文字選択済みの満足度アンケート

顔文字アイコンの中から1つが選択された状態を固定表示した満足度アンケート。カジュアルなフィードバックフォームに使える。

CSS onlystaticcss</> コードを見る

ご利用経験は?

↓

あり

なし

↓

詳細質問へ

04-15-09

条件分岐の質問フロー図(静止)

回答によって次の質問が分岐する様子を固定表示したフロー図。診断コンテンツや条件分岐アンケートの設計見本として使える。

CSS onlystaticcss</> コードを見る

✓

ご回答ありがとうございました

全5問中 5問に回答しました

04-15-10

アンケート完了画面のサマリーカード

回答完了後のお礼メッセージと達成率を示すサマリーカード見本。アンケートフォーム送信後のサンクスページに使える。

CSS onlystaticcss</> コードを見る

利用規約を確認した
アンケートに回答した
クーポンを受け取る

04-15-11

チェック済み項目に取り消し線が入ったチェックリスト

完了項目のラベルに取り消し線を入れて視覚的に区別するチェックリスト。タスク形式のアンケートや手順確認リストに使える。

CSS onlystaticcss</> コードを見る

Q1. 年齢層を教えてください

30代 40代

Q2. 利用頻度は?

毎日週1回

Q3. 総合満足度は?

満足普通

04-15-12

複数質問が縦に並ぶアンケートフォーム全体像

3つの質問ブロックを縦に並べ、それぞれ回答済みの状態を固定表示したフォーム全体見本。長文アンケートページの構成見本として使える。

CSS onlystaticcss</> コードを見る

40. 静的カードデザインバリエーション

プランA

装飾を持たないフラットな見た目のカードです。

05-06-01

フラットカード

影も枠線も付けない最小限のフラットデザイン。WordPressのシンプルな料金・サービス一覧に使えます。

CSS onlystaticcss</> コードを見る

プランB

背景は白のまま、細い枠線だけで境界を示します。

05-06-02

アウトラインカード

白背景に細い枠線のみを添えた構成。WordPressの比較表やお知らせ枠の土台に向きます。

CSS onlystaticcss</> コードを見る

プランC

一定の影を常に伴い、紙が浮いたような見た目です。

05-06-03

エレベーテッドカード(常時影)

常に一定の影が付いた浮遊感のあるカード。WordPressのおすすめ商品やピックアップ枠に使えます。

CSS onlystaticcss</> コードを見る

プランD

背景のぼかしの上に半透明のガラス板を重ねた質感です。

05-06-04

グラスモーフィズムカード

半透明+ぼかし背景の上に乗るガラス風カード。WordPressの画像ヒーロー上のテキスト枠に馴染みます。

CSS onlystaticcss</> コードを見る

プランE

背景と同じ色味の中で凹凸の陰影だけを表現します。

05-06-05

ニューモーフィズムカード

背景と同色で凹凸の影を使うソフトUIカード。WordPressの設定パネルや静かな印象のUIに合います。

CSS onlystaticcss</> コードを見る

プランF

左端に太いカラーラインを添えたシンプルな構成です。

05-06-06

左ボーダーアクセントカード

左端に太いカラーラインが入ったカード。WordPressのカテゴリ別お知らせやジャンル分けに使えます。

CSS onlystaticcss</> コードを見る

プランG

上半分が色ブロック、下半分がテキストの構成です。

05-06-07

画像分割カード(上下2分割)

上半分が色ブロック、下半分がテキストの構成。WordPressの記事一覧やサムネイル付きカードの土台になります。

CSS onlystaticcss</> コードを見る

プランH

装飾を排し、細い罫線だけで要素を区切ります。

05-06-08

罫線ミニマルカード

装飾を排し細い罫線区切りのみのカード。WordPressのテキスト中心なプロフィールや規約ページに向きます。

CSS onlystaticcss</> コードを見る

プランI

角丸を使わない直線的な輪郭のカードです。

05-06-09

シャープコーナーカード

角丸を使わない直線的なカードデザイン。WordPressのモダン・硬派な印象を出したいコーポレートサイトに合います。

CSS onlystaticcss</> コードを見る

プランJ

外枠と内枠、二重のラインで囲んだ構成です。

05-06-10

二重枠カード

外枠と内枠の二重ラインを使ったカード。WordPressの表彰状風の案内や記念ページの装飾枠に使えます。

CSS onlystaticcss</> コードを見る

プランK

右上に斜めのリボンバッジを添えたカードです。

05-06-11

コーナーリボンバッジカード

右上に斜めのリボンで「人気」等のラベルを付けたカードです。WordPressのおすすめプランやベストセラー商品の目印に使えます。

CSS onlystaticcss</> コードを見る

★

プランL

上端にアイコンバッジが半分重なる構成です。

05-06-12

アイコンバッジ重なりカード

カード上端に丸いアイコンバッジを半分はみ出させて重ねた構成です。WordPressのおすすめ会員ランクや受賞歴の演出カードに使えます。

CSS onlystaticcss</> コードを見る

76. 静的料金表デザイン集

ライト

¥980/月

基本機能
5GB容量
メールサポート

3プラン横並び料金表(中央強調)

3つの料金プランを横並びに配置し中央のプランを大きく強調した定番レイアウト。サービスサイトの料金ページに使える構成です。

CSS onlystaticcss</> コードを見る

ALL IN ONE

¥3,300円 / 月(税込)

個人事業主から中小企業まで対応する単一プラン。追加料金なしで全機能が使えます。

このプランを選ぶ

ユーザー数無制限
ストレージ100GB
電話・メールサポート

05-08-02

シンプル1プラン料金カード

単一の料金プランだけを大きく提示するシンプルなカード。選択肢を絞りたいシンプルなサービスの申込ページに適します。

CSS onlystaticcss</> コードを見る

	ベーシック	プロ
プロジェクト数	3	無制限
連携機能	×	✓
レポート出力	×	✓
チーム招待	✓	✓

05-08-03

機能チェック付き料金表

各プランで使える機能を✓と×で一覧比較する表形式。SaaSの機能差分をわかりやすく伝える比較表として使えます。

CSS onlystaticcss</> コードを見る

スターター ¥0

グロース ¥1,980

スケール ¥5,980

カスタム要相談

05-08-04

ミニマル料金リスト(罫線区切り)

装飾を排し罫線のみで区切った縦並びの料金リスト。テキスト中心のミニマルなランディングページに馴染みます。

CSS onlystaticcss</> コードを見る

人気No.1

ビジネスプラン

¥6,600/月

最もお得な組み合わせ

05-08-05

バッジ付き料金カード(人気・お得)

カード上部に「人気No.1」等のバッジを添えて選択を後押しするデザイン。おすすめプランの訴求に効果的です。

CSS onlystaticcss</> コードを見る

プロプラン

月額 ¥2,000

年払いなら¥19,200/年

20%OFF

05-08-06

年額割引表示付き料金カード

月額表示に加え年払い時の割引率を併記したカード。年間契約への誘導を図りたい料金ページで使えます。

CSS onlystaticcss</> コードを見る

DARK PLAN

$49/mo

専用サーバー
優先処理
SLA保証

05-08-07

ダークテーマ料金表

黒基調の背景でクールに見せる料金カード。開発者向けツールやテック系サービスの料金ページに合います。

CSS onlystaticcss</> コードを見る

項目	Light	Standard	Pro
月額	¥980	¥2,480	¥4,980
容量	5GB	50GB	500GB
サポート	メール	優先	専任

05-08-08

横長比較テーブル型料金表

複数プランの詳細項目を横一列の表で並べて比較する形式。項目数の多いプラン比較に適した構成です。

CSS onlystaticcss</> コードを見る

FREE

¥0

個人利用に最適

PAID

¥1,480

全機能が使い放題

05-08-09

フリーミアム型料金カード(無料/有料)

無料プランと有料プランを左右で対比させ機能差を伝えるカード。フリーミアムモデルのサービスに向いています。

CSS onlystaticcss</> コードを見る

エンタープライズ

お問い合わせください

貴社の規模に合わせたカスタムプランをご用意します。専任担当者が導入をサポートします。

営業担当に相談する

05-08-10

エンタープライズ問い合わせ型料金カード

金額を明示せず「お問い合わせください」で誘導する法人向けプランカード。大口顧客向けの料金ページに使えます。

CSS onlystaticcss</> コードを見る

月額年額2ヶ月分お得

¥19,800/年

全機能利用可
50GB容量
優先サポート

05-08-11

月額/年額切替タブ付き料金カード(静止)

月額・年額の切替タブを備え年額側を選択済み表示した料金カード。年間契約への誘導を狙う料金ページの見本になります。

CSS onlystaticcss</> コードを見る

グロースプラン

¥3,980/月

📦無制限プロジェクト
👥チーム10名まで
🔒SSL標準対応

05-08-12

アイコンリスト型料金カード

機能項目それぞれに小さな絵文字アイコンを添えた料金カードの見本です。特徴を視覚的に伝えたいプラン紹介に使えます。

CSS onlystaticcss</> コードを見る

77. 静的統計・数字表示カード集

1,240導入企業数

98%継続率

4.8満足度評価

24hサポート対応

05-09-01

大数字+ラベルの実績カード4連

主要な実績数値を4つのブロックに並べたシンプルな一覧です。企業サイトの導入実績や強みの紹介セクションに使えます。

CSS onlystaticcss</> コードを見る

72% 達成率

05-09-02

円形進捗リング(静止表示)

固定パーセントを示す静止したドーナツ型の円グラフです。目標達成率やタスクの進捗状況を一目で伝えるパーツに使えます。

CSS onlystaticcss</> コードを見る

月間売上 ¥3.2M ▲ 12.4%

解約率 2.1% ▼ 0.6pt

05-09-03

増減矢印付きKPIカード

前月比の▲▼マークを添えて数値の増減を示すKPIカードです。管理画面のダッシュボードで指標の変化を伝えるのに向きます。

CSS onlystaticcss</> コードを見る

検索82%
SNS64%
紹介47%
広告31%

05-09-04

横棒グラフ(静止・複数項目)

複数の項目を固定長の横棒で比較する静止グラフです。流入経路の内訳などをレポート画面で見せる用途に使えます。

CSS onlystaticcss</> コードを見る

1月

2月

3月

4月

5月

6月

05-09-05

縦棒グラフ(静止・月別)

月別のデータ量を固定高さの縦棒で表す静止グラフです。売上推移やアクセス数の月次レポート表示に活用できます。

CSS onlystaticcss</> コードを見る

★ 4.9 平均評価スコア

05-09-06

大見出し数字+背景アイコンの統計カード

背景に薄く配した大きなアイコンと数字を組み合わせた統計カードです。レビュー評価などの目立たせたい数値表示に向きます。

CSS onlystaticcss</> コードを見る

製品A 45%
製品B 30%
製品C 15%
その他 10%

05-09-07

円グラフ内訳(静止・凡例付き)

セグメント分けされた静止円グラフと凡例を並べた構成です。売上構成比など内訳データをまとめて見せる場面に使えます。

CSS onlystaticcss</> コードを見る

Before 42%

After 87%

05-09-08

二値比較バー(Before/After静止)

施策の前後の数値を2本の横棒で静止比較する表示です。改善効果や導入前後の成果をまとめて伝える資料に使えます。

CSS onlystaticcss</> コードを見る

312新規会員

58記事投稿

1.2kPV数

89コメント

17お問合せ

99%稼働率

05-09-09

ミニカード羅列型統計(6項目グリッド)

小さな統計カードを6つ並べたグリッド構成です。会員数や投稿数など複数指標をまとめて表示するダッシュボードに向きます。

CSS onlystaticcss</> コードを見る

76% 顧客満足度前年比 +4.2pt

05-09-10

パーセンテージ強調型統計ブロック

大きなパーセント数字を中心に配置し補足情報を添えたブロックです。満足度や達成率を強く印象づけたい箇所に使えます。

CSS onlystaticcss</> コードを見る

1202022

2102023

3402024

5202025

05-09-11

年度別数字推移タイムライン(静止)

横一直線に並べた年度ごとの数値をノードで結んだ静止タイムラインです。会員数や売上の年次推移を伝える資料に使えます。

CSS onlystaticcss</> コードを見る

68pt

健康スコア

05-09-12

半円ゲージメーター(静止)

円錐グラデーションで作った半円形の固定ゲージです。スコアや達成度を直感的に見せるダッシュボードの見本に使えます。

CSS onlystaticcss</> コードを見る

78. 静的比較表・機能マトリクス

	自社サービス	競合A社
初期費用	無料	33,000円
月額料金	2,980円〜	4,980円〜
サポート	24時間対応	平日のみ
契約期間	縛りなし	12ヶ月〜

05-10-01

自社vs競合比較表(2列)

自社サービスと競合他社の条件を2列に並べた静止の比較表。料金ページや導入検討セクションでの訴求に使える。

CSS onlystaticcss</> コードを見る

機能	Aプラン	Bプラン
データ連携	○	○
自動レポート	△	○
API公開	×	○
専任担当	×	△

05-10-02

○×△三段階評価表

対応・一部対応・非対応を記号で示す三段階評価の静止表。機能比較や仕様一覧のページに向く。

CSS onlystaticcss</> コードを見る

機能	Light	Standard	Pro
ユーザー数	1名	5名	無制限
ストレージ	1GB	50GB	500GB
解析機能	−	✓	✓
優先サポート	−	−	✓

05-10-03

プラン別機能マトリクス(3プラン×複数機能)

縦に機能、横に3つの料金プランを並べた静止マトリクス。料金ページのプラン比較に使える。

CSS onlystaticcss</> コードを見る

商品名	在庫	価格
ノートA	12	1,200円
ノートB	3	1,500円
ペンセット	25	880円
ファイル	7	420円
付箋	18	300円

05-10-04

ゼブラ模様の静的データテーブル

行ごとに背景を交互に変えた縞模様の静止テーブル。在庫一覧や商品リストなどの視認性向上に使える。

CSS onlystaticcss</> コードを見る

✓	SSL対応
✓	多言語対応
	オフライン利用
✓	自動バックアップ
	カスタムドメイン

05-10-05

チェックリスト形式の比較表

項目ごとにチェック済み・未チェックを並べた静止のチェックリスト表。仕様確認や導入前チェックに使える。

CSS onlystaticcss</> コードを見る

操作性	★★★★☆
デザイン	★★★★★
コスパ	★★★☆☆
サポート	★★★★☆

05-10-06

星評価付き比較表

各評価項目に星の数で満足度を示した静止表。レビューまとめや商品評価セクションに使える。

CSS onlystaticcss</> コードを見る

安定性	良好
応答速度	やや遅い
互換性	良好
エラー率	要改善

05-10-07

カラーコード評価表(信号色)

緑・黄・赤の信号色で評価レベルを色分けした静止表。診断結果やステータス一覧の提示に使える。

CSS onlystaticcss</> コードを見る

対応OS	Win/Mac/Linux
言語対応	日本語/英語/中国語
最大ユーザー	500名
API提供	REST/GraphQL
データ保存	国内サーバー
認証方式	SSO対応

05-10-08

折りたたみなしの全項目表示比較表(縦長)

省略せず全項目を縦に並べて見せる静止の縦長比較表。仕様書ページや詳細スペック掲載に使える。

CSS onlystaticcss</> コードを見る

📁	ファイル管理
🔒	権限設定
📊	集計レポート
🔔	通知連携

05-10-09

アイコン付き機能一覧表

各機能に小さなアイコンを添えた静止の一覧表。機能紹介ページやマニュアル目次に使える。

CSS onlystaticcss</> コードを見る

項目	Model X	Model Y
重量	320g	410g
バッテリー	18h	24h
解像度	1920×1080	2560×1440
価格	39,800円	52,800円

05-10-10

数値スペック比較表(製品仕様)

重量やバッテリーなどの数値データを並べた静止のスペック比較表。製品ページの仕様欄に使える。

CSS onlystaticcss</> コードを見る

機能	フリー	プロ
基本編集	✓	✓
チーム共有	✕	✓
API連携	✕	✓

05-10-11

円形バッジ○×比較表

対応・非対応を丸背景のバッジアイコンで示す静止の比較表。フリープランと有料プランの機能差を視覚的に伝えられる。

CSS onlystaticcss</> コードを見る

基本機能
ファイル保存	◯
共有リンク	◯
拡張機能
バージョン管理	◯
監査ログ	△

05-10-12

カテゴリ見出し区切り比較表

colspanで結合した見出し行で機能をグループ分けした静止表。項目数の多い仕様比較を整理して見せるのに使える。

CSS onlystaticcss</> コードを見る

79. 静的データテーブルスタイル集

商品名	在庫	価格
ノートA5	32	¥320
ボールペン	120	¥110
クリアファイル	58	¥98
付箋セット	44	¥250

05-11-01

罫線なしミニマルテーブル

罫線を一切使わず余白と行間だけで区切るシンプルな表組み。在庫一覧や仕様表など管理画面のミニマルな一覧表示に向く。

CSS onlystaticcss</> コードを見る

項目	担当	状態
設計書	佐藤	完了
実装	鈴木	進行中
検証	田中	未着手

05-11-02

全罫線囲みテーブル

全セルを罫線で囲んだクラシックな表組みスタイル。業務資料や進行管理表など枠線がはっきりした一覧に適する。

CSS onlystaticcss</> コードを見る

日付	売上	客数
7/1	¥88,000	42
7/2	¥92,500	47
7/3	¥76,300	38
7/4	¥101,200	53

05-11-03

横罫線のみテーブル

縦線を排し行区切りの横線だけで構成した表組み。日次レポートや売上一覧など縦に長いデータの見やすさを優先した表示に使う。

CSS onlystaticcss</> コードを見る

部署	人数	予算
営業部	18	¥3.2M
開発部	24	¥5.1M
総務部	9	¥1.4M

05-11-04

カラムヘッダー強調テーブル

見出し行に濃い背景色を敷いて視認性を高めた表組み。部署別予算表など見出しをはっきり伝えたい一覧表示に適する。

CSS onlystaticcss</> コードを見る

科目	金額
売上高	1,280,000
仕入高	540,000
経費	210,500
純利益	529,500

05-11-05

数値右揃えテーブル(会計風)

金額列を右揃えにし桁を読み取りやすくした集計表風の表組み。決算報告や見積書など会計系の一覧表示に向く。

CSS onlystaticcss</> コードを見る

注文番号	状態
#10231	完了
#10232	保留
#10233	失敗

05-11-06

ステータスバッジ付きテーブル

各行の状態列に色分けされたバッジを埋め込んだ表組み。注文管理やタスク一覧など状態を一目で把握したい表示に使う。

CSS onlystaticcss</> コードを見る

ID	名前	ステータス
001	山田太郎	有効
002	佐々木花	有効
003	高橋一郎	停止
004	渡辺次郎	有効
005	伊藤三郎	停止

05-11-07

コンパクト密度テーブル(狭い行間)

行の高さを詰めて情報密度を高めた表組み。会員一覧やログなど一画面に多くの行を表示したい管理画面に向く。

CSS onlystaticcss</> コードを見る

プラン	容量
ライト	10GB
スタンダード	50GB
プレミアム	200GB

05-11-08

ゆったり余白テーブル(広い行間)

行間と余白を広く取り読みやすさを重視した表組み。料金プラン比較など落ち着いて閲覧させたい一覧表示に適する。

CSS onlystaticcss</> コードを見る

地域	1月	2月	3月
東京	320	340	355
大阪	210	225	230
福岡	140	138	150

05-11-09

固定列風テーブル(左列強調)

左端の見出し列だけ背景色を敷いて固定列のように見せた表組み。地域別月次実績など横スクロールが想定される一覧に使う。

CSS onlystaticcss</> コードを見る

会員名	ランク
中村様	ゴールド
小林様	シルバー
加藤様	ブロンズ

05-11-10

角丸カード内包テーブル

テーブル全体を角丸のカードで包み込んだデザイン。会員ランク表示など柔らかい印象を与えたい一覧パーツに向く。

CSS onlystaticcss</> コードを見る

項目	値A	値B
速度	120ms	85ms
精度	92%	97%
コスト	¥1,200	¥980

05-11-11

縦罫線のみテーブル

横線を使わずセル間の縦線だけで列を区切る表組み。指標を横に並べて比較したい分析レポートの一覧表示に向く。

CSS onlystaticcss</> コードを見る

サーバー	状態
web-01	稼働中
web-02	稼働中
db-01	停止

05-11-12

ダークテーマデータテーブル

黒背景に白文字で構成した静止のダークテーブル。開発者向け管理画面やサーバー監視画面の一覧表示に馴染む。

CSS onlystaticcss</> コードを見る

128. 静的グラフ・チャートビジュアル見本

1月

2月

3月

4月

5月

05-12-01

縦棒グラフ(グリッド線背景・固定表示)

背景にうっすらとしたグリッド線を敷いた固定高さの縦棒グラフです。実データを持たない装飾用ビジュアルとして、資料紹介ページやブログ記事の挿絵に使えます。

CSS onlystaticcss</> コードを見る

月火水木金土

05-12-02

折れ線グラフ(SVGポリラインの静止ビジュアル)

SVGのpolylineとcircleだけで描いた固定表示の折れ線グラフです。週間推移のイメージを伝える装飾グラフィックとして紹介ページのサンプル表示に使えます。

CSS onlystaticcss</> コードを見る

部門別予算配分

企画 35% 開発 25% 営業 20% その他 20%

05-12-03

円グラフ(conic-gradientの静止パイチャート)

conic-gradientのみで描いた静止円グラフです。予算配分や構成比のイメージ図として、サービス紹介ページのアイキャッチに使えます。

CSS onlystaticcss</> コードを見る

68% 完了率

05-12-04

ドーナツチャート(中央に数値表示)

中央に数値を配置した静止ドーナツチャートです。達成率や進捗のイメージを直感的に伝えたいサービス紹介セクションに向きます。

CSS onlystaticcss</> コードを見る

1商品A92
2商品B78
3商品C65
4商品D41

05-12-05

横棒ランキンググラフ(順位バッジ付き)

1位から4位までの順位バッジを添えた横棒ランキング表示です。人気ランキングやアクセスランキングの見本イメージとして紹介ページに使えます。

CSS onlystaticcss</> コードを見る

Q1

Q2

Q3

Q4

製品A製品B製品C

05-12-06

積み上げ棒グラフ(複数系列固定表示)

3系列を積み上げた固定高さの棒グラフです。四半期ごとの内訳構成を示すイメージ図として、レポートページのサンプル表示に使えます。

CSS onlystaticcss</> コードを見る

05-12-07

エリアチャート(塗りつぶし折れ線・SVG)

折れ線の下側をグラデーションで塗りつぶしたエリアチャートの静止表現です。トレンド感を演出する装飾グラフィックとしてトップページの見出し脇などに使えます。

CSS onlystaticcss</> コードを見る

企画開発営業品質顧客

05-12-08

レーダーチャート(SVG固定描画)

5軸のレーダーチャートをSVGで固定描画したビジュアルです。スキル評価や多角的な比較イメージを見せるプロフィールページの見本として使えます。

CSS onlystaticcss</> コードを見る

少ない多い

05-12-09

ヒートマップ風カラーグリッド

濃淡で数値の大小を表現したヒートマップ風のカラーグリッドです。活動量や稼働状況をイメージで伝えるダッシュボードのサンプル表示に使えます。

CSS onlystaticcss</> コードを見る

今年度前年度

05-12-10

複数系列比較の折れ線+凡例

2系列を色分けして重ねた折れ線グラフと凡例のセットです。前年同月比などの比較イメージを見せるレポートページの見本として使えます。

CSS onlystaticcss</> コードを見る

72%のユーザーが継続利用

05-12-11

ワッフルチャート(100マス方眼の割合表示)

10×10のマス目のうち塗りつぶした数で割合を表すワッフルチャートの静止表現です。円グラフより直感的に「何%が該当するか」を伝えたいレポートページの図解に使えます。

CSS onlystaticcss</> コードを見る

四半期売上目標

050100150(百万円)

05-12-12

バレットチャート(目標ライン付き横棒)

低〜高の定性的な範囲を背景の濃淡で示し、実績バーと目標値の縦線を重ねたバレットチャートの静止見本です。KPIレポートで目標達成度を一目で伝えたい場面に使えます。

CSS onlystaticcss</> コードを見る

129. 静的KPIダッシュボードカード集

月間売上

¥1,284,300

▲ 12.4% 前月比

05-13-01

シンプルKPIカード(前月比矢印付き)

数値と前月比の増減矢印だけを配置した基本形。WordPressの管理画面風レポートページや会員ダッシュボードの見出し指標に使えます。

CSS onlystaticcss</> コードを見る

週間PV

48,120

過去7日間の推移

05-13-02

スパークライン付きKPIカード

大きな数値とミニ折れ線グラフを組み合わせた構成。WordPressのアクセス解析ウィジェットやレポート冒頭のサマリーに向きます。

CSS onlystaticcss</> コードを見る

警告

エラー発生率

4.8%

しきい値 3.0% を超過

05-13-03

色分け背景ステータスKPIカード

状態に応じて背景色そのものを変えて注意を引くカード。WordPressの監視・運用ダッシュボードで異常値を目立たせたい場面に使えます。

CSS onlystaticcss</> コードを見る

2,431

新規会員数

05-13-04

アイコン+数値+ラベルの3要素カード

丸いアイコンバッジと数値、ラベルを横並びにした定番構成。WordPressの会員サイトや管理画面のサマリータイルに使えます。

CSS onlystaticcss</> コードを見る

月間目標達成率

72%

目標 ¥3,000,000 中 ¥2,160,000

05-13-05

進捗率バー付きKPIカード

数値の下に達成率バーを添えた構成。WordPressの目標管理ページやキャンペーン進捗の可視化に向きます。

CSS onlystaticcss</> コードを見る

サマリー

1,204

訪問数

312

申込数

25.9%

CVR

05-13-06

複数指標コンパクトサマリーカード

3つの指標を区切り線付きで横に並べた省スペース構成。WordPressのランディングページ管理画面や週次レポートに使えます。

CSS onlystaticcss</> コードを見る

目標達成ゲージ

05-13-07

目標達成率ゲージ付きカード

半円のゲージで達成率を視覚的に示す構成。WordPressの営業成績ダッシュボードやプロジェクト進捗ページに使えます。

CSS onlystaticcss</> コードを見る

コンバージョン率

2.14%

▼ 3.2% 先週比で低下

05-13-08

増減率アイコン表示KPIカード

下降や上昇を色付きアイコンと%で明示する構成。WordPressの広告成果レポートやEC売上ページの変化点表示に向きます。

CSS onlystaticcss</> コードを見る

今週

386

先週

341

05-13-09

期間比較2列KPIカード

今週と先週の数値を左右に並べて比較する構成。WordPressの週次アクセスレポートや受注件数の比較表示に使えます。

CSS onlystaticcss</> コードを見る

売上ランキング

1 東京店 ¥842,300

2 大阪店 ¥613,900

3 福岡店 ¥488,150

05-13-10

ミニ棒グラフ内蔵の期間比較KPIカード

大きな数値の下に直近数週間分の推移をミニ棒グラフで添えた構成です。スパークライン(折れ線)とは違う視覚表現として、WordPressの受注件数レポートカードに使えます。

CSS onlystaticcss</> コードを見る

流入経路合計

32,410

検索 48% SNS 27% 広告 15% 紹介 10%

05-13-12

内訳タグ一覧付き合計値KPIカード

合計値の下に構成比を色分けチップで一覧表示する構成です。単一の進捗バーより内訳の種類が多い場合に見やすく、WordPressのアクセス流入元レポートカードに向きます。

CSS onlystaticcss</> コードを見る

130. 静的スケジュール・タイムテーブル見本

	月	火	水	木	金
1	国語	数学	英語	理科	社会
2	数学	英語	国語	体育	音楽
3	理科	社会	数学	国語	英語
4	体育	音楽	美術	数学	国語

05-14-01

週間時間割表(曜日×時限グリッド)

曜日を列、時限を行に配置した学校・塾向けの週間時間割表。教室予約状況や講座スケジュールページにそのまま埋め込める定番レイアウト。

CSS onlystaticcss</> コードを見る

時間	Aホール	Bホール
10:00	基調講演	受付
10:30	基調講演	ワークショップ
11:00	パネル討論	交流会
11:30	パネル討論	交流会

05-14-02

イベントタイムテーブル(縦時間軸・複数トラック)

開始時刻を縦軸にとり、会場・トラックごとの発表内容をrowspanで結合したイベント進行表。カンファレンスやセミナーの当日プログラムページに向く。

CSS onlystaticcss</> コードを見る

	会場A	会場B	会場C
13:00	AI活用事例	デザイン思考	組織づくり
14:00	UXリサーチ	採用戦略	データ分析
15:00	マーケ最新	開発体制	ブランド論

05-14-03

カンファレンス会場別スケジュール表

複数会場のセッションを色分けタグで並べたカンファレンス向けスケジュール表。同時開催イベントのタイムテーブルページに活用できる。

CSS onlystaticcss</> コードを見る

月〜金	10:00 - 20:00
土曜日	10:00 - 18:00
日曜日	11:00 - 17:00
祝日	定休日

05-14-04

営業時間案内テーブル

曜日ごとの営業時間と定休日を一覧化したシンプルな案内テーブル。店舗・クリニックのアクセスページや固定フッターに設置しやすい。

CSS onlystaticcss</> コードを見る

月

火

水

木

10:00

11:00

12:00

空き予約済受付終了

05-14-05

予約可能時間帯グリッド表

日付×時間帯を空き・予約済み・受付終了で色分けしたグリッド表。予約フォーム前の空き状況案内やサロン・施設ページに使える。

CSS onlystaticcss</> コードを見る

911131517

ミーティング

資料作成

打ち合わせ

休憩

レビュー

05-14-06

1日のタイムスケジュール(縦棒ブロック)

始業から終業までの1日の予定を縦棒の時間ブロックで表現したタイムスケジュール。研修プログラムやイベント当日の流れ紹介に向く。

CSS onlystaticcss</> コードを見る

日

月

火

水

木

金

土

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

05-14-07

月間カレンダー風スケジュール概要

月間カレンダーに予定のある日だけドットを添えたスケジュール概要表示。ブログのお知らせカレンダーやイベント告知ページのミニ表示に使える。

CSS onlystaticcss</> コードを見る

	月	火	水	木	金
佐藤	早	遅	早	休	遅
鈴木	遅	早	休	早	早
田中	休	遅	遅	早	休

早番遅番休み

05-14-08

色分けシフト勤務表

早番・遅番・休みを色分けした複数人のシフト勤務表。飲食店や店舗の勤怠管理画面・シフト共有ページに応用できる。

CSS onlystaticcss</> コードを見る

山田

佐藤

鈴木

高橋

05-14-09

複数人ガントチャート風スケジュール

担当者ごとの作業期間をバーで示したガントチャート風スケジュール。プロジェクト進行状況を紹介するポートフォリオや管理画面に向く。

CSS onlystaticcss</> コードを見る

8	02 15 28 41 54
9	07 20 33 46 59
10	12 25 38 51
11	04 17 30 43 56

05-14-10

電車時刻表風リスト

発着時刻を時・分で並べた電車時刻表風のリスト表示。送迎バスの時刻案内や施設の運行スケジュールページに活用できる。

CSS onlystaticcss</> コードを見る

09:30

受付開始会場ロビーにて

10:00

開会挨拶メインホール

10:15

基調講演ゲストスピーカー登壇

12:00

昼食休憩1階カフェスペース

05-14-11

アジェンダ形式リストスケジュール

時刻と項目を縦のライン+ドットでつないだ議事進行表・アジェンダ表示の静止見本です。セミナーや式典の当日プログラムページに使いやすい構成です。

CSS onlystaticcss</> コードを見る

拠点別ミーティング可能時間

東京 19:00 🌙

ロンドン 11:00 ☀️

ニューヨーク 06:00 🌕

シドニー 21:00 🌙

05-14-12

海外拠点向けタイムゾーン比較テーブル

各都市の現在時刻を昼夜アイコン付きで並べたタイムゾーン比較表の静止見本です。海外拠点があるWordPressコーポレートサイトのミーティング調整ページに使えます。

CSS onlystaticcss</> コードを見る

155. 静的ファネル・変換率チャート見本

訪問 12,400

登録 6,850

カート 3,120

決済 1,480

購入 620

05-15-01

縦型ファネル(台形積み重ね・5段階)

訪問から購入まで5段階の台形を積み重ねた縦型ファネルの静止見本です。WordPressのLP実績紹介セクションで、コンバージョン経路を図解するイメージ図として使えます。

CSS onlystaticcss</> コードを見る

訪問8,200

カート2,650

購入940

05-15-02

横型矢印ファネル(訪問→カート→購入)

3つの矢印形状を重ねて配置した横型のステップファネルです。ECサイトの購買導線を横並びで説明するバナーやスライド資料の挿絵に使えます。

CSS onlystaticcss</> コードを見る

サイト訪問 15,000

▼ 離脱 42%

商品詳細閲覧 8,700

▼ 離脱 55%

カート追加 3,900

▼ 離脱 38%

購入完了 2,420

05-15-03

離脱率(%)付きファネル

各段階の間に離脱率を挟んで表示する台形ファネルです。改善提案資料や分析レポートページで、ボトルネック工程を視覚的に示す図解として活用できます。

CSS onlystaticcss</> コードを見る

認知興味検討購入

05-15-04

グラデーションファネル(絞り込みを色で表現)

単一のグラデーション図形で描いた滑らかな漏斗形状です。色の濃淡だけで絞り込みのイメージを伝えるため、マーケティング資料の抽象的なアイキャッチに向きます。

CSS onlystaticcss</> コードを見る

100%

68%

41%

19%

訪問登録体験契約

05-15-05

円が段階的に縮小するファネル

円のサイズを段階的に小さくして絞り込みを表現したファネルです。サービス紹介ページで会員獲得までのステップを丸みのあるやわらかい印象で見せたい場合に使えます。

CSS onlystaticcss</> コードを見る

05-15-06

左右対称の砂時計型ファネル

絞り込みと再拡散を上下対称の砂時計形状で表した図です。獲得から定着、紹介による再拡大までの循環構造を1枚で見せたいピッチ資料の図解に使えます。

CSS onlystaticcss</> コードを見る

Web広告

SNS

店頭

05-15-07

複数チャネル比較の並列ファネル

3つの流入チャネルのファネルを横に並べて比較する見本です。チャネル別の成約率を並べて見せたいマーケティングレポートのサンプル図として使えます。

CSS onlystaticcss</> コードを見る

閲覧100%
カート58%
入力31%
購入17%

05-15-08

パーセンテージバー付き縦積みファネル

台形の小さなマーカーと横棒バーを組み合わせたリスト型ファネルです。管理画面ダッシュボードで各ステップの通過率を一覧表示するUI見本として使えます。

CSS onlystaticcss</> コードを見る

1

認知 9,400

2

興味 5,200

3

比較 2,600

4

購入 980

05-15-09

ステップ数字付きファネル図

各段階に丸い数字バッジを添えたファネルです。導入手順や購買プロセスの解説記事で、番号付きの工程として読み進めやすく見せたいときに使えます。

CSS onlystaticcss</> コードを見る

コア顧客 5%

中核層 18%

一般層 35%

潜在層 42%

05-15-10

ピラミッド型の逆ファネル(獲得構造)

下にいくほど幅が広がる逆さのファネルで、顧客層の裾野構造を表した図です。ブランドの顧客獲得ピラミッドを説明する会社紹介ページの図解に使えます。

CSS onlystaticcss</> コードを見る

AAcquisition100%
AActivation72%
RRetention48%
RReferral22%
RRevenue14%

05-15-11

AARRRモデル風5段階ファネル

Acquisition〜Revenueの5指標を色分けバッジと横棒で並べたグロースモデル図です。スタートアップのサービス紹介資料でKPI構造を説明するページに使えます。

CSS onlystaticcss</> コードを見る

目標 100%

76%

目標達成率

05-15-12

目標達成率を示すサーモメーター型ファネル

温度計のような縦型ゲージで目標に対する到達度を表した静止見本です。月間目標の進捗を視覚的に見せたい社内ダッシュボードや実績紹介ページに使えます。

CSS onlystaticcss</> コードを見る

80. 静的お客様の声・レビューカード集

“

対応がとても丁寧で、納品まで安心してお任せできました。仕上がりにも大満足です。

★★★★★

佐藤美咲様

06-05-01

引用符付きレビューカード(静止)

大きな引用符と星評価、氏名を組み合わせた定番のレビューカードです。導入事例やお客様の声のセクションに使えます。

CSS onlystaticcss</> コードを見る

★★★★★

スピード対応で助かりました。

田中健

★★★★★

デザインの提案が的確でした。

鈴木彩

★★★★☆

価格も含めて満足しています。

山本隆

06-05-02

横並び3件レビューグリッド(静止)

3件のレビューを固定で横並び表示するグリッドです。実績紹介ページや料金ページの下部に配置できます。

CSS onlystaticcss</> コードを見る

★★★★★ 中村由紀 — 打ち合わせから納品までとてもスムーズでした。
★★★★★ 小林誠 — 細かい要望にも丁寧に対応いただけました。
★★★★☆ 加藤遥 — 期待以上の仕上がりで満足です。

06-05-03

縦積みシンプルレビューリスト

レビューを縦に連ねたシンプルなリスト形式です。サイドバーやFAQ下のお客様の声欄に向いています。

CSS onlystaticcss</> コードを見る

高

★★★★★

高橋さんに担当していただき、初めての依頼でも安心して進められました。

高木里奈様

個人事業主

06-05-04

写真風アバター大きめレビューカード

イニシャル入りの大きな円形アバターを配置したレビューカードです。担当者の顔が見える安心感を演出できます。

CSS onlystaticcss</> コードを見る

4.6

★★★★★

128件のレビュー

5

4

3

2

1

06-05-05

評価サマリー付きレビュー一覧(星の内訳表示)

平均評価と星ごとの分布バーを併記したサマリーです。ショップページのレビュー総括表示に利用できます。

CSS onlystaticcss</> コードを見る

気になっていた点もすぐに相談でき、想像以上の仕上がりに驚きました。

★★★★★

吉吉田直子様

06-05-06

吹き出し型レビューカード

会話の吹き出し風にレビュー本文を見せるデザインです。チャットや対話に近い柔らかい印象を与えたいページに向いています。

CSS onlystaticcss</> コードを見る

THE VOICE

「品質とスピード、両方を高いレベルで実現している制作会社だ」

— 業界情報誌『Web Craft』2025年秋号より

06-05-07

メディア掲載風引用カード

新聞や雑誌の掲載記事のような硬派な体裁で引用文を見せるカードです。信頼性を強調したい実績紹介欄に適します。

CSS onlystaticcss</> コードを見る

松

松本恵

担当の方の説明が分かりやすく安心しました。

井上大輔

短納期でも品質が落ちず助かりました。

井

木

木村沙織

アフターフォローまで丁寧でした。

06-05-08

二列交互配置レビューリスト

アバターとテキストを左右交互に配置したレビュー一覧です。長いテスティモニアルページにリズムを付けられます。

CSS onlystaticcss</> コードを見る

石

石川智★★★★★

対応が早くて助かりました。

06-05-09

コンパクトミニレビューカード(小型)

情報を氏名・星評価・一言コメントに絞った小型のレビューカードです。複数を並べて一覧性を高めたい場合に便利です。

CSS onlystaticcss</> コードを見る

▶ 01:24

★★★★★

渡辺洋介様のインタビュー

06-05-10

動画サムネイル風レビューカード(静止)

再生ボタンのアイコンを添えた静止サムネイルで、動画インタビュー風の見た目を作るカードです。実際の再生機能は含みません。

CSS onlystaticcss</> コードを見る

N

中島圭@nakajima_shop

導入して3ヶ月、問い合わせ対応の時間が半分になりました。もっと早く使えばよかったです。

♡ 128↩ 34

06-05-11

SNS投稿風レビューカード(静止)

アイコン・アカウント名・いいね数を備えたSNS投稿のような体裁のレビューカードです。口コミの親しみやすさを演出できます。

CSS onlystaticcss</> コードを見る

Before

手作業の集計に毎月10時間かかっていました。

↓

After

自動化により作業時間が1時間に短縮しました。

— 小川誠様(製造業)

06-05-12

課題→解決ストーリー型レビューカード

導入前の課題と導入後の変化を対比させて見せるレビューカードです。導入効果を具体的に伝えたい事例紹介ページに使えます。

CSS onlystaticcss</> コードを見る

81. 静的プロフィール・チームメンバーカード集

田

田中誠一

代表取締役

06-06-01

縦型シンプルプロフィールカード

アバター・氏名・肩書のみの基本構成。会社概要ページの代表挨拶欄などに使える最小構成のカードです。

CSS onlystaticcss</> コードを見る

鈴

鈴木陽子

マーケティング部部長

広報・広告運用を統括

06-06-02

横型プロフィールカード

アバターとテキストを横並びに配置した形式。スタッフ紹介一覧やサイドバーのプロフィール欄に適します。

CSS onlystaticcss</> コードを見る

佐

佐藤蓮

デザイナー

X in @

06-06-03

SNSアイコン列付きプロフィールカード(静止)

氏名下にSNSアイコンを並べた構成。ライター紹介や制作チーム一覧でリンク先を示す用途に向きます。

CSS onlystaticcss</> コードを見る

A安田

B伊藤

C中村

D高橋

06-06-04

チームメンバーグリッド(4名並列)

4名分のミニカードを2×2グリッドで並べた一覧。会社紹介ページのチーム紹介セクションに向く構成です。

CSS onlystaticcss</> コードを見る

山

山本直樹

CTO

06-06-05

肩書バッジ付きプロフィールカード

役職名をバッジ状に強調表示する形式。経営陣紹介など役職の重要度を視覚的に伝えたい場面に有効です。

CSS onlystaticcss</> コードを見る

小

小林美咲

エンジニア

通信業界にて8年間システム開発に従事。現在はバックエンド設計を担当。

06-06-06

経歴サマリー付きプロフィールカード

短い経歴紹介文を添えた形式。採用ページのメンバー紹介や社員インタビュー導入部に適します。

CSS onlystaticcss</> コードを見る

松

松本健

セールスマネージャー

06-06-07

背景色ブロック型プロフィールカード

カード全体を単色ブロックで塗った形式。他のカードと組み合わせて色分けするチーム一覧に向きます。

CSS onlystaticcss</> コードを見る

岡

岡田亮

総務担当

06-06-08

枠線のみのミニマルプロフィールカード

塗りや影を持たず罫線のみで区切ったシンプルな形式。落ち着いた印象のコーポレートサイトに合います。

CSS onlystaticcss</> コードを見る

林

林千夏

アートディレクター

06-06-09

大きめアバター強調型プロフィールカード

アバター部分を大きく配置し人物の存在感を強調する形式。代表者紹介やキーマン紹介に適します。

CSS onlystaticcss</> コードを見る

村村上亮太営業
石石井麻衣広報
加加藤悠人事

06-06-10

リスト形式のチームメンバー一覧(横並び簡易表示)

アバター・氏名・担当を1行にまとめたリスト形式。人数が多い部署一覧をコンパクトに掲載できます。

CSS onlystaticcss</> コードを見る

"

丁寧なヒアリングとスピード感のある対応が魅力です。

西

西村悠

クライアント企業広報担当

06-06-11

アバターウォール型メンバー一覧

正方形タイルでアバターを敷き詰め、残人数を「+18」のように表示する形式。大人数の社員一覧をコンパクトに見せられます。

CSS onlystaticcss</> コードを見る

82. 静的ブログ記事一覧レイアウト集

春の庭づくり入門ガイド

おすすめカフェ巡り特集

在宅ワーク効率化の工夫

写真の構図テクニック集

週末に読みたい本5冊

朝食レシピまとめ

06-07-01

3カラムグリッド記事一覧

サムネイルとタイトルのカードを3列に並べる定番構成。WordPressの記事一覧ページやアーカイブページで幅広く使える配置。

CSS onlystaticcss</> コードを見る

旅行の持ち物チェックリスト

初めての海外旅行でも安心の準備リスト。

健康管理アプリ比較

続けやすさで選ぶおすすめ5選。

節約生活のコツ

今日から始められる家計見直し術。

06-07-02

横長リスト型記事一覧(サムネ+テキスト横並び)

正方形サムネイルと見出し・概要を横並びに配置した帯状の一覧。カテゴリページの一覧表示に馴染む構成。

CSS onlystaticcss</> コードを見る

特集：暮らしを整える収納術まとめ

01

玄関収納の工夫

02

キッチン動線の見直し

03

クローゼット整理術

04

書類のデジタル化

06-07-03

メイン記事+サブ記事リスト構成

左に大きな特集記事、右に小さな記事リストを添える2カラム構成。トップページの目玉記事の見せ方に向く。

CSS onlystaticcss</> コードを見る

オフィスチェア選びの基準

2026.06.20

在宅と出社のバランス論

2026.06.15

議事録テンプレート公開

2026.06.10

名刺デザインの基本

2026.06.02

06-07-04

縦積みシンプル記事リスト(サムネなし)

タイトルと日付だけを罫線で区切って並べる装飾を抑えたリスト。お知らせ一覧やテキスト中心の記事一覧に向く。

CSS onlystaticcss</> コードを見る

暮らし

四季を感じる部屋づくり

グルメ

秋の味覚を楽しむレシピ

仕事術

会議を短縮する進め方

暮らし

観葉植物の育て方入門

06-07-05

カテゴリタグ付きグリッド記事一覧

各カードの左上にカテゴリラベルを添えた2列グリッド。複数カテゴリが混在する一覧ページで分類を明示できる。

CSS onlystaticcss</> コードを見る

2026年7月

夏休みの自由研究アイデア

冷房と扇風機の併用術

2026年6月

梅雨時期の洗濯物対策

紫陽花が見られる庭園特集

06-07-06

日付区切り記事一覧(月別グルーピング)

「2026年7月」のような月見出しで記事を区切って並べる構成。更新頻度の高いブログのアーカイブ表示に向く。

CSS onlystaticcss</> コードを見る

特集：来年のトレンド予測総まとめ

小さな習慣で変わる毎日

週末カメラ散歩のすすめ

06-07-07

大小混在マガジン風記事グリッド

大きな特集カードと小さな記事カードを混在させたグリッド。雑誌のような緩急のある記事一覧を作れる。

CSS onlystaticcss</> コードを見る

01　シンプルライフの始め方

02　文房具好きが選ぶ逸品

03　読書ノートの作り方

04　休日の過ごし方リスト

05　旅先で出会った本屋

06-07-08

ミニマルテキストリンクリスト(装飾最小)

番号とタイトルだけを並べた装飾を最小限に抑えたリスト。テキスト重視のブログのサイドバー一覧に向く。

CSS onlystaticcss</> コードを見る

初心者向けカメラ設定講座

田中円 / ライター

パン作りで失敗しないコツ

佐藤陽 / 編集部

ミニマル収納の実例集

小林楓 / ライター

06-07-09

著者アイコン付き記事一覧

丸型アバターと著者名を各記事に添えたリスト。複数ライターが執筆するオウンドメディアの一覧に向く。

CSS onlystaticcss</> コードを見る

PICKUP

今週最も読まれた特集記事はこちら

1

朝活を続けるための工夫

2

資格取得のロードマップ

3

おうちカフェの淹れ方講座

06-07-10

ピックアップ+その他記事の2段構成

上段に注目記事を強調表示し、下段に番号付きの記事一覧を続ける構成。人気記事ランキングの表示にも応用できる。

CSS onlystaticcss</> コードを見る

1

今年買ってよかったガジェット10選

2

睡眠の質を高める習慣まとめ

3

初心者向け家庭菜園スタートガイド

06-07-11

タグクラウド+読了時間付き記事リスト

先頭にハッシュタグ風のカテゴリを並べ、各記事に読了目安時間を添えた一覧です。読者が記事を選びやすいブログトップに向きます。

CSS onlystaticcss</> コードを見る

83. 静的タイムライン・経歴表示

2019
入社・配属
新卒として入社し制作部に配属
2021
主任昇格
チームリーダーとして案件を統括
2024
部門責任者
制作部門全体のマネジメントを担当

06-08-01

縦線+ドット型タイムライン(静止)

左に縦線とドットを配置し右側に内容を並べる基本形の経歴表示です。プロフィールページや会社沿革の掲載に使えます。

CSS onlystaticcss</> コードを見る

2018
制作会社に入社
Web制作の基礎を習得
2020
独立・フリーランス
個人事業として案件を受注
2023
法人化
合同会社を設立し組織化

06-08-02

左右交互配置タイムライン(静止)

中央の縦線を軸に項目を左右交互に配置する経歴表示です。会社の沿革ページや実績紹介に向いています。

CSS onlystaticcss</> コードを見る

12017
大学卒業
22019
初就職
32022
転職
42025
現職

06-08-03

横型ステップタイムライン(静止)

経歴を横一列のステップとして並べる表示形式です。会社概要や採用ページの沿革紹介に活用できます。

CSS onlystaticcss</> コードを見る

2016
キャリアスタート
広告代理店にデザイナーとして入社
2020
アートディレクター
複数ブランドの制作統括を担当
2024
独立開業
自身のスタジオを設立

06-08-04

年号強調型タイムライン

年号を大きな文字で強調したシンプルな経歴リストです。プロフィールページで実績を印象的に見せたい場合に適します。

CSS onlystaticcss</> コードを見る

A
2018-2020
株式会社アルファ
マーケティング部にて広報業務
B
2020-2023
株式会社ベータ
営業企画リーダーとして活動
C
2023-現在
株式会社ガンマ
事業開発マネージャーに就任

06-08-05

会社ロゴ風アイコン付き職歴タイムライン

各職歴に色付きのイニシャルアイコンを添えた形式です。転職歴の多い経歴を視覚的に整理して見せられます。

CSS onlystaticcss</> コードを見る

要件定義を実施	2022	開発期間を30%短縮
新体制へ移行	2023	離職率が半減
全社ツール導入	2024	月次工数を20時間削減

06-08-06

二列比較タイムライン(左:出来事/右:成果)

出来事と成果を左右に対で並べる表示です。実績紹介ページや事業報告で成果を明確に示したい場合に役立ちます。

CSS onlystaticcss</> コードを見る

2019

資格取得

プロジェクトマネジメント資格を取得

2021

海外赴任

シンガポール支社に一年間勤務

2023

帰任・昇進

本社にて課長職に就任

06-08-07

カード型タイムライン(各項目が独立カード)

経歴の各項目を独立したカードとして並べる表示です。実績を区切って見せたい採用ページなどに向いています。

CSS onlystaticcss</> コードを見る

2015入社
2018主任
2021課長
2025部長

06-08-08

ミニマル年表(装飾最小)

線と年号だけで構成した装飾を抑えた年表です。落ち着いたトーンのコーポレートサイトの沿革欄に合わせやすい形式です。

CSS onlystaticcss</> コードを見る

2020
入社
2022
係長昇格
現在
チームリーダー

06-08-09

現在地マーカー付きタイムライン(静止)

「現在」の位置を固定表示で明示する経歴タイムラインです。進行中のキャリアやプロジェクトの現状表示に使えます。

CSS onlystaticcss</> コードを見る

2017
創業
個人事業として開業
2020
法人設立
株式会社として組織化
2024
支社開設
大阪に第二拠点を開設

06-08-10

グラデーション背景タイムライン

背景にやわらかなグラデーションを敷いた経歴表示です。企業サイトの沿革ページに華やかさを添えたい場合に向きます。

CSS onlystaticcss</> コードを見る

4月

新年度スタート

新入社員6名が加わり組織を拡大

8月

新オフィス移転

執務スペースを2倍に拡張

12月

年間表彰式

優秀チームを社内表彰

06-08-11

月表示カレンダー風タイムライン

各出来事の左に「4月」のような月ラベルを添えた年間イベント表示です。社内報や1年間の活動報告ページに向きます。

CSS onlystaticcss</> コードを見る

25%

要件整理

50%

設計・試作

75%

検証・調整

100%

完成・納品

06-08-12

進捗パーセンテージ表示付き経歴ステップ

各段階に達成率を数値で添えた横並びの経歴・工程表示です。プロジェクトの進行過程を紹介するページに使えます。

CSS onlystaticcss</> コードを見る

114. 静的記事内目次・読了ガイド見た目

はじめに
基本の考え方
具体的な手順
よくある失敗と対策
まとめ

06-10-01

シンプル番号付き目次リスト

数字と項目名だけを並べた装飾を抑えた目次。WordPressの記事冒頭に置くシンプルな目次見出しの見た目として使える。

CSS onlystaticcss</> コードを見る

1. 準備編

1-1. 必要な道具

1-2. 事前チェックリスト

2. 実践編

2-1. 基本の手順

2-2. 応用テクニック

06-10-02

階層インデント付き目次(H2/H3構造)

大見出しと小見出しをインデントで階層化した目次。章立てが多い解説記事やマニュアル系コンテンツの構成把握に役立つ。

CSS onlystaticcss</> コードを見る

記事の概要

準備するもの

手順の解説

ポイントまとめ

06-10-03

アイコン付き目次リスト

各項目の頭に丸型アイコンを添えた目次。図解が多い記事や手順解説記事で、内容の種類を視覚的に伝えられる。

CSS onlystaticcss</> コードを見る

CONTENTS

01. 記事を書く前の準備

02. 構成案の作り方

03. 見出しの付け方

04. 公開前のチェック

06-10-04

カード型の目次ボックス

角丸と枠線で囲んだカード内に目次をまとめる見た目。記事本文と視覚的に区切りたいブログ冒頭のボックスに向く。

CSS onlystaticcss</> コードを見る

5分で読了 2,400文字 4章構成

この記事を読むための目安情報です

06-10-05

横並びの読了時間+文字数バッジ

読了目安時間や文字数、章数をピル型バッジで並べる表示。記事タイトル直下に置くと読み始めの目安を伝えられる。

CSS onlystaticcss</> コードを見る

60%

読了進捗

残り約3分で読み終わります

06-10-06

円形プログレスリング(静止表示)

conic-gradientで特定の進捗割合を静止表示するリング型インジケーター。長文記事の読了目安の見た目サンプルに使える。

CSS onlystaticcss</> コードを見る

著者

田中円

公開日

2026.07.10

読了目安

6分

06-10-07

記事メタ情報バー(著者・日付・読了時間)

著者名、公開日、読了時間を区切り線付きで横並びにするメタ情報バー。記事タイトル直下に配置する定番の情報表示。

CSS onlystaticcss</> コードを見る

目次を見る

全6項目

タップすると目次が展開されます

06-10-08

折りたたみアイコン付き目次見出し(閉状態)

閉じた状態の三角アイコンと項目数を添えた目次見出し。アコーディオン式に開閉する目次UIの初期表示の見た目に使える。

CSS onlystaticcss</> コードを見る

TOC

この記事の目次

・記事の目的

・調査方法

・結果と考察

・今後の展望

06-10-09

サイドスティッキー目次カードのレイアウト枠

本文横に追従表示する想定のカード型目次の枠組み。長文記事のサイドバーに固定配置する目次デザインの下地として使える。

CSS onlystaticcss</> コードを見る

導入

背景と課題

解決の方法

実践例

まとめ

06-10-10

進捗ドット付きミニ目次(一部点灯)

読み進めた項目のドットを点灯させた状態を静止表示するミニ目次。現在地が分かる読了ガイドの見た目サンプルに使える。

CSS onlystaticcss</> コードを見る

読了メーター

現在地点：全体の65%

06-10-11

横型ステップスケール目盛り読了メーター

定規の目盛りのようなスケールに現在地点を三角マーカーで示す静止メーターです。長文マニュアルや白書のようなコンテンツで、全体に対する現在位置を直感的に伝えられます。

CSS onlystaticcss</> コードを見る

読了スタンプ

25%

50%

75%

100%

06-10-12

読了バッジコレクション(獲得済み/未獲得スタンプ風)

読み進めた区切りごとにスタンプを集めていくゲーム感覚の読了バッジ見本です。連載コラムや学習コンテンツの読了達成を可視化するギミックとして使えます。

CSS onlystaticcss</> コードを見る

132. 静的コメント・レビュー一覧見た目

田

田中健2026/07/01

とても分かりやすい記事でした、ありがとうございます。
佐

佐藤美咲2026/07/02

続編も楽しみにしています。
鈴

鈴木彩2026/07/03

参考になりました。実践してみます。

06-12-01

フラットなコメントリスト(アバター+日時)

アバターと本文、投稿日時を並べたシンプルなコメントリストです。WordPressの標準コメント欄をカスタマイズする際の土台として使えます。

CSS onlystaticcss</> コードを見る

中

中村由紀

このやり方で本当にうまくいくのでしょうか？

運

運営スタッフ Staff

はい、手順通りに進めていただければ問題ありません。

小

小林誠

私も同じ方法で解決しました。

06-12-02

ネスト返信付きコメントスレッド

親コメントに対する返信を字下げして表示するネスト構造のスレッド見た目です。WordPressの階層型コメント表示のデザイン案として活用できます。

CSS onlystaticcss</> コードを見る

山

山本隆

とても勉強になりました。

♡24
加

加藤遥

保存版です、ありがとうございます。

♡12
木

木村沙織

図解が分かりやすかったです。

♡7

06-12-03

いいね数付きコメント一覧

各コメントにいいねアイコンと件数を添えた一覧です。コミュニティサイトやブログのコメント欄に反応数を見せたい場合に使えます。

CSS onlystaticcss</> コードを見る

📌ベストコメント

高高橋直樹

実際に試してみたところ、想像以上の効果がありました！

伊

伊藤舞

私も同感です。

06-12-04

ピン留めベストコメント付きリスト

最も評価の高いコメントを上部に固定表示する「ベストコメント」付きの一覧です。Q&Aサイトやレビューページの目立たせたい投稿に利用できます。

CSS onlystaticcss</> コードを見る

編

編集部著者

ご質問ありがとうございます、追記しました。
松

松本恵常連

いつも参考にしています。
井

井上大輔

初めてコメントします、勉強になります。

06-12-05

投稿者バッジ付きコメントリスト

投稿者や常連ユーザーを示すバッジをコメントに添えたデザインです。運営からの返信を分かりやすく区別したいWordPressサイトに向いています。

CSS onlystaticcss</> コードを見る

新

新田恵一

これはとても興味深い視点ですね。

▾返信を表示（3件）

原

原田誠

別の記事も読んでみます。

▾返信を表示（1件）

06-12-06

折りたたみ返信テキスト表示

返信をあらかじめ折りたたみ、「返信を表示」というテキストのみを見せる静止デザインです。長くなりがちなコメント欄をコンパクトに見せる例として使えます。

CSS onlystaticcss</> コードを見る

?

匿名ユーザー2026/07/01

同じ悩みを抱えていたので助かりました。
?

名無しさん2026/07/02

参考にさせていただきます。
?

ゲスト2026/07/03

もう少し詳しく知りたいです。

06-12-07

匿名コメント一覧

名前の代わりに「匿名ユーザー」を表示するコメント一覧です。匿名投稿を受け付ける掲示板やアンケートページのデザインに応用できます。

CSS onlystaticcss</> コードを見る

佐々木悠★★★★★

期待以上の品質で満足しています。
近藤麻衣★★★★☆

サポート対応もスムーズでした。
前田剛★★★☆☆

価格の割には十分な内容でした。

06-12-08

評価点数付きレビューコメントリスト

コメントごとに星の評価点を添えたレビューリストです。商品ページや口コミサイトのレビュー一覧に組み込めます。

CSS onlystaticcss</> コードを見る

橋

橋本玲奈

届いた商品はこんな感じでした！

06-12-09

画像添付付きコメント

コメント本文に画像サムネイルを添付した見た目です。レビュー投稿に写真を添えるWordPressのショップサイトなどで参考になります。

CSS onlystaticcss</> コードを見る

中
中野智也
丁寧な説明で理解が深まりました。
🚫
このコメントは通報により非表示になっています。
岡
岡田拓海
早速試してみようと思います。

06-12-10

通報・非表示コメントのプレースホルダー

通報により非表示になったコメントのプレースホルダー表示を含む一覧です。モデレーション機能のUI設計例として活用できます。

CSS onlystaticcss</> コードを見る

4.6

★★★★★

全87件のレビュー

5

4

3

2

1

06-12-11

星の内訳グラフ付きレビュー集計

平均評価と星ごとの件数割合を横棒グラフで示す集計表示です。商品ページやサービス紹介ページのレビュー欄冒頭にまとめとして設置できます。

CSS onlystaticcss</> コードを見る

石田幸子✓ 購入済み

梱包も丁寧で、届いた商品も期待通りでした。

湯浅拓

サイトのデザイン見本を参考にさせていただきました。

村上玲✓ 購入済み

リピート購入です。安定した品質で安心できます。

06-12-12

購入済みバッジ付きレビュー一覧

実際の購入者であることを示すバッジを添えたレビュー一覧の静止デザインです。ECサイトのレビュー欄で信頼性を高めたい場合の見た目見本として使えます。

CSS onlystaticcss</> コードを見る

133. 静的著者・執筆者クレジット見た目

中

中村彩

ライター

06-13-01

シンプル横並びバイライン

アバター・氏名・肩書のみの最小構成。記事冒頭のタイトル直下に添える定番の著者表記に使えます。

CSS onlystaticcss</> コードを見る

吉

吉田陸

編集者

X in @

06-13-02

SNSリンク付き著者ボックス

氏名の右側にSNSアイコンを並べた箱型構成。記事末尾でSNSフォローを促したいメディアサイトに向きます。

CSS onlystaticcss</> コードを見る

06-13-03

経歴一言紹介付き著者フッターカード

短い経歴文を添えた記事末尾用カード。読者に執筆者の専門性を伝えたいブログ記事に適します。

CSS onlystaticcss</> コードを見る

A安藤蓮

+

B木村咲

06-13-04

共著者の横並び表示

2名以上の著者アバターを並べる複数著者表記。共同執筆記事や対談記事のクレジット欄に使えます。

CSS onlystaticcss</> コードを見る

監

監修

医療法人桜井クリニック桜井誠

06-13-05

監修者バッジ付きクレジット

「監修」バッジを添えて信頼性を明示する表記。医療・法律・金融など専門性を要する記事に有効です。

CSS onlystaticcss</> コードを見る

渡

渡辺岳・ 2026年7月10日更新

06-13-06

更新日+著者の複合表記

著者名と最終更新日を1行にまとめた表記。情報鮮度が重要なノウハウ系記事の冒頭に適します。

CSS onlystaticcss</> コードを見る

堀

堀内さやか

グルメライター

この著者の記事一覧 →

06-13-07

著者の他記事リンク付きボックス

「この著者の記事一覧」への導線テキストを添えた構成。回遊率を高めたいオウンドメディア向けです。

CSS onlystaticcss</> コードを見る

酒酒井大輔

06-13-08

丸アイコン+名前のミニマルバイライン

アイコンと名前のみで肩書を省いた最小サイズの表記。一覧ページのカード内クレジットに向きます。

CSS onlystaticcss</> コードを見る

Ed

編集部

Web編集チーム

06-13-09

編集部クレジット表記

個人名ではなく編集部・チーム名義で表記する形式。取材記事やニュース記事の署名欄に使えます。

CSS onlystaticcss</> コードを見る

藤藤井智也 ▾

プロフィールを表示

06-13-10

著者プロフィール展開前のコンパクト表示

詳細プロフィールを折りたたんだ状態の静止表示。クリックで開く想定のUIをデザイン見本として提示します。

CSS onlystaticcss</> コードを見る

翻

翻訳

原著: J. Carter / 翻訳: 小川 real

06-13-11

原著者+翻訳者の併記クレジット

海外記事の翻訳版であることを示す、原著者と翻訳者を並べた表記です。海外ニュースの翻訳記事や海外事例紹介のWordPressサイトに使えます。

CSS onlystaticcss</> コードを見る

南

南千夏

ライター

128記事

3.2kフォロワー

06-13-12

執筆数・フォロワー数付き著者カード

執筆記事数とフォロワー数を数字で添えた著者カードです。実績を数値で示したいメディアサイトの著者紹介欄に向きます。

CSS onlystaticcss</> コードを見る

157. 静的SNS埋め込みカード見た目

M

みなも工房 @minamo_koubou

新作の器がギャラリーに並びました。手のひらに収まるサイズ感が好評です。ぜひ店頭でご覧ください。

18 42 210

06-15-01

X(旧Twitter)風投稿埋め込みカード

アイコン・アカウント名・本文・返信数などをまとめたX風の静止カードです。WordPressの実績紹介やお知らせ欄にSNS投稿の見た目だけを引用したい場合の見本になります。

CSS onlystaticcss</> コードを見る

green_leaf_life ⋮

1,204件のいいね

green_leaf_life 今日の朝ごはん、庭のハーブを添えて。

06-15-02

Instagram風正方形投稿埋め込みカード

正方形の写真枠とアクションアイコン、キャプションを備えたInstagram投稿風の静止カードです。ショップやカフェサイトの「Instagramで話題」欄の見本に使えます。

CSS onlystaticcss</> コードを見る

やまと工務店 3時間前 ·

リフォーム完成見学会を今週末に開催します。ご予約はプロフィールのリンクから。

👍 86コメント12件・シェア5件

いいね!コメントシェア

06-15-03

Facebook風シェア投稿カード

投稿者名・本文・画像・アクションバーを備えたFacebook投稿風の静止カードです。企業ページやイベント告知の埋め込みイメージ確認に活用できます。

CSS onlystaticcss</> コードを見る

12:04

初心者向け盆栽の育て方講座

green channel · 3.2万回視聴 · 2週間前

06-15-04

YouTube動画埋め込みサムネイルカード

再生時間バッジと再生ボタンを重ねたサムネイル、チャンネル情報を配置したYouTube風の静止カードです。ブログ記事内の関連動画紹介欄の見本になります。

CSS onlystaticcss</> コードを見る

32.1k 640 1.5k

@studio_kobo

木工の小箱づくり、仕上げ工程だけ切り出しました。

06-15-05

TikTok風縦型動画埋め込みカード

縦長比率の背景に右側のアクションアイコン列とキャプションを重ねたTikTok風の静止カードです。ショート動画コンテンツの見た目確認用サンプルとして使えます。

CSS onlystaticcss</> コードを見る

佐々木亮 · 2親等

株式会社ノート / 事業開発マネージャー

1日前

新規事業のプレスリリースを公開しました。チーム一丸で取り組んだ成果です。

👍 96件の反応コメント8件

06-15-06

LinkedIn風ビジネス投稿カード

役職・所属を添えたヘッダーとリアクション数を備えたLinkedIn風の静止カードです。採用ページや会社ニュースの引用イメージ見本として利用できます。

CSS onlystaticcss</> コードを見る

保存

北欧風リビングのレイアウト実例集

interior-note.example

06-15-07

Pinterest風ピン埋め込みカード

縦長の画像と保存ボタン、参照元サイト名を備えたPinterest風の静止カードです。インテリアやレシピなど画像中心コンテンツの引用見本に向いています。

CSS onlystaticcss</> コードを見る

この記事をシェアする

06-15-08

複数SNSアイコン付きシェアボタン列(静止)

X・Facebook・LINE・Instagram・YouTubeの円形アイコンを横に並べたシェアボタン列です。記事末尾のシェア導線デザインの見本として配置できます。

CSS onlystaticcss</> コードを見る

note-blog.example

小さな工房が3年で全国に届けるまでの軌跡

職人の手仕事とオンライン販売を両立させた事例を、写真とともに振り返ります。

06-15-09

OGPプレビューカード(タイトル・説明・サムネイル)

サムネイル・ドメイン名・タイトル・説明文を備えたOGP風のリンクプレビューカードです。URLを貼るとSNSでどう表示されるかの見た目確認見本になります。

CSS onlystaticcss</> コードを見る

工房だより

今週の新作を店頭に並べました。

<blockquote class="embed-post">
<a href="#">投稿を見る</a>
</blockquote> コピー

06-15-10

埋め込みコード表示付きカード

上部に投稿プレビュー、下部に埋め込み用HTMLコード風の表示を配置したカードです。SNS投稿の埋め込み機能を紹介するブログ記事などの見本に使えます。

CSS onlystaticcss</> コードを見る

@shop_official のフィード

06-15-11

SNSフィード一覧グリッド

正方形の投稿サムネイルを格子状に並べたSNSフィード風グリッドです。ショップサイトのInstagramギャラリー欄の構成検討に使える静止見本です。

CSS onlystaticcss</> コードを見る

まちの編集室

この特集、取材の裏話も面白いのでぜひ読んでほしいです。

地域リノベ協会

空き家再生プロジェクトの最新事例をまとめました。今年は12件が完成しました。

06-15-12

引用リツイート風の入れ子カード

コメントの下に元投稿を枠で囲んで表示する、引用リツイート風の入れ子構造カードです。他アカウントの投稿を紹介する記事レイアウトの見本になります。

CSS onlystaticcss</> コードを見る

39. カラーパレット・配色システム

ブランドカラー

メイン#2563EB

サブ#0F172A

アクセント#F59E0B

07-04-01

ブランドカラーパレット表示

メイン・サブ・アクセントの3色をスウォッチとカラーコードで一覧化した見本です。WordPressサイト構築時の配色ガイドライン共有に使えます。

CSS onlystaticcss</> コードを見る

プランA

プランB

プランC

07-04-02

アクセント配色3パターン

共通のニュートラル地に対して異なるアクセント色を当てた3案を並べた比較見本です。WordPressテーマのカラーバリエーション検討に役立ちます。

CSS onlystaticcss</> コードを見る

07-04-03

ニュートラル配色システム

グレースケールを明から暗まで段階的に並べたスウォッチ一覧です。テキストや背景の階調設計をまとめて確認したいときの見本になります。

CSS onlystaticcss</> コードを見る

ヒーロー用

バッジ用

CTA用

フッター用

07-04-04

グラデーション見本帳

用途別に色を割り当てたグラデーションを4種並べた見本帳です。ヒーロー背景やバッジ、CTAなどWordPressサイト各所の配色選定に使えます。

CSS onlystaticcss</> コードを見る

Light

Dark

07-04-05

ダークモード配色比較

ライトモードとダークモードの配色を左右に並べて見比べる見本です。WordPressサイトのダークモード対応設計時の色決めに役立ちます。

CSS onlystaticcss</> コードを見る

成功#16A34A

警告#F59E0B

エラー#EF4444

情報#3B82F6

07-04-06

セマンティックカラー一覧

成功・警告・エラー・情報の4色をラベルとカラーコードで整理した見本です。フォームやアラート表示の色設計基準として参照できます。

CSS onlystaticcss</> コードを見る

差し色 #ef4444

07-04-07

モノクロ+差し色配色

白黒を基調にした構成に1色だけ差し色を添えた配色例です。写真ギャラリーやミニマルなデザインのアクセント選定の見本になります。

CSS onlystaticcss</> コードを見る

07-04-08

パステル配色セット

淡いトーンで統一した5色のスウォッチセットです。子ども向けサイトや優しい雰囲気のランディングページの配色見本に使えます。

CSS onlystaticcss</> コードを見る

見出しテキスト

ボタン

07-04-09

ハイコントラスト配色

背景と文字・ボタンの明度差を大きく取ったアクセシビリティ重視の組み合わせ見本です。視認性を優先したいサイトの配色検討に使えます。

CSS onlystaticcss</> コードを見る

07-04-10

テーマカラー切替見本(静的)

同一レイアウトを3つの配色パターンで並べた比較見本です。色以外の構成は共通のため、配色だけの印象差をそのまま確認できます。

CSS onlystaticcss</> コードを見る

60% ベース 30% 補助 10% アクセント

07-04-11

60-30-10配色ルール見本

ベース60%・補助30%・アクセント10%の黄金比を帯グラフで可視化した見本です。WordPressサイト全体の配色バランスを決める基準として使えます。

CSS onlystaticcss</> コードを見る

補色

類似色

トライアド

07-04-12

配色理論スキーム見本(補色・類似色・トライアド)

色相環の関係に基づく3種の配色パターンをスウォッチで並べた見本です。WordPressサイトの配色を理論立てて決めたいときの参考資料になります。

CSS onlystaticcss</> コードを見る

42. 静的装飾・区切り線

07-05-01

シンプル罫線バリエーション

実線・破線・点線の3種類の区切り線を並べた見本です。WordPressのセクション区切りや記事内の話題転換の仕切りに使えます。

CSS onlystaticcss</> コードを見る

07-05-02

ドット区切り線

丸いドットを等間隔に並べた区切り線です。柔らかい印象を出したいブログ記事やプロフィールページの節目に向いています。

CSS onlystaticcss</> コードを見る

07-05-03

グラデーション罫線

両端に向けて色が薄くなるグラデーションの一本線です。強調しすぎない上品な区切りとして、料金表やセクション間の仕切りに使えます。

CSS onlystaticcss</> コードを見る

07-05-04

アイコン付き区切り線

罫線の中央に小さな星形アイコンを配置した装飾です。フォトギャラリーや実績紹介の区切りに華やかさを添えます。

SVGstaticcss</> コードを見る

または

07-05-05

テキスト入り区切り線

左右の罫線の中央に「または」の文字を配置した区切りです。ログインフォームの選択肢の間や、代替手段の提示に使えます。

CSS onlystaticcss</> コードを見る

07-05-06

二重線区切り

太さの異なる2本の線を近接させた区切りです。上品で落ち着いた印象を与えたい会社案内ページなどの仕切りに向いています。

CSS onlystaticcss</> コードを見る

07-05-07

ジグザグ区切り

三角形の連続で構成した静止したギザギザ罫線です。切り取り線のような見た目で、クーポンやチケット風デザインの仕切りに使えます。

SVGstaticcss</> コードを見る

CORNER FRAME

07-05-08

装飾コーナー飾り

四隅に短いL字の線を配置したフレーム風の装飾です。証書や特典案内など、内容を額縁のように囲みたい場面に使えます。

CSS onlystaticcss</> コードを見る

“

静かな余白がデザインを引き立てる。

07-05-09

引用符装飾ボックス

大きな引用符のグラフィックを添えた囲みボックスです。お客様の声や著名な一言を掲載するセクションに使えます。

CSS onlystaticcss</> コードを見る

SPECIAL

07-05-10

囲み枠装飾(角の飾り付き)

細い囲み枠の四隅にアクセントカラーの飾りを重ねたデザインです。特典やキャンペーン情報を目立たせる囲み枠として使えます。

CSS onlystaticcss</> コードを見る

07-05-11

波線区切り

なめらかな正弦波を1本描いた静止した区切り線です。柔らかい印象を出したいブログ記事や写真ギャラリーのセクション間の仕切りに使えます。

SVGstaticcss</> コードを見る

見出しサンプル

07-05-12

見出し用ツートンアンダーライン

濃色の短い線と淡色の長い線を並べた見出し用の下線装飾です。WordPressの記事内小見出しの下に添えてセクションの区切りを明確にできます。

CSS onlystaticcss</> コードを見る

84. 静的アイコンセット・ピクトグラム集

07-07-01

線画スタイルアイコンセット

細い線だけで構成したアウトラインアイコンを横に並べた見本です。ナビゲーションやメニュー項目のアイコン表示に使えます。

CSS onlystaticcss</> コードを見る

07-07-02

塗りつぶしスタイルアイコンセット

ベタ塗りのシルエットで表現したアイコン群です。強い視認性が必要なボタンやラベル装飾に向きます。

CSS onlystaticcss</> コードを見る

07-07-03

円背景付きアイコンセット

各アイコンを円形の色付き背景に収めた見本です。サービス紹介セクションの特徴アイコンなどに使えます。

CSS onlystaticcss</> コードを見る

07-07-04

角丸四角背景付きアイコンセット

角丸の四角形背景にアイコンを配置した見本です。カード型のメニューや機能一覧の装飾に利用できます。

CSS onlystaticcss</> コードを見る

07-07-05

二色配色アイコンセット(デュオトーン)

濃淡2色を組み合わせたデュオトーン表現のアイコン見本です。柔らかい印象を与えたい特集ページに向きます。

CSS onlystaticcss</> コードを見る

07-07-06

業種別ピクトグラムセット

店舗・配送・決済・地図の各業種を表す実用的なピクトグラムをまとめた見本です。総合案内ページの案内表示に使えます。

CSS onlystaticcss</> コードを見る

07-07-07

SNSブランドアイコン風セット

共有・チャット・カメラ・再生などSNSでよく使われる汎用形状のアイコンをまとめた見本です。フォローボタン周りの装飾に使えます。

CSS onlystaticcss</> コードを見る

07-07-08

天気アイコンセット

晴れ・曇り・雨・雪・雷を表現したシンプルな天気アイコンの見本です。天気予報や生活情報のウィジェットに使えます。

CSS onlystaticcss</> コードを見る

3 12 5 99

07-07-09

数値バッジ付きアイコンセット

通知件数を示す小さな数値バッジをアイコン右上に添えた見本です。カート件数や通知件数の表示に使えます。

CSS onlystaticcss</> コードを見る

07-07-10

グラデーション背景アイコンセット

円形の背景にグラデーションを敷いたアイコン見本です。目を引かせたい特徴紹介やサービス一覧に使えます。

CSS onlystaticcss</> コードを見る

07-07-11

角丸タグ型背景アイコンセット

横長の角丸タグを背景にしたアイコン見本です。機能一覧やラベルバッジと組み合わせた表示に使えます。

CSS onlystaticcss</> コードを見る

07-07-12

点線枠フレーム付きピクトグラムセット

破線の四角枠でアイコンを囲んだ見本です。編集中や下書き段階の項目を示すUIパーツの装飾に使えます。

CSS onlystaticcss</> コードを見る

85. 静的イラスト風装飾グラフィック集

07-08-01

幾何学図形コラージュ装飾

円・三角・四角を組み合わせた静止コラージュ装飾。見出し背景やセクション区切りの飾りとして使える。

CSS onlystaticcss</> コードを見る

07-08-02

抽象的な波線・曲線装飾グラフィック

有機的な曲線を重ねた静止装飾。ヒーローセクションの背景アクセントに利用しやすい。

SVGstaticcss</> コードを見る

重要な語句

強調ワード

07-08-03

手描き風下線・囲みスクリブル装飾

手描き風の線でキーワードを囲む静止装飾。ブログ本文中の強調表現として使える。

CSS+SVGstaticcss</> コードを見る

07-08-04

花・植物モチーフの装飾イラスト

シンプルな一輪の花をかたどった静止イラスト。ナチュラル系サイトの見出し装飾に向く。

SVGstaticcss</> コードを見る

07-08-05

都市・建物シルエットイラスト

高さの異なるビル群を並べた静止シルエット。フッターや地域紹介セクションの装飾に使える。

CSS onlystaticcss</> コードを見る

07-08-06

人物シルエットイラスト(汎用)

大きさの異なる人型シルエットを並べた静止イラスト。チーム紹介やコミュニティ訴求に使える。

SVGstaticcss</> コードを見る

Hello

OK!

07-08-07

吹き出し・会話装飾グラフィック

形の異なる吹き出しを組み合わせた静止装飾。FAQやチャット風コンテンツの見出しに向く。

CSS onlystaticcss</> コードを見る

07-08-08

星・キラキラ装飾グラフィック(静止)

大小の星形を散りばめた静止装飾。キャンペーンバナーやおすすめラベル周りの飾りに使える。

SVGstaticcss</> コードを見る

07-08-09

地球・世界地図風装飾イラスト

簡略化した地球儀をかたどった静止イラスト。海外展開やグローバル訴求の見出しに使える。

SVGstaticcss</> コードを見る

07-08-10

矢印・方向性装飾グラフィックセット

直線・曲線・シェブロンなど形の異なる矢印をまとめた静止装飾。手順案内や誘導表現に使える。

CSS+SVGstaticcss</> コードを見る

07-08-11

山並み・稜線シルエットイラスト

重なる山のシルエットと太陽を配した静止イラスト。アウトドアや地域紹介ページのフッター装飾に使える。

SVGstaticcss</> コードを見る

07-08-12

紙吹雪・お祝いコンフェッティ装飾

色とりどりの紙片モチーフを散らした静止装飾。キャンペーン完了画面やお祝いメッセージの背景に使える。

CSS onlystaticcss</> コードを見る

86. 静的パターン・テクスチャ背景集

07-09-01

ドット柄背景パターン

均一な間隔で水玉を並べた静止背景。セクション区切りやカード背景のさりげない装飾としてWordPressサイトに使える。

CSS onlystaticcss</> コードを見る

07-09-02

ストライプ柄背景パターン

斜めの縞模様を敷き詰めた静止背景。バナーやセール告知セクションの下地としてWordPressで利用しやすい。

CSS onlystaticcss</> コードを見る

07-09-03

チェック柄背景パターン

市松模様の格子柄を組んだ静止背景。フッターやコンテンツエリアの背景アクセントとしてWordPressサイトに導入できる。

CSS onlystaticcss</> コードを見る

07-09-04

ジグザグ柄背景パターン

三角形の連続で構成したギザギザ模様の静止背景。ポップな印象のランディングページ背景としてWordPressで活用できる。

CSS onlystaticcss</> コードを見る

07-09-05

六角形(ハニカム)柄背景パターン

六角形が隙間なく並ぶハニカム模様の静止背景。技術系や製造業サイトの見出し背景としてWordPressで映える。

CSS onlystaticcss</> コードを見る

07-09-06

グラデーションメッシュ背景

複数の放射グラデーションを重ねた静止のメッシュ背景。ヒーローエリアの奥行きある背景としてWordPressサイトに使える。

CSS onlystaticcss</> コードを見る

07-09-07

紙・布のようなノイズテクスチャ背景

小さな粒を散らしてざらついた質感を表現した静止背景。ナチュラルテイストなサイトの下地としてWordPressで使いやすい。

CSS onlystaticcss</> コードを見る

07-09-08

幾何学タイル柄背景パターン

ひし形タイルを規則的に繰り返した静止背景。クリエイティブ系ポートフォリオの区切りセクションとしてWordPressで利用できる。

CSS onlystaticcss</> コードを見る

07-09-09

波型ライン柄背景パターン

円弧を連続させて波線に見せた静止背景。優しい雰囲気のセクション背景としてWordPressサイトに導入しやすい。

CSS onlystaticcss</> コードを見る

07-09-10

グラデーションオーバーレイ付き単色背景

単色ベースに斜めの光沢グラデーションを重ねた静止背景。プロフィールカードやCTA背景としてWordPressで扱いやすい。

CSS onlystaticcss</> コードを見る

07-09-11

クロスハッチ柄背景パターン

斜め二方向の細線を交差させた静止背景。ノート風・図面風の質感を出したいコンテンツエリアにWordPressで使える。

CSS onlystaticcss</> コードを見る

07-09-12

同心円ウェーブ背景パターン

波紋のように広がる同心円を敷き詰めた静止背景。落ち着いた雰囲気のセクション区切りとしてWordPressサイトに導入できる。

CSS onlystaticcss</> コードを見る

137. 静的グラデーションメッシュ・ぼかし背景集

07-13-01

パステルマルチブロブメッシュ背景

複数のパステルカラーのブロブを重ねた柔らかい静止メッシュ背景。トップページのヒーローエリアや女性向けサイトの下地としてWordPressで使いやすい。

CSS onlystaticcss</> コードを見る

07-13-02

ダークベース×光彩にじみメッシュ背景

漆黒に近いベースへピンクとシアンの光彩を滲ませた静止背景。ゲームサイトやテック系LPのファーストビュー背景としてWordPressで映える。

CSS onlystaticcss</> コードを見る

07-13-03

モノトーンソフトシャドウグラデーション背景

グレー単色の濃淡だけで陰影をつけた控えめな静止背景。企業サイトやコーポレートページのセクション背景としてWordPressで扱いやすい。

CSS onlystaticcss</> コードを見る

07-13-04

2色のみのシンプルメッシュグラデーション背景

単一カラーの濃淡2箇所だけで構成したミニマルな静止背景。フォーム画面やシンプルなCTAセクションの下地としてWordPressに導入できる。

CSS onlystaticcss</> コードを見る

07-13-05

コーナー光源風グラデーション背景

右上の一角から光が差し込むような静止グラデーション背景。高級感を出したいブランドサイトのヒーロー背景としてWordPressで活用できる。

CSS onlystaticcss</> コードを見る

07-13-06

虹色マルチカラーメッシュ背景

5色のブロブを分散配置した虹色に近い静止メッシュ背景。イベントページやクリエイティブ系ポートフォリオの背景としてWordPressで目を引く。

CSS onlystaticcss</> コードを見る

07-13-07

くすみカラーの落ち着いたメッシュ背景

彩度を抑えたくすみカラーを重ねた大人っぽい静止メッシュ背景。ナチュラル系ショップや読み物コンテンツの背景としてWordPressで使いやすい。

CSS onlystaticcss</> コードを見る

07-13-08

中央発光スポットライトグラデーション背景

中央だけがぼんやり明るく光るスポットライト風の静止背景。動画紹介セクションやモーダル背後の演出としてWordPressで活用できる。

CSS onlystaticcss</> コードを見る

07-13-09

上下2分割メッシュグラデーション背景

上半分と下半分で異なる色調のメッシュを組み合わせた静止背景。比較コンテンツやビフォーアフター紹介の下地としてWordPressで使える。

CSS onlystaticcss</> コードを見る

07-13-10

粒子ノイズ重ねぼかしメッシュ背景

にじむブロブに細かい粒子ノイズを重ねてざらつきを加えた静止背景。フィルム調やヴィンテージ演出のセクション背景としてWordPressで使える。

CSS onlystaticcss</> コードを見る

07-13-11

斜めストライプ×グラデーションぼかし背景

大きく斜めに走る帯状グラデーションをぼかして重ねた静止背景。スポーツ系サイトや躍動感を出したいキャンペーンページの背景としてWordPressで使いやすい。

CSS onlystaticcss</> コードを見る

07-13-12

四隅グラデーションフレーム背景

四隅にだけ色を配置し中央を明るく空けた静止フレーム風背景。テキストを中央に大きく配置したいタイトルページの背景としてWordPressで扱いやすい。

CSS onlystaticcss</> コードを見る

158. 静的写真フィルター・カラーグレーディング見本

sepia(.8) contrast(.95)

07-14-01

セピア調フィルター見本

CSSのfilter:sepia()を固定値で適用した褐色トーンの写真見本です。WordPressの思い出アルバムページや歴史・老舗企業サイトの世界観づくりに使えます。

CSS onlystaticcss</> コードを見る

grayscale(1) contrast(1.05)

07-14-02

モノクロ(グレースケール)フィルター見本

filter:grayscale(1)で彩度を完全に落とした白黒写真見本です。ブランドサイトのギャラリーやプレスリリースページのシックな演出に活用できます。

CSS onlystaticcss</> コードを見る

sepia(.35) saturate(.6) brightness(1.1)

07-14-03

ビンテージ・褪色風フィルター見本

彩度を抑えつつ明るさを持ち上げ、古い印画紙のような褪色感を出した見本です。WordPressのレトロテイストなランディングページや同窓会サイトに向いています。

CSS onlystaticcss</> コードを見る

contrast(1.7) brightness(.85)

07-14-04

ハイコントラスト・ドラマチック風フィルター見本

コントラストを強め明暗差をくっきりさせた重厚な写真見本です。映画・音楽アーティストサイトやドラマチックなヒーロー背景の下地に使えます。

CSS onlystaticcss</> コードを見る

teal shadow / orange highlight

07-14-05

ティール&オレンジ風カラーグレーディング見本

影を青緑、ハイライトを橙に振った映画的な配色見本です。WordPressの映像制作会社やアウトドアブランドのビジュアル演出に応用できます。

CSS onlystaticcss</> コードを見る

sepia(.25) saturate(1.5) hue-rotate(-8deg)

07-14-06

暖色系フィルム風フィルター見本

彩度を上げつつ色相を暖色側へ寄せたフィルム写真風の見本です。WordPressのカフェ・雑貨店サイトなど温かみを演出したいギャラリーに使えます。

CSS onlystaticcss</> コードを見る

blur(3px) brightness(1.05)

07-14-07

ぼかし(ソフトフォーカス)フィルター見本

filter:blur()で輪郭を柔らかくにじませたソフトフォーカス見本です。WordPressのヒーロー背景やコサージュ写真など前面のテキストを読みやすくする下地に向いています。

CSS onlystaticcss</> コードを見る

Before

After

07-14-08

Before/After比較スライダー風静止表示

加工前後を左右に並べて中央にハンドルを添えた静止版の比較見本です。WordPressの写真加工サービスやリノベーション事例紹介ページの実績表示に使えます。

CSS onlystaticcss</> コードを見る

film grain overlay

07-14-09

フィルム粒子(グレイン)風テクスチャオーバーレイ見本

細かい粒状のグラデーションを重ねてフィルム写真の粒子感を再現した見本です。WordPressのアナログ・クラフト系ブランドサイトの質感演出に使えます。

CSS onlystaticcss</> コードを見る

radial vignette overlay

07-14-10

ビネット(周辺減光)効果見本

放射状グラデーションで四隅を暗く落として被写体へ視線を集めるビネット見本です。WordPressのプロフィール写真や商品ヒーロー画像の演出に活用できます。

CSS onlystaticcss</> コードを見る

saturate(2.2) contrast(1.05)

07-14-11

彩度強調フィルター見本

filter:saturate()で色の鮮やかさを大きく引き上げたビビッドな写真見本です。WordPressの飲食店メニューページやフルーツ・花系ECサイトの写真演出に向いています。

CSS onlystaticcss</> コードを見る

invert(1) contrast(1.05)

07-14-12

色調反転(ネガ)フィルター見本

filter:invert()で明暗と色相をすべて反転させたネガフィルム風の見本です。WordPressの実験的なアートサイトやエラー・特殊演出ページのアクセントに使えます。

CSS onlystaticcss</> コードを見る

159. 静的動画サムネイル・再生ボタンオーバーレイ見本

07-15-01

ベーシック中央再生ボタンサムネイル

動画サムネイルの中央に円形の再生ボタンだけを配置したシンプルなデザインです。記事内動画埋め込みのプレースホルダー画像として使えます。

CSS onlystaticcss</> コードを見る

12:34

07-15-02

再生時間バッジ付きサムネイル

右下に動画の総再生時間を表示するバッジを添えたサムネイルです。動画アーカイブ一覧で長さを一目で伝えたいときに使えます。

CSS onlystaticcss</> コードを見る

夏の絶景ドライブ旅日記

07-15-03

グラデーションオーバーレイ+タイトル付きサムネイル

下部を暗くするグラデーションに重ねて動画タイトルを表示するサムネイルです。おすすめ動画カルーセルの見出し表現に使えます。

CSS onlystaticcss</> コードを見る

初心者向けカメラ設定講座

◎12.4万回視聴・3日前

07-15-04

視聴回数表示付きサムネイル

サムネイル下部に視聴回数と投稿日を併記したカード型デザインです。人気動画一覧ページで再生数を訴求したい場合に使えます。

CSS onlystaticcss</> コードを見る

週末だけの家庭菜園入門

green garden channel

07-15-05

チャンネルアイコン付きサムネイル(YouTube風)

サムネイル下にチャンネルアバターと名称を並べたYouTube風レイアウトです。動画メディアサイトの一覧カードに転用できます。

CSS onlystaticcss</> コードを見る

07-15-06

視聴済み進捗バー付きサムネイル

下端の赤いバーで視聴済み割合を示すサムネイルです。会員限定動画コンテンツの続きから再生を訴求するUIに使えます。

CSS onlystaticcss</> コードを見る

1 / 24

07-15-07

プレイリスト風連番サムネイル

背後に重なるカードで複数動画をまとめて収録していることを表現したプレイリスト表示です。連載講座の一覧に向きます。

CSS onlystaticcss</> コードを見る

LIVE 2,481人視聴中

07-15-08

ライブ配信中バッジ付きサムネイル

左上のLIVEバッジと同時視聴者数を組み合わせたサムネイルです。配信サイトのライブ配信一覧ページに使用できます。

CSS onlystaticcss</> コードを見る

CC

07-15-09

字幕アイコン付きサムネイル

右下に字幕対応を示すCCアイコンを配置したサムネイルです。多言語対応や聴覚配慮のある動画コンテンツの明示に使えます。

CSS onlystaticcss</> コードを見る

横型 16:9

縦型 9:16

07-15-10

横型・縦型2アスペクト比サムネイル

通常動画向けの横型とショート動画向けの縦型を並べて比較できるサムネイルです。動画とショートを併載する一覧に使えます。

CSS onlystaticcss</> コードを見る

+12

07-15-11

複数サムネイルのグリッドギャラリー

4枚のサムネイルを2×2で並べ、右下に残数を表示するグリッドギャラリーです。動画フォルダやシリーズまとめの表紙に使えます。

CSS onlystaticcss</> コードを見る

GIF風プレビュー

07-15-12

静止プレビュー(GIF風グラデーション)サムネイル

複数カットの連続をグラデーション帯で表現し、ホバー予告動画の代替として静止したまま見せるサムネイルです。軽量表示が必要な一覧に向きます。

CSS onlystaticcss</> コードを見る

41. 静的バッジ・タグデザイン

New 完了注目重要限定

09-04-01

角丸バッジセット

角丸4px程度の小さなバッジを色違いで並べた見本です。WordPressの記事一覧やお知らせのステータス表示に使えます。

CSS onlystaticcss</> コードを見る

STAFF DRAFT FIXED SOLD

09-04-02

四角バッジセット

角丸を付けない四角い形のバッジを複数並べた見本です。カチッとした印象になり、管理画面やカタログ的なページの分類表示に向きます。

CSS onlystaticcss</> コードを見る

Free 在庫あり残りわずか準備中

09-04-03

アウトラインバッジ

背景を持たず枠線だけで構成した控えめなバッジの見本です。文章中に埋め込んでも主張しすぎず、補足情報のラベルに向きます。

CSS onlystaticcss</> コードを見る

Special Premium Limited

09-04-04

グラデーションバッジ

グラデーション背景を持つバッジを色違いで並べた静止見本です。キャンペーンページやプレミアム会員などの特別感を出すラベルに使えます。

CSS onlystaticcss</> コードを見る

承認済み要確認お気に入り

09-04-05

アイコン付きバッジ

小さなインラインSVGアイコンとテキストを組み合わせたバッジの見本です。状態や種別を視覚的に伝えたい一覧表示などに向きます。

CSS onlystaticcss</> コードを見る

Small Medium Large

09-04-06

サイズ違いバッジセット

small・medium・largeの3段階のサイズを並べた見本です。見出しの重要度や文字サイズに合わせてバッジの大きさを調整したい場合に使えます。

CSS onlystaticcss</> コードを見る

デザイン
コーディング
マーケティング
お知らせ
イベント

09-04-07

カテゴリカラーバッジ一覧

複数のカテゴリ名をそれぞれ異なる色のバッジで一覧表示する見本です。ブログ記事一覧のカテゴリ表示などに活用できます。

CSS onlystaticcss</> コードを見る

NEW

サンプルカード

09-04-08

リボン型ラベル

カードの角に斜めに掛かるリボン型ラベルの静止見本です。商品カードやおすすめ記事に重ねて新着・注目情報を知らせるのに使えます。

CSS onlystaticcss</> コードを見る

SAMPLE

09-04-09

スタンプ風ラベル

斜めに傾いた印鑑・スタンプのような見た目のラベル見本です。見本画像や非売品の表示、資料のウォーターマークなどに使えます。

CSS onlystaticcss</> コードを見る

対応中完了保留中止

09-04-10

ピル型ステータスラベル

丸みの強いピル型で複数のステータスを並べた見本です。タスク管理画面や案件一覧の進行状況表示にそのまま利用できます。

CSS onlystaticcss</> コードを見る

3 12

09-04-11

通知カウントバッジ(アイコン重ね)

ベル・カートなどのアイコンの右上に丸い数字バッジを重ねた静止見本です。WordPressのヘッダーで未読通知数やカート内商品数を表示する際に使えます。

CSS onlystaticcss</> コードを見る

WordPress SEO デザインプラグインコーディングテーマレスポンシブ高速化

09-04-12

タグクラウド風文字サイズバッジ

登場頻度に応じて文字の大きさと濃さを変えたタグの集合です。WordPressの人気キーワード一覧やサイト内で話題のカテゴリ紹介に使えます。

CSS onlystaticcss</> コードを見る

87. 静的アラート・通知ボックス集

操作が正常に完了しました

新しいお知らせがあります

入力内容をご確認ください

エラーが発生しました

09-07-01

成功/情報/警告/エラー4色アラートセット(静止)

4種類の状態を色分けした静止アラート一覧。フォーム送信結果やシステム通知の表示パターン整理に使える。

CSS onlystaticcss</> コードを見る

お支払いが完了しました。確認メールをお送りしています。

09-07-02

左アイコン付きアラートボックス

左側の丸アイコンと右側のメッセージで構成した静止アラート。決済完了やフォーム送信後の結果表示に使える。

CSS onlystaticcss</> コードを見る

注意ご利用中のプランは有効期限が近づいています。

09-07-03

枠線のみのアウトラインアラート

背景を敷かず枠線だけで状態を示す静止アラート。控えめに注意を促したい場面での表示に使える。

CSS onlystaticcss</> コードを見る

保存に失敗しました。時間をおいて再度お試しください。

09-07-04

背景ベタ塗り型アラートボックス

濃色背景に白文字を乗せた視認性の高い静止アラート。強めに注意喚起したいエラー表示に使える。

CSS onlystaticcss</> コードを見る

アップデートのお知らせ

新機能が追加されました。詳細は下記のリリースノートをご確認ください。

09-07-05

タイトル+本文2段構成のアラート

見出しと補足文を分けた静止アラート。お知らせの要点と詳細を同時に伝えたい場面に使える。

CSS onlystaticcss</> コードを見る

メンテナンスのお知らせ：本日24時よりシステムメンテナンスを実施します。

09-07-06

バナー型全幅アラート

横幅いっぱいに広がる帯状の静止アラート。サイト全体に関わる告知をページ上部で伝える用途に使える。

CSS onlystaticcss</> コードを見る

クッキーの使用について同意をお願いします。 ×

09-07-07

閉じるボタン付きアラート表示(静止)

右上に×ボタンを配置した状態を静止表示したアラート。クッキー同意など閉じられる通知の見た目の確認に使える。

CSS onlystaticcss</> コードを見る

新しいバージョンが利用可能です。

詳細を見る

09-07-08

アクションボタン付きアラート

メッセージに加えて行動を促すボタンを含む静止アラート。バージョン更新やキャンペーン告知の誘導に使える。

CSS onlystaticcss</> コードを見る

保存済み

09-07-09

コンパクト1行アラート

アイコンと短い一文だけで構成した最小限の静止アラート。自動保存の状態表示など省スペース用途に使える。

CSS onlystaticcss</> コードを見る

予約が確定しました

確認番号：#48213

09-07-10

影付き浮遊型アラートカード(静止)

影を付けて浮いて見える見た目にした静止アラートカード。予約完了や通知トーストの見た目確認に使える。

CSS onlystaticcss</> コードを見る

2/3

本人確認書類の確認中です

審査完了まで通常1〜2営業日かかります

09-07-11

審査・進行状況ステップ付きアラート

現在の進行段階を数字バッジで示す静止アラート。会員登録や本人確認フローの途中経過を伝える場面に使える。

CSS onlystaticcss</> コードを見る

注文が確定しました

入金を確認しました

09-07-12

重なりカード風スタック通知(静止)

背後にもう1枚カードが重なって見える奥行き表現の静止通知。複数件の通知が届いた状態の見た目確認に使える。

CSS onlystaticcss</> コードを見る

88. 静的空状態(empty state)イラスト集

検索結果が見つかりませんでした

別のキーワードでお試しください

09-08-01

空の検索結果イラスト(静止)

虫眼鏡モチーフで検索結果が0件だったことを伝える静止イラスト。サイト内検索やフィルター結果の空状態表示に使えます。

CSS onlystaticcss</> コードを見る

×

商品がありません

カートに商品を追加してください

09-08-02

空のカート・買い物リストイラスト

空の箱をCSS図形で表現し、ショッピングカートが空であることを伝える静止イラスト。ECサイトのカートページに使えます。

CSS onlystaticcss</> コードを見る

新着メッセージはありません

受信トレイは空です

09-08-03

空の受信トレイイラスト

封筒モチーフで受信メッセージが0件であることを伝える静止イラスト。メールアプリやメッセージ機能の空状態に使えます。

CSS onlystaticcss</> コードを見る

データがまだありません

09-08-04

データなしグラフイラスト

点線の棒グラフ枠で集計データが未取得であることを伝える静止イラスト。ダッシュボードやレポート画面の空状態に使えます。

CSS onlystaticcss</> コードを見る

お気に入りはまだありません

09-08-05

空のお気に入りリストイラスト

アウトラインのハートモチーフでお気に入り登録が未実施であることを伝える静止イラスト。会員サイトのマイページなどに使えます。

CSS onlystaticcss</> コードを見る

接続できません

ネットワーク環境をご確認ください

09-08-06

接続エラー・オフラインイラスト(静止)

雲と断線した線でネットワーク未接続の状態を伝える静止イラスト。オフライン時のエラー画面や通信失敗の案内に使えます。

CSS onlystaticcss</> コードを見る

✓

タスクはありません

すべて完了しました

09-08-07

空のタスクリストイラスト(完了風)

丸で囲んだチェックマークで未処理タスクが無いことを伝える静止イラスト。ToDoアプリやタスク管理画面の空状態に使えます。

CSS onlystaticcss</> コードを見る

ファイルがありません

09-08-08

空のフォルダ・ファイル一覧イラスト

フォルダアイコンのアウトラインでファイルが未登録であることを伝える静止イラスト。管理画面のファイル一覧などに使えます。

CSS onlystaticcss</> コードを見る

通知はありません

09-08-09

空の通知一覧イラスト

ベルモチーフのアウトラインで新着通知が無いことを伝える静止イラスト。管理画面や会員サイトの通知パネルに使えます。

CSS onlystaticcss</> コードを見る

Coming Soon

近日公開予定です

09-08-10

準備中・Coming Soonイラスト(静止)

時計モチーフのCSS図形で公開準備中であることを伝える静止イラスト。近日公開ページやメンテナンス案内に使えます。

CSS onlystaticcss</> コードを見る

記事の下書きはまだありません

最初の投稿を作成しましょう

09-08-11

空の下書き・記事一覧イラスト

文書アイコンのアウトラインで下書き記事が未作成であることを伝える静止イラスト。ブログ管理画面の投稿一覧に使えます。

CSS onlystaticcss</> コードを見る

?

予定されているイベントはありません

新しい予約を追加してください

09-08-12

空のカレンダー・予定イラスト

カレンダー形のCSS図形で予定・予約が未登録であることを伝える静止イラスト。予約管理画面やスケジュール一覧に使えます。

CSS onlystaticcss</> コードを見る

89. 静的ステータスインジケーター集

オンライン

離席中

オフライン

09-09-01

オンライン/オフライン/離席ドット表示

色分けされたドットで在席状態を示す静止表示です。メンバー一覧やチャットUIのステータス表示に使えます。

CSS onlystaticcss</> コードを見る

処理中発送済み完了

09-09-02

注文ステータスバッジ

EC注文の進行状態を示すバッジです。注文履歴一覧やマイページの注文詳細に配置できます。

CSS onlystaticcss</> コードを見る

承認済み却下保留

09-09-03

承認ステータス表示

申請や稟議の承認結果をアイコン付きで示す表示です。ワークフロー系管理画面の一覧に使えます。

CSS onlystaticcss</> コードを見る

Web サーバー A稼働中
DB サーバー稼働中
バッチサーバー停止中

09-09-04

サーバー・システムステータス表示

複数サーバーの稼働状況を一覧で示す静止表示です。管理ダッシュボードのシステム監視パネルに使えます。

CSS onlystaticcss</> コードを見る

未着手

進行中

完了

09-09-05

タスク進捗ステータス

円形インジケーターでタスクの進捗段階を示す表示です。プロジェクト管理ツール風のタスク一覧に使えます。

CSS onlystaticcss</> コードを見る

通常会員プレミアム ★ VIP

09-09-06

会員ランクステータスバッジ

会員種別をランク別の色とスタイルで示すバッジです。マイページやプロフィールカードの表示に使えます。

CSS onlystaticcss</> コードを見る

在庫あり残りわずか売り切れ

09-09-07

在庫ステータス表示

商品の在庫状況を色分けで示すバッジです。ECサイトの商品一覧や商品詳細ページに使えます。

CSS onlystaticcss</> コードを見る

仮予約確定キャンセル

09-09-08

予約ステータス表示

予約の状態を段階別に示すバッジです。店舗・施設予約システムの予約一覧画面に使えます。

CSS onlystaticcss</> コードを見る

下書きレビュー中公開済み

09-09-09

公開ステータスバッジ

WordPress風の投稿ステータス表示です。記事一覧の公開状態カラムやCMS管理画面に使えます。

CSS onlystaticcss</> コードを見る

強

中

弱

09-09-10

接続強度インジケーター(静止・電波風)

電波強度やWi-Fi接続品質を棒グラフ状に示す静止表示です。ステータスバーや接続情報画面に使えます。

CSS onlystaticcss</> コードを見る

初級

中級

上級

09-09-11

難易度・スキルレベル表示

塗りつぶしの粒の数でレベルの高さを示す静止表示です。講座一覧やスキル診断結果の表示に使えます。

CSS onlystaticcss</> コードを見る

ライブ配信中配信予定配信終了

09-09-12

配信ステータスバッジ

ライブ配信の状態を色分けドット付きで示すバッジです。動画配信サイトやセミナー一覧の表示に使えます。

CSS onlystaticcss</> コードを見る

90. 静的プログレス・ゲージデザイン

デザイン

85%

開発

60%

コーディング

40%

公開準備

25%

09-10-01

横長プログレスバー(複数固定値)

複数項目の進捗を横バーで一覧表示する構成です。制作進行状況や導入率の比較表示に使えます。

CSS onlystaticcss</> コードを見る

09-10-02

円形プログレスリング(固定値)

SVGの円弧で進捗率を表現する静止リング表示です。ダッシュボードや達成率カードに向いています。

CSS onlystaticcss</> コードを見る

導入ステップ 4/6 完了

09-10-03

セグメント区切りプログレスバー

バーを複数ブロックに分割してステップ達成度を示す表示です。申込フォームの進行状況などに使えます。

CSS onlystaticcss</> コードを見る

68%

09-10-04

半円メーター(ゲージ風)

速度計のような半円形で数値を示す静止メーターです。スコア表示やパフォーマンス指標に利用できます。

CSS onlystaticcss</> コードを見る

09-10-05

二重リングプログレス

内側と外側で異なる項目の進捗を同時に表示するリングです。2軸の指標比較を1つのグラフでまとめられます。

CSS onlystaticcss</> コードを見る

80%UI

55%API

35%QA

92%企画

09-10-06

ラベル付き縦型プログレスバー

縦方向のバーで複数項目の達成度を比較表示する構成です。部門別・工程別の進捗確認に適しています。

CSS onlystaticcss</> コードを見る

売上目標達成率76%

09-10-07

グラデーションカラープログレスバー

塗りつぶし部分にグラデーションを用いたバーです。目標達成率やKPI表示に華やかさを加えられます。

CSS onlystaticcss</> コードを見る

1

2

3

4

09-10-08

ドット連結型プログレス表示

ドットと線を繋げてステップの完了状況を示す表示です。会員登録や購入フローの進捗案内に使えます。

CSS onlystaticcss</> コードを見る

クラウド容量

63%

タスク完了

90%

09-10-09

パーセンテージ数値併記プログレスバー

バーの右側に数値を明示する構成です。数値の把握を重視するダッシュボードや管理画面に適します。

CSS onlystaticcss</> コードを見る

Step 1

Step 2

Step 3

09-10-10

薄型ミニマルプログレスバー

細線で控えめに進捗を示すミニマルデザインです。情報量を抑えたい管理画面や一覧表示に馴染みます。

CSS onlystaticcss</> コードを見る

78%

09-10-11

角丸スクエア枠プログレス(固定値)

角丸四角形の縁取りで進捗を表現する静止インジケーターです。円形とは異なる印象のスコア表示に使えます。

CSS onlystaticcss</> コードを見る

在庫消化率42%

Aランク Bランク Cランク

09-10-12

積み上げ内訳付きプログレスバー

1本のバーを複数区分に色分けして内訳を示す静止表示です。カテゴリ別の構成比や達成内訳の表示に使えます。

CSS onlystaticcss</> コードを見る

91. 静的評価・レーティング表示

★★★★★

09-11-01

5段階星評価(固定値表示)

星の数で評価値を示す最も基本的な表示形式。商品カードやレビュー欄の評価表示に使える。

CSS onlystaticcss</> コードを見る

4.5

★★★★★

09-11-02

数値+星併記の評価表示

数値スコアと星アイコンを並べて表示し、評価の精度をわかりやすく伝える。商品一覧の評価欄に向く。

CSS onlystaticcss</> コードを見る

★★★★★

(128件のレビュー)

09-11-03

レビュー件数付き星評価

星評価にレビュー件数を添え、評価の信頼度を補足する表示。EC商品ページの見出し付近で使われる形式。

CSS onlystaticcss</> コードを見る

5

4

3

2

1

09-11-04

評価内訳バー(星ごとの割合表示)

5〜1星それぞれの割合を横棒で可視化する内訳表示。レビュー詳細セクションの集計表示に適する。

CSS onlystaticcss</> コードを見る

♥♥♥♥♥

09-11-05

ハート型評価表示(星の代わりにハート)

星の代わりにハートアイコンで評価を示す表示形式。コスメ・雑貨系サイトのやわらかい印象づくりに向く。

CSS onlystaticcss</> コードを見る

9.2 / 10

09-11-06

数字のみの大型スコア表示(10点満点等)

星を使わず大きな数字でスコアを提示する表示。総合評価を強く印象づけたいレビューまとめに使える。

CSS onlystaticcss</> コードを見る

◎ 優良ショップ

09-11-07

バッジ型評価ラベル(優良・おすすめ等)

星ではなく文言バッジで評価水準を示す表示。信頼性を端的に伝えたい店舗・サービス紹介欄に向く。

CSS onlystaticcss</> コードを見る

09-11-08

プログレスドット型評価(5段階ドット)

丸ドットの塗り具合で評価段階を示す表示。星を使わずシンプルにレベル感を伝えたい場面に使える。

CSS onlystaticcss</> コードを見る

良い 72% 悪い 28%

09-11-09

二極比較評価(良い/普通/悪いの割合)

ポジティブ評価とネガティブ評価の比率を1本のバーで示す表示。満足度調査の結果表示などに使える。

CSS onlystaticcss</> コードを見る

A ランク評価

09-11-10

グレード表示(S/A/B/Cランク)

アルファベットのランクで評価水準を示す表示。診断結果や査定結果のまとめ表示などに用いられる。

CSS onlystaticcss</> コードを見る

😞🙁😐🙂😄

09-11-11

表情アイコン評価(5段階・固定選択)

星の代わりに表情アイコンで満足度を示す評価表示。アンケート結果やレビューまとめページの親しみやすい評価欄に使える。

CSS onlystaticcss</> コードを見る

満足度78点

09-11-12

縦型温度計スコアメーター(固定値)

満足度を温度計状のゲージで縦に示す表示。アンケート集計結果や総合評価をひと目で伝えたいまとめページに使える。

CSS onlystaticcss</> コードを見る

142. 静的スケルトンローディング見た目

09-13-01

記事カード用スケルトン(画像+タイトル+本文行)

画像・見出し・本文行を灰色ブロックで表現した記事カードの読み込み中プレースホルダー。ブログ一覧やニュースカードの読み込み待ち表示に使える。

CSS onlystaticcss</> コードを見る

09-13-02

プロフィールカード用スケルトン(丸アバター+テキスト行)

丸型アバターと名前・肩書き行、統計ボックスを灰色ブロックで表現したプロフィールカードのプレースホルダー。会員一覧やマイページの読み込み表示に使える。

CSS onlystaticcss</> コードを見る

09-13-03

テーブル行用スケルトン

見出し行と複数のデータ行を灰色ブロックで並べたテーブルのプレースホルダー。管理画面の一覧表やCSV取込結果の読み込み表示に使える。

CSS onlystaticcss</> コードを見る

09-13-04

SNSタイムライン投稿用スケルトン

アバター・投稿文・添付画像・アクションアイコンを灰色ブロックで表現したタイムライン投稿のプレースホルダー。SNS風フィードの読み込み待ち表示に使える。

CSS onlystaticcss</> コードを見る

09-13-05

商品カードグリッド用スケルトン

正方形の商品画像とタイトル・価格行を並べたグリッド型プレースホルダー。ECサイトの商品一覧が読み込まれるまでの表示に使える。

CSS onlystaticcss</> コードを見る

09-13-06

コメント欄用スケルトン

アバターと投稿者名・コメント本文行を縦に並べたコメント一覧のプレースホルダー。記事下コメント欄やレビュー欄の読み込み表示に使える。

CSS onlystaticcss</> コードを見る

09-13-07

ダッシュボードウィジェット用スケルトン

見出し・数値・棒グラフ形状を灰色ブロックで表現したダッシュボードカードのプレースホルダー。管理画面の集計ウィジェット読み込み表示に使える。

CSS onlystaticcss</> コードを見る

09-13-08

検索結果リスト用スケルトン

サムネイル・タイトル・説明文2行を灰色ブロックで並べた検索結果のプレースホルダー。サイト内検索やニュース一覧の読み込み待ち表示に使える。

CSS onlystaticcss</> コードを見る

09-13-09

動画サムネイル一覧用スケルトン

再生アイコン付きサムネイルとタイトル・チャンネル行を灰色ブロックで表現した動画一覧のプレースホルダー。動画配信ページの読み込み表示に使える。

CSS onlystaticcss</> コードを見る

09-13-10

フォーム入力欄用スケルトン

ラベル・入力欄・送信ボタンを灰色ブロックで表現したフォームのプレースホルダー。問い合わせフォームや入力画面の読み込み待ち表示に使える。

CSS onlystaticcss</> コードを見る

09-13-11

カレンダー・日付ピッカー用スケルトン

月見出しと曜日マスを灰色ブロックで並べたカレンダーの読み込み中プレースホルダー。予約フォームやイベントカレンダーの表示待ちに使える。

CSS onlystaticcss</> コードを見る

09-13-12

チャットメッセージ吹き出し用スケルトン

左右に吹き出し形の灰色ブロックを配置したチャット画面の読み込み中プレースホルダー。問い合わせチャットやDM機能の初期表示に使える。

CSS onlystaticcss</> コードを見る

143. 静的トースト・スナックバー通知見た目

リンクをコピーしました

09-14-01

シンプル下部固定スナックバー

画面下部中央に短いメッセージだけを表示する最小構成のスナックバー静止見本。コピー完了やちょっとした操作結果の通知デザイン確認に使える。

CSS onlystaticcss</> コードを見る

ファイルを削除しました元に戻す

09-14-02

アクションボタン付きトースト

「元に戻す」ボタンを併記したトースト通知の静止見本。削除やアーカイブ操作の直後に取り消し導線を見せたい場面に使える。

CSS onlystaticcss</> コードを見る

保存が完了しました

09-14-03

成功カラーのトースト通知

緑色でまとめたチェックアイコン付き成功トーストの静止見本。フォーム送信や自動保存が成功した瞬間の見た目確認に使える。

CSS onlystaticcss</> コードを見る

通信エラーが発生しました

09-14-04

エラーカラーのトースト通知

赤色を基調にしたエラートーストの静止見本。API通信失敗や入力エラーなど、緊急度の高い通知の表示確認に使える。

CSS onlystaticcss</> コードを見る

新しいメッセージがあります

09-14-05

アイコン+メッセージのミニマルトースト

丸アイコンと一行メッセージだけで構成した装飾を抑えたトーストの静止見本。通知の要点だけを簡潔に伝えたい場面に使える。

CSS onlystaticcss</> コードを見る

続報を表示中です

下書きを保存しました

アップロードが完了しました

09-14-06

複数トースト積み重なり表示

複数の通知が奥から手前へ重なって見える静止トーストスタック。連続した通知が発生した際のUI状態確認に使える。

CSS onlystaticcss</> コードを見る

画像をアップロード中 72%

09-14-07

進捗バー付きトースト

下部に進捗バーを添えたトーストの静止見本。ファイルアップロードや処理中の状態を数値と視覚の両方で伝えたい場面に使える。

CSS onlystaticcss</> コードを見る

設定を更新しました ×

09-14-08

閉じるボタン付き角丸トースト

右端に×ボタンを備えた角丸トーストの静止見本。ユーザー自身で通知を閉じられるUIパターンの見た目確認に使える。

CSS onlystaticcss</> コードを見る

アカウント情報の確認が必要です

09-14-09

上部バナー型通知トースト

画面上部に横幅いっぱいで現れる帯状トーストの静止見本。アプリ全体に関わる重要な注意喚起をポップアップで見せたい場面に使える。

CSS onlystaticcss</> コードを見る

R

Rina

コメントを送信しました

09-14-10

アバター付きダークスナックバー

丸アバターと差出人名を添えたダークテーマのスナックバー静止見本。チャットやコメント通知のポップアップ表示確認に使える。

CSS onlystaticcss</> コードを見る

お知らせ メンテナンスは明日3時に予定されています

09-14-11

情報カラー(青)のトースト通知

青色を基調にした案内アイコン付きの情報系トーストの静止見本。メンテナンス予告や仕様変更のお知らせなど、注意喚起までは不要な情報提供に使える。

CSS onlystaticcss</> コードを見る

5 5件の新着通知があります

09-14-12

件数バブル付きグループ通知スナックバー

まとまった通知件数を大きな丸バッジで示すグループ化スナックバーの静止見本。複数の通知を1つにまとめて表示したい管理画面のフッター通知に使える。

CSS onlystaticcss</> コードを見る

163. 静的バッジ・実績アイコンコレクション見本

1

金賞

2

銀賞

3

銅賞

09-15-01

金銀銅メダル風ランキングバッジ

1位〜3位を金・銀・銅のグラデーション円とリボンで表した静止見本です。WordPressのランキング記事やコンテスト結果発表ページの表彰表示に使えます。

CSS onlystaticcss</> コードを見る

HTML

CSS

JS

PHP

SEO

UI

09-15-02

六角形スキルバッジコレクション

六角形を並べたハニカム状のスキルバッジ集合の静止見本です。会員プロフィールページで習得済みスキルや資格を一覧表示する際に使えます。

CSS onlystaticcss</> コードを見る

★ 初投稿

★ 7日連続

★ 100件達成

★ 殿堂入り

09-15-03

獲得済み・未獲得混在バッジ一覧

獲得済みは彩色、未獲得はグレーアウトで表現したバッジ一覧の静止見本です。WordPress会員サイトの実績・達成条件一覧ページに使えます。

CSS onlystaticcss</> コードを見る

LV1

LV5

LV10

LV20

09-15-04

レベル数字入りバッジ

会員やユーザーの現在レベルを大きな数字で示すバッジの静止見本です。ゲーミフィケーション要素を持つ会員サイトの称号表示に使えます。

CSS onlystaticcss</> コードを見る

ブロンズ

ゴールド

プラチナ

09-15-05

星の数で段階を示すランクバッジ

星アイコンの点灯数でブロンズ・ゴールド・プラチナの段階を表す静止見本です。会員ランク制度やレビュー評価の等級表示に使えます。

CSS onlystaticcss</> コードを見る

認定パートナー

09-15-06

盾型の認定バッジ

盾の形をCSSのクリップパスで表現し、中央にチェックマークを配置した認定バッジの静止見本です。公式パートナーや資格保有者の証明表示に使えます。

CSS onlystaticcss</> コードを見る

年間MVP賞

獲得日: 2026.03.14

09-15-07

獲得日付付きトロフィーカード

トロフィーアイコンと獲得日をセットにしたカード型の静止見本です。会員マイページの実績履歴や表彰記録の一覧表示に使えます。

CSS onlystaticcss</> コードを見る

◆ エキスパート

★ マスター

09-15-08

称号付きバッジ

「エキスパート」「マスター」といった称号ラベルを添えたバッジの静止見本です。講座修了者や上級会員の肩書き表示として利用できます。

CSS onlystaticcss</> コードを見る

達成率 75%

09-15-09

進捗リング付き実績バッジ

円形の進捗リングでバッジの達成度を表現した静止見本です。学習コースの修了率や実績コンプリート率の可視化表示に使えます。

CSS onlystaticcss</> コードを見る

09-15-10

ロック中(未達成)バッジのシルエット表示

未達成のバッジをシルエットと鍵アイコンで表した静止見本です。今後解放される実績や隠しコンテンツの予告表示に使えます。

CSS onlystaticcss</> コードを見る

投稿マスター

記事を50件投稿すると獲得できます

09-15-11

獲得条件付きツールチップカード

バッジアイコンに獲得条件を説明する吹き出しを添えた静止見本です。実績一覧ページでカーソルを乗せなくても条件が分かる説明表示に使えます。

CSS onlystaticcss</> コードを見る

コレクション達成 8 / 12

09-15-12

達成率プログレスバー付きバッジ棚

複数のミニバッジと進捗バーを組み合わせ、コレクション全体の達成率を示す静止見本です。実績コンプリート画面のサマリー表示に使えます。

CSS onlystaticcss</> コードを見る

92. 静的EC商品カードデザイン集

オーガニックコットンTシャツ

¥3,980

10-08-01

基本形商品カード

画像・商品名・価格のみで構成したシンプルな商品カードです。WooCommerceの商品一覧グリッドの基本パーツとして使えます。

CSS onlystaticcss</> コードを見る

20%OFF

レザーショルダーバッグ

¥12,000¥9,600

10-08-02

セールバッジ付き商品カード

割引率バッジと取り消し線価格を組み合わせたセール商品用カードです。特売ページの商品訴求に用います。

CSS onlystaticcss</> コードを見る

ハンドメイド陶器マグカップ

¥2,200

残り3点

10-08-03

在庫状況表示付き商品カード

残数を明示するラベルを添えた商品カードです。在庫僅少の商品で購買を後押ししたいページに向きます。

CSS onlystaticcss</> コードを見る

♥

シルバーピアス

¥5,400

10-08-04

お気に入りアイコン付き商品カード

お気に入り登録済みを示すハートアイコンを角に配置した商品カードです。マイページのウィッシュリスト表示に使えます。

CSS onlystaticcss</> コードを見る

ニットプルオーバー

¥6,800

10-08-05

カラーバリエーション表示付き商品カード

選べる色を小さな色見本ドットで併記した商品カードです。アパレル系商品のバリエーション訴求に適しています。

CSS onlystaticcss</> コードを見る

アロマディフューザー

★★★★☆ (128)

¥4,500

10-08-06

レビュー評価付き商品カード

星評価とレビュー件数を併記した商品カードです。信頼性を伝えたい人気商品の一覧表示に利用できます。

CSS onlystaticcss</> コードを見る

ステンレスタンブラー

¥3,200

送料無料

10-08-07

送料無料表示付き商品カード

送料無料ラベルを価格の下に配置した商品カードです。送料が気になる購入者への安心材料として機能します。

CSS onlystaticcss</> コードを見る

スキンケア3点セット

3点セット

¥7,900

10-08-08

セット商品・まとめ買いカード

複数商品を小さなサムネイルで並べたセット商品カードです。まとめ買い商品やギフトセットの紹介に使えます。

CSS onlystaticcss</> コードを見る

キャンバストートバッグ

帆布素材・A4対応

¥2,980

10-08-09

ミニマル横長商品リストカード

正方形の画像と情報を横並びにしたリスト形式のカードです。検索結果や比較一覧など縦に並べる表示に適します。

CSS onlystaticcss</> コードを見る

NEW

コードレスイヤホン

¥8,900

10-08-10

新商品バッジ付き商品カード

角に新着ラベルを掲げた商品カードです。入荷したばかりの新商品を一覧の中で目立たせたい場合に使います。

CSS onlystaticcss</> コードを見る

定期便

スペシャルティコーヒー豆200g

¥1,480/ 月

15%OFFで自動お届け

10-08-11

定期購入バッジ付き商品カード

サブスクリプション商品であることを示すバッジと割引訴求を添えた商品カード。定期便・頒布会商品の一覧表示に使える。

CSS onlystaticcss</> コードを見る

数量限定コラボスニーカー

¥14,000

残りわずか

10-08-12

在庫ゲージバー付き商品カード

残り在庫の割合を横バーで可視化した商品カード。数量限定品の希少性を視覚的に伝えたい商品ページに使える。

CSS onlystaticcss</> コードを見る

93. 静的予約・カレンダー表示集

日月火水木金土

1234 567891011 12131415161718 19202122232425 2627282930

10-09-01

月間カレンダー(固定表示・今日強調)

7列の月間表示で本日の日付だけを色付けして示すカレンダー。予約サイトのトップで日程感覚を伝えるのに使える。

CSS onlystaticcss</> コードを見る

7/8◎

7/9○

7/10△

7/11×

7/12◎

7/13○

7/14△

10-09-02

空き状況カレンダー(◎○△×固定表示)

日付ごとの空き状況を記号と色で示す一覧。宿泊・施設予約サイトの空室状況表示によく使われる形式。

CSS onlystaticcss</> コードを見る

	月	火	水	木
9:00		面談
10:00	予約A			予約B
11:00			施術
12:00	休憩

10-09-03

週間タイムテーブル(固定予定)

曜日と時間帯のマス目に予定を固定配置した週間表。サロンや教室の週間スケジュール表示に向く。

CSS onlystaticcss</> コードを見る

10:00-10:30空き
10:30-11:00満席
11:00-11:30空き
13:00-13:30満席
13:30-14:00空き

10-09-04

時間スロット一覧(固定・空き/満席)

予約可能な時間帯を縦に並べ空き状況バッジを添えた一覧。時間枠制の予約フォーム上部などに使える。

CSS onlystaticcss</> コードを見る

月〜金	9:00 - 18:00
土曜日	10:00 - 17:00
日曜日	定休日
祝日	定休日

10-09-05

営業時間テーブル(曜日別)

曜日ごとの営業時間を一覧化した表。定休日は色を変えて区別する、店舗ページの基本情報欄に使える形式。

CSS onlystaticcss</> コードを見る

✓ご予約内容

日時7月15日(水) 14:00

人数2名

店舗渋谷本店

確定

10-09-06

予約確認カード(日時・人数固定表示)

予約日時や人数などをまとめたサマリーカード。予約完了ページやマイページの予約確認欄に使える。

CSS onlystaticcss</> コードを見る

候補	日付	時間	空き
A	7/15	14:00	◎
B	7/17	10:00	◎
C	7/20	16:00	○

10-09-07

複数日程比較表(固定値)

候補日程を横並びで比較できる表。おすすめ候補を背景色で目立たせ、日程調整依頼画面などで使える。

CSS onlystaticcss</> コードを見る

SCREEN

選択済予約済

10-09-08

座席マップ(固定・選択済み表示)

グリッド状の座席の選択・予約済み状態を固定表示するマップ。劇場や会議室の座席予約画面に使える。

CSS onlystaticcss</> コードを見る

5 開催まであと5日

10-09-09

カウントダウンバッジ(固定日数表示)

イベント開催までの残日数を固定値で示すバッジ。予約締切や開催告知バナーの訴求要素に使える。

CSS onlystaticcss</> コードを見る

1日時選択

2情報入力

3確認

10-09-10

予約ステップインジケーター(固定・現在地表示)

予約手続きの現在位置を3段階で示すインジケーター。フォーム上部に置いて進行状況を伝えるのに使える。

CSS onlystaticcss</> コードを見る

S佐藤

K木村

T田中

10-09-11

担当スタッフ選択カード(固定・選択済み表示)

予約担当のスタッフをアバターカードで並べ、選択中の1名を色で示す表示。サロンや相談窓口の予約フォームに使える。

CSS onlystaticcss</> コードを見る

ご利用人数

1名2名3名4名5名以上

10-09-12

人数セレクター(固定・選択済み表示)

予約人数の候補をチップ状に並べ、選択中の人数を色で示す表示。飲食店やイベントの人数指定フォームに使える。

CSS onlystaticcss</> コードを見る

94. 静的チャット・メッセージデザイン集

A

お疲れ様です、資料を確認しました。

ありがとうございます、助かります。

A

明日の打ち合わせもよろしくお願いします。

10-10-01

左右吹き出しチャット(固定会話表示)

相手と自分の発言を左右に振り分けた基本のチャット見た目です。お問い合わせ事例やサポートページの説明用に使えます。

CSS onlystaticcss</> コードを見る

写真送りますね。

既読

確認しました、ありがとうございます。

既読

では来週の日程で進めます。

未読

10-10-02

既読マーク付きメッセージ(静止)

各メッセージに既読・未読の表示が固定で添えられたスタイルです。連絡ツールやチャットUIのモックアップに向いています。

CSS onlystaticcss</> コードを見る

今日の会議は14時からです。10:02
承知しました、参加します。10:05
資料は共有フォルダにあります。10:11

10-10-03

タイムスタンプ付きチャットリスト

各発言に時刻が併記されたシンプルな一覧表示です。履歴確認画面やログ表示のサンプルとして活用できます。

CSS onlystaticcss</> コードを見る

S

佐藤

資料できました。

K

木村

確認しますね。

T

田中

私も見ておきます。

10-10-04

グループチャット風(複数人の発言)

複数の発言者を色分けしたアバターで並べたグループチャットの見た目です。社内ツールやコミュニティ紹介に使えます。

CSS onlystaticcss</> コードを見る

田中さんが参加しました

よろしくお願いします。

木村さんが退出しました

承知しました。

10-10-05

システムメッセージ混在チャット

入退室通知などのシステムメッセージが会話に混在する表示です。チャットツールの案内画面などに利用できます。

CSS onlystaticcss</> コードを見る

M

画像

現地の様子です。

10-10-06

画像添付風メッセージカード(静止)

画像枠付きのメッセージカードを固定表示したデザインです。写真共有やレポート報告の画面例に適しています。

CSS onlystaticcss</> コードを見る

今日はありがとうございました！

👍 2

こちらこそです。

❤️ 1

10-10-07

リアクション絵文字付きメッセージ(固定)

絵文字リアクションが常時表示されたメッセージデザインです。SNS風コミュニケーション画面の紹介に使えます。

CSS onlystaticcss</> コードを見る

明日の集合時間は何時ですか？

9時に駅前でお願いします。

10-10-08

引用返信付きメッセージ(固定表示)

元のメッセージを引用しながら返信する形式を固定表示したものです。問い合わせ履歴の見本などに使えます。

CSS onlystaticcss</> コードを見る

R

リサオンライン

ただいま対応可能です。

10-10-09

ステータス表示付きチャットヘッダー(オンライン等)

相手の在席状態をヘッダーに示したチャット画面です。サポートチャットや相談窓口の紹介に利用できます。

CSS onlystaticcss</> コードを見る

N
中村了解です、進めておきます。
2
S
鈴木チーム議事録を共有しました。
Y
山田ありがとうございました！

10-10-10

コンパクトチャットプレビューリスト(通知一覧風)

複数の会話を一行ずつまとめて表示する一覧デザインです。通知センターやトーク一覧の見本に活用できます。

CSS onlystaticcss</> コードを見る

A

相手が入力中です…

10-10-11

入力中インジケーター付きチャット(静止)

相手が返信を入力中であることをドットで示す表示を固定で見せるデザインです。チャットUIの状態説明資料に使えます。

CSS onlystaticcss</> コードを見る

▶ 0:32

10-10-12

ボイスメッセージ風バブル(固定波形表示)

再生ボタンと波形バーを組み合わせたボイスメッセージ風の吹き出しです。音声入力対応チャットの見た目説明に利用できます。

CSS onlystaticcss</> コードを見る

95. 静的地図・アクセス表示集

サンプル本店

10-11-01

抽象地図+固定ピン表示

グリッド線で抽象化した地図上に店舗位置を示すピンを1つ固定表示。店舗ページの所在地案内にそのまま使える構成です。

CSS onlystaticcss</> コードを見る

サンプルカフェ中央店

住所: サンプル県サンプル市1-2-3
最寄駅: 架空駅東口より徒歩3分
電話: 000-0000-0000

10-11-02

アクセス情報カード(住所・最寄駅併記)

地図を使わず住所と最寄駅をリスト形式で併記したシンプルなカード。ページ容量を抑えたい店舗情報欄に向きます。

CSS onlystaticcss</> コードを見る

サンプル本店
架空支店A
架空支店B

10-11-03

店舗リスト+ミニ地図並列表示(固定)

店舗名リストと小さな地図を左右に並べた静止レイアウト。複数拠点を持つ店舗の一覧ページに適した構成です。

CSS onlystaticcss</> コードを見る

徒歩5分

架空ベーカリー南口店

サンプル県サンプル市南町4-5-6

10-11-04

距離・所要時間バッジ付き店舗カード

「徒歩5分」のようなバッジを添えた店舗カード。駅からの距離感を一目で伝えたいアクセス欄向けの見本です。

CSS onlystaticcss</> コードを見る

サンプル本店営業中

架空支店C 準備中

10-11-05

営業中/準備中ステータス付き店舗情報(固定)

各店舗の営業状態をドットとラベルで固定表示する一覧。複数店舗の稼働状況をまとめて見せたい場合に使えます。

CSS onlystaticcss</> コードを見る

A

B

C

10-11-06

複数店舗ピン地図(固定表示)

抽象化した地図の上に複数のピンを配置し、それぞれに店舗記号を添えた見本。エリア内の店舗網を示すのに向きます。

CSS onlystaticcss</> コードを見る

現在地サンプル店

10-11-07

ルート線描画済み地図(静止)

出発地から目的地までの経路をあらかじめ線で結んだ静止地図。道案内ページの完成イメージ表示に使えます。

CSS onlystaticcss</> コードを見る

対応エリア対象外

10-11-08

エリア範囲表示地図(対応エリア色分け・静止)

対応エリアと対象外エリアを色分けした地図見本。配送圏や出張対応範囲の案内ページに転用できます。

CSS onlystaticcss</> コードを見る

サンプル県サンプル市1-2-3

35.0000, 135.0000

10-11-09

座標・住所コピー可能カード風デザイン(静止表示)

住所と座標をコピーボタン風アイコン付きで並べたカード見本。実際の操作は行わない静止デザインです。

CSS onlystaticcss</> コードを見る

🚃

電車

架空駅より5分

🚌

バス

サンプル停留所すぐ

🚗

車

駐車場あり(3台)

10-11-10

交通手段アイコン付きアクセス案内(電車・バス・車)

電車・バス・車のアイコンを横並びにし、それぞれの所要時間や設備を添えたアクセス案内の見本です。

CSS onlystaticcss</> コードを見る

サンプル温泉施設

混雑状況

やや混雑

10-11-11

混雑状況インジケーター付きアクセスカード

施設の混雑レベルを3段階のバーで固定表示するカード。観光施設や店舗の来場前混雑案内に使える表示形式です。

CSS onlystaticcss</> コードを見る

1F2F3F

フードコート
雑貨・書店
カフェスペース

10-11-12

フロア案内タブ(施設内マップ・固定選択表示)

フロアタブと該当フロアのテナント一覧を組み合わせた館内案内の静止表示です。商業施設のフロアガイドページに使えます。

CSS onlystaticcss</> コードを見る

96. 静的会員限定コンテンツデザイン

この続きは会員限定です

会員登録して読む

10-12-01

ペイウォール表示(ぼかし+ボタン)

本文をぼかして登録ボタンを重ねた固定表示。MemberPress等で本文の一部だけ公開し、続きを会員限定にする用途に使えます。

CSS onlystaticcss</> コードを見る

GOLD SILVER BRONZE BASIC

10-12-02

会員ランクバッジ一覧

ゴールド・シルバー・ブロンズなど複数の会員ランクを並べて表示する固定バッジ一覧です。会員プロフィールやマイページのランク表示に利用できます。

CSS onlystaticcss</> コードを見る

会員限定コンテンツ

10-12-03

限定コンテンツロック表示

鍵アイコンと「会員限定」の文字を組み合わせた固定表示です。非公開記事やダウンロード資料のロック状態を示すのに適しています。

CSS onlystaticcss</> コードを見る

シルバー

基本記事
月1配信

ゴールド

全記事閲覧
週2配信
限定動画

10-12-04

会員特典比較カード

ランクごとの特典内容を並べて比較できる固定カードです。MemberPressのプラン紹介ページで料金プランの違いを示す際に使えます。

CSS onlystaticcss</> コードを見る

MEMBERSHIP CARD PREMIUM

TARO YAMADA

会員番号 0012-3456 有効期限 2026.12.31

10-12-05

有効期限表示付き会員証カード

会員番号と有効期限を記載したカード型デザインです。マイページでの会員証表示や、印刷用会員証テンプレートに応用できます。

CSS onlystaticcss</> コードを見る

10-12-06

ポイント残高表示ウィジェット

会員が保有するポイント数を固定値で表示するウィジェットです。ポイント制の会員サイトでマイページに配置する用途を想定しています。

CSS onlystaticcss</> コードを見る

Members Only

FREE

10-12-07

限定バッジ付きコンテンツサムネイル一覧

「Members Only」ラベルを重ねたサムネイル一覧です。記事一覧ページで会員限定コンテンツと無料コンテンツを区別する表示に使えます。

CSS onlystaticcss</> コードを見る

10-12-08

ログイン促進バナー

記事の途中に配置する帯状のログイン促進バナーです。非会員に対してMemberPressのログインページへ誘導する用途に適しています。

CSS onlystaticcss</> コードを見る

1 プラン選択

2 情報登録

3 決済完了

10-12-09

会員登録フロー案内カード(3ステップ)

会員登録までの手順を3ステップで示す固定カードです。入会案内ページでMemberPressの登録フローを分かりやすく伝える際に使えます。

CSS onlystaticcss</> コードを見る

招待コード

A1B2-C3D4-E5F6

招待コードをお持ちの方はこちらにご入力ください

10-12-10

招待コード入力欄デザイン

招待コード入力欄とその説明文をまとめた固定デザインです。招待制の会員サイトで登録画面に配置するUIとして利用できます。

CSS onlystaticcss</> コードを見る

🔒

会員限定セミナー動画

Members Only

10-12-11

会員限定動画サムネイル(鍵アイコン重ね・固定)

動画サムネイルに鍵アイコンとラベルを重ねた固定表示です。会員限定の講座動画やアーカイブ一覧の未視聴表示に使えます。

CSS onlystaticcss</> コードを見る

10-12-12

連続ログイン日数ウィジェット(ストリーク表示)

会員の連続ログイン日数を固定値で示すウィジェットです。継続利用を促す会員マイページのモチベーション表示に使えます。

CSS onlystaticcss</> コードを見る

145. 静的不動産・物件カード見た目

グランメゾン青葉 305号室

¥78,000/月

1LDK駅徒歩5分

10-14-01

賃貸物件基本カード

写真・家賃・間取り・駅徒歩分数を1枚にまとめた賃貸物件カードです。賃貸検索サイトの物件一覧グリッドにそのまま使えます。

CSS onlystaticcss</> コードを見る

南向き2階建て戸建て全4LDK

¥3,480万円

面積92.5㎡

築年数築8年

10-14-02

売買物件カード

価格・専有面積・築年数を並記した売買物件用カードです。中古戸建てやマンション売却サイトの一覧表示に向きます。

CSS onlystaticcss</> コードを見る

NEW

サンライズヒルズ 802号室

¥112,000/月

2LDK・駅徒歩7分

10-14-03

間取り図付き詳細カード

写真の代わりに簡易間取り図を配置した詳細カードです。物件詳細ページの冒頭サマリーやプラン一覧に活用できます。

CSS onlystaticcss</> コードを見る

♥

パークサイド弦巻 401

¥95,000/月

10-14-05

お気に入り済みマーク付きカード

登録済みを示す塗りつぶしハートを角に配置した物件カードです。会員マイページのお気に入り物件一覧に使えます。

CSS onlystaticcss</> コードを見る

	物件A	物件B
家賃	8.5万円	9.2万円
面積	25㎡	30㎡
駅徒歩	5分	8分

10-14-06

物件比較テーブルカード

2件の物件条件を表形式で並べた比較用カードです。「気になる物件リスト」など複数物件を並べて検討させたい場面に使えます。

CSS onlystaticcss</> コードを見る

中央町ハイツ 2階

△△駅徒歩3分・□□スーパー200m

10-14-07

ロケーション強調カード

簡易マップと位置ピンで立地を視覚的に伝えるカードです。最寄駅・周辺施設を重視した検索結果表示に適しています。

CSS onlystaticcss</> コードを見る

アーバンレジデンス緑地 601

¥88,000/月

内見予約する

10-14-08

内見予約ボタン付きカード

カード下部に内見予約ボタンを常設した物件カードです。反響獲得を狙う不動産ポータルの一覧デザイン見本として使えます。

CSS onlystaticcss</> コードを見る

写真 6枚

グリーンヒルズ弦巻 302

¥69,000/月

10-14-09

複数写真サムネイル付きカード

メイン写真の下に小サムネイルを並べ、掲載枚数を示すカードです。写真点数の多い物件を訴求する一覧表示に使えます。

CSS onlystaticcss</> コードを見る

コーポ緑ヶ丘 105

¥62,000/月

駅近ペット可バストイレ別

10-14-10

条件タグ付き物件カード

駅近・ペット可などの特徴を小さなタグで並記したカードです。こだわり条件で絞り込む賃貸検索結果の表示に適しています。

CSS onlystaticcss</> コードを見る

レジデンス弦巻 204

¥84,000/月

P EV AL 24

10-14-11

設備アイコン一覧付き物件カード

駐車場・エレベーター・オートロック・24時間対応などの設備を小さなアイコンで並記したカードです。設備の充実度を一目で伝えたい賃貸一覧に使えます。

CSS onlystaticcss</> コードを見る

SOLD

オーシャンビュー高台 501

~~¥4,280万円~~

成約済み

10-14-12

成約済み(SOLD)オーバーレイカード

写真をグレートーンにし斜めのSOLDスタンプと取り消し線価格を重ねた成約済み物件カードです。売却済み物件を一覧の中で区別して表示したい場合に使えます。

CSS onlystaticcss</> コードを見る

146. 静的求人・採用情報カード見た目

Webデザイナー

月給 25万円〜32万円

東京都渋谷区

10-15-01

シンプル求人カード

職種・給与・勤務地のみで構成した最小限の求人カードです。採用ページの求人一覧で情報を素早く比較させたい場合に使えます。

CSS onlystaticcss</> コードを見る

正社員

営業アシスタント

年収 320万円〜420万円

大阪府大阪市

10-15-02

雇用形態バッジ付き求人カード

正社員・契約社員などの雇用形態を色付きバッジで明示した求人カードです。複数雇用形態が混在する求人一覧で見分けやすくします。

CSS onlystaticcss</> コードを見る

ST

株式会社ストリーム

経理スタッフ

月給 22万円〜28万円

福岡県福岡市

10-15-03

企業ロゴ付き求人カード

企業ロゴ風のアイコンと社名を職種の上に配置した複合カードです。企業ブランドを訴求したい採用サイトのトップ一覧に向きます。

CSS onlystaticcss</> コードを見る

急募

配送ドライバー

日給 11,000円〜

埼玉県さいたま市

10-15-04

急募バッジ付き求人カード

角に急募ラベルを掲げ緊急性を伝える求人カードです。至急採用したいポジションを一覧の中で目立たせたい場合に使います。

CSS onlystaticcss</> コードを見る

人事マネージャー

年収 450万円〜650万円

社保完備賞与年2回育休実績

10-15-05

年収レンジ+福利厚生カード

年収幅と福利厚生を小さなラベル群で併記した求人カードです。待遇面を重視する求職者向けの一覧ページに適します。

CSS onlystaticcss</> コードを見る

Webエンジニア

リモート可

月給 30万円〜45万円

勤務地問わず

10-15-06

リモート可マーク付き求人カード

職種名の右にリモート勤務可のマークを添えた求人カードです。働き方の柔軟性を重視する求職者向けの絞り込み表示に使えます。

CSS onlystaticcss</> コードを見る

残り3日応募締切

店舗スタッフ

時給 1,200円〜

10-15-07

応募締切カウントダウン風カード

応募締切までの残り日数を目立つ数字で示す求人カードです。募集期限が迫っている求人に緊急感を持たせる表示に使います。

CSS onlystaticcss</> コードを見る

バックエンドエンジニア

年収 500万円〜800万円

Ruby AWS MySQL Docker

10-15-08

スキルタグ付きエンジニア求人カード

使用技術を小さなタグで一覧表示するエンジニア向け求人カードです。技術スタックで求人を絞り込みたいIT専門求人ページに使えます。

CSS onlystaticcss</> コードを見る

カフェホールスタッフ

時給 1,100円〜

神奈川県横浜市

10-15-09

雰囲気写真付き求人カード

職場の雰囲気を伝えるビジュアル枠を上部に配置した求人カードです。写真素材の代わりにグラデーションで簡易プレビューを再現しています。

CSS onlystaticcss</> コードを見る

職種	総務事務
給与	月給 21万円〜
勤務地	愛知県名古屋市
雇用形態	契約社員

10-15-10

比較表形式の求人カード

項目名と内容を行ごとに並べた比較しやすいテーブル形式の求人カードです。複数求人の条件を並べて見比べる一覧ページに向きます。

CSS onlystaticcss</> コードを見る

マーケティング担当

月給 28万円〜36万円

応募状況: やや多い(応募12名 / 募集2名)

10-15-11

応募状況インジケーター付き求人カード

応募人数に応じたバーと倍率テキストを添えた求人カードです。人気度を可視化して応募を後押ししたい採用サイトの一覧表示に使えます。

CSS onlystaticcss</> コードを見る

カスタマーサポート

時給 1,300円〜

書類選考

一次面接

最終面接

内定

10-15-12

選考ステップタイムライン付き求人カード

書類選考から内定までの流れをミニタイムラインで示す求人カードです。選考プロセスの見通しを事前に伝えたい採用サイトの詳細一覧に使えます。

CSS onlystaticcss</> コードを見る

97. 静的モバイルUIクロム集

9:41

11-06-01

ステータスバー付きスマホ画面

時刻・電波・バッテリーを並べた上部ステータスバーの静止表示です。スマホ表示のヘッダー見本として画面上部の余白設計に使えます。

CSS onlystaticcss</> コードを見る

ホーム

検索

お気に入り

マイページ

11-06-02

ボトムタブナビ(固定・アクティブ表示)

画面下部に固定した4項目のタブバーで、1項目のみを選択中の色で示した静止状態です。アプリ風サイトの下部ナビ見本になります。

CSS onlystaticcss</> コードを見る

設定

アカウント›

通知›

プライバシー›

ヘルプ›

11-06-03

スマホ設定画面リスト風モック

アイコン・ラベル・矢印を横並びにした設定項目リストの静止画面です。マイページの設定メニュー構成の見本にできます。

CSS onlystaticcss</> コードを見る

9:41

お知らせ

新着メッセージがあります

リマインダー

本日の予定を確認

11-06-04

通知センター風スマホ画面

大きな時刻表示の下に通知カードを並べた静止画面です。ロック画面や通知一覧の完成イメージ確認に使えます。

CSS onlystaticcss</> コードを見る

11-06-05

ホーム画面アイコングリッド風モック

角丸アイコンをグリッド状に並べたホーム画面風の静止表示です。アプリ紹介ページのイメージ画像代わりに使えます。

CSS onlystaticcss</> コードを見る

9:41

11-06-06

プルダウン通知バナー付きスマホ画面(静止)

ステータスバー下にバナー通知を重ねて固定表示した画面です。通知デザインの見た目確認や資料掲載用の見本に使えます。

CSS onlystaticcss</> コードを見る

お問い合わせ

お名前メールアドレス内容送信する

11-06-07

スマホ用フォーム入力画面モック

ラベルと入力欄を縦に並べた問い合わせフォーム風の静止画面です。プラグイン導入前のフォームレイアウト検討に使えます。

CSS onlystaticcss</> コードを見る

キーワードを検索

検索結果A

説明テキストのサンプル

検索結果B

説明テキストのサンプル

検索結果C

説明テキストのサンプル

11-06-08

スマホ用検索結果一覧画面モック

検索バーの下にサムネイル付きの結果行を並べた静止画面です。検索ページのレイアウト確認用の見本として使えます。

CSS onlystaticcss</> コードを見る

サンプルタロウ

@sample_user

128投稿

3.2kフォロワー

340フォロー中

11-06-09

スマホ用プロフィール画面モック

カバー・アバター・名前・統計数値を重ねて配置したプロフィール画面の静止見本です。会員ページのレイアウト検討に使えます。

CSS onlystaticcss</> コードを見る

カート(2)

サンプル商品A

¥3,200

1

サンプル商品B

¥1,800

2

合計¥6,800

レジに進む

11-06-10

スマホ用ECカート画面モック

商品サムネイル・数量・合計金額を並べたカート画面の静止表示です。ECサイトのカートページ構成の見本にできます。

CSS onlystaticcss</> コードを見る

7月

日月火水木金土

12345 6789101112 13141516171819 20212223242526

11-06-11

モバイルカレンダー画面(予定ドット・固定表示)

スマホ画面内に月間カレンダーと予定日のドットを固定表示したモックです。予約アプリや日程共有アプリの画面見本に使えます。

CSS onlystaticcss</> コードを見る

お支払い確認

¥4,980

💳 **** 1234

商品代金¥4,500

手数料¥480

支払いを確定

11-06-12

モバイル決済確認画面モック(固定金額表示)

支払い金額とカード情報、内訳を固定表示した決済確認画面です。ECサイトやアプリの決済フロー確認画面の見本に使えます。

CSS onlystaticcss</> コードを見る

98. 静的オンボーディングイラスト集

ようこそ、Reiraへ

はじめての方向けにご案内します

11-07-01

ウェルカムイラスト+メッセージ(静止)

初回ログイン時に表示する歓迎メッセージとイラストの組み合わせ。会員サイトのウェルカム画面に利用できます。

CSS onlystaticcss</> コードを見る

1

プロフィール登録

基本情報を入力

2

プラン選択

利用プランを決定

3

利用開始

ダッシュボードへ

11-07-02

3ステップ案内カード(静止・進む先なし)

会員登録の流れを3枚のカードで並べて説明する案内。手続きの全体像を先に示したい導線に向きます。

CSS onlystaticcss</> コードを見る

✓アカウント作成
✓メール認証
プロフィール写真の設定
支払い方法の登録

11-07-03

チェックリスト形式セットアップ案内(静止)

初期設定として済ませておきたいタスクを一覧にしたチェックリスト。管理画面の初期案内パネルに使えます。

CSS onlystaticcss</> コードを見る

自動レポート

週次で自動集計

チーム共有

複数人で編集可

11-07-04

機能紹介カード(アイコン+説明・静止)

新しく追加された機能をアイコンと短い説明文で紹介するカード。リリースノートの案内画面に適しています。

CSS onlystaticcss</> コードを見る

ショートカット

Ctrl+S保存

Ctrl+K検索を開く

Esc閉じる

11-07-05

ショートカットキー案内一覧(静止)

主要なキー操作をまとめた一覧パネル。管理画面のヘルプメニューやオンボーディング資料に利用できます。

CSS onlystaticcss</> コードを見る

70%

セットアップ完了度

11-07-06

進捗ゲージ付きセットアップ画面(固定値)

セットアップの完了度合いを円弧ゲージで表示する画面。数値は70%固定で表示するステータス確認用の見本です。

CSS onlystaticcss</> コードを見る

? ?

ここで検索できます

通知はここに届きます

11-07-07

ヒントバブル一覧(静止・複数配置)

画面内の複数箇所に「?」マークとヒント文を固定配置した案内表示。機能説明のガイド画面に利用できます。

CSS onlystaticcss</> コードを見る

まだ項目がありません

最初の項目を作成

11-07-08

空状態からの誘導イラスト(静止)

データが1件もない状態で表示する案内イラストとボタン。最初の一歩を促す空状態画面の見本です。

CSS onlystaticcss</> コードを見る

設定を保存

変更後は必ずここを押してください

11-07-09

スポットライト風強調表示(静止・1箇所)

周囲を暗くして1つの要素だけを浮かび上がらせる強調表示。重要な操作箇所を案内する固定レイアウトです。

CSS onlystaticcss</> コードを見る

セットアップ完了

すべての準備が整いました

11-07-10

完了・お祝いイラスト(静止・紙吹雪なし)

初期設定が完了したことを伝える祝福イラスト。装飾は静止した図形のみで構成した完了画面の見本です。

CSS onlystaticcss</> コードを見る

興味のあるジャンルを選択

デザインマーケティングプログラミング写真ライティング

11-07-11

興味・関心タグ選択カード(固定・選択済み表示)

初回設定でユーザーが選んだ興味タグを固定表示するカードです。パーソナライズ設定のオンボーディング画面に使えます。

CSS onlystaticcss</> コードを見る

デバイスを連携しましょう

PCとスマホでデータが同期されます

11-07-12

デバイス連携案内イラスト(静止)

PCとスマホのアイコンを線でつないだ連携案内イラストです。マルチデバイス対応サービスの初期設定案内に使えます。

CSS onlystaticcss</> コードを見る

99. 静的ダッシュボードウィジェットデザイン

本日のアクセス

1,284

+8.4% 前日比

11-08-01

統計タイル(スパークライン付き・静止)

数値・前日比・固定の折れ線ミニグラフを1枚にまとめたタイルです。WordPress管理画面ダッシュボードや会員マイページのサマリー表示に使えます。

CSS onlystaticcss</> コードを見る

週間投稿数

月

火

水

木

金

土

日

11-08-02

ミニ棒グラフウィジェット(固定値)

週間データを固定の高さの棒グラフで表示するウィジェットです。管理画面の活動サマリーや会員の利用状況カードに配置できます。

CSS onlystaticcss</> コードを見る

72% 目標達成率

11-08-03

KPIリングカード(固定パーセント)

円形プログレスで達成率を固定表示するカードです。会員のポイント達成率や管理画面の月間目標表示に利用できます。

CSS onlystaticcss</> コードを見る

最近のアクティビティ

記事「夏の新商品」を更新3分前
注文 #1042 を承認21分前
山田さんが新規登録1時間前
お問い合わせが届きました2時間前

11-08-04

アクティビティフィードウィジェット(固定ログ)

アイコン付きの時系列ログを固定リストで表示します。WordPress管理画面の操作履歴や会員マイページの通知一覧として使えます。

CSS onlystaticcss</> コードを見る

通知設定

メール通知

プッシュ通知

週次レポート

ダークモード

11-08-05

トグル設定ウィジェット(静止・複数状態並列)

ON/OFFのスイッチを複数並べて状態を見せる設定パネルです。会員マイページの通知設定や管理画面のオプション画面の見本表示に使えます。

CSS onlystaticcss</> コードを見る

通知センター 3 すべて既読

新しいコメントが投稿されました5分前
プラグイン更新が利用可能です1時間前
バックアップが完了しました3時間前
月次レポートを生成しました昨日

11-08-06

通知センターパネル(固定・未読表示)

未読ドット付きの通知一覧を固定表示するパネルです。管理画面のお知らせや会員向け通知の見本として利用できます。

CSS onlystaticcss</> コードを見る

2026年 7月

日月火水木金土

293012345 6789101112 13141516171819 20212223242526 272829303112

11-08-07

ミニカレンダーウィジェット(固定表示)

当月の小型カレンダーを本日強調つきで固定表示します。管理画面のスケジュール確認や会員マイページの予約カレンダー枠に配置できます。

CSS onlystaticcss</> コードを見る

プロジェクト進捗

サイトリニューアル82%

LP制作60%

ブログ移行45%

SEO対策93%

11-08-08

タスク進捗バー一覧ウィジェット(固定値)

複数プロジェクトの進捗バーを固定幅でまとめて表示します。管理画面のタスク管理や会員の学習進捗表示の見本として使えます。

CSS onlystaticcss</> コードを見る

オーガニック45%
SNS30%
広告25%

11-08-09

ドーナツ内訳+凡例ウィジェット(固定値)

SVGドーナツグラフと色分け凡例を固定値で組み合わせたセットです。流入経路の内訳や会員ランク構成の可視化見本に使えます。

CSS onlystaticcss</> コードを見る

27°C

東京 · くもり時々晴れ

湿度 62%風 3m/s

11-08-10

天気風情報カードウィジェット(静止)

CSSで描いた天気アイコンと気温を固定表示するカードです。管理画面のダッシュボードや会員トップの装飾ウィジェットに使えます。

CSS onlystaticcss</> コードを見る

週間ランキング

1佐藤花子2,480pt
2田中誠2,120pt
3鈴木蓮1,890pt

11-08-11

システム稼働状況ウィジェット(固定値)

稼働率の数値と日別バーを固定表示するステータスウィジェットです。管理画面のサーバー監視パネルの見本に利用できます。

CSS onlystaticcss</> コードを見る

100. 静的404・エラーページデザイン

404

お探しのページは見つかりませんでした

トップへ戻る

11-09-01

404ページ(大きな数字+ボタン)

大きな「404」の数字とトップページへのボタンを配置した静止デザインで、WordPressのデフォルト404.phpテンプレートの差し替えに使える。

CSS onlystaticcss</> コードを見る

メンテナンス中

ただいまサイトを調整しております

11-09-02

メンテナンス中ページ

歯車アイコンと案内文を中央に配置した静止のメンテナンス告知画面。作業中のWordPressサイトの一時表示に利用できる。

CSS onlystaticcss</> コードを見る

!

エラーが発生しました

時間をおいて再度お試しください

11-09-03

汎用エラー画面

丸枠の「!」アイコンとメッセージを組み合わせた静止のエラー表示で、500エラーページなど汎用エラーテンプレートに転用できる。

CSS onlystaticcss</> コードを見る

SOON

Coming Soon

近日公開予定です、ご期待ください

11-09-04

Coming Soonページ

バッジ・見出し・装飾ドットを組み合わせた静止の準備中デザインで、公開前のランディングページ用ダミー画面に利用できる。

CSS onlystaticcss</> コードを見る

接続がありません

インターネット接続を確認してください

11-09-05

オフライン表示ページ

斜線入りの雲アイコンで通信断を表現した静止のオフライン画面。PWA化したWordPressサイトのオフライン表示に使える。

CSS onlystaticcss</> コードを見る

アクセス権限がありません

このページを表示する権限がありません

11-09-06

403権限なしページ

南京錠アイコンと案内文を組み合わせた静止の403エラー画面。会員限定ページなどのアクセス制限表示に利用できる。

CSS onlystaticcss</> コードを見る

まだ商品がありません

カートに追加した商品がここに表示されます

11-09-07

空のカート・リストページ

開いた空箱のイラストと案内文を配置した静止デザインで、ECサイトの空カートやお気に入りリスト未登録時の表示に使える。

CSS onlystaticcss</> コードを見る

見つかりませんでした

条件に一致する検索結果はありません

11-09-08

検索結果ゼロ件ページ

虫眼鏡アイコンとメッセージを組み合わせた静止デザインで、WordPressの検索結果0件時やフィルター結果なしの表示に利用できる。

CSS onlystaticcss</> コードを見る

完了しました

お手続きは正常に完了しています

11-09-09

完了・成功ページ

丸背景に✓アイコンを乗せた静止デザインで、フォーム送信完了ページや決済完了画面のサンクスページに利用できる。

CSS onlystaticcss</> コードを見る

データがありません

表示できる項目はまだ登録されていません

11-09-10

汎用エンプティステートページ

シンプルな書類イラストとメッセージのみで構成した静止の空状態デザイン。一覧ページにデータが1件もない場合の共通表示に使える。

CSS onlystaticcss</> コードを見る

メンテナンス中です

作業完了予定 15:00 頃

11-09-11

完了予定時刻付きメンテナンスページ

時計アイコンと作業完了予定時刻を明記した静止のメンテナンス画面。復旧見込みを伝えたいシステム停止時の案内に使える。

CSS onlystaticcss</> コードを見る

セッションが切れました

再度ログインしてください

ログイン画面へ

11-09-12

セッション切れ・再ログイン案内ページ

アイコンと案内文にログインボタンを添えた静止デザインで、一定時間操作がなかった際のセッション切れ画面に利用できる。

CSS onlystaticcss</> コードを見る

148. 静的プルトゥリフレッシュ・無限スクロール見た目

引っ張って更新

11-11-01

プル・トゥ・リフレッシュ引っ張り中の見た目

回転アイコンと「引っ張って更新」の文字をリスト上部に固定表示した静止画です。WordPressの投稿一覧やスマホ表示のブログトップで、更新動作の説明画像として使えます。

CSS onlystaticcss</> コードを見る

更新しました

11-11-02

更新完了チェックマーク表示状態

緑丸のチェックマークと「更新しました」の文字を上部に固定した完了直後の静止見本です。ニュースサイトの記事一覧で更新完了の見た目を資料化する際に使えます。

CSS onlystaticcss</> コードを見る

もっと読み込む

11-11-03

末尾「もっと読み込む」ボタンの見た目

リストの一番下に配置したもっと読み込むボタンの静止表示です。WordPressの投稿一覧をページネーションなしでボタン式に読み込ませたい場合のデザイン見本になります。

CSS onlystaticcss</> コードを見る

読み込み中...

11-11-04

リスト末尾の読み込み中スピナー表示

スクロール末尾に小さな回転アイコンと「読み込み中」の文字を固定表示した静止見本です。無限スクロール実装時に追加読み込み中の見た目を事前に確認できます。

CSS onlystaticcss</> コードを見る

すべて読み込みました

11-11-05

「すべて読み込みました」終端メッセージ

リストの一番下に左右の罫線付きで表示する終端メッセージの静止見本です。WordPressの記事一覧が最後まで読み込まれたことをユーザーに伝えるデザインに使えます。

CSS onlystaticcss</> コードを見る

11-11-06

スケルトンプレースホルダーの読み込み中リスト

アバターとテキストの位置にグレーのブロックを並べた読み込み中リストの静止見本です。データ取得前の画面をあらかじめ想定しレイアウト確認するのに役立ちます。

CSS onlystaticcss</> コードを見る

11-11-07

プルダウン抵抗感バウンス位置の固定表示

引っ張った量に対して途中までしか矢印が回りきっていない、ゴム的な抵抗感のある位置を静止画で切り取った見本です。更新操作のこだわった見た目を資料で説明する際に使えます。

CSS onlystaticcss</> コードを見る

更新が完了しました

11-11-08

更新完了トーストメッセージの見た目

リストの上に重ねて表示する黒背景の完了トーストを静止画で示した見本です。WordPressのAjax更新後に一瞬表示する完了通知のデザイン確認に使えます。

CSS onlystaticcss</> コードを見る

2026年7月10日

11-11-09

無限フィードの区切りセパレーター

日付ラベルを左右の罫線で挟んだフィードの区切り線の静止見本です。タイムライン型のWordPressテーマで日別に投稿をまとめて表示する際の仕切りに使えます。

CSS onlystaticcss</> コードを見る

!

読み込みに失敗しました

再読み込み

11-11-10

エラー時の再読み込みボタン付き見た目

感嘆符アイコン・エラー文言・再読み込みボタンを縦に並べた失敗時の静止見本です。通信エラー時にWordPressサイトの一覧末尾で表示するフォールバック画面の参考にできます。

CSS onlystaticcss</> コードを見る

3件の新着↑

11-11-11

先頭固定「新着」通知ピルの見た目

リスト上部中央に浮かせた丸いピル型バッジで新着件数を知らせる静止見本です。無限スクロール中に届いた新着をクリックで反映させるUI設計の参考画像になります。

CSS onlystaticcss</> コードを見る

横スクロール無限カルーセルの見た目

右端がフェードして続きがあることを示す横並びカードカルーセルの静止見本です。関連記事や商品のヨコ方向無限スクロール欄のデザイン確認に使えます。

CSS onlystaticcss</> コードを見る

149. 静的アプリスプラッシュ・起動画面見た目

Reira

11-12-01

シンプルなロゴ中央配置スプラッシュ(静止)

白背景の中央にロゴマークとアプリ名だけを配置した最小構成の起動画面。PWA化したWordPressサイトの起動直後に一瞬表示する画面の見本として使えます。

CSS onlystaticcss</> コードを見る

Nozomi

11-12-02

グラデーション背景+ロゴのスプラッシュ(静止)

斜めのブランドグラデーションを全面に敷き、白抜きロゴを中央に置いた起動画面。会員サイトやECアプリのブランディングを起動画面から印象づけたい場合に向きます。

CSS onlystaticcss</> コードを見る

S

11-12-03

ローディングインジケーター付きスプラッシュ(静止表示)

ロゴ下に読み込み中のドットを固定表示した起動画面。データ取得に少し時間がかかるWordPressの会員サイトなどで、待機中であることを伝える見本です。

CSS onlystaticcss</> コードを見る

Hanabi

あなたの毎日を、少しだけ豊かに

11-12-04

ブランドタグライン付きスプラッシュ(静止)

ロゴとアプリ名の下にキャッチコピーを添えた起動画面。ブランドの世界観を最初の一画面で伝えたいサービスサイトのPWA化に向きます。

CSS onlystaticcss</> コードを見る

11-12-05

パターン背景+ロゴのスプラッシュ(静止)

小さなドットを敷き詰めた背景に、ロゴを載せたカードを中央配置した起動画面。テクスチャで単調さを避けたいアプリ風サイトの見本です。

CSS onlystaticcss</> コードを見る

11-12-06

ダークテーマのミニマルスプラッシュ(静止)

ほぼ黒に近い背景に線画アイコンだけを置いた最小構成の起動画面。ダークモード対応をうたうアプリ風WordPressサイトの一瞬の画面に向きます。

CSS onlystaticcss</> コードを見る

R

Rakuen

Version 2.4.1

11-12-07

バージョン情報表示付きスプラッシュ(静止)

画面下部に小さくバージョン番号を添えた起動画面。社内向けや会員限定のWebアプリ風サイトで、更新状況を確認しやすくする見本です。

CSS onlystaticcss</> コードを見る

ようこそ

11-12-08

イラスト付きウェルカムスプラッシュ(静止)

やわらかい色のイラストと短い挨拶文だけを配置した起動画面。地域コミュニティサイトなど親しみやすさを重視するPWAの初回表示に使えます。

CSS onlystaticcss</> コードを見る

11-12-09

単色背景+白抜きロゴのスプラッシュ(静止)

ブランドカラー1色を全面に敷き、白い線画ロゴだけを中央に置いた起動画面。単色で覚えてもらいたいコーポレートサイトのアプリ版に適しています。

CSS onlystaticcss</> コードを見る

Tsumugi

読み込み中 68%

11-12-10

進捗バー付き起動画面(静止・固定値)

ロゴ下に読み込み進捗バーを68%固定で表示した起動画面。初期データの多いWordPress会員システムなどで、読み込み中の状態を静止見本として示せます。

CSS onlystaticcss</> コードを見る

Kizuna

オフラインで起動しています

11-12-11

オフラインモード表示付きスプラッシュ(静止)

彩度を落とした配色と斜線入りのアイコンでオフライン起動を伝える起動画面です。通信が不安定な環境でもPWAとして開けるWordPressサイトの状態表示見本になります。

CSS onlystaticcss</> コードを見る

M

Machiko

メールで始める Googleで続ける Appleで続ける

11-12-12

ログイン選択肢付き起動画面(静止)

ロゴ下にメール・Google・Appleの3つのログイン導線ボタンを並べた起動直後の画面です。会員制WordPressサイトの初回起動〜ログイン誘導の流れを検討する際の見本に使えます。

CSS onlystaticcss</> コードを見る

150. 静的権限・パーミッションリクエスト画面見た目

SN ShopNote

"ShopNote"が通知を送信します

注文状況やお得なクーポン情報をお知らせします

後で許可

11-13-01

プッシュ通知許可ダイアログ

アプリ名・アイコンと「後で/許可」ボタンを備えたiOS風の通知許可アラートを静止表示。PWA化したWordPressサイトの通知許諾UIモックに使える。

CSS onlystaticcss</> コードを見る

"TownMap"に位置情報の使用を許可しますか?

現在地周辺の店舗やイベント情報の表示に使用します

Appの使用中のみ許可一度のみ許可許可しない

11-13-02

位置情報アクセス許可ダイアログ

ピンアイコンと3段階の選択肢(使用中のみ/一度のみ/許可しない)を並べた位置情報許可の静止デザイン。店舗検索機能を持つサイトの許諾UI例に使える。

CSS onlystaticcss</> コードを見る

カメラとマイクへのアクセス

ビデオ通話機能を利用するには、カメラとマイクへのアクセスを許可してください

許可する

あとで設定する

11-13-03

カメラ・マイクアクセス許可画面

カメラとマイクの2つのアイコンを並べて提示する全画面タイプの許可リクエスト。オンライン相談・ビデオ通話機能付きサイトの導線見本になる。

CSS onlystaticcss</> コードを見る

11-13-04

Cookie同意バナー(許可/拒否/詳細設定)

画面下部に固定表示するタイプのCookie同意バナー静止見本で、許可・拒否・詳細設定の3ボタン構成。GDPR/改正電気通信事業法対応サイトに転用できる。

CSS onlystaticcss</> コードを見る

プレミアムプラン(月額)

広告非表示・限定コンテンツが利用可能になります

¥980/月

キャンセル購入する

11-13-05

アプリ内課金確認ダイアログ風

商品アイコン・価格・キャンセル/購入ボタンを備えた課金確認ダイアログの静止デザイン。有料会員サイトの決済前アラートUIの見本として使える。

CSS onlystaticcss</> コードを見る

A B C

連絡先へのアクセスを許可

友だちを検索してすばやく追加できるようになります

許可しない許可する

11-13-06

連絡先アクセス許可画面

連絡先を示す丸アバターを重ねて配置した許可リクエスト静止画面。友だち招待機能を持つ会員サイトやコミュニティサイトの導線に利用できる。

CSS onlystaticcss</> コードを見る

大事なお知らせを見逃さない

セール開始や予約確認など、必要な通知だけをお届けします

通知を有効にする

あとでする

11-13-07

通知許可を促すイラスト付き画面

放射状の装飾とベルアイコンを組み合わせたオンボーディング風の通知許可画面。会員登録直後の導線に配置する静止デザイン見本になる。

CSS onlystaticcss</> コードを見る

アクセス許可のお願い

快適にご利用いただくため、以下を許可してください

位置情報 ✓
通知 ✓
カメラ ✓

まとめて許可する

11-13-08

複数権限をまとめて表示するリクエスト画面

位置情報・通知・カメラの3項目をチェック済みリストで一覧表示する権限まとめ画面。初回起動時のオンボーディングフローに使える静止見本。

CSS onlystaticcss</> コードを見る

現在: 拒否中

通知がオフになっています

設定アプリから通知を有効にすると、最新情報をすぐに受け取れます

設定を開く

11-13-09

権限拒否後の再許可誘導画面

斜線入りベルと「現在: 拒否中」ラベルで状態を明示し、設定アプリへ誘導する静止デザイン。通知オフ状態のユーザー向け再訴求バナーに使える。

CSS onlystaticcss</> コードを見る

利用規約への同意

サービスのご利用にはプライバシーポリシーへの同意が必要です

✓ プライバシーポリシーに同意します詳細を見る

同意して次へ

11-13-10

プライバシーポリシー同意チェック付き権限画面

チェック済みのボックスと規約リンクを添えた同意画面の静止デザイン。会員登録や個人情報を扱うフォームの最終確認ステップに利用できる。

CSS onlystaticcss</> コードを見る

Face IDでサインインしますか?

パスワード入力の代わりに顔認証でログインできるようになります

パスワードを使用 Face IDを使用

11-13-11

生体認証(Face ID)許可ダイアログ

顔認証アイコンと2択ボタンを備えた生体認証の利用確認ダイアログの静止デザインです。会員サイトのログイン画面に顔認証・指紋認証の導線を検討する際の見本に使えます。

CSS onlystaticcss</> コードを見る

写真ライブラリへのアクセス

プロフィール画像や投稿写真を選択するために、写真へのアクセスを許可してください

すべての写真へのアクセスを許可

選択した写真のみ許可する

11-13-12

写真ライブラリへのアクセス許可画面

写真のサムネイル4枚をタイル状に見せてから許可を求める権限リクエスト画面の静止デザインです。投稿画像のアップロード機能を持つWordPressサイトの許諾UI見本に使えます。

CSS onlystaticcss</> コードを見る

165. 静的ダークモード切替UI見た目

ライト

ダーク

11-15-01

太陽⇄月アイコンのシンプルトグル

ノブの中に太陽と月のアイコンを配置したテーマ切替スイッチの静止見本です。WordPressのヘッダー右端に置くライト/ダーク切替UIのデザイン提案に使えます。

CSS onlystaticcss</> コードを見る

暗いモードを選択中

11-15-02

スライダー型テーマ切替(明るい⇄暗い)

明るい色から暗い色へグラデーションするバー上につまみを固定表示したスライダー型の見本です。設定パネルの明度調整風テーマ切替に応用できます。

CSS onlystaticcss</> コードを見る

ライトダーク自動

11-15-03

3択セグメントコントロール(ライト/ダーク/自動)

ライト・ダーク・自動の3状態をアイコン付きセグメントで並べた静止見本です。「ダーク」選択中の状態を固定表示し、設定画面のテーマ選択UIに使えます。

CSS onlystaticcss</> コードを見る

ライト ✓

ダーク

11-15-04

テーマ選択カード2枚並び(ミニプレビュー付き)

ライト版とダーク版のミニプレビューを並べ、選択中のカードにチェックマークを付けた見本です。会員サイトの外観設定画面に活用できます。

CSS onlystaticcss</> コードを見る

タップでライトに切替

11-15-05

丸型トグルボタン(アイコンが太陽/月に変化)

ダーク選択中の状態を大きな丸ボタンとリングで強調した見本です。サイト右下に浮かせるクイック切替ボタンのデザイン検討に使えます。

CSS onlystaticcss</> コードを見る

外観モードダーク ›

11-15-06

メニュー内のテーマ切替行(現在の状態表示)

設定メニューの1行として、現在選択中のモード名を右端に表示した見本です。アプリ風の設定一覧ページにそのまま組み込めます。

CSS onlystaticcss</> コードを見る

選択中

11-15-07

星空⇄晴天の比喩的テーマトグル

星空の夜パネルと晴天の昼パネルでモードを比喩的に表現した見本です。旅行・アウトドア系サイトの遊び心あるテーマ切替UIに向きます。

CSS onlystaticcss</> コードを見る

21:09

ダークモード有効時のステータスバー表示

11-15-08

ステータスバー風ダークモードインジケータ

スマホのステータスバーを模し、月アイコンでダークモード有効を示した見本です。アプリ紹介LPのモックアップ画像として利用できます。

CSS onlystaticcss</> コードを見る

Before・ライト

→

After・ダーク

11-15-09

両モード比較のBefore/Afterカード

ライトとダークのミニ画面を左右に並べ、切替の効果を一目で伝える比較見本です。機能紹介ページのビフォーアフター表現に使えます。

CSS onlystaticcss</> コードを見る

11-15-10

フローティング型クイックテーマ切替ボタン

コンテンツ画面の右下に浮かせた丸型ボタンでテーマ切替を示す見本です。ブログやポートフォリオサイトの常時表示ボタンに使えます。

CSS onlystaticcss</> コードを見る

11-15-11

太陽と月が同時に見えるスライダー

トラックの両端に太陽と月を常時表示し、つまみの位置で現在のモードを示すスライダーの見本です。設定画面の視覚的な分かりやすさを高めます。

CSS onlystaticcss</> コードを見る

システム設定に合わせる端末の設定に応じて自動切替

11-15-12

システム連動を示すアイコン付きトグル

ディスプレイアイコンと説明文を添え、OSの設定に連動するモードであることを伝えるトグル見本です。自動切替オプションの説明行に使えます。

CSS onlystaticcss</> コードを見る

166. 静的タグ入力・キーワード選択UI見た目

デザインコーディング WordPress

11-16-01

基本チップ型タグ入力欄

選択済みのタグが枠内にチップ状に並ぶ、最もシンプルなタグ入力欄の見た目です。ブログ投稿画面のタグ設定欄やアンケートフォームのキーワード入力に使えます。

CSS onlystaticcss</> コードを見る

読書× 映画× 旅行×

11-16-02

削除アイコン付きタグチップ入力欄

チップの右側に×アイコンを添えた削除可能な見た目のタグ入力欄です。会員プロフィールの趣味タグ登録欄などに活用できます。

CSS onlystaticcss</> コードを見る

和食中華イタリアンフレンチカフェラーメン

11-16-03

選択済み/未選択色分けタグパネル

候補タグの中から選択済みのものだけ色を変えて示すパネルです。飲食店検索サイトのジャンル絞り込みUIの見本になります。

CSS onlystaticcss</> コードを見る

ジャンル

小説漫画雑誌

対象年齢

キッズ大人

11-16-04

カテゴリ別グループ化タグ選択パネル

見出しごとにタグをグループ分けして表示するパネルです。ECサイトの商品絞り込みで複数の分類軸を同時に扱いたい場合に使えます。

CSS onlystaticcss</> コードを見る

興味のあるジャンル 3/5

アウトドア音楽写真

11-16-05

上限数表示付きタグ入力欄

選択数と上限を「3/5」のように併記するタグ入力欄です。会員登録時の興味関心タグ選択など、選択数に制限のあるフォームに向きます。

CSS onlystaticcss</> コードを見る

重要進行中レビュー待ち完了

11-16-06

色分けラベルタグ入力欄

タグごとに異なる背景色を割り当てて意味を区別できるようにした入力欄です。タスク管理ツールのステータスラベル選択欄に応用できます。

CSS onlystaticcss</> コードを見る

デザ

デザイン思考デザインシステムデザインパターン

11-16-07

入力+サジェスト候補複合タグUI

自由入力欄の下に予測候補タグを一覧表示する複合UIです。サイト内検索のキーワードサジェストや記事タグの入力補助に使えます。

CSS onlystaticcss</> コードを見る

ナチュラルシンプルモダン

11-16-08

ピル型丸み強調タグチップ

角を大きく丸めた柔らかい印象のピル型タグチップです。ハンドメイド作品サイトやライフスタイル系ブログの雰囲気タグ表示に合います。

CSS onlystaticcss</> コードを見る

SALE NEW LIMITED

11-16-09

スクエア角ばりタグチップ

角丸を排したシャープな四角形のタグチップです。セール表示やブランド系ECサイトのキャッチコピー的なタグ演出に向きます。

CSS onlystaticcss</> コードを見る

☀️ 晴れ 🌧️ 雨 ❄️ 雪 🌸 春

11-16-10

絵文字アイコン付きタグ選択UI

タグの先頭に絵文字を添えて内容を直感的に伝えるデザインです。天気情報サイトやイベント紹介ページのカテゴリタグに使えます。

CSS onlystaticcss</> コードを見る

1在宅ワーク

2副業

3転職

11-16-11

並び替えハンドル付きタグ入力欄(静止)

各タグの左端にドラッグハンドルを添え、並び替え可能であることを示す静止デザインです。優先順位付きのToDoタグ管理画面に応用できます。

CSS onlystaticcss</> コードを見る

レイアウト・セクション

36. 静的グリッドレイアウト

bentoグリッド

雑誌風非対称グリッド

迅速な対応

安心の品質

選ばれる理由

3カラム均等グリッド

モザイクタイルグリッド

サイドバー2カラムレイアウト

フルブリード帯+余白コンテンツ

均等4分割グリッド

階層グリッド

余白基調ミニマルグリッド

縦積みセクション区切りレイアウト

12カラムグリッドシステム見本

ホーリーグレイルレイアウト構成

37. 静的コンテンツ構成パターン

オフセット配置

オフセット画像+テキスト構成

フレーム付きセクション

フレーム付きセクション

フルブリード見出し+中央寄せ本文

囲み枠パネル

囲み枠コンテンツ(パネル型)

対角線分割セクション

中央に強調された言葉

センター強調セクション

非対称2カラム

左右非対称2カラム

アイキャッチ画像+キャプション帯

editorial

余白多めエディトリアル型

境界線グリッドセクション

縦型タイムライン構成

シンメトリー2カラム比較構成

43. 静的ヒーロー構図バリエーション

暮らしに、余白を。

左右分割ヒーロー(画像+テキスト)

ミニマルという、豊かさ。

中央揃えミニマルヒーロー

景色が変わる、瞬間へ。

フルスクリーン背景ヒーロー(静止)

季節の、はじまりに。

非対称オフセットヒーロー

整える、という美学。

フレーム付きヒーロー

見て、感じる、選ぶ。

上下2段ヒーロー

境界線が、個性になる。

斜めライン区切りヒーロー(静止)

SIMPLEIS BEST.

ミニマルテキストのみヒーロー

重なりが、奥行きをつくる。

画像コラージュヒーロー

枠の中に、世界がある。

ボーダー付きヒーロー

細部に宿る、こだわり。

ドットパターン背景ヒーロー

物語は、ここから。

大型背景文字ヒーロー

44. 静的フッター構成バリエーション

シンプル1行フッター

3カラムリンクフッター(静止)

中央ロゴ+リンクフッター

二段構成フッター(上部CTA+下部リンク)

サイドバー型フッター

ミニマル罫線区切りフッター

アイコン列挙フッター

住所+リンク併記フッター

ブランド色帯フッター

グリッド型サイトマップフッター

メール登録欄付きフッター

2色ブロック分割フッター

61. 静的マガジンレイアウト応用

見開き2ページ風レイアウト

特集：都市を変えるデザイン

大見出し+リード文+本文の階層構成

写真主体のフォトエッセイレイアウト

サイドバー付き記事レイアウト

SIMPLE
IS BEST.

SPECIAL
ISSUE

認定証

bento box風大小混在タイル