トピック別用語 · 50 ガイド

デザイン

画面を明確、統一、使いやすく、誰にでも開かれているものにする方法を学びましょう。

01 / アトラス

全てのデザイン用語

簡単な意味、例、使用時期、公式度、コードネームを含む用語を開く

01 · さらに詳細
Apple ヒューマンインターフェイスガイドライン Apple Human Interface Guidelines

AppleのHuman Interface Guidelinesは、Appleプラットフォーム用のデザインについて説明しています。これには、操作、ビジュアル、コントロール、入力、アクセシビリティ、プラットフォームごとの違いが含まれます。
02 · コア
B2B企業サイト B2B Corporate Site

B2Bコーポレートサイトは、企業が他社のスキル、ルール、信頼性、そして相性を確認するのに役立つよ。購入や提携のサポートもできるんだ。
03 · さらに詳細
CSSスクワークリコーナー CSS Squircle Corner

CSS Borders Level 4 のドラフトでは、スクアークルはラウンドとスクエアの間の凸スーパー楕円の角形状値である。これは superellipse(2) と等しく、ゼロでないボーダー半径が必要であり、依然としてブラウザ対応の確認が必要である。
04 · コア
CSSボーダー半径 CSS Border Radius

CSSのborder-radiusは、水平および垂直半径を使用してボックスの角を四分円にします。これはペインティングとクリッピングを変更しますが、ボックスのレイアウトサイズには影響せず、数学的なスクワイルを作るわけではありません。
05 · コア
Notionスタイルのワークスペース Notion-style Workspace

Notion スタイルの Workspace は、落ち着いた書類の見た目を使うよ。読みやすい文字、コンテンツブロック、目立たないコントロール、そして広々としたスペースを大切にするよ。
06 · コア
SaaSマーケティングサイト SaaS Marketing Site

SaaSのマーケティングサイトは、悩みとソフトウェアを分かりやすく伝える場所です。お客さんが自分に合っているか判断し、次のアクションへ進めるようにします。
07 · さらに詳細
Windows Aero Windows Aero

Windows Aeroは2000年代後半のデスクトップスタイルです。透過ウィンドウ枠、ぼやけたガラス、柔らかい光、重ねられたボーダーを使用します。
08 · さらに詳細
Y2K デジタル美学 Y2K Digital Aesthetic

このデジタル美学は1990年代末から2000年代初頭のデジタル文化におけるレトロフューチャースタイルです。よくクローム、ピクセル、明るいグラデーション、遊び心のあるコンピュータのディテールを使用します。
09 · さらに詳細
アイコン学 Iconography

アイコン学は、アクションやアイデアに対して見た目が揃い、明確な意味を持つ共有のシンボルセットです。
10 · さらに詳細
アクア Aqua

アクアは初期のmacOSに関連する光沢のあるインターフェイススタイルです。光るコントロール、ゼリーのような奥行き、細いストライプ、明るい青のアクセントを使用します。
11 · コア
アクセシビリティ Accessibility

アクセシビリティは、異なる能力を持つ人々が製品を理解し、使用するのを助けます。
12 · さらに詳細
アフォーダンス Affordance

アフォーダンスとは、物体がどのように使えるかを示す目に見える、または感じられる手がかりです。
13 · さらに詳細
ヴァーナキュラーウェブ Vernacular Web

ヴァーナキュラーウェブは、コミュニティが作る日常的なサイトをコピーする。大規模な組織が作る洗練されたシステムとは異なる。
14 · さらに詳細
ウェブブルータリズム Web Brutalism

ウェブブルータリズムは生のウェブスタイルです。通常の仕上げではなく、構造、ブラウザのデフォルト、プレーンなタイプ、計画された粗さを示します。
15 · コア
オーガニックデザイン Organic Design

オーガニックデザインは自然界に見られる形を追求します。不均一な曲線、触覚的な質感、自然の色、そして機械的でないレイアウトを使用します。
16 · コア
カラーパレット Color Palette

カラーパレットは、計画して選ばれた色のセットだよ。それぞれの色には、役割、状態、表面といったはっきりした意味があるんだ。
17 · さらに詳細
グラスモーフィズム Glassmorphism

グラスモーフィズムは、透明な層状の表面を持つビジュアルスタイルです。ぼかし、ライトボーダー、小さな奥行き感を使用します。
18 · コア
グラデーション Gradient

gradientは、色や透明度がなめらかに変わることです。直線、円、角度、網の目などの形で表せます。
19 · さらに詳細
クレイモルフィズム Claymorphism

クレイモルフィズムは、ふっくらした形状と丸い角を持つ遊び心のあるスタイルです。柔らかい影とパステル調の表面が粘土のような見た目を作ります。
20 · コア
コンポーネント Component

Componentは、画面のパーツとして何度も使えるものです。形、動き、状態、そして使える範囲がはっきり決まっています。
21 · コア
シャドウとエレベーション Shadow & Elevation

影は視覚的な効果です。エレベーション（高さ）は、影が面と面の間の深さをどれくらい見せているかという関係です。
22 · さらに詳細
スイススタイル Swiss Style

スイススタイルは、明確なグリッドと不均衡ながらバランスの取れたレイアウトを使用します。また、サンセリフ体の文字、写真、そして厳格な視覚的順序を使用します。
23 · さらに詳細
スキューモーフィズム Skeuomorphism

スキューモーフィズムは、デジタルコントロールを説明するために、馴染みのある実際の物をコピーします。また、その素材もコピーすることがあります。
24 · さらに詳細
スケールを入力 Type Scale

タイプスケールは、計画された少人数の、文字のサイズと行の高さのセットです。
25 · コア
スペーシングスケール Spacing Scale

スペーシングスケールは、いくつかの限られた隙間のサイズのセットです。グループを分け、一定のリズムを保ちます。
26 · コア
ダークモード Dark Mode

ダークモードは、暗い設定用に表面、テキスト、境界、メディア、および状態を変更します。
27 · コア
ターミナル美学 Terminal Aesthetic

ターミナル美学は、コマンドライン画面から借用しています。等幅フォント、厳密な階層構造、プロンプトマーク、少ない色、そして明確なステータスを使用します。
28 · コア
タイポグラフィ Typography

タイポグラフィとは、テキストスタイルを選択して配置し、単語を読みやすく、秩序立て、ブランドに沿わせる方法です。
29 · コア
デザインシステム Design System

Design Systemは、みんなで共有して管理するルール、design token、component、pattern、そしてガイドのセットです。
30 · コア
デザイントークン Design Token

Design Tokenは、デザインの選択に一つの名前をつけたものです。たとえば、色、余白、フォント、動きの速さなどがあります。
31 · さらに詳細
ニューモーフィズム Neumorphism

ニューモーフィズムは柔らかく低コントラストなスタイルです。光と影を使うことで、コントロールが一色の表面から浮き上がっているか押し込まれているように見えます。
32 · さらに詳細
ネオブルータリズム Neobrutalism

ネオブルータリズムは、大胆で高コントラストのデジタルスタイルです。シンプルな形状、太い境界線、直接的な色、明確な機械的レイアウトを使用します。
33 · コア
バリアント Variant

バリアントは、サイズや強さ、設定を変えるための、承認されたバージョンのことです。
34 · コア
ビジュアル階層 Visual Hierarchy

ビジュアル階層は、人々が最初に、次に、最後に何に注目するかを、サイズ、コントラスト、配置、空間で導きます。
35 · コア
フォーカスリング Focus Ring

今キーボードの入力を受け取っているコントロールの周りにある、線やハイライトのことです。
36 · コア
フラットデザイン Flat Design

フラットデザインは、シンプルな形、単色、明確な平坦領域を使用し、疑似的な奥行きは少なめです
37 · さらに詳細
フルティガーエアロ Frutiger Aero

Frutiger Aeroは、2000年代中期の希望に満ちたスタイルです。光沢のあるインターフェースに青空、水、緑の植物、泡、親しみやすい技術を組み合わせています。
38 · さらに詳細
プログレッシブディスクロージャー Progressive Disclosure

プログレッシブディスクロージャーは、最初に必要な選択肢を表示し、後から重要になった場合にのみ難しいオプションを明らかにします。
39 · さらに詳細
ボーダー半径 & スクァークル — ラーニングバンドル Border Radius & Squircle — Learning Bundle

このガイドは3つのアイデアを分けています。それは標準的なCSSのborder-radius、試作コーナー形状：スクワイアクル、その他のスクワイアクルに似た形状やプラットフォームマスクです。このバンドルは標準的なデザイン用語ではありません。
40 · コア
マテリアルデザイン Material Design

マテリアルデザインはコンポーネントとインタラクションのシステムです。段階的な表面、目的のある動き、柔軟なレイアウト、共有デザイントークンを使用します。
41 · コア
ミニマリズム Minimalism

ミニマリズムはデザインに不要なものを取り除きます。それでも製品を明確で、有用で、際立たせます。
42 · さらに詳細
メンフィススタイル Memphis Style

メンフィススタイルは大胆なポストモダンの外観です。強い形、衝突する色、パターン、不均衡なバランス、遊び心のあるエネルギーを使用します。
43 · さらに詳細
リキッドガラス Liquid Glass

リキッドガラスは動く透明な素材スタイルです。レンズのような曲がり、ハイライト、結合や柔軟に見える形状を使用します。
44 · コア
レスポンシブデザイン Responsive Design

レスポンシブデザインは、利用可能なスペースやデバイスに合わせてレイアウト、コンテンツ、コントロールを変更できます。
45 · コア
色コントラスト Color Contrast

色コントラストは、コンテンツとその近くの背景との間の光の差を測定したものです。重要なテキストや境界が見やすいかを示します。
46 · コア
相互作用状態 Interaction State

インタラクションステートは、コントロールの現在の状態を示します。例としては、デフォルト、ホバー、フォーカス、押下、無効、読み込み中、エラー、成功があります。
47 · コア
直接顧客向けEコマース DTC E-commerce

DTC Eコマースはブランドが消費者に直接販売できるようにします。これには発見、製品選択、支払い、配送、アフターサービスが含まれます。
48 · コア
編集デザイン Editorial Design

編集デザインは、読みのペース、フォント、画像、キャプション、繰り返されるページパターンを通じてストーリーを構成します。
49 · コア
遊び心のあるイラスト Playful Illustration

遊び心のあるイラストは、生き生きとしたキャラクター、形、色、視覚的なジョークを使用します。温かみ、意味、またはブランドの特性を加えることができます。
50 · さらに詳細
侘び寂び Wabi-sabi

侘び寂びは日本の美の見方です。それは完璧な磨きよりも、限界、変化、不均一な形、年齢、そして正直な素材を重んじます。