Webデザイン要素カタログ
当社のWebデザインで使用できる要素を一覧でご紹介します。各要素の特徴や使い分けを比較しながらご覧いただけます。
基礎要素
Webデザインの基本となる要素です。これらを組み合わせて様々なデザインを作り上げていきます。
カード
情報を視覚的にまとめて表示するためのコンテナです。内容の重要度に応じてスタイルを使い分けます。
基本カード
シンプルな情報表示に最適なカードスタイルです。
強調カード
背景色を使用して視覚的に強調するカードです。
アウトラインカード
ボーダーの色と太さで注目を集めるカードです。
コンテナ
コンテンツをグループ化してレイアウトを整えるための基本要素です。視覚的な階層を作り出すのに役立ちます。
標準コンテナ
基本的なコンテンツを囲むためのコンテナです。
背景付きコンテナ
背景色で視覚的な区別をつけるコンテナです。
ダッシュボーダーコンテナ
破線のボーダーで軽い区切りを表現するコンテナです。
リスト
複数の項目を整理して表示するための要素です。番号の有無で使い分けます。
番号付きリスト
- 最初のリスト項目
- 2番目のリスト項目
- 3番目のリスト項目
箇条書きリスト
- 最初のリスト項目
- 2番目のリスト項目
- 3番目のリスト項目
スタック
要素を縦方向または横方向に整列させるためのレイアウト手法です。
垂直スタック
水平スタック
基本要素
ウェブサイトの構成要素です。コンテンツの表示やレイアウトを制御します。
見出し
ページのタイトルやセクションの見出しを表示するための要素です。
見出しレベル1 (h1)
見出しレベル2 (h2)
見出しレベル3 (h3)
見出しレベル4 (h4)
段落
文章を表示するための要素です。
これは段落の例です。
リスト
項目の一覧を表示するための要素です。
- 箇条書きリストの例
-
- 入れ子リストの例
- さらに入れ子リスト
- 最後のリスト項目
引用
他のソースからの引用を表示するための要素です。
これは引用の例です。重要な情報を強調表示するために使用します。
テーブル
データを表形式で表示するための要素です。
| 名前 | 年齢 | 職業 |
|---|---|---|
| 田中太郎 | 30 | エンジニア |
| 山田花子 | 25 | デザイナー |
インタラクティブ要素
ユーザーとのインタラクションを可能にする要素です。これらの要素を使用して、ユーザーの操作に応じたフィードバックを提供します。
ボタン
ユーザーの操作をトリガーするための要素です。
フォーム要素
ユーザー入力を受け取るための要素です。
ナビゲーション要素
ユーザーがサイト内を移動するための要素です。これらの要素を使用して、コンテンツの構造を示し、ユーザーが目的の情報に簡単にアクセスできるようにします。
ナビゲーションバー
サイト内の主要なページへのリンクを提供する要素です。
パンくずリスト
現在のページの位置を示す要素です。
視覚表現
サイトの視覚的な表現を構成する要素です。これらの要素を使用して、ブランドイメージを強化し、ユーザーの視覚的な体験を向上させます。
アイコン
視覚的な情報を提供するための要素です。
カラーパレット
サイトで使用する色の組み合わせです。