このページの中身

このページの中だけを絞ります。ページは移りません。

テーマ

分野をまたいで横断で、テーマの名前と扱うことから引けます。語を入れて絞り込むか、分野の名前で頭出しできます。

全65件を14分野に分けています。分野名で頭出しするか、上の窓に語を入れて絞ってください。

基礎 ／ タイポグラフィ ／ 色彩 ／ レイアウト ／ デザインシステム ／ UI部品 ／ UX・情報設計 ／ アクセシビリティ ／ モーション ／ 実装 ／ ブランディング ／ デザインスタイル ／ AIと制作 ／ SEO・公開と検索

基礎#

要素どうしの関係の作り方。全5件。

テーマ扱うことここで出てくる語
デザインの4原則近接・整列・反復・対比近接・整列・反復・対比・グルーピングほか
ゲシュタルトまとまりに見える仕組みゲシュタルト・類似・閉合・連続・共通運命ほか
視覚階層読む順序を作る視覚階層・主従・焦点・視覚的重量・対比
構図とバランス重さを釣り合わせるバランス・対称・非対称・緊張・リズムほか
認知の法則人はこう見てしまうフィッツの法則・ヒックの法則・ミラーの法則・ヤコブの法則・系列位置効果ほか

タイポグラフィ#

文字を読ませる技術。全6件。

テーマ扱うことここで出てくる語
書体の選び方セリフ・サンセリフ・等幅の使い分けタイポグラフィ・書体・フォント・セリフ・サンセリフほか
文字の骨格同じ級数でも大きさが違う理由x-height・キャップハイト・アセンダー・ディセンダー・ベースラインほか
字間と行間読みやすさの大半はここで決まるカーニング・トラッキング・行送り・行長・光学的整列ほか
大きさの体系級数を毎回決めないタイプスケール・モジュラースケール・流体タイポグラフィ・垂直リズム・等幅数字ほか
和文組版欧文の常識が通じないところ和文組版・禁則処理・ルビ・字取り・縦組みほか
Webフォントの実装重さと表示のちらつきWebフォント・FOUT・バリアブルフォント・フォントスタック・サブセット化

色彩#

色で伝える・色に頼らない。全5件。

テーマ扱うことここで出てくる語
色の3属性色相・彩度・明度で言い分ける色・色相・彩度・明度・クロマほか
色空間なぜ OKLCH を使うのか色空間・RGB・HSL・OKLCH・CIE Labほか
配色の型色相の関係で決める配色・単色配色・類似色配色・補色配色・三色配色ほか
コントラストと色覚読めるかどうかは明度で決まるコントラスト比・APCA・色覚特性
役割で色を持つ赤ではなくエラーと名づけるセマンティックカラー・ブランドカラー・アクセントカラー・ニュートラルカラー・ダークモード

レイアウト#

どこに置くか、どこで折り返すか。全5件。

テーマ扱うことここで出てくる語
グリッド配置の判断を毎回しないグリッド・カラム・ガター・12カラムグリッド・モジュラーグリッドほか
版面と行長幅は中身ではなくレイアウトが決める行長・コンテナ・最大幅・単一カラムグリッド・断ち落とし
余白量ではなく差で構造を出す余白・マージン・パディング・ギャップ・余白スケールほか
レスポンシブ幅が変わっても壊さないレスポンシブWebデザイン・ブレークポイント・モバイルファースト・可変レイアウト・ビューポートほか
構図のパターン並べ方の選択肢分割レイアウト・非対称レイアウト・ベントーグリッド・メーソンリー・カードレイアウトほか

デザインシステム#

統一を仕組みで担保する。全3件。

テーマ扱うことここで出てくる語
デザイントークン値に名前をつけて1箇所で変えるデザイントークン・プリミティブトークン・セマンティックトークン・コンポーネントトークン・トークン命名ほか
コンポーネント設計引数を増やさずに柔軟にするコンポーネント・バリアント・コンポーネントAPI・コンポジション・スロットほか
運用作って終わりにしないデザインシステム・スタイルガイド・ガバナンス・導入率・唯一の情報源ほか

UI部品#

定番の部品と、その選び分け。全8件。

テーマ扱うことここで出てくる語
ボタンとリンク押すのか、移動するのかボタン・リンク・ボタン階層・CTA・アイコンボタンほか
入力何を入れるかを常に見せるテキストフィールド・テキストエリア・ラベル・プレースホルダー・ヘルプテキストほか
選択選択肢の数で部品が決まるチェックボックス・ラジオボタン・セレクト・ドロップダウン・トグルスイッチほか
フォームの検証エラーは起こさないのが最善フォーム検証・インライン検証・エラーメッセージ・エラー予防・制約
ナビゲーションいまどこか、どこへ行けるかナビゲーション・グローバルナビゲーション・パンくずリスト・タブ・ページネーションほか
重ねる遮断するのか、しないのかモーダル・ダイアログ・ドロワー・ポップオーバー・ツールチップほか
知らせる消える通知と、残る通知トースト・スナックバー・アラートバナー・バッジ・チップほか
4つの状態正常だけを作らない空状態・エラー状態・読み込み状態・状態遷移・カードほか

UX・情報設計#

誰が、何を、どう探すか。全6件。

テーマ扱うことここで出てくる語
UXとUIとユーザビリティ言葉の範囲を揃えるUX・UI・ユーザビリティ・ユーザー中心設計・デザイン思考ほか
情報設計探せる構造を作る情報設計・分類体系・サイトマップ・カードソーティング・ツリーテストほか
利用者を捉える誰のために作るかを決めるペルソナ・ジョブ理論・ユーザージャーニー・ジャーニーマップ・サービスブループリントほか
設計の道具どこまで作り込むかワイヤーフレーム・モックアップ・プロトタイプ・忠実度・イテレーション
検証作り手には見えないものを見るユーザビリティテスト・思考発話法・ヒューリスティック評価・ニールセンの10原則・A/Bテストほか
UXライティング文言で迷いを消すUXライティング・マイクロコピー・トーン・オブ・ボイス・平易な言葉・ダークパターン

アクセシビリティ#

そもそも使えるかどうか。全5件。

テーマ扱うことここで出てくる語
WCAGの構造何を満たせばよいのかアクセシビリティ・WCAG・POUR・適合レベル・達成基準ほか
構造で伝える見えなくても内容が届くセマンティックHTML・見出し構造・ランドマーク・代替テキスト・装飾画像ほか
キーボードで使えるマウスがなくても操作できるキーボード操作・フォーカス・フォーカス可視・タブ順序・フォーカストラップ
見やすさ拡大しても、色が分からなくても文字サイズ変更・リフロー・ターゲットサイズ・prefers-reduced-motion
ARIA標準要素で足りないときだけARIA・ロール・アクセシブルネーム・ライブリージョン

モーション#

動きで変化を理解させる。全3件。

テーマ扱うことここで出てくる語
動きの基本時間と速度の決め方トランジション・アニメーション・イージング・キュービックベジェ・デュレーションほか
動きの設計何のために動かすかモーションデザイン・マイクロインタラクション・状態遷移・出入りのアニメーション・スタッガーほか
性能と配慮止めるべき動き、軽い動きコンポジタプロパティ・フレームレート・ジャンク・スクロール駆動アニメーション

実装#

CSSの仕組みと速度。全4件。

テーマ扱うことここで出てくる語
CSSの仕組みなぜ上書きできないのかカスケード・詳細度・カスケードレイヤー・カスタムプロパティ・論理プロパティほか
レイアウトの実装FlexboxとGridの使い分けFlexbox・CSS Grid・サブグリッド・clamp・メディアクエリほか
速度の指標何を測れば体感が分かるかCore Web Vitals・LCP・CLS・INP・TTFB
速くする効く順に手を入れる画像フォーマット・srcset・遅延読み込み・クリティカルCSS・レンダリングブロックほか

ブランディング#

同じものだと分からせる。全3件。

テーマ扱うことここで出てくる語
ブランドの構成受け手の中にあるものブランド・ブランドアイデンティティ・ビジュアルアイデンティティ・タグライン・ブランドガイドライン
ロゴ小さくしても、白黒でも読めるロゴ・ロゴタイプ・シンボルマーク・クリアスペース・ファビコン
画像の方向づけ寄せ集めに見せないアートディレクション・フォトディレクション・イラストレーションスタイル・アイコノグラフィ・アイコングリッドほか

デザインスタイル#

どの見た目を選ぶか。全2件。

テーマ扱うことここで出てくる語
デザインスタイルとは色・書体・余白の規則を1つに揃え、画面の態度を決めるミニマリズム・フラットデザイン・マテリアルデザイン・スキューモーフィズム・ニューモーフィズムほか
デザインスタイルの選び方業種と読者から決める

AIと制作#

生成物を既定値から離す。全3件。

テーマ扱うことここで出てくる語
AIに作らせる入口A。指示の具体性が出力を決めるデザインブリーフ・デザインリード・プロンプト・LLM・デザイン分散度ほか
AI Slopを避ける合流。既定の見た目を検出して外すAI Slop・AIテル・デフォルト回避
検証と完了合流。どこで人が判断するか受入条件・完了の定義・プリフライトチェック・スクリーンショット検証・デザインレビューほか

SEO・公開と検索#

作ったものを見つけてもらう。全7件。

テーマ扱うことここで出てくる語
タイトルの付け方検索結果でそのページを名乗る1行
説明文の書き方開く前に読まれる1文を書き分ける
見出しと構造骨格が伝われば、何のページか伝わる
URLの付け方住所を決め、変えるときに向け先を残す
構造化データ機械にこれは何かを伝える印
インデックスの制御出すか出さないかを、どこで指定するか
公開後に確かめる出したあとに見るものは、出す前と違う

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。