(最終更新:2025/3/20)
こんにちは、ちょこです。
このページでは、ゲームUIデザイナーを目指す学生さんが知っておいた方が良さそうな用語をまとめています。紹介する用語の基準としては、比較的初学者向けの書籍に登場する言葉を中心にしています。参考にした書籍についてはAmazonのリンクも併記しておくので、より詳しく知りたい方は読んでみても良いかもしれません。
言葉を知ることで人に伝えやすくなったり、検索しやすくなるため、覚えておいて損は無いかと思います。
感覚的ですが、ゲームUIデザイナーに必要な要素は以下の3つの要素を掛け算している印象なので、その項目ごとにまとめています。
【グラフィックデザイナー】×【UIデザイナー】×【ゲーム業界】
- グラフィックデザイン
- 基礎…1語
- グラフィック…6語
- 配色…25語
- 1:あ…アブニーシフト現象
- 2:い…イッテンの12色環
- 3:い…色の三属性
- 4:い…色の恒常性
- 5:え…縁辺対比(マッハ効果)
- 6:お…オストワルトの色彩調和論
- 7:か…慣用色名
- 8:し…色相の自然連鎖/色相の自然序列
- 9:し…条件等色(メタメリズム)
- 10:し…ジャッドの色彩調和論
- 11:し…シュブルールの色彩調和論
- 12:す…スタイルズ-クロフォード効果
- 13:ど…同化
- 14:ど…同色(アイソメリズム)
- 15:は…パートカラー
- 16:は…ハント効果
- 17:ぷ…プルキンエ現象
- 18:へ…ベゾルト-ブリュッケ現象
- 19:へ…ヘルソン-ジャッド効果
- 20:へ…ヘルムホルツ-コールラウシュ効果
- 21:む…ムーンとスペンサーの色彩調和論
- 22:め…面積効果/面積対比
- 23:ゆ…ユニバーサルカラー
- 24:よ…4つの原理
- 25:り…リッチブラック
- レイアウト…12語
- 文字…38語
- 1:い…インデント
- 2:い…イニシャルキャップ
- 3:い…異字体
- 4:う…ウェイト
- 5:か…カーニング
- 6:か…カーニングペア
- 7:か…可読性
- 8:ぎ…牛耕体
- 9:き…禁則・禁則処理
- 10:ぎ…行間
- 11:ぎ…行長
- 12:き…均等揃え・ジャスティファイ
- 13:こ…混植
- 14:ご…合字/リガチャ
- 15:し…斜体(slant)
- 16:し…省略表記
- 17:す…スペーシング
- 18:す…スミ文字
- 19:す…スーパーファミリー
- 20:ち…長体
- 21:と…トラッキング
- 22:ど…ドロップキャップ
- 23:は…花形活字/プリンターフラワー
- 24:ば…バブリアブルフォント
- 25:ぱ…パラグラフ
- 26:ぱ…パングラム
- 27:ふ…ファミリー
- 28:ふ…袋文字/アウトライン
- 29:へ…平体
- 30:め…明視性
- 31:ら…ラグ組
- 32:ら…ラグラフ
- 33:り…リバー
- 34:る…ルビ
- 35:れ…レイク
- 36:れ…レディング(leading)
- 37:わ…ワードスペーシング
- 38:わ…わかち書き
- 文字の形(和文)…6語
- 文字の形(欧文)…23語
- 1:い…イタリック体(italic)
- 2:ヴ…ヴァーサル体
- 3:え…エクスパンデッド体
- 4:お…オブリーク体(oblique)
- 5:お…オルタネート文字
- 6:か…カッパープレート体
- 7:か…カリグラフィー
- 8:ご…ゴシック体
- 9:こ…コンデンス体
- 10:さ…サンセリフ体
- 11:す…スクリプト体
- 12:す…スラブセリフ
- 13:す…スワッシュキャピタル
- 14:せ…セリフ体
- 15:で…デコラティブ体
- 16:ふ…ファウンデーショナル体 (Foundational Hand)
- 17:ぶ…ブラケットセリフ
- 18:ぶ…ブラックレター体
- 19:ふ…フローリッシュ
- 20:ぷ…プロトゴシック
- 21:へ…ヘアラインセリフ
- 22:ら…ラスティック体(Rustic)
- 23:ろ…ローマン体
- フォント…7語
- UIデザイナー
- 思想(設計)…12語
- 思想(ビジュアル)…41語
- 1:あ…アトミックデザイン
- 2:あ…アフォーダンス
- 3:し…シグニファイア
- 4:す…スキューモフィズム
- 5:だ…ダイエジェティックUI
- 6:に…ニューモーフィズム
- 7:び…ビジュアルヒエラルキー
- 8:ふ…フラットデザイン
- 9:ま…マテリアルデザイン
- 10:も…モード
- 11:も…モードレス
- 12:り…リキッドレイアウト
- 13:れ…レスポンシブデザイン
- 14:O…OOUI
- 15:あ…アンカリング効果
- 16:が…画像優位性効果
- 17:か…カリギュラ効果
- 18:K…KISSの法則
- 19:げ…現状維持バイアス
- 20:さ…錯視
- 21:じ…自己奉仕バイアス
- 22:じ…ジャムの法則
- 23:し…初頭効果
- 24:す…ストループ効果
- 25:そ…損失回避の法則
- 26:だ…段階的開示
- 27:た…単純接触効果
- 28:ち…チャンク
- 29:つ…ツァイガルニック効果
- 30:で…デフォルト効果
- 31:て…テンションリダクション効果
- 32:と…ドハティの閾値
- 33:な…ナッジ
- 34:ひ…ヒックの法則
- 35:ひ…美的ユーザビリティ
- 36:ふ…フィッツの法則
- 37:ぷ…プレグナンツの法則
- 38:ほ…保有効果
- 39:め…メタファ
- 40:め…メンタルモデル
- 41:や…ヤコブの法則
- GUI…41語
- 1:あ…アコーディオン
- 2:う…ウォークスルー
- 3:お…オンボーディング
- 4:か…カルーセル
- 5:く…クオシモード/バネ式UI
- 6:げ…ゲージ
- 7:こ…コーチマーク
- 8:こ…コンポーネント
- 9:す…スケルトンスクリーン
- 10:す…スプラッシュスクリーン
- 11:す…スナックバー
- 12:す…ステップバー
- 13:す…スライダー
- 14:だ…ダイアログ
- 15:た…タブボタン
- 16:ち…チェックボタン
- 17:つ…通知バッジ
- 18:て…テキストボックス
- 19:と…トースト
- 20:と…トグルボタン
- 21:ど…ドロップダウン
- 22:と…ドロワー
- 23:な…ナビゲーション
- 24:の…ノッチ
- 25:は…ハーフモーダル
- 26:ぱ…パララックス
- 27:ふ…ファーストビュー
- 28:ふ…フッター
- 29:ぷ…プルダウンメニュー
- 30:ぷ…プレースホルダー
- 31:ぷ…プログレスバー
- 32:ふ…フローティングアクションボタン(FAB)
- 33:ぺ…ページネーション
- 34:へ…ヘッダー
- 35:ほ…ホームインジケーター
- 36:ぼ…ボタン
- 37:も…モーダル
- 38:ら…ラジオボタン
- 39:り…リングゲージ
- 40:わ…ワイヤーフレーム
- 41:H…HUD
- 評価・分析…14語
- 未分類…2語
- ゲーム業界…7語
- 人物…6語
グラフィックデザイン
基礎…1語
1:デザイン4大原則
「近接」「整列」「反復」「対比」を指しています。
グラフィック…6語
1:あ…アイコン
2:い…インフォグラフィック
3:さ…サムネイル
4:し…シズル感
- 消費者の五感に訴えて購買意欲をそそる手法を指す(参考:デザインのルール、レイアウトのセオリー。
)
- 英語の肉を焼くときの擬音「sizzle」に由来する(参考:デザインのルール、レイアウトのセオリー。
)
5:ぴ…ピクトグラム
- 言語が分からない場合でも情報を正確に伝えるための絵文字(参考:タイポグラフィの基本ルール
)
6:め…明視性
- 図形の見やすさ(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.6)
- 会社やブランドのロゴマーク、看板、標識、サインなどで考慮する必要がある(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.6)
配色…25語
1:あ…アブニーシフト現象
- ある色光に白色光を加えて光の純度を変えると色相が見える現象(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.142)
2:い…イッテンの12色環
3:い…色の三属性
- 色相、彩度、明度のこと
4:い…色の恒常性
- 周囲の色みが変わっても、ある程度脳の記憶や推測から、いつもと変わらないように色を感じ取る機能のこと(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.141)
5:え…縁辺対比(マッハ効果)
- 明るい色と暗い色が接した箇所で、明るさの印象に変化が起きる(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.62)
- 異なる色が接する境目付近で色が変化して見える現象(参考:「やさしい配色の教科書[改訂版]
」p.46)
6:お…オストワルトの色彩調和論
- 「灰色調和」「等色相面における調和」「等価値の調和」「補色対/非補色対菱形における調和」「輪星の調和」(参考:「色の大事典 基礎知識と配色・カラーチャート・伝統色・慣用色名 DIGITAL COLORS for DESIGN
」p.186)
7:か…慣用色名
- 植物や動物、鉱物といった身の回りにある物の名前からつけられた固有色のの名前からつけられた固有色の中で日常的・慣用的に使われるようになった色の名前のこと。JISでは296色選定されている。(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.125)
8:し…色相の自然連鎖/色相の自然序列
- 同じ色でも自然光が当たっているところは黄みがかって見え、光が当たらず暗いところでは青みがかって見える(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.18)
9:し…条件等色(メタメリズム)
- 物理的には異なる色なのに、ある条件下でのみ同じ色に見えること(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.143)
10:し…ジャッドの色彩調和論
- 「秩序の原理」「なじみの原理」「類似性の原理」「明瞭性の原理」がある(参考:「色の大事典 基礎知識と配色・カラーチャート・伝統色・慣用色名 DIGITAL COLORS for DESIGN
」p.187)
11:し…シュブルールの色彩調和論
-
「近似調和」と「対比調和」がある。近似調和には「明度近似の調和」「彩度近似の調和」「色相近似の調和」がある。対比調和には「明度対比の調和」「彩度対比の調和」「色相対比の調和」がある(参考:「色の大事典 基礎知識と配色・カラーチャート・伝統色・慣用色名 DIGITAL COLORS for DESIGN
」p.186)
12:す…スタイルズ-クロフォード効果
- 同じ強さの光でも、光が目の瞳孔の中心を通過する時は明度が高く明るく感じる。瞳孔の周辺を通過するにつれ、明度が低く感じる(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.143)
13:ど…同化
- ある色がほかの色に囲まれると、周囲の色に似て見える現象(参考:「やさしい配色の教科書[改訂版]
」p.48)
14:ど…同色(アイソメリズム)
- 物理的に同じ色(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.143)
15:は…パートカラー
- パートカラーとは、モノクロ写真の中で、中心となる対象物だけをカラーにする手法を言います(参考:やさしいレイアウトの教科書
)
16:は…ハント効果
- 有彩色は明るい照明光はより強く見えてからフルネスが高まり、暗い照明光は有彩色性が失われ無彩色に見える効果(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.143)
17:ぷ…プルキンエ現象
- 明所視と暗所視では眼の感度に違いがある現象(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.141)
18:へ…ベゾルト-ブリュッケ現象
- 同じ色相の色でも、明るい光の時と暗い光の時で色相が違って見える現象(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.142)
19:へ…ヘルソン-ジャッド効果
- 照明が与える色の見えが、図色と地色の関係によって異なる効果(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.143)
20:へ…ヘルムホルツ-コールラウシュ効果
- 鮮やかで目立つものを「明るい」と捉える傾向(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.142)
- 特に青、紫、赤紫の場合に強く現れ、逆に黄色ではあまり現れない(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.142)
21:む…ムーンとスペンサーの色彩調和論
- 色の調和については「同じ色の調和」「似た色の調和」「反対色の調和」があり、不調和は「ごく似た色の不調和」「やや違った色の不調和」「極端な反対色の不調和」がある(参考:「色の大事典 基礎知識と配色・カラーチャート・伝統色・慣用色名 DIGITAL COLORS for DESIGN
」p.187)
22:め…面積効果/面積対比
- 明るい色は小さな面積で見るより、大きな面積で見た方が明るく見える(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.62)
- 明るい色は小さな面積で見るより、大きな面積で見た方が明るく見える。彩度も高く見える(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.62)
- 暗い色は小さな面積に比べ、大きな面積になるとより暗く見える。彩度も低く見える(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.62)
- 色の面積の大小によって明度や彩度が変化する現象(参考:「やさしい配色の教科書[改訂版]
」p.44)
23:ゆ…ユニバーサルカラー
- UDCとも略される
24:よ…4つの原理
- 秩序の原理、なじみの原理、類似性の原理、明瞭性の原理
25:り…リッチブラック
- K以外の色を掛け合わせて深みのある黒を表現すること(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.157)
レイアウト…12語
1:あ…アスペクト比
- 画面の縦横比。以前は16:9とか4:3で画面デザインしていればとりあえず良かったけど、今は19.5:9くらいの比率が多い。
2:ぐ…グリッドシステム
- 元々はある程度綺麗なレイアウトを効率よくたくさんデザイン、印刷するために考えられた仕組み。webベースのデザインに用いられることがある。
- 格子状に分割したガイドを引いて、それに配置する要素を合わせてレイアウトする手法です。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
- レイアウトを行う際、紙面を分割するガイドを作成し、ガイドに沿って要素を配置する手法(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.23)
3:し…視線誘導
- Nの法則、Fの法則、Zの法則などが有名です。
- 主に雑誌の文字組やwebページのレイアウトの文脈で語られます。
- アラビア語のようなRTLの文化圏ではこの法則は適用されません。
4:し…視認性
- 意識して見る時の発見のしやすさを指す(参考:「やさしい配色の教科書[改訂版]
」p.126)
- 色相・明度・彩度のうち、明度差が最も大きく影響する(参考:「やさしい配色の教科書[改訂版]
」p.126)
5:じ…ジャンプ率
- テキストやグラフィック要素の大小の差(参考:デザインのルール、レイアウトのセオリー。
)
- 文字や画像の大きさの比率を指す(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.48)
- ジャンプ率が大きいと活気のある画面になり、小さいと落ち着いた画面になる傾向がある(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.48)
6:せ…セーフエリア
7:ぽ…ポートレート
8:ま…マージン
- 余白のこと。基本的にある程度規則性を設けてデザインすると良いとされている。
9:ゆ…誘目性
- 人の目を惹き付ける性質を指す言葉(参考:デザインのルール、レイアウトのセオリー。
)
- 色の見やすさ、注意を引き付ける度合いを指す(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.49)
- 対象物に興味、関心がなくても発見しやすいか否かを示す特性(参考:「配色&カラーデザイン ~プロに学ぶ、一生枯れない永久不滅テクニック~[デザインラボ]
」p.6)
- 誘目性が高い色は瞬時に注意を促す必要があるものに適している(参考:「やさしい配色の教科書[改訂版]
」p.124)
- 有彩色にくらべて無彩色は誘目性が低くなる(参考:「やさしい配色の教科書[改訂版]
」p.125)
10:ら…ランドスケープ
11:れ…レイアウト
- わかりやすく伝えること(参考:なっとくレイアウト 感覚やセンスに頼らないデザインの基本を身につける
)
- レイアウトの役割は気持ちを揺さぶること(参考:なっとくレイアウト 感覚やセンスに頼らないデザインの基本を身につける
)
- デザインプランに沿って要素を配置すること(参考:[デザイン技法図鑑]ひと目でわかるレイアウトの基本。
)
12:わ…ワイヤーフレーム
文字…38語
1:い…インデント
2:い…イニシャルキャップ
3:い…異字体
4:う…ウェイト
- 文字の黒い部分の量の違いによる見た目の重さのこと(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
5:か…カーニング
- 特定の2文字の間隔を調整することを指します(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
- 隣り合った文字の間隔を、字面の形状に応じて手動で調整するもの(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.83)
6:か…カーニングペア
- 文字を食い込ませた方が綺麗に見える文字の組み合わせ。「To」や「Ye」などが代表(参考:タイポグラフィの基本ルール
)
7:か…可読性
- 文字、数字の読みやすさ(参考:暮らしの図鑑 色の楽しみ 衣食住の配色アイデア×基礎知識×覚えておきたい240色
)
8:ぎ…牛耕体
- 文章を左から右に書き進め、次行は右から左に書き進める書き方。古代ギリシャ語で用いられた(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
9:き…禁則・禁則処理
- 行頭や行末には相応しくない約物や文字が行頭や行末に来ないように回避、調整すること(参考:タイポグラフィの基本ルール
)
10:ぎ…行間
- 行間は文字サイズの2分と4分を足した値が基準になる(参考:タイポグラフィの基本ルール
)
- 行間は文字サイズの0.5〜1.0倍ほど必要(参考:[デザイン技法図鑑]ひと目でわかるフォントが活きるデザインの基本。
)
- (欧文書体の場合)初期設定では行送りは文字サイズの約120%(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
11:ぎ…行長
- 行長は横組で30~40文字程度、縦組で40~50文字が最長。13~15文字が最短(参考:タイポグラフィの基本ルール
)
12:き…均等揃え・ジャスティファイ
13:こ…混植
- 大きさやウェイトの対比に加えて複数の書体を組み合わせる方法(参考:タイポグラフィの基本ルール
)
14:ご…合字/リガチャ
15:し…斜体(slant)
- 10~20度程度傾けるのが一般的(参考:タイポグラフィの基本ルール
)
- 欧文のイタリック体の概念とは異なる(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.85)
16:し…省略表記
- DrやCo、Mrなどの特定の省略表記は大文字だけで表記してはいけない決まり(参考:タイポグラフィの基本ルール
)
17:す…スペーシング
- 文字と文字の間をどれだけあけて、どのように配置するか(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- フォントのすべての文字間のアキ量を調整すること(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
18:す…スミ文字
- ブラック100%で印刷された文字(参考:デザインのルール、レイアウトのセオリー。
)
19:す…スーパーファミリー
- ウェイトの種類が多い書体(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
20:ち…長体
- 70%~90%程度変形するのが一般的(参考:タイポグラフィの基本ルール
)
21:と…トラッキング
- 複数の字間を一律の数字で詰めたり空けたりする方法(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.83)
22:ど…ドロップキャップ
- 段落の最初の文字を大きくする手法(参考:デザインのルール、レイアウトのセオリー。
)
23:は…花形活字/プリンターフラワー
24:ば…バブリアブルフォント
- 1つのフォントファイルの中に複数のスタイルが収録されている(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
- 軸の範囲内で特徴の組み合わせを変えることで、書体のスタイルを変更することができる(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
25:ぱ…パラグラフ
- 段落のこと
26:ぱ…パングラム
- a-zまで含む文。例えば「The quick brown fox jumps over the lazy dog.」などがある(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
27:ふ…ファミリー
28:ふ…袋文字/アウトライン
29:へ…平体
- 70%~90%程度変形するのが一般的(参考:タイポグラフィの基本ルール
)
30:め…明視性
- 図形の見やすさ
31:ら…ラグ組
- 行頭揃え、行末揃えのように1つの軸を中心にして行を揃える方法。欧文組版の「ラギッドライト」が由来(参考:タイポグラフィの基本ルール
)
32:ら…ラグラフ
33:り…リバー
- 欧文組版のタブー。ラインスペースがワードスペースに対して窮屈になることで1行が綺麗な黒いラインに見えなくなり、近接する上下のワードスペース同士がくっついて白いかたまりのように見える現象(参考:レタースペーシング タイポグラフィにおける文字間調整の考え方
)
- ワードスペースが空きすぎること(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
34:る…ルビ
- 通常、ルビには拗促音は使わない(参考:タイポグラフィの基本ルール
)
- 子供向けの本では標準的な日本語を学ぶため拗促音を使うこともある(参考:タイポグラフィの基本ルール
)
- 横組みでの肩付きはルール違反(参考:タイポグラフィの基本ルール
)
35:れ…レイク
- ワードスペースが空きすぎること(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
36:れ…レディング(leading)
- 行送り(行間)のこと。鉛(lead)に由来する(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
37:わ…ワードスペーシング
- 基本的にはレタースペースの1.5~2倍(参考:レタースペーシング タイポグラフィにおける文字間調整の考え方
)
38:わ…わかち書き
- 言葉と言葉の間を少し空けて、言葉の意味を分かりやすく区切ること(参考:タイポグラフィの基本ルール
)
- 絵本など幅広く見られる
文字の形(和文)…6語
1:え…江戸文字
2:く…クラフト文字
3:し…新聞明朝
4:ず…図案文字
- アールデコやアールヌーボーの影響を残す装飾性の強い文字(参考:タイポグラフィの基本ルール
)
5:で…ディスプレイ体
6:て…手書き文字
文字の形(欧文)…23語
1:い…イタリック体(italic)
- ただ傾けたのではなく、はじめから斜体書体として設計された書体(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.85)
2:ヴ…ヴァーサル体
- 中世の写本に登場する、ビルトアップレターのひとつ(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
3:え…エクスパンデッド体
- 幅広の欧文書体
- 小さい文字サイズの場合、コンデンス体よりもエクスパンデッド体の方が読みやすい(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
4:お…オブリーク体(oblique)
- 立体(roman)を傾けて設計された斜体文字(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.85)
5:お…オルタネート文字
6:か…カッパープレート体
- ペンを上げずにひと筆書きで文字と文字をつなげて書く書体(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- ラウンドハンド(Round Hand)とも呼ばれている(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
7:か…カリグラフィー
- 美しい線によって作られたアルファベット表現のこと。西洋の書道と訳されることもある(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
8:ご…ゴシック体
- ブラックレター体とも呼ばれる(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- 主に12世紀から15世紀頃に北ヨーロッパで広く使われていた書体の総称(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- 写本制作に必要な羊皮紙などの値段高騰に伴い、節約の為に狭い文字幅で書かれるようになった(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- 代表的なゴシック体に「ゴシック・クォドラータ」、「ゴシック・プレスキッスス」、「ゴシック・テクストゥラ」がある(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- 他にもロトゥンダ(Rotuda)、バタルド(Bâtarde)、バスタード(Bastard)、フラクトゥール(Fraktur)などがある。(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
9:こ…コンデンス体
- 幅狭の欧文書体(参考:
1ページずつ学ぶ 文字レイアウトの法則
)
10:さ…サンセリフ体
11:す…スクリプト体
- 手書き文字の様式を模した書体(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」)
- 品のあるイメージが出るが、込み入ったデザインのスクリプト体は可読性を損なうので注意が必要(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.85)
12:す…スラブセリフ
- 19世紀から20世紀初頭に看板などで多用された書体のセリフ(参考:[デザイン技法図鑑]ひと目でわかるフォントが活きるデザインの基本。
)
13:す…スワッシュキャピタル
- 装飾のストロークが加えられたイタリック体の大文字のこと(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
14:せ…セリフ体
15:で…デコラティブ体
- 装飾的なデザインを持つ欧文書体の総称(参考:タイポグラフィの基本ルール
)
16:ふ…ファウンデーショナル体 (Foundational Hand)
- 19世紀末、エドワード・ジョンストンがカリグラフィーを初心者の学生に教えるために考えた書体(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
17:ぶ…ブラケットセリフ
- 柔らかくて温かみのあるセリフ(参考:[デザイン技法図鑑]ひと目でわかるフォントが活きるデザインの基本。
)
18:ぶ…ブラックレター体
19:ふ…フローリッシュ
- イタリック体に付く優雅なラインの装飾。楕円、S字、ループの組み合わせで成り立っている。あくまで飾りであって、元の文字は変わらない(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- 最後のヘアーラインは出所の文字に向いている、下がって終わらない(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- 横のストロークは細くなる(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
20:ぷ…プロトゴシック
- 初期のゴシック体(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
21:へ…ヘアラインセリフ
- モダンスタイルの書体で多く見られ、繊細かつ近代的な雰囲気のセリフ(参考:[デザイン技法図鑑]ひと目でわかるフォントが活きるデザインの基本。
)
22:ら…ラスティック体(Rustic)
- ローマ帝国時代に使われていた草書体。パピルスやポンペイの壁画などに残されている(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
23:ろ…ローマン体
- 紀元前3世紀頃にローマでギリシャ文字を母体として発展したアルファベット(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- 格調高く読みやすい書体(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- ローマ帝国の権力を誇示する象徴として、石碑などのモニュメントの碑文に用いられた(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
- トラヤヌス帝の碑文が最も美しいとされている(参考:カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字
)
フォント…7語
1:あ…アンチゴチ
- ゴシック体の漢字とアンチック体のかなの組み合わせのこと(参考:タイポグラフィの基本ルール
)
2:で…ディスクレシア
3:ぷ…プロポーショナルフォント
4:び…ビットマップフォント
5:ゆ…ユニバーサルフォント(UDフォント)
- 特に可読性に配慮したフォント
- 元々はイワタがパナソニック(当時の松下電器産業)向けの特注フォントとして2006年春に開発。2006年12月に「イワタUDフォント」として市販化したことがUDフォントの先駆け(参考:[デザイン技法図鑑]ひと目でわかるフォントが活きるデザインの基本。
)
- 字面が大きいため長文ではかえって読みにくくなるケースもあるので注意が必要(参考:[デザイン技法図鑑]ひと目でわかるフォントが活きるデザインの基本。
)
6:A…AXISフォント
7:J…JIS
UIデザイナー
思想(設計)…12語
1:あ…当たり前品質
- ないと不満につながり、あっても当たり前としかひょうかされないようなものを「当たり前品質」と呼びます。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
2:あ…アクセシビリティ
3:い…一次元的品質
- 品質が高ければ、それに比例してユーザーの満足度が上がるようなものです。たとえば、画面の表示速度、データのローディング時間などは、早ければ早いほど、満足や充実につながります。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
4:せ…セミラティス構造
5:つ…ツリー構造
6:に…ニールセンの5つのユーザビリティ特性
- 学習しやすさ
- 効率性
- 記憶しやすさ
- 間違いにくさ
- 主観的満足
(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座)
7:ふ…ファインダビリティ
8:み…魅力的品質
- ユーザーにとってまだ当たり前ではない機能で、実装すると満足度が上がりやすい機能やデザインのことです。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
9:ゆ…ユーザー中心設計
10:ゆ…ユニバーサルデザイン
11:れ…レコメンド
12:S…SN比
思想(ビジュアル)…41語
1:あ…アトミックデザイン
2:あ…アフォーダンス
- デザインの文脈において、アフォーダンスとは、簡単にいうと「わかること」「想像できること」です。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
3:し…シグニファイア
- シグニファイアとは、形やアイコンなどのデザインを指します。シグニファイアは、マークなどの形から、音や触感まで、知覚可能な標識の全てを示します。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
4:す…スキューモフィズム
5:だ…ダイエジェティックUI
6:に…ニューモーフィズム
7:び…ビジュアルヒエラルキー
8:ふ…フラットデザイン
9:ま…マテリアルデザイン
10:も…モード
11:も…モードレス
12:り…リキッドレイアウト
13:れ…レスポンシブデザイン
14:O…OOUI
15:あ…アンカリング効果
一番最初に接した、もしくは最も印象的な情報や数値が、意思決定や判断に影響を及ぼしてしまう傾向のこと
認知バイアスに属する心理原則のひとつ
ソシャゲではガチャやショップなど、商品を販売する画面で使われがちです。
例えば「200円⇒100円!(50%OFF)」という表現です。
ブログ内では以下のタグで事例をまとめています。
良かったらご覧ください。
040_心理学-アンカリング効果 カテゴリーの記事一覧 - ゲームアプリのUIデザイン
16:が…画像優位性効果
文字のみによる学習よりも、画像を含んだ学習の方が内容を想起しやすく記憶に残りやすい現象
040_心理学-画像優位性効果 カテゴリーの記事一覧 - ゲームアプリのUIデザイン
17:か…カリギュラ効果
18:K…KISSの法則
19:げ…現状維持バイアス
20:さ…錯視
21:じ…自己奉仕バイアス
22:じ…ジャムの法則
23:し…初頭効果
24:す…ストループ効果
25:そ…損失回避の法則
26:だ…段階的開示
27:た…単純接触効果
無意識であっても繰り返し接すると好意度や印象が高まる心理傾向
ブログ内では以下のタグで事例をまとめています。
良かったらご覧ください。
040_心理学-単純接触効果 カテゴリーの記事一覧 - ゲームアプリのUIデザイン
28:ち…チャンク
人が効率よく物事を覚えるために意味がわかる情報のかたまりや単位をチャンクと言う。提唱者George A. Millerジョージ・ミラー氏は、1956年に出版した著書「魔法の数7、プラスまたはマイナス2:私たちの情報処理能力の限界」で、人が短い時間で記憶する(短期記憶:約15秒~30秒)の中で一度に覚えられる限界数があると紹介している。この書籍のタイトルである「マジカルナンバー7」という言葉が有名になった。
のちの2001年に、ミズーリ大学の心理学教授Nelson Cowanネルソン・コーワン氏が研究を重ね、短期記憶の限界数は約7±2ではなく約4±1であると新たに、マジカルナンバー4を提唱した。
ブログ内では以下のタグで事例をまとめています。
良かったらご覧ください。
040_心理学-チャンク カテゴリーの記事一覧 - ゲームアプリのUIデザイン
29:つ…ツァイガルニック効果
30:で…デフォルト効果
31:て…テンションリダクション効果
32:と…ドハティの閾値
33:な…ナッジ
34:ひ…ヒックの法則
- 「意思決定にかかる時間は、選択肢の数と煩雑さで決まる」というものです。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
35:ひ…美的ユーザビリティ
- 見た目が美しいデザインは、より使いやすいと感じられるものです。なぜなら、見た目が美しいと、人の脳にポジティブな反応を生み出し、うまく機能すると受け取られるからです。また、些細な使い勝手の悪さにも寛容になります。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
36:ふ…フィッツの法則
37:ぷ…プレグナンツの法則
- 人間の視覚が持つ、一般的な秩序形成の傾向のこと(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.43)
38:ほ…保有効果
39:め…メタファ
40:め…メンタルモデル
- 何かを見たときに、どのように動作したり機能したりするかの期待を「メンタルモデル」と呼びます。これを裏切るようなUIは使いにくく感じます。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
41:や…ヤコブの法則
- 「ユーザーはさまざまなサイトを使ってきたので、同じようなパーツがあれば同じような挙動をすることを期待する」というものです。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
GUI…41語
1:あ…アコーディオン
2:う…ウォークスルー
3:お…オンボーディング
4:か…カルーセル
5:く…クオシモード/バネ式UI
6:げ…ゲージ
7:こ…コーチマーク
8:こ…コンポーネント
9:す…スケルトンスクリーン
10:す…スプラッシュスクリーン
11:す…スナックバー
12:す…ステップバー
13:す…スライダー
14:だ…ダイアログ
15:た…タブボタン
16:ち…チェックボタン
17:つ…通知バッジ
18:て…テキストボックス
19:と…トースト
20:と…トグルボタン
21:ど…ドロップダウン
22:と…ドロワー
23:な…ナビゲーション
24:の…ノッチ
25:は…ハーフモーダル
26:ぱ…パララックス
27:ふ…ファーストビュー
スクロールするとき
28:ふ…フッター
29:ぷ…プルダウンメニュー
30:ぷ…プレースホルダー
31:ぷ…プログレスバー
32:ふ…フローティングアクションボタン(FAB)
- 画面上で最も重要なアクションに用います。通常は、すぐにアクションできるように、右下のタップしやすい位置に設置します。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
33:ぺ…ページネーション
34:へ…ヘッダー
35:ほ…ホームインジケーター
36:ぼ…ボタン
37:も…モーダル
38:ら…ラジオボタン
39:り…リングゲージ
40:わ…ワイヤーフレーム
41:H…HUD
評価・分析…14語
1:あ…AISAS(アイサス)の法則
- Attention(認知・注意)、Interest(興味・関心)、Search(検索)、Action(行動)、Share(共有)の頭文字を取り、インターネットの購買プロセスの各段階を表したもの(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.29)
- 2004年に電通により商標登録されている(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.29)
2:あ…AIDMA(アイドマ)の法則
- Attention(注意)、Interest(関心)、Desire(欲望)、Memory(記憶)、Action(行動)の頭文字を取り、購買プロセスの各段階を表したもの(参考:「デザインを学ぶ グラフィックデザイン基礎 改訂版」p.29)
3:え…エキスパートレビュー
4:こ…構造化インタビュー
5:さ…参加型デザイン
6:だ…ダイアリー調査
- ダイアリー調査とは、行動記録をつける調査です。(参考:モバイル・ユーザビリティ 使いやすいUIデザインの秘訣
)
7:ひ…非構造化インタビュー
8:ひ…ヒューリスティック評価
- 専門家が、自らの知識や経験に基づいて行う評価をヒューリスティック評価と呼びます。(参考:現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
)
9:ゆ…ユーザーインタビュー
10:ゆ…ユーザビリティテスト
11:り…リモート・ユーザビリティテスト
12:り…リッカート尺度
13:I…ISO
14:W…WCAG
未分類…2語
1:あ…アンチパターン
2:だ…ダークパターン
ゲーム業界…7語
映像
1:ぐ…グリッチフィルタ
画像
1:あ…アドバタイズループ
2:あ…アルファチャンネル
3:か…解像度
4:ベ…ベクター
5:め…命名規則
6:p…png(ピング)
人物…6語
1:アルバート・マンセル
2:ドナルド・ノーマン
3:ヨゼフ ミューラー=ブロックマン
4:ヨハネス・イッテン
5:田中一光
色面で構成する大胆なデザイン! 田中一光とは | HolisticStyleBook
6:市川崑
文字の見せ方。後世の映画監督に影響を与えている。
以上。
(参考:「やさしい配色の教科書[改訂版]」)