UIkit コンポーネントサンプル
実用的なWebサイト制作用の部品集
タイポグラフィ
見出しサンプル
見出し H1
見出し H2
見出し H3
見出し H4
見出し H5
見出し H6
文字サイズ・スタイル
小さい文字 (uk-text-small)
通常の文字 (uk-text-default)
リード文 (uk-text-lead)
大きい文字 (uk-text-large)
太字 (uk-text-bold)
薄い文字 (uk-text-muted)
プライマリカラー (uk-text-primary)
成功カラー (uk-text-success)
警告カラー (uk-text-warning)
危険カラー (uk-text-danger)
レイアウト例
2カラムレイアウト
左カラム
メインコンテンツやブログ記事などを配置します。
右カラム
サイドバーやウィジェットを配置します。
3カラムレイアウト
カラム 1
サービス紹介や特徴を並べて表示します。
カラム 2
レスポンシブ対応で、スマホでは縦に並びます。
カラム 3
均等な幅で美しく配置されます。
4カラムグリッド
コンテンツパターン例
見出し＋リード＋CTA
画像左 / テキスト右
課題を示し、解決策を添える
画像で状況を伝え、右側で価値訴求やメリットを整理します。折り返しで縦積みにも自然に対応。
- ポイントを3つ程度に絞ると読みやすい
- 数字や実績を挟むと説得力が増す
- CTAは段落末かボタンを配置
テキスト左 / 画像右
ステップを並べるレイアウト
テキストを左に寄せて読み始めを安定させ、右に説明的な画像や図解を置くパターンです。
- 課題を提示する
- 解決策を提示し、ベネフィットを短く列挙
- 次のアクションを明示する
見出し＋サブポイント（3分割）
短く強い主張
30〜50文字で一言。ユーザーの疑問に直答する形で。
裏付け・数値
実績や指標を一つだけ添えると説得力が増します。
次のアクション
「詳しく見る」「相談する」など、次の一歩を明示。
カード
商品・サービスカード
商品名 1
商品の説明文がここに入ります。魅力的な特徴を記載します。
¥5,980
商品名 2
商品の説明文がここに入ります。魅力的な特徴を記載します。
¥7,980
商品名 3
商品の説明文がここに入ります。魅力的な特徴を記載します。
¥9,980
リスト例
基本リスト
- リスト項目 1
- リスト項目 2
- リスト項目 3
番号付きリスト
- ステップ 1: 準備
- ステップ 2: 実行
- ステップ 3: 完了
アイコン付きリスト
- 機能 1
- 機能 2
- 機能 3
区切り線付きリスト
- 項目 A
- 項目 B
- 項目 C
アコーディオン例
よくある質問 (FAQ)
-
質問1: サービスの利用方法は？
まず、会員登録を行ってください。その後、ダッシュボードからサービスをご利用いただけます。詳しくは利用ガイドをご覧ください。
-
質問2: 料金プランについて
無料プラン、スタンダードプラン、プレミアムプランの3種類をご用意しています。プランの詳細は料金ページをご確認ください。
-
質問3: サポートについて
メール、チャット、電話でのサポートをご提供しています。営業時間は平日9:00-18:00です。
-
質問4: 解約方法は？
アカウント設定から「解約」を選択してください。いつでも解約可能で、違約金等は発生しません。
テーブル例
料金プラン
| プラン | 月額料金 | ストレージ | ユーザー数 | サポート |
|---|---|---|---|---|
| 無料 | ¥0 | 10GB | 1名 | メール |
| スタンダード | ¥1,980 | 100GB | 5名 | メール・チャット |
| プレミアム | ¥4,980 | 無制限 | 無制限 | メール・チャット・電話 |
データ一覧
| ID | 商品名 | カテゴリ | 価格 | 在庫 |
|---|---|---|---|---|
| 001 | 商品 A | 電化製品 | ¥12,800 | 在庫あり |
| 002 | 商品 B | 衣料品 | ¥3,200 | 残りわずか |
| 003 | 商品 C | 食品 | ¥1,500 | 売り切れ |
フォーム例
お問い合わせフォーム
お知らせ・ニュース例
ビデオ例
レスポンシブ動画埋め込み
ツールチップ例
ホバー時の説明表示
アイコンにも適用可能:
モーダル例
ポップアップウィンドウ
モーダルタイトル
これはモーダルウィンドウの内容です。お知らせや詳細情報を表示するのに便利です。
フルスクリーンモーダル
大きな画像やコンテンツを表示する際に使用します。