デザイントークンDesign Token
Design Tokenは、デザインの選択に一つの名前をつけたものです。たとえば、色、余白、フォント、動きの速さなどがあります。
ガイドを開く例で説明されるUIデザインスタイル
各スタイルがどのように見えるか、役立つ時と邪魔になる時を見る
バリアントVariant
バリアントは、サイズや強さ、設定を変えるための、承認されたバージョンのことです。
ガイドを開くビジュアル階層Visual Hierarchy
ビジュアル階層は、人々が最初に、次に、最後に何に注目するかを、サイズ、コントラスト、配置、空間で導きます。
ガイドを開く色コントラストColor Contrast
色コントラストは、コンテンツとその近くの背景との間の光の差を測定したものです。重要なテキストや境界が見やすいかを示します。
ガイドを開くタイポグラフィTypography
タイポグラフィとは、テキストスタイルを選択して配置し、単語を読みやすく、秩序立て、ブランドに沿わせる方法です。
ガイドを開くスケールを入力Type Scale
タイプスケールは、計画された少人数の、文字のサイズと行の高さのセットです。
ガイドを開くカラーパレットColor Palette
カラーパレットは、計画して選ばれた色のセットだよ。それぞれの色には、役割、状態、表面といったはっきりした意味があるんだ。
ガイドを開くスペーシングスケールSpacing Scale
スペーシングスケールは、いくつかの限られた隙間のサイズのセットです。グループを分け、一定のリズムを保ちます。
ガイドを開くアイコン学Iconography
アイコン学は、アクションやアイデアに対して見た目が揃い、明確な意味を持つ共有のシンボルセットです。
ガイドを開くダークモードDark Mode
ダークモードは、暗い設定用に表面、テキスト、境界、メディア、および状態を変更します。
ガイドを開くレスポンシブデザインResponsive Design
レスポンシブデザインは、利用可能なスペースやデバイスに合わせてレイアウト、コンテンツ、コントロールを変更できます。
ガイドを開くスクリムScrim
スクリムは、ポップアップの後ろにある、少しだけ暗い透明の幕です。これがあることで下のページは見えなくなり、ポップアップが際立ちます。
ガイドを開く間隔Spacing
スペーシングは意図的に配置された空白です。関連する項目をまとめ、アイデアを区切り、ページのリズムを作ります。
ガイドを開くマージンMargin
マージンは要素のボーダー外のスペースです。それにより要素が近くのレイアウト項目から離れます。
ガイドを開くパディングPadding
パディングは、要素の境界内の、コンテンツとその端との間のスペースです。
ガイドを開くギャップGap
ギャップとは、コンテナがFlexboxまたはGridの子要素の間に配置するスペースです。同じルールがすべてのペアに適用されます。
ガイドを開く中央列Centered Column
真ん中の列は、読みやすい最大幅があって、左右の余白が同じように見えるよ。
ガイドを開く弁当グリッドBento Grid
Bentoグリッドは、違う大きさのタイルを1つのレイアウトにきれいに詰め込むよ。大きく配置された部分は、どのコンテンツが一番大事かを示しているんだ。
ガイドを開くテキストの切り詰めText Truncation
テキストの切り詰めは、スペースを節約するためにテキストを切り取ります。省略記号は1行以上が欠落していることを示します。
ガイドを開くアスペクト比Aspect Ratio
アスペクト比は、要素の幅が高さに比べてどれくらいかを示します。
ガイドを開く背景のぼかしBackdrop Blur
バックドロップのぼかしは、透明な表面の後ろにあるものをやわらげます。表面自体の内容はぼかしません。
ガイドを開くグラスモーフィズムGlassmorphism
グラスモーフィズムは、透明な層状の表面を持つビジュアルスタイルです。ぼかし、ライトボーダー、小さな奥行き感を使用します。
ガイドを開くリキッドガラスLiquid Glass
リキッドガラスは動く透明な素材スタイルです。レンズのような曲がり、ハイライト、結合や柔軟に見える形状を使用します。
ガイドを開くスキューモーフィズムSkeuomorphism
スキューモーフィズムは、デジタルコントロールを説明するために、馴染みのある実際の物をコピーします。また、その素材もコピーすることがあります。
ガイドを開くニューモーフィズムNeumorphism
ニューモーフィズムは柔らかく低コントラストなスタイルです。光と影を使うことで、コントロールが一色の表面から浮き上がっているか押し込まれているように見えます。
ガイドを開くネオブルータリズムNeobrutalism
ネオブルータリズムは、大胆で高コントラストのデジタルスタイルです。シンプルな形状、太い境界線、直接的な色、明確な機械的レイアウトを使用します。
ガイドを開くミニマリズムMinimalism
ミニマリズムはデザインに不要なものを取り除きます。それでも製品を明確で、有用で、際立たせます。
ガイドを開くフラットデザインFlat Design
フラットデザインは、シンプルな形、単色、明確な平坦領域を使用し、疑似的な奥行きは少なめです
ガイドを開くクレイモルフィズムClaymorphism
クレイモルフィズムは、ふっくらした形状と丸い角を持つ遊び心のあるスタイルです。柔らかい影とパステル調の表面が粘土のような見た目を作ります。
ガイドを開くY2K デジタル美学Y2K Digital Aesthetic
このデジタル美学は1990年代末から2000年代初頭のデジタル文化におけるレトロフューチャースタイルです。よくクローム、ピクセル、明るいグラデーション、遊び心のあるコンピュータのディテールを使用します。
ガイドを開くフルティガーエアロFrutiger Aero
Frutiger Aeroは、2000年代中期の希望に満ちたスタイルです。光沢のあるインターフェースに青空、水、緑の植物、泡、親しみやすい技術を組み合わせています。
ガイドを開くウェブブルータリズムWeb Brutalism
ウェブブルータリズムは生のウェブスタイルです。通常の仕上げではなく、構造、ブラウザのデフォルト、プレーンなタイプ、計画された粗さを示します。
ガイドを開くヴァーナキュラーウェブVernacular Web
ヴァーナキュラーウェブは、コミュニティが作る日常的なサイトをコピーする。大規模な組織が作る洗練されたシステムとは異なる。
ガイドを開くアクアAqua
アクアは初期のmacOSに関連する光沢のあるインターフェイススタイルです。光るコントロール、ゼリーのような奥行き、細いストライプ、明るい青のアクセントを使用します。
ガイドを開くWindows AeroWindows Aero
Windows Aeroは2000年代後半のデスクトップスタイルです。透過ウィンドウ枠、ぼやけたガラス、柔らかい光、重ねられたボーダーを使用します。
ガイドを開くスイススタイルSwiss Style
スイススタイルは、明確なグリッドと不均衡ながらバランスの取れたレイアウトを使用します。また、サンセリフ体の文字、写真、そして厳格な視覚的順序を使用します。
ガイドを開く編集デザインEditorial Design
編集デザインは、読みのペース、フォント、画像、キャプション、繰り返されるページパターンを通じてストーリーを構成します。
ガイドを開くマテリアルデザインMaterial Design
マテリアルデザインはコンポーネントとインタラクションのシステムです。段階的な表面、目的のある動き、柔軟なレイアウト、共有デザイントークンを使用します。
ガイドを開くグラデーションGradient
gradientは、色や透明度がなめらかに変わることです。直線、円、角度、網の目などの形で表せます。
ガイドを開くシャドウとエレベーションShadow & Elevation
影は視覚的な効果です。エレベーション（高さ）は、影が面と面の間の深さをどれくらい見せているかという関係です。
ガイドを開くボーダー半径 & スクァークル — ラーニングバンドルBorder Radius & Squircle — Learning Bundle
このガイドは3つのアイデアを分けています。それは標準的なCSSのborder-radius、試作コーナー形状：スクワイアクル、その他のスクワイアクルに似た形状やプラットフォームマスクです。このバンドルは標準的なデザイン用語ではありません。
ガイドを開く不透明度Opacity
不透明度は要素とその子要素がどれだけ固いかを示します。透明から不透明までの範囲があります。
ガイドを開くApple ヒューマンインターフェイスガイドラインApple Human Interface Guidelines
AppleのHuman Interface Guidelinesは、Appleプラットフォーム用のデザインについて説明しています。これには、操作、ビジュアル、コントロール、入力、アクセシビリティ、プラットフォームごとの違いが含まれます。
ガイドを開くNotionスタイルのワークスペースNotion-style Workspace
Notion スタイルの Workspace は、落ち着いた書類の見た目を使うよ。読みやすい文字、コンテンツブロック、目立たないコントロール、そして広々としたスペースを大切にするよ。
ガイドを開くSaaSマーケティングサイトSaaS Marketing Site
SaaSのマーケティングサイトは、悩みとソフトウェアを分かりやすく伝える場所です。お客さんが自分に合っているか判断し、次のアクションへ進めるようにします。
ガイドを開くB2B企業サイトB2B Corporate Site
B2Bコーポレートサイトは、企業が他社のスキル、ルール、信頼性、そして相性を確認するのに役立つよ。購入や提携のサポートもできるんだ。
ガイドを開く直接顧客向けEコマースDTC E-commerce
DTC Eコマースはブランドが消費者に直接販売できるようにします。これには発見、製品選択、支払い、配送、アフターサービスが含まれます。
ガイドを開く遊び心のあるイラストPlayful Illustration
遊び心のあるイラストは、生き生きとしたキャラクター、形、色、視覚的なジョークを使用します。温かみ、意味、またはブランドの特性を加えることができます。
ガイドを開くオーガニックデザインOrganic Design
オーガニックデザインは自然界に見られる形を追求します。不均一な曲線、触覚的な質感、自然の色、そして機械的でないレイアウトを使用します。
ガイドを開くメンフィススタイルMemphis Style
メンフィススタイルは大胆なポストモダンの外観です。強い形、衝突する色、パターン、不均衡なバランス、遊び心のあるエネルギーを使用します。
ガイドを開くターミナル美学Terminal Aesthetic
ターミナル美学は、コマンドライン画面から借用しています。等幅フォント、厳密な階層構造、プロンプトマーク、少ない色、そして明確なステータスを使用します。
ガイドを開く侘び寂びWabi-sabi
侘び寂びは日本の美の見方です。それは完璧な磨きよりも、限界、変化、不均一な形、年齢、そして正直な素材を重んじます。
ガイドを開くCSS論理プロパティCSS Logical Properties
CSS論理プロパティはブロックやインラインのような書き方向で側面を表します。これにより、top、right、bottom、leftのような固定方向の代わりになります。これにより、レイアウトが言語の書き方向に従いやすくなります。
ガイドを開くサブグリッドSubgrid
サブグリッドは、親の行または列のサイズを共有する別のグリッド内のグリッドです。1方向のみまたは両方を共有できます。
ガイドを開く固有サイズ設定Intrinsic Sizing
固有サイズ設定では、外部からの固定サイズだけでなく、要素の内容がサイズの決定に役立ちます。
ガイドを開く最小コンテンツmin-content
`min-content` は、許可されるすべての改行後にコンテンツが使える最小サイズです。
ガイドを開く最大コンテンツmax-content
`max-content` は、通常の改行ポイントで折り返されなかった場合にコンテンツが希望するサイズです。
ガイドを開くminmax()minmax()
`minmax()` は、行や列に最小サイズと最大サイズの両方を設定できる CSS グリッド関数です。
ガイドを開くclamp()clamp()
`clamp()` は好ましいCSS値を選択しますが、最小値と最大値の間に保持します。
ガイドを開くobject-fitobject-fit
`object-fit` は、画像、ビデオ、または類似のアイテムがそのボックス内にどのように収まるかを制御します。
ガイドを開くビューポート単位Viewport Units
ビューポート単位は、ブラウザの表示領域に基づいたCSSの長さです。小・大・動的バージョンは、表示・非表示になるブラウザバーに対応します。
ガイドを開く疑似クラスPseudo-class
疑似クラスはCSSセレクタの一部です。状態、場所、言語、またはユーザーの操作などの条件で要素を見つけます。
ガイドを開く疑似要素Pseudo-element
疑似要素は、CSSがソースHTMLに通常の要素がない部分やボックスをスタイルできるようにします。例としては、最初の文字や生成された装飾があります。
ガイドを開くCSSボーダー半径CSS Border Radius
CSSのborder-radiusは、水平および垂直半径を使用してボックスの角を四分円にします。これはペインティングとクリッピングを変更しますが、ボックスのレイアウトサイズには影響せず、数学的なスクワイルを作るわけではありません。
ガイドを開くCSSスクワークリコーナーCSS Squircle Corner
CSS Borders Level 4 のドラフトでは、スクアークルはラウンドとスクエアの間の凸スーパー楕円の角形状値である。これは superellipse(2) と等しく、ゼロでないボーダー半径が必要であり、依然としてブラウザ対応の確認が必要である。
ガイドを開く強制カラー モードForced Colors Mode
強制カラー モードは、多くのページカラーの代わりにユーザーが選択したシステムパレットを使用します。これにより、コントロールやテキストを区別しやすくすることができます。
ガイドを開くVisual Effect MaterialVisual Effect Material
ビジュアルエフェクトマテリアルは、背後のものをブレンドしてぼかすmacOSのサーフェススタイルです。ウィンドウの状態やライト/ダークモードによって変化します。
ガイドを開く