フロントエンドのデザイン設計一覧(メモ用)

Prerequisites of Design（デザインの前提）

名称	説明
Format	縦長のポートレイトや横長のランドスケープが存在
Orientation	カメラアングル
Grid systems	規則正しく引かれた線を基準にすることで、デザインを設計
Composition	仕上がりの時の画面の構成
Eye movement	コンテンツを見る際のユーザーの視線の動き。 Z型、F型、I型が存在。
Theme	主題、基本となる考え。

Atomic Designによるデザインカテゴリの分類

Lv.1 原子 / Atoms

名称	説明
プッシュボタン	最も一般的なボタンであり、一回のクリックごとに定められた何らかのアクションを起動する。
ラジオボタン	複数の選択肢の中で択一を行なう
トグルボタン	押すたびに状態が遷移する
チェックボックス	いくつかあるオプションから複数の項目を選択
スライダー	バー上で上下 (垂直スライダー) または左右 (水平スライダー) に移動して値 (または 2 つのハンドルが存在する場合は範囲??) を選択できるハンドルを持つコントロール
リスト ボックス	静的な複数行のテキスト ボックス内に含まれるリストからユーザーが 1 つまたは複数の項目を選択できる
スピナー	値の範囲をステップ実行するための小さな上下ボタンがある値入力コントロール
ドロップダウン リスト	選択するアイテムのリスト。通常、リストには、特別なボタンまたはインジケータがクリックされたときにのみ項目が表示されます。
コンボ ボックス(メニューまたはリスト ボックスが添付されたテキストボックス)	1 行のテキスト ボックスとドロップダウン リストまたはリスト ボックスの組み合わせで、ユーザーは値をコントロールに直接入力するか、リストから選択することができます。既存のオプション。
アイコン	ソフトウェア ツール、機能、またはデータ ファイルのすぐに理解できるシンボル。
リンク	クリックすると別の画面またはページに移動することを示す何らかのインジケータ (通常は下線や色) を含むテキスト。
スクロールバー	連続したテキスト、画像、またはその他のコンテンツを所定の方向 (上、下、左、または右) にスクロールできるグラフィック制御要素
テキスト ボックス	ユーザーがテキストを入力できるようにするためのグラフィカル コントロール要素
コンボ ボックス	ドロップダウン リストまたはリスト ボックスと単一行の編集可能なテキスト ボックスを組み合わせたグラフィカル コントロール要素
ラベル	別のウィジェットを説明するために使用されるテキスト
ツールチップ	マウスが別のコントロールの上に置かれたときに表示される情報ウィンドウ
バルーンヘルプ	バルーンヘルプ
ステータス バー	通常はウィンドウの下部にある情報領域を提示するグラフィカル コントロール要素
プログレス バー	ダウンロード、ファイル転送、インストールなど、拡張されたコンピュータ操作の進行状況を視覚化するために使用されるグラフィカル コントロール要素
Infobar	重要ではない情報をユーザーに表示するために多くのプログラムで使用されるグラフィカル コントロール要素
ウィンドウ	所属するプログラムのグラフィカル ユーザー インターフェイス要素の一部を含む視覚領域で構成されるグラフィカル コントロール要素

Lv.2 分子 / Molecules

名称	説明
パンくずリスト	ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧
ハンバーガーメニュー	サイト内の３本線のナビゲーションメニュー
アコーディオン	各項目を「展開」して関連するコンテンツを表示できる、ラベルやサムネイルなどの垂直に積み上げられた項目のリスト
モーダル ウィンドウ	アプリケーションのメイン ウィンドウに従属し、メイン ウィンドウを使用できないモードを作成するグラフィカル コントロール要素。
ダイアログ ボックス	ユーザーに情報を伝え、応答を求める小さなウィンドウ
パレット ウィンドウ	「ユーティリティ ウィンドウ」とも呼ばれます。すべての通常のウィンドウの上に表示され、現在のアプリケーションにすぐにアクセスできるツール、コマンド、または情報を提供するグラフィカル コントロール要素です。
インスペクタ ウィンドウ	ダイアログ ウィンドウの一種で、選択したオブジェクトの現在の属性のリストを表示し、これらのパラメータをその場で変更できるようにします。
フレーム	関係を視覚的に示す方法として、グラフィカル コントロール要素のコレクションをグループ化できるボックスのタイプ
Canvas	グラフィック情報を表すための一般的な描画要素
カバー フロー	ドキュメント、Web サイトのブックマーク、アルバム アートワーク、または写真のスナップショットを視覚的にめくるためのアニメーション化された 3 次元要素。
バブル フロー	ユーザーがディスカッション スレッドのツリー ビュー全体を参照および操作できるようにする、アニメーション化された 2 次元の要素。
カルーセル (コンピューティング)	Web サイトとモバイル アプリの両方で、ユーザーがすばやく閲覧できる方法でビジュアル カードを表示するために使用されるグラフィカル ウィジェット
ページネーション	Webサイト上での内容量の多いコンテンツを分割して表示する時に用いられるUI要素
タブ	複数のドキュメントまたはパネルを 1 つのウィンドウに含めることができるグラフィカル コントロール要素
メニュー	アクティブにする選択を選択するためにクリックできる複数のアクションを含むコントロール
コンテキスト メニュー	コンテキスト メニュー?メニューが呼び出されたときのコンテキストまたは状態に応じて内容が異なるメニューのタイプ
パイ メニュー	選択が方向に依存する円形のコンテキスト メニュー
メニューバー	ドロップダウン メニューを含むグラフィカル コントロール要素
ツールバー	画面上のボタン、アイコン、メニュー、またはその他の入力要素または出力要素が配置されるグラフィカル コントロール要素
リボン	メニューとツールバーのハイブリッドで、タブ付きインターフェイスを介して視覚的なレイアウトでコマンドの大規模なコレクションを表示します。
ツリー ビュー	情報の階層ビューを表示するグラフィカル コントロール要素
グリッド ビューまたはデータグリッド	グリッド ビューまたはデータグリッド?行と列に数値またはテキストを入力できる、スプレッドシートのようなデータの表形式のビュー。

Lv.3 生体 / Organisms

名称	説明
ヘッダー	Webサイトの上部スペースに位置するもの
ナビゲーション	"ユーザーが欲しい情報へ辿りつくためのサポートをするパーツ。 他の名称としてグローバルナビ、ヘッダーナビゲーション、ヘッダーメニュー、メインメニュー
サイドバー	「サイドバー」は、メインコンテンツの右端か左端、もしくは両方に配置
メインコンテンツ	"Webサイトの主要な部分のパーツ。 メインコンテンツは、ページごとに内容やレイアウトが変化。
フッター	メインコンテンツの下部に表示されるすべてのページに共通するパーツ

Lv.4 テンプレート / Templates

名称	説明
シングルカラムレイアウト	パーツをすべて1列で構成したレイアウト
マルチカラムレイアウト	複数の列を使ったレイアウトパターン
グリッドレイアウト	それぞれの要素をグリッド状（格子）に分割して並べること
ブロークングリッドレイアウト	規則性のある境界線をポイントであえて外したデザイン方法
ノングリッドデザイン	ブロークングリッドレイアウトよりもさらに崩したデザイン

Lv.5 ページ / Pages

名称	説明
レスポンシブレイアウト	画面の幅の数値に合わせてCSSの切り替えを行うレイアウト
リキッドレイアウト	デバイスの画面幅に応じてレイアウトを変更させる手法
フレキシブルレイアウト	リキッドレイアウトと同じで要素の単位を%で指定するが、最小幅と最大幅も指定したレイアウト。
グリットレイアウト	Webサイトの幅と高さから、画面を縦横に格子状に分割し、ブロックで構成したレイアウト