リソース / AIインサイト / 用語集
Webとインターフェースのデザイン
Webサイトやアプリの画面を形作る要素と、その視覚的なデザインの選択を簡潔に解説します。
34 初めての方にもわかりやすい用語解説です。
アクセシビリティ
アクセシビリティとは、さまざまな能力やニーズの人が製品を使えるようにすることです。
用語の説明を読むアクティブ状態
アクティブ状態は、押している項目や現在使用中の項目を示します。
用語の説明を読むアニメーション
アニメーションは、動きや変化を示すために時間とともに見た目を変えます。
用語の説明を読むアプリアイコン
アプリアイコンは、アプリを見分けて開くために使う画像です。
用語の説明を読む背景ぼかし
背景ぼかしは、透けるパネルの背後にあるものを柔らかく見せます。
用語の説明を読むボーダーの角丸設定
角丸は、ボックスの角がどれだけ丸く見えるかを決めます。
用語の説明を読むボックスモデル
ボックスモデルは、要素とその周囲がページ上で占める空間を表します。
用語の説明を読むボタン
ボタンは、押すと何かの操作を実行するコントロールです。
用語の説明を読むカード
カードは、少量の関連情報を一つの枠にまとめます。
用語の説明を読むカードグリッドレイアウト
カードグリッドは、関連項目をカードの行と列で並べます。
用語の説明を読むカラーピッカー
カラーピッカーを使うと、色を選べます。
用語の説明を読むコントラスト
コントラストは、隣り合う色や要素の見た目の違いです。
用語の説明を読むダークモード
ダークモードは、暗い背景と明るい文字をインターフェースに使います。
用語の説明を読むデザイントークン
デザイントークンは、色や余白、文字サイズなどに再利用する名前付きの値です。
用語の説明を読むFlexbox
Flexboxは項目を行または列に並べ、利用可能な空間を分配します。
用語の説明を読むフォーカス状態
フォーカス状態は、キーボード入力に応答するコントロールを示します。
用語の説明を読むCSS Grid
CSS Gridはページ要素を行と列に配置します。
用語の説明を読むアイコン
アイコンは、操作や考えを表す小さな画像です。
用語の説明を読む入力欄
入力欄は、画面上で情報を入力する場所です。
用語の説明を読むリンク
リンクは別のページ、場所、情報へ移動するためのものです。
用語の説明を読むマージン
マージンは要素の外側にある余白で、周囲との間隔を作ります。
用語の説明を読むメニュー
メニューは選択肢をまとめ、ページや操作を見つけやすくします。
用語の説明を読むモーダル
モーダルウィンドウは、先へ進む前にメッセージや決定に注目させます。
用語の説明を読むナビゲーションバー
ナビゲーションバーは、サイトの重要な場所へのリンクをまとめます。
用語の説明を読むレスポンシブデザイン
レスポンシブデザインは、画面サイズに合わせてウェブサイトを調整します。
用語の説明を読むセマンティックHTML
セマンティックHTMLは、ウェブページ各部の役割を表す要素を使います。
用語の説明を読むバウハウス
バウハウスは、芸術、工芸、実用的なデザインを結びつけた学校と運動です。
用語の説明を読むネオブルータリズム
ネオブルータリズムは、太い輪郭や単純な形、高いコントラストが特徴の大胆なスタイルです。
用語の説明を読むダークUI
ダークUIは、インターフェースの主な部分に暗い背景を使います。
用語の説明を読むターミナル風デザイン
ターミナル風デザインは、テキストベースのコンピューター端末を思わせる見た目です。
用語の説明を読むY2K
Y2Kデザインは、世紀の変わり目ごろに関連するレトロフューチャーな見た目です。
用語の説明を読むタイポグラフィ
タイポグラフィは、ページ上の文字の見え方や読みやすさを決めます。
用語の説明を読む視覚的階層
視覚的階層は、ページの重要な部分へ先に目を向けるよう導きます。
用語の説明を読むワイヤーフレーム
ワイヤーフレームは、ページやアプリ画面の簡単な設計図です。
用語の説明を読む