[{"data":1,"prerenderedAt":2918},["ShallowReactive",2],{"content-/design":3,"all-pages-for-dir":2895,"related-/design":2896,"og-image-/design":2917},{"id":4,"title":5,"body":6,"category":2879,"concepts":2880,"description":2881,"extension":2882,"meta":2883,"navigation":2665,"ogImage":2880,"path":2884,"project_name":2880,"published":2885,"publishedAt":2886,"seo":2887,"source":2880,"stem":2888,"tags":2889,"todo":2893,"unpublished":2885,"updatedAt":2880,"__hash__":2894},"pages/2026-01/2026-01-10/design.md","UIデザイン原則",{"type":7,"value":8,"toc":2811},"minimark",[9,13,17,28,31,36,39,44,47,139,143,146,253,257,260,367,371,374,481,485,488,582,586,589,683,687,690,771,775,778,872,876,879,1020,1022,1026,1029,1062,1066,1069,1141,1144,1198,1202,1205,1255,1258,1327,1331,1385,1389,1392,1481,1484,1518,1521,1544,1547,1550,1603,1606,1674,1677,1737,1741,1744,1800,1803,1844,1847,1850,1893,1896,1946,1949,1983,1986,1989,2021,2024,2066,2069,2072,2113,2116,2157,2160,2214,2218,2221,2268,2271,2327,2330,2366,2369,2372,2426,2429,2487,2490,2522,2524,2528,2531,2534,2537,2731,2734,2742,2745,2807],[10,11,5],"h1",{"id":12},"uiデザイン原則",[14,15,16],"p",{},"UIデザインの基本原則をカテゴリー別に整理。",[14,18,19,27],{},[20,21,22],"strong",{},[23,24,26],"a",{"href":25},"/design-principles","→ デザイン原則インタラクティブページ"," - Good/Bad例を比較できるインタラクティブ版",[29,30],"hr",{},[32,33,35],"h2",{"id":34},"実装カテゴリー実装しやすさ順","実装カテゴリー（実装しやすさ順）",[14,37,38],{},"Good/Bad例を作成する際の実装難易度でグルーピング。同じコンポーネントパターンで複数の原則を実装できる。",[40,41,43],"h3",{"id":42},"a-テキスト変更のみ最も簡単","A. テキスト変更のみ（最も簡単）",[14,45,46],{},"UIコンポーネントは同じ、テキストの書き方だけでGood/Badを示せる。",[48,49,50,69],"table",{},[51,52,53],"thead",{},[54,55,56,60,63,66],"tr",{},[57,58,59],"th",{},"No",[57,61,62],{},"原則",[57,64,65],{},"実装パターン",[57,67,68],{},"完了",[70,71,72,87,100,113,126],"tbody",{},[54,73,74,78,81,84],{},[75,76,77],"td",{},"11",[75,79,80],{},"ユーザーの言葉を使う",[75,82,83],{},"ラベル比較",[75,85,86],{},"✅",[54,88,89,92,95,98],{},[75,90,91],{},"33",[75,93,94],{},"ナビゲーション項目は名詞にする",[75,96,97],{},"ナビ項目比較",[75,99,86],{},[54,101,102,105,108,111],{},[75,103,104],{},"44",[75,106,107],{},"選択肢の文言は肯定文にする",[75,109,110],{},"チェックボックスラベル",[75,112,86],{},[54,114,115,118,121,124],{},[75,116,117],{},"47",[75,119,120],{},"デフォルトボタンには具体的な動詞を用いる",[75,122,123],{},"ボタンラベル比較",[75,125,86],{},[54,127,128,131,134,137],{},[75,129,130],{},"55",[75,132,133],{},"エラー表示は建設的にする",[75,135,136],{},"エラーメッセージ比較",[75,138,86],{},[40,140,142],{"id":141},"b-単一コンポーネントボタンコントロール","B. 単一コンポーネント（ボタン/コントロール）",[14,144,145],{},"1つのコンポーネントでGood/Badを示せる。",[48,147,148,160],{},[51,149,150],{},[54,151,152,154,156,158],{},[57,153,59],{},[57,155,62],{},[57,157,65],{},[57,159,68],{},[70,161,162,175,188,201,214,227,240],{},[54,163,164,167,170,173],{},[75,165,166],{},"4",[75,168,169],{},"シグニファイア",[75,171,172],{},"ボタンの見た目（押せそう/押せなさそう）",[75,174,86],{},[54,176,177,180,183,186],{},[75,178,179],{},"48",[75,181,182],{},"ラジオボタンは単数選択、チェックボックスはオンオフ",[75,184,185],{},"選択UI比較",[75,187,86],{},[54,189,190,193,196,199],{},[75,191,192],{},"49",[75,194,195],{},"フリップフロップ問題を避ける",[75,197,198],{},"トグルボタン比較",[75,200,86],{},[54,202,203,206,209,212],{},[75,204,205],{},"72",[75,207,208],{},"肯定／否定ボタンの順序",[75,210,211],{},"ボタン配置比較",[75,213,86],{},[54,215,216,219,222,225],{},[75,217,218],{},"74",[75,220,221],{},"ハイライト表現は構成要素をひとつだけ変化させる",[75,223,224],{},"ハイライト比較",[75,226,86],{},[54,228,229,232,235,238],{},[75,230,231],{},"78",[75,233,234],{},"タッチ操作する要素の大きさは7mm以上",[75,236,237],{},"ボタンサイズ比較",[75,239,86],{},[54,241,242,245,248,251],{},[75,243,244],{},"93",[75,246,247],{},"ホットスポットを広げる",[75,249,250],{},"クリック領域比較",[75,252,86],{},[40,254,256],{"id":255},"c-フォーム系入力ui","C. フォーム系（入力UI）",[14,258,259],{},"フォームコンポーネントでGood/Badを示せる。",[48,261,262,274],{},[51,263,264],{},[54,265,266,268,270,272],{},[57,267,59],{},[57,269,62],{},[57,271,65],{},[57,273,68],{},[70,275,276,289,302,315,328,341,354],{},[54,277,278,281,284,287],{},[75,279,280],{},"42",[75,282,283],{},"よいデフォルト",[75,285,286],{},"デフォルト値あり/なし",[75,288,86],{},[54,290,291,294,297,300],{},[75,292,293],{},"43",[75,295,296],{},"制限コントロールを活用する",[75,298,299],{},"テキスト入力 vs ドロップダウン",[75,301,86],{},[54,303,304,307,310,313],{},[75,305,306],{},"45",[75,308,309],{},"値を入力させるのではなく結果を選ばせる",[75,311,312],{},"スライダー vs プリセット",[75,314,86],{},[54,316,317,320,323,326],{},[75,318,319],{},"46",[75,321,322],{},"入力欄を構造化する",[75,324,325],{},"電話番号入力など",[75,327,86],{},[54,329,330,333,336,339],{},[75,331,332],{},"50",[75,334,335],{},"ユーザーに厳密さを求めない",[75,337,338],{},"バリデーション比較",[75,340,86],{},[54,342,343,346,349,352],{},[75,344,345],{},"51",[75,347,348],{},"入力サジェスチョンを提示する",[75,350,351],{},"オートコンプリート",[75,353,86],{},[54,355,356,359,362,365],{},[75,357,358],{},"39",[75,360,361],{},"整合性を損なう操作を求めない",[75,363,364],{},"重複入力の例",[75,366,86],{},[40,368,370],{"id":369},"d-レイアウト配置系","D. レイアウト/配置系",[14,372,373],{},"要素の配置やグルーピングでGood/Badを示せる。",[48,375,376,388],{},[51,377,378],{},[54,379,380,382,384,386],{},[57,381,59],{},[57,383,62],{},[57,385,65],{},[57,387,68],{},[70,389,390,403,416,429,442,455,468],{},[54,391,392,395,398,401],{},[75,393,394],{},"10",[75,396,397],{},"視覚ゲシュタルト",[75,399,400],{},"グルーピング比較",[75,402,86],{},[54,404,405,408,411,414],{},[75,406,407],{},"30",[75,409,410],{},"ペンは紙の近くに置く",[75,412,413],{},"ツール配置比較",[75,415,86],{},[54,417,418,421,424,427],{},[75,419,420],{},"40",[75,422,423],{},"入力フォームにはストーリー性を持たせる",[75,425,426],{},"フォーム順序比較",[75,428,86],{},[54,430,431,434,437,440],{},[75,432,433],{},"41",[75,435,436],{},"操作の流れを作る",[75,438,439],{},"視線誘導比較",[75,441,86],{},[54,443,444,447,450,453],{},[75,445,446],{},"66",[75,448,449],{},"操作の近くでフィードバックする",[75,451,452],{},"フィードバック位置比較",[75,454,86],{},[54,456,457,460,463,466],{},[75,458,459],{},"84",[75,461,462],{},"色やフォントを使いすぎない",[75,464,465],{},"スタイル過多 vs シンプル",[75,467,86],{},[54,469,470,473,476,479],{},[75,471,472],{},"85",[75,474,475],{},"整然とレイアウトする",[75,477,478],{},"整列あり/なし",[75,480,86],{},[40,482,484],{"id":483},"e-ナビゲーション系","E. ナビゲーション系",[14,486,487],{},"ナビやメニューUIでGood/Badを示せる。",[48,489,490,502],{},[51,491,492],{},[54,493,494,496,498,500],{},[57,495,59],{},[57,497,62],{},[57,499,65],{},[57,501,68],{},[70,503,504,517,530,543,556,569],{},[54,505,506,509,512,515],{},[75,507,508],{},"59",[75,510,511],{},"ウェイファインディング",[75,513,514],{},"パンくず/現在地表示",[75,516,86],{},[54,518,519,522,525,528],{},[75,520,521],{},"60",[75,523,524],{},"エスケープハッチ",[75,526,527],{},"ホームリンクあり/なし",[75,529,86],{},[54,531,532,535,538,541],{},[75,533,534],{},"73",[75,536,537],{},"メニュー項目の位置を変化させない",[75,539,540],{},"固定 vs 動的メニュー",[75,542,86],{},[54,544,545,548,551,554],{},[75,546,547],{},"80",[75,549,550],{},"ドリルダウンは上→下、左→右",[75,552,553],{},"階層UI方向",[75,555,86],{},[54,557,558,561,564,567],{},[75,559,560],{},"81",[75,562,563],{},"左が戻るで右が進む",[75,565,566],{},"戻る/進むボタン配置",[75,568,86],{},[54,570,571,574,577,580],{},[75,572,573],{},"82",[75,575,576],{},"モバイルでは包括的より階層的に",[75,578,579],{},"情報密度比較",[75,581,86],{},[40,583,585],{"id":584},"f-インタラクションアニメーション系","F. インタラクション/アニメーション系",[14,587,588],{},"動きやタイミングでGood/Badを示す（デモが必要）。",[48,590,591,603],{},[51,592,593],{},[54,594,595,597,599,601],{},[57,596,59],{},[57,598,62],{},[57,600,65],{},[57,602,68],{},[70,604,605,618,631,644,657,670],{},[54,606,607,610,613,616],{},[75,608,609],{},"8",[75,611,612],{},"直接操作",[75,614,615],{},"ドラッグ操作デモ",[75,617],{},[54,619,620,623,626,629],{},[75,621,622],{},"63",[75,624,625],{},"画面の変化をアニメーションで表す",[75,627,628],{},"トランジションあり/なし",[75,630],{},[54,632,633,636,639,642],{},[75,634,635],{},"64",[75,637,638],{},"トランジションは両方向につける",[75,640,641],{},"双方向アニメーション",[75,643],{},[54,645,646,649,652,655],{},[75,647,648],{},"65",[75,650,651],{},"ユーザーの操作に対して0.1秒以内に反応",[75,653,654],{},"遅延比較デモ",[75,656],{},[54,658,659,662,665,668],{},[75,660,661],{},"79",[75,663,664],{},"ジェスチャはコマンド式ではなく直接操作式",[75,666,667],{},"スワイプ操作デモ",[75,669],{},[54,671,672,675,678,681],{},[75,673,674],{},"90",[75,676,677],{},"UIをロックしない",[75,679,680],{},"ローディング中の操作可否",[75,682],{},[40,684,686],{"id":685},"g-モーダル確認系","G. モーダル/確認系",[14,688,689],{},"ダイアログやモーダルでGood/Badを示せる。",[48,691,692,704],{},[51,693,694],{},[54,695,696,698,700,702],{},[57,697,59],{},[57,699,62],{},[57,701,65],{},[57,703,68],{},[70,705,706,719,732,745,758],{},[54,707,708,711,714,717],{},[75,709,710],{},"32",[75,712,713],{},"前提条件は先に提示する",[75,715,716],{},"条件提示タイミング",[75,718],{},[54,720,721,724,727,730],{},[75,722,723],{},"54",[75,725,726],{},"フールプルーフよりフェールセーフ",[75,728,729],{},"Undo vs 確認ダイアログ",[75,731],{},[54,733,734,737,740,743],{},[75,735,736],{},"57",[75,738,739],{},"黙って実行する",[75,741,742],{},"過剰確認 vs 即実行",[75,744],{},[54,746,747,750,753,756],{},[75,748,749],{},"62",[75,751,752],{},"回答の先送り",[75,754,755],{},"初期設定の強制 vs スキップ可能",[75,757],{},[54,759,760,763,766,769],{},[75,761,762],{},"67",[75,764,765],{},"プログレッシブ・ディスクロージャ",[75,767,768],{},"全表示 vs 段階的表示",[75,770],{},[40,772,774],{"id":773},"h-情報表示系","H. 情報表示系",[14,776,777],{},"データや状態の表示方法でGood/Badを示せる。",[48,779,780,792],{},[51,781,782],{},[54,783,784,786,788,790],{},[57,785,59],{},[57,787,62],{},[57,789,65],{},[57,791,68],{},[70,793,794,807,820,833,846,859],{},[54,795,796,799,802,805],{},[75,797,798],{},"25",[75,800,801],{},"オブジェクトは自身の状態を体現する",[75,803,804],{},"状態表示あり/なし",[75,806],{},[54,808,809,812,815,818],{},[75,810,811],{},"28",[75,813,814],{},"データよりも情報を伝える",[75,816,817],{},"数値 vs 意味のある表現",[75,819],{},[54,821,822,825,828,831],{},[75,823,824],{},"31",[75,826,827],{},"視覚的に何であるかを示し文字で説明する",[75,829,830],{},"アイコン+テキスト",[75,832],{},[54,834,835,838,841,844],{},[75,836,837],{},"52",[75,839,840],{},"スクロール画面では続きがありそうに見せる",[75,842,843],{},"切れ目の見せ方",[75,845],{},[54,847,848,851,854,857],{},[75,849,850],{},"53",[75,852,853],{},"プロパティの選択肢でプレビューを見せる",[75,855,856],{},"プレビューあり/なし",[75,858],{},[54,860,861,864,867,870],{},[75,862,863],{},"96",[75,865,866],{},"色に依存させない",[75,868,869],{},"色のみ vs 色+形",[75,871],{},[40,873,875],{"id":874},"z-概念的uiで直接示しにくい","Z. 概念的（UIで直接示しにくい）",[14,877,878],{},"設計指針として理解すべきだが、単一UIで示すのが難しいもの。後回しまたはドキュメントで説明。",[48,880,881,892],{},[51,882,883],{},[54,884,885,887,889],{},[57,886,59],{},[57,888,62],{},[57,890,891],{},"備考",[70,893,894,905,915,926,937,947,958,969,979,989,999,1010],{},[54,895,896,899,902],{},[75,897,898],{},"1",[75,900,901],{},"シンプルにする",[75,903,904],{},"全体設計の話",[54,906,907,910,913],{},[75,908,909],{},"2",[75,911,912],{},"簡単にする",[75,914,904],{},[54,916,917,920,923],{},[75,918,919],{},"3",[75,921,922],{},"メンタルモデル",[75,924,925],{},"概念的",[54,927,928,931,934],{},[75,929,930],{},"6",[75,932,933],{},"一貫性",[75,935,936],{},"システム全体の話",[54,938,939,942,945],{},[75,940,941],{},"7",[75,943,944],{},"ユーザーの主導権",[75,946,925],{},[54,948,949,952,955],{},[75,950,951],{},"9",[75,953,954],{},"モードレス",[75,956,957],{},"システム設計の話",[54,959,960,963,966],{},[75,961,962],{},"17",[75,964,965],{},"ヒックの法則",[75,967,968],{},"選択肢数の話",[54,970,971,974,977],{},[75,972,973],{},"18",[75,975,976],{},"複雑性保存の法則",[75,978,925],{},[54,980,981,984,987],{},[75,982,983],{},"83",[75,985,986],{},"単純なものは単純なままに",[75,988,925],{},[54,990,991,994,997],{},[75,992,993],{},"87",[75,995,996],{},"ユーザーの道具にする",[75,998,925],{},[54,1000,1001,1004,1007],{},[75,1002,1003],{},"99",[75,1005,1006],{},"デザインは新しい意味を提案する",[75,1008,1009],{},"哲学",[54,1011,1012,1015,1018],{},[75,1013,1014],{},"100",[75,1016,1017],{},"人類にポジティブな影響を与える",[75,1019,1009],{},[29,1021],{},[32,1023,1025],{"id":1024},"デザインカテゴリー内容別","デザインカテゴリー（内容別）",[32,1027,1028],{"id":1028},"基本原則",[48,1030,1031,1042],{},[51,1032,1033],{},[54,1034,1035,1037,1039],{},[57,1036,59],{},[57,1038,62],{},[57,1040,1041],{},"説明",[70,1043,1044,1053],{},[54,1045,1046,1048,1050],{},[75,1047,898],{},[75,1049,901],{},[75,1051,1052],{},"機能や情報を厳選し、できるだけ要素を少なくする。あらゆるデザインジャンルにおける基本原則。",[54,1054,1055,1057,1059],{},[75,1056,909],{},[75,1058,912],{},[75,1060,1061],{},"利用方法を効率化し、目的達成までの手順と労力をできるだけ減らす。",[32,1063,1065],{"id":1064},"認知心理","認知・心理",[40,1067,1068],{"id":1068},"メンタルモデルと知覚",[48,1070,1071,1081],{},[51,1072,1073],{},[54,1074,1075,1077,1079],{},[57,1076,59],{},[57,1078,62],{},[57,1080,1041],{},[70,1082,1083,1092,1101,1112,1121,1130],{},[54,1084,1085,1087,1089],{},[75,1086,919],{},[75,1088,922],{},[75,1090,1091],{},"ユーザーが想像する利用モデルに合った構成と動きにする。学習可能なイディオムによってユーザーに利用モデルを与える。メタファを用いて概念や機能性を伝える。",[54,1093,1094,1096,1098],{},[75,1095,166],{},[75,1097,169],{},[75,1099,1100],{},"操作対象となる要素が見えていて、その意味が一目でわかるようにしておく。押せるものは押せそうに、押せないものは押せなさそうに見せる。",[54,1102,1103,1106,1109],{},[75,1104,1105],{},"5",[75,1107,1108],{},"マッピング",[75,1110,1111],{},"操作する所と結果が反映される所の対応を把握できるようにする。位置関係、形、色、記号などによって手掛かりを与える。",[54,1113,1114,1116,1118],{},[75,1115,930],{},[75,1117,933],{},[75,1119,1120],{},"配色、形状、配置、振る舞いなどに一貫したルールを適用する。同じ性質のものは同じ表現、違う性質のものは違う表現にする。",[54,1122,1123,1125,1127],{},[75,1124,394],{},[75,1126,397],{},[75,1128,1129],{},"近接、類似、閉鎖といったパターン（プレグナンツの法則）を用いてレイアウトし、要素同士のグループ関係を効果的に示す。",[54,1131,1132,1135,1138],{},[75,1133,1134],{},"71",[75,1136,1137],{},"直観的より慣用的に",[75,1139,1140],{},"多くの人が言う「直観的」は「慣用的」の意味。人々がすでに知っているイディオムにすることが大事。",[40,1142,1143],{"id":1143},"認知負荷",[48,1145,1146,1156],{},[51,1147,1148],{},[54,1149,1150,1152,1154],{},[57,1151,59],{},[57,1153,62],{},[57,1155,1041],{},[70,1157,1158,1169,1178,1187],{},[54,1159,1160,1163,1166],{},[75,1161,1162],{},"12",[75,1164,1165],{},"ユーザーの記憶に頼らない",[75,1167,1168],{},"参照すべき情報はそれが必要となるその場で参照できなければいけない。",[54,1170,1171,1173,1175],{},[75,1172,962],{},[75,1174,965],{},[75,1176,1177],{},"選択肢の中からひとつを選ぶ場合、選択肢の数に比例して時間がかかる。",[54,1179,1180,1182,1184],{},[75,1181,973],{},[75,1183,976],{},[75,1185,1186],{},"プロセスを単純化しようとしても限界がある。複雑性をできるだけユーザー側からシステム側に移動した設計にする。",[54,1188,1189,1192,1195],{},[75,1190,1191],{},"19",[75,1193,1194],{},"タスクコヒーレンス",[75,1196,1197],{},"ユーザーが最後に行ったことを覚えているだけでユーザーの行動を正しく予測したのと同じ効果がある。",[32,1199,1201],{"id":1200},"操作インタラクション","操作・インタラクション",[40,1203,1204],{"id":1204},"ユーザー主導",[48,1206,1207,1217],{},[51,1208,1209],{},[54,1210,1211,1213,1215],{},[57,1212,59],{},[57,1214,62],{},[57,1216,1041],{},[70,1218,1219,1228,1237,1246],{},[54,1220,1221,1223,1225],{},[75,1222,941],{},[75,1224,944],{},[75,1226,1227],{},"システムがユーザーをコントロールするのではなく、ユーザーがシステムをコントロールできるようにする。",[54,1229,1230,1232,1234],{},[75,1231,609],{},[75,1233,612],{},[75,1235,1236],{},"画面上のオブジェクトに直接触れて操作しているような感覚を与える。身体的な動作に追従してリアルタイムに表示を更新する。",[54,1238,1239,1241,1243],{},[75,1240,951],{},[75,1242,954],{},[75,1244,1245],{},"できるだけモードをなくす。UIがモードレスであれば、ユーザーは自由な順序で作業を行うことができる。",[54,1247,1248,1250,1252],{},[75,1249,77],{},[75,1251,80],{},[75,1253,1254],{},"インターフェース上で使う文言は、システム内部の技術用語や運営者の業界用語ではなく、ユーザーが普段使っている一般的な表現を用いる。",[40,1256,1257],{"id":1257},"効率化",[48,1259,1260,1270],{},[51,1261,1262],{},[54,1263,1264,1266,1268],{},[57,1265,59],{},[57,1267,62],{},[57,1269,1041],{},[70,1271,1272,1283,1294,1305,1316],{},[54,1273,1274,1277,1280],{},[75,1275,1276],{},"14",[75,1278,1279],{},"プリコンピュテーション",[75,1281,1282],{},"先人がすでに見つけている最適値をプリセットにしたり、デザインの過程で再利用する。",[54,1284,1285,1288,1291],{},[75,1286,1287],{},"20",[75,1289,1290],{},"メジャーなタスクに最適化する",[75,1292,1293],{},"80%のユーザーは全機能の20%しか使わない（パレートの法則）。メジャーな要求への対応を優先する。",[54,1295,1296,1299,1302],{},[75,1297,1298],{},"21",[75,1300,1301],{},"パースエージョン",[75,1303,1304],{},"説得的な仕掛けでユーザーの行動を促す。レコメンデーション、心理的な報酬、他者との比較などによって動機づけする。",[54,1306,1307,1310,1313],{},[75,1308,1309],{},"22",[75,1311,1312],{},"ショートカットを用意する",[75,1314,1315],{},"経験あるユーザーが頻繁に実行することについて、通常の段階的な操作を短縮してより速く行う方法を提供する。",[54,1317,1318,1321,1324],{},[75,1319,1320],{},"29",[75,1322,1323],{},"ユーザーがとれる操作がひとつしかないなら自動化する",[75,1325,1326],{},"現在許された入力が1種類だけであればシステムが自動で代行するべき。",[40,1328,1330],{"id":1329},"タッチポインティング","タッチ・ポインティング",[48,1332,1333,1343],{},[51,1334,1335],{},[54,1336,1337,1339,1341],{},[57,1338,59],{},[57,1340,62],{},[57,1342,1041],{},[70,1344,1345,1356,1366,1376],{},[54,1346,1347,1350,1353],{},[75,1348,1349],{},"16",[75,1351,1352],{},"フィッツの法則",[75,1354,1355],{},"近くて大きいものほどポイントしやすく、遠くて小さいものほどポイントしにくい。",[54,1357,1358,1360,1363],{},[75,1359,231],{},[75,1361,1362],{},"タッチ操作する要素の大きさは7mm以上にする",[75,1364,1365],{},"ボタンをはじめ各種UIコントロールを、指で十分に押しやすい7〜10mm四方以上の大きさにする。",[54,1367,1368,1370,1373],{},[75,1369,661],{},[75,1371,1372],{},"ジェスチャはコマンド式ではなく直接操作式にする",[75,1374,1375],{},"ジェスチャに対する画面の反応は、対象の要素が直接的に追従するような振る舞いにする。",[54,1377,1378,1380,1382],{},[75,1379,244],{},[75,1381,247],{},[75,1383,1384],{},"表示されている矩形よりも広い範囲をタップ／クリック可能にする。",[32,1386,1388],{"id":1387},"オブジェクト指向ui","オブジェクト指向UI",[40,1390,1391],{"id":1391},"オブジェクトの設計",[48,1393,1394,1404],{},[51,1395,1396],{},[54,1397,1398,1400,1402],{},[57,1399,59],{},[57,1401,62],{},[57,1403,1041],{},[70,1405,1406,1417,1428,1437,1448,1459,1470],{},[54,1407,1408,1411,1414],{},[75,1409,1410],{},"23",[75,1412,1413],{},"オブジェクトベースにする",[75,1415,1416],{},"要求からオブジェクトを抽出してUIに反映する。ユーザーがオブジェクトに直接働きかけながら目的を達成できるようにする。",[54,1418,1419,1422,1425],{},[75,1420,1421],{},"24",[75,1423,1424],{},"ビューはオブジェクトを表象する",[75,1426,1427],{},"インターフェースは、オブジェクトを表象するビューの集まりによって構成される。ひとつのオブジェクトは複数のビューによって異なる表現を持つことができる。",[54,1429,1430,1432,1434],{},[75,1431,798],{},[75,1433,801],{},[75,1435,1436],{},"画面上のすべてのオブジェクトは、自身の状態を視覚的かつリアルタイムに体現し続けなければいけない。",[54,1438,1439,1442,1445],{},[75,1440,1441],{},"26",[75,1443,1444],{},"名詞→動詞 の操作順序",[75,1446,1447],{},"ユーザーがまず対象物（名詞）を選び、それからアクション（動詞）を選ぶようにする。これがGUIの基本的な操作順序。",[54,1449,1450,1453,1456],{},[75,1451,1452],{},"35",[75,1454,1455],{},"データをバインドする",[75,1457,1458],{},"同じオブジェクトが複数のビューで見えている時、それらの状態を常に同期させる。",[54,1460,1461,1464,1467],{},[75,1462,1463],{},"36",[75,1465,1466],{},"ゼロ・ワン・インフィニティ",[75,1468,1469],{},"個数に関して恣意的な仕様を作らない。要素の存在可能な個数は基本的に0か1か無限とする。",[54,1471,1472,1475,1478],{},[75,1473,1474],{},"37",[75,1476,1477],{},"すべての操作可能な要素は意味を持つ",[75,1479,1480],{},"画面上で現在操作可能な要素や選択可能な項目はすべて、ユーザーのタスクにとって何らかの意味を持っている必要がある。",[40,1482,1483],{"id":1483},"ラベルとアイコン",[48,1485,1486,1496],{},[51,1487,1488],{},[54,1489,1490,1492,1494],{},[57,1491,59],{},[57,1493,62],{},[57,1495,1041],{},[70,1497,1498,1507],{},[54,1499,1500,1502,1504],{},[75,1501,91],{},[75,1503,94],{},[75,1505,1506],{},"情報の種類ごとに画面を作り、ナビゲーション項目は名詞表現にする。",[54,1508,1509,1512,1515],{},[75,1510,1511],{},"34",[75,1513,1514],{},"アイコンは名詞または形容詞を表す",[75,1516,1517],{},"アイコンはオブジェクト（名詞）、あるいは結果として得られる状態（形容詞）をモチーフにする。",[40,1519,1520],{"id":1520},"ツール配置",[48,1522,1523,1533],{},[51,1524,1525],{},[54,1526,1527,1529,1531],{},[57,1528,59],{},[57,1530,62],{},[57,1532,1041],{},[70,1534,1535],{},[54,1536,1537,1539,1541],{},[75,1538,407],{},[75,1540,410],{},[75,1542,1543],{},"ツール類は処理対象の近くに配置する。その場でモードレスに操作して逐次結果を確認できるようにする。",[32,1545,1546],{"id":1546},"入力フォーム",[40,1548,1549],{"id":1549},"データ入力の基本",[48,1551,1552,1562],{},[51,1553,1554],{},[54,1555,1556,1558,1560],{},[57,1557,59],{},[57,1559,62],{},[57,1561,1041],{},[70,1563,1564,1575,1585,1594],{},[54,1565,1566,1569,1572],{},[75,1567,1568],{},"38",[75,1570,1571],{},"ユーザーが入力したものはユーザーのもの",[75,1573,1574],{},"ユーザーが入力した値や設定した内容は基本的にすべて保存されるべき。",[54,1576,1577,1579,1582],{},[75,1578,358],{},[75,1580,1581],{},"整合性を損なうような操作をユーザーに求めない",[75,1583,1584],{},"情報の整合性が損なわれる可能性がある操作をユーザーに求めない。生年月日と年齢を両方入力させるようなことはしない。",[54,1586,1587,1589,1591],{},[75,1588,420],{},[75,1590,423],{},[75,1592,1593],{},"入力項目はユーザーにとって意味のあるグループにまとめる。身近なことや単純なものを先に、複雑なものを後にする。",[54,1595,1596,1598,1600],{},[75,1597,433],{},[75,1599,436],{},[75,1601,1602],{},"視覚ゲシュタルトを利用したグルーピングやストーリー性のある項目配置によってユーザーの視線と操作を誘導する。",[40,1604,1605],{"id":1605},"入力支援",[48,1607,1608,1618],{},[51,1609,1610],{},[54,1611,1612,1614,1616],{},[57,1613,59],{},[57,1615,62],{},[57,1617,1041],{},[70,1619,1620,1629,1638,1647,1656,1665],{},[54,1621,1622,1624,1626],{},[75,1623,280],{},[75,1625,283],{},[75,1627,1628],{},"選択式の入力欄や設定項目に妥当性の高いデフォルト値を与えることでユーザーの操作を減らせる。",[54,1630,1631,1633,1635],{},[75,1632,293],{},[75,1634,296],{},[75,1636,1637],{},"入力可能な内容に制限がある場合は、ラジオボタン、ドロップダウン、スライダーなどの制限コントロールを用いる。",[54,1639,1640,1642,1644],{},[75,1641,306],{},[75,1643,309],{},[75,1645,1646],{},"パラメーターの値を設定させるよりも、得られる結果を示して選ばせる。",[54,1648,1649,1651,1653],{},[75,1650,319],{},[75,1652,322],{},[75,1654,1655],{},"入力すべき値の書式に合わせて入力欄を分割または制限コントロール化する。",[54,1657,1658,1660,1662],{},[75,1659,332],{},[75,1661,335],{},[75,1663,1664],{},"半角と全角、ひらがなとカタカナ、ハイフンの有無など、入力書式の揺れをシステム側で吸収する。",[54,1666,1667,1669,1671],{},[75,1668,345],{},[75,1670,348],{},[75,1672,1673],{},"途中まで入力したところで「入力しようとしていたこと」や「価値のある入力値」を選択肢として提示する。",[40,1675,1676],{"id":1676},"ボタンと選択肢",[48,1678,1679,1689],{},[51,1680,1681],{},[54,1682,1683,1685,1687],{},[57,1684,59],{},[57,1686,62],{},[57,1688,1041],{},[70,1690,1691,1700,1709,1718,1727],{},[54,1692,1693,1695,1697],{},[75,1694,104],{},[75,1696,107],{},[75,1698,1699],{},"選択肢の文言はできるだけ肯定文にする。ラベルが否定形だと選択行為が「否定を肯定する」という意味になりわかりにくい。",[54,1701,1702,1704,1706],{},[75,1703,117],{},[75,1705,120],{},[75,1707,1708],{},"「OK」や「はい」ではなく、「保存」や「消去」など、実行されるアクションを表す具体的な動詞を用いる。",[54,1710,1711,1713,1715],{},[75,1712,179],{},[75,1714,182],{},[75,1716,1717],{},"AかBかの場合はラジオボタン、真か偽かの場合はチェックボックス。",[54,1719,1720,1722,1724],{},[75,1721,192],{},[75,1723,195],{},[75,1725,1726],{},"ひとつのボタンでオンとオフを切り替える場合、状態表現とラベルを分離する。",[54,1728,1729,1731,1734],{},[75,1730,205],{},[75,1732,1733],{},"肯定／否定ボタンの順序はプラットフォームのルールに従う",[75,1735,1736],{},"明確なルールがない場合は「左が戻るで右が進む」に従って右を肯定ボタンにする。",[32,1738,1740],{"id":1739},"エラー制約","エラー・制約",[40,1742,1743],{"id":1743},"エラー回避",[48,1745,1746,1756],{},[51,1747,1748],{},[54,1749,1750,1752,1754],{},[57,1751,59],{},[57,1753,62],{},[57,1755,1041],{},[70,1757,1758,1769,1780,1789],{},[54,1759,1760,1763,1766],{},[75,1761,1762],{},"13",[75,1764,1765],{},"コンストレイント",[75,1767,1768],{},"ユーザーの行動を意図的に制限することにより、誤操作を減らしたり有効な使い方を促したりする。",[54,1770,1771,1774,1777],{},[75,1772,1773],{},"15",[75,1775,1776],{},"エラーを回避する",[75,1778,1779],{},"操作ミスを起こしにくくする。エラーメッセージをわかりやすく示すことも大事だが、それ以前にエラーが起きないように工夫することが重要。",[54,1781,1782,1784,1786],{},[75,1783,710],{},[75,1785,713],{},[75,1787,1788],{},"事前に満たしておくべき前提条件を長い手続きの途中や最後になってから求めない。",[54,1790,1791,1794,1797],{},[75,1792,1793],{},"56",[75,1795,1796],{},"可能性と確率を区別する",[75,1798,1799],{},"滅多にない事を考慮しすぎて通常の利用を面倒にしてはいけない。メインケースを重視すべき。",[40,1801,1802],{"id":1802},"エラー対応",[48,1804,1805,1815],{},[51,1806,1807],{},[54,1808,1809,1811,1813],{},[57,1810,59],{},[57,1812,62],{},[57,1814,1041],{},[70,1816,1817,1826,1835],{},[54,1818,1819,1821,1823],{},[75,1820,723],{},[75,1822,726],{},[75,1824,1825],{},"間違ったとしても大丈夫なようにする方が重要。全ての操作が取り消し可能であれば、実質的に誤操作は存在しなくなる。",[54,1827,1828,1830,1832],{},[75,1829,130],{},[75,1831,133],{},[75,1833,1834],{},"何が起きたのか的確に知らせ、そこからどうすればよいのかを示す。",[54,1836,1837,1839,1841],{},[75,1838,736],{},[75,1840,739],{},[75,1842,1843],{},"ユーザーがやろうとしたことにいちいち確認をとったり、正常完了を報告したりしない。不可逆的かつデータ消失の恐れがある場合にのみ実行前の意思確認をする。",[32,1845,1846],{"id":1846},"ビジュアルデザイン",[40,1848,1849],{"id":1849},"レイアウト",[48,1851,1852,1862],{},[51,1853,1854],{},[54,1855,1856,1858,1860],{},[57,1857,59],{},[57,1859,62],{},[57,1861,1041],{},[70,1863,1864,1875,1884],{},[54,1865,1866,1869,1872],{},[75,1867,1868],{},"27",[75,1870,1871],{},"グラフィックのトーン＆マナーを揃える",[75,1873,1874],{},"色調・彩度・明度、グラデーション、ボーダー、影、角の取り方などの度合いを揃える。",[54,1876,1877,1879,1881],{},[75,1878,459],{},[75,1880,462],{},[75,1882,1883],{},"種類を増やしすぎると画面が乱雑になる。",[54,1885,1886,1888,1890],{},[75,1887,472],{},[75,1889,475],{},[75,1891,1892],{},"グリッドに沿って整然と配置する。余白や揃えに反復性と一貫性を持たせる。",[40,1894,1895],{"id":1895},"情報表示",[48,1897,1898,1908],{},[51,1899,1900],{},[54,1901,1902,1904,1906],{},[57,1903,59],{},[57,1905,62],{},[57,1907,1041],{},[70,1909,1910,1919,1928,1937],{},[54,1911,1912,1914,1916],{},[75,1913,811],{},[75,1915,814],{},[75,1917,1918],{},"ユーザーは数値よりもその意味を知りたい。例えば何バイト使っているかより何割残っているかを示す。",[54,1920,1921,1923,1925],{},[75,1922,824],{},[75,1924,827],{},[75,1926,1927],{},"オブジェクトの存在や状態を視覚的に把握できるようにし、文字情報でそれを補足する。",[54,1929,1930,1932,1934],{},[75,1931,837],{},[75,1933,840],{},[75,1935,1936],{},"スクリーンの下端にちょうどコンテンツの切れ目があるとスクロールできるように見えない。",[54,1938,1939,1941,1943],{},[75,1940,850],{},[75,1942,853],{},[75,1944,1945],{},"スタイル変更やツール選択時に、結果として得られる状態のプレビューを選択肢として提示する。",[40,1947,1948],{"id":1948},"視覚効果",[48,1950,1951,1961],{},[51,1952,1953],{},[54,1954,1955,1957,1959],{},[57,1956,59],{},[57,1958,62],{},[57,1960,1041],{},[70,1962,1963,1972],{},[54,1964,1965,1967,1969],{},[75,1966,218],{},[75,1968,221],{},[75,1970,1971],{},"変化が大きすぎるとハイライトではなく別な種類の要素に見えてしまう。",[54,1973,1974,1977,1980],{},[75,1975,1976],{},"75",[75,1978,1979],{},"錯視を考慮する",[75,1981,1982],{},"目の錯覚が生じて意図しない見え方になることがある。必要に応じて目視ベースで調整する。",[32,1984,1985],{"id":1985},"フィードバック",[40,1987,1988],{"id":1988},"アニメーション",[48,1990,1991,2001],{},[51,1992,1993],{},[54,1994,1995,1997,1999],{},[57,1996,59],{},[57,1998,62],{},[57,2000,1041],{},[70,2002,2003,2012],{},[54,2004,2005,2007,2009],{},[75,2006,622],{},[75,2008,625],{},[75,2010,2011],{},"広い範囲を変化させる際には、0.1〜0.5秒程度のトランジションアニメーションをつける。",[54,2013,2014,2016,2018],{},[75,2015,635],{},[75,2017,638],{},[75,2019,2020],{},"状態Aから状態Bへの変化にトランジションをつける際は、逆方向の動きも状態Bから状態Aに戻る変化につける。",[40,2022,2023],{"id":2023},"応答性",[48,2025,2026,2036],{},[51,2027,2028],{},[54,2029,2030,2032,2034],{},[57,2031,59],{},[57,2033,62],{},[57,2035,1041],{},[70,2037,2038,2048,2057],{},[54,2039,2040,2042,2045],{},[75,2041,648],{},[75,2043,2044],{},"ユーザーの操作に対して0.1秒以内に反応を返す",[75,2046,2047],{},"反応が瞬時に行われていると感じる限界は0.1秒。10秒以上かかる処理には進捗率や残り時間の表示が必要。",[54,2049,2050,2052,2054],{},[75,2051,446],{},[75,2053,449],{},[75,2055,2056],{},"システムの状態変化を示す時には、ユーザーが注目している場所の近くでフィードバックする。",[54,2058,2059,2061,2063],{},[75,2060,674],{},[75,2062,677],{},[75,2064,2065],{},"数秒以上UIがロックされているとユーザーはアプリケーションを自由にコントロールしている感覚を失う。",[32,2067,2068],{"id":2068},"ナビゲーション",[40,2070,2071],{"id":2071},"道しるべ",[48,2073,2074,2084],{},[51,2075,2076],{},[54,2077,2078,2080,2082],{},[57,2079,59],{},[57,2081,62],{},[57,2083,1041],{},[70,2085,2086,2095,2104],{},[54,2087,2088,2090,2092],{},[75,2089,508],{},[75,2091,511],{},[75,2093,2094],{},"情報空間の中でユーザーが迷子にならないように道しるべを与える。今どこにいるのか、どこへ行けるのかなど。",[54,2096,2097,2099,2101],{},[75,2098,521],{},[75,2100,524],{},[75,2102,2103],{},"いつでもすぐに最初の場所に戻れるよう避難口を用意する。",[54,2105,2106,2108,2110],{},[75,2107,534],{},[75,2109,537],{},[75,2111,2112],{},"ユーザーはメニューの中で目当ての項目を空間的に記憶するので、位置関係が変わると学習できない。",[40,2114,2115],{"id":2115},"画面遷移",[48,2117,2118,2128],{},[51,2119,2120],{},[54,2121,2122,2124,2126],{},[57,2123,59],{},[57,2125,62],{},[57,2127,1041],{},[70,2129,2130,2139,2148],{},[54,2131,2132,2134,2136],{},[75,2133,547],{},[75,2135,550],{},[75,2137,2138],{},"上で選択した項目の内容が下に、左で選択した項目の内容が右に表示されるようにする。",[54,2140,2141,2143,2145],{},[75,2142,560],{},[75,2144,563],{},[75,2146,2147],{},"画面遷移の方向性を水平軸で示す場合、左を戻る（過去）に、右を進む（未来）に対応させる。",[54,2149,2150,2152,2154],{},[75,2151,573],{},[75,2153,576],{},[75,2155,2156],{},"モバイルでは一度に見せる情報を限定して階層的に見せるのが良い。",[32,2158,2159],{"id":2159},"オンボーディング",[48,2161,2162,2172],{},[51,2163,2164],{},[54,2165,2166,2168,2170],{},[57,2167,59],{},[57,2169,62],{},[57,2171,1041],{},[70,2173,2174,2185,2194,2203],{},[54,2175,2176,2179,2182],{},[75,2177,2178],{},"61",[75,2180,2181],{},"即座の喜びを与える",[75,2183,2184],{},"ユーザーが製品を使い始めて数秒以内に成功体験を得られるようにする。",[54,2186,2187,2189,2191],{},[75,2188,749],{},[75,2190,752],{},[75,2192,2193],{},"はじめからユーザーにすべての意思決定を求めず、必要最小限のもの以外は回答を先送りできるようにする。",[54,2195,2196,2198,2200],{},[75,2197,762],{},[75,2199,765],{},[75,2201,2202],{},"初級者が簡単に使い始められるように最初は高度な機能を隠しておき、必要になった時にUIを追加表示する。",[54,2204,2205,2208,2211],{},[75,2206,2207],{},"89",[75,2209,2210],{},"ユーザーを教育するのではなくユーザーが学習できるようにする",[75,2212,2213],{},"インターフェースに操作説明を書くのではなく、インターフェースを自己説明的にする。",[32,2215,2217],{"id":2216},"国際化アクセシビリティ","国際化・アクセシビリティ",[40,2219,2220],{"id":2220},"多言語対応",[48,2222,2223,2233],{},[51,2224,2225],{},[54,2226,2227,2229,2231],{},[57,2228,59],{},[57,2230,62],{},[57,2232,1041],{},[70,2234,2235,2246,2257],{},[54,2236,2237,2240,2243],{},[75,2238,2239],{},"68",[75,2241,2242],{},"アイコンのモチーフは特定の文化に依存させない",[75,2244,2245],{},"特定の文化圏でのみ使われるサインや言語依存の慣用表現などを元にした記号は国際的なサービスで使わない。",[54,2247,2248,2251,2254],{},[75,2249,2250],{},"69",[75,2252,2253],{},"多言語化を想定したUIではラベルの長さの違いを考慮する",[75,2255,2256],{},"言語によって単語の平均文字数は異なる。ドイツ語は長く、漢字やハングルは短くなる。",[54,2258,2259,2262,2265],{},[75,2260,2261],{},"70",[75,2263,2264],{},"◯✕△等の記号を安易に使わない",[75,2266,2267],{},"◯と✕の肯定／否定のニュアンスは文化圏によって異なるので、国際的なインターフェースでは注意が必要。",[40,2269,2270],{"id":2270},"アクセシビリティ",[48,2272,2273,2283],{},[51,2274,2275],{},[54,2276,2277,2279,2281],{},[57,2278,59],{},[57,2280,62],{},[57,2282,1041],{},[70,2284,2285,2296,2307,2316],{},[54,2286,2287,2290,2293],{},[75,2288,2289],{},"94",[75,2291,2292],{},"音声読み上げに対応する",[75,2294,2295],{},"非テキスト情報には代替テキストをつける。アクセシビリティを高める。",[54,2297,2298,2301,2304],{},[75,2299,2300],{},"95",[75,2302,2303],{},"文字の拡大に対応する",[75,2305,2306],{},"プラットフォームやブラウザのテキスト拡大機能に対応する。",[54,2308,2309,2311,2313],{},[75,2310,863],{},[75,2312,866],{},[75,2314,2315],{},"色がなくても情報が伝わるようにする。グレースケールで表示して確認するとよい。",[54,2317,2318,2321,2324],{},[75,2319,2320],{},"97",[75,2322,2323],{},"ユーザーが自分のペースで作業できるようにする",[75,2325,2326],{},"操作に時間制限を設けない。タイミングによって操作の有効性を変化させない。",[32,2328,2329],{"id":2329},"記憶と学習",[48,2331,2332,2342],{},[51,2333,2334],{},[54,2335,2336,2338,2340],{},[57,2337,59],{},[57,2339,62],{},[57,2341,1041],{},[70,2343,2344,2355],{},[54,2345,2346,2349,2352],{},[75,2347,2348],{},"76",[75,2350,2351],{},"空間的に記憶できるようにする",[75,2353,2354],{},"ユーザーが2次元上の任意の場所にオブジェクトを置いて空間的に記憶できるようにする。",[54,2356,2357,2360,2363],{},[75,2358,2359],{},"77",[75,2361,2362],{},"プロスペクティブメモリー",[75,2364,2365],{},"ユーザーが未来の自分のために手がかりを残せるようにする。ブックマーク、フラグ、付箋、下書き保存など。",[32,2367,2368],{"id":2368},"設計哲学",[40,2370,2371],{"id":2371},"ユーザーの道具",[48,2373,2374,2384],{},[51,2375,2376],{},[54,2377,2378,2380,2382],{},[57,2379,59],{},[57,2381,62],{},[57,2383,1041],{},[70,2385,2386,2395,2406,2415],{},[54,2387,2388,2390,2392],{},[75,2389,983],{},[75,2391,986],{},[75,2393,2394],{},"シンプルな製品では簡単にできたことが成熟した製品では複雑になってはいけない。",[54,2396,2397,2400,2403],{},[75,2398,2399],{},"86",[75,2401,2402],{},"カスタマイズ機能に頼らない",[75,2404,2405],{},"カスタマイズ機能に頼ることは、システムをより複雑にしてかえって学習のしやすさや保守性を低下させる。",[54,2407,2408,2410,2412],{},[75,2409,993],{},[75,2411,996],{},[75,2413,2414],{},"システムは提供者の物ではなくユーザーの物として作る。ユーザーが自分の行為を強化するための道具と位置づける。",[54,2416,2417,2420,2423],{},[75,2418,2419],{},"88",[75,2421,2422],{},"ユーザーが自分なりの方法で作業を遂行できまたそれを改善できるようにする",[75,2424,2425],{},"マニュアルレスよりもモードレスな道具を作る。道具の使い方を工夫することが創造性の源。",[40,2427,2428],{"id":2428},"インタラクションの品質",[48,2430,2431,2441],{},[51,2432,2433],{},[54,2434,2435,2437,2439],{},[57,2436,59],{},[57,2438,62],{},[57,2440,1041],{},[70,2442,2443,2454,2465,2476],{},[54,2444,2445,2448,2451],{},[75,2446,2447],{},"58",[75,2449,2450],{},"ガッツを見せる",[75,2452,2453],{},"デザインには仕様を割り切るためのガッツが必要。網羅性や論理性や厳密さを優先しすぎると、むしろ基本的なデザイン趣旨がわかりにくくなる。",[54,2455,2456,2459,2462],{},[75,2457,2458],{},"91",[75,2460,2461],{},"ゲームを持ち込まない",[75,2463,2464],{},"偶然性、意外性、ギャンブル性、難解さなどのゲーム性をインターフェースに含めてはいけない。（ゲームアプリを除く）",[54,2466,2467,2470,2473],{},[75,2468,2469],{},"92",[75,2471,2472],{},"動かしたままに動くのではなく動かしたいように動く",[75,2474,2475],{},"思いどおりにコントロールできていると感じさせるために、適切な「あそび」や「補正」を含める。",[54,2477,2478,2481,2484],{},[75,2479,2480],{},"98",[75,2482,2483],{},"ユーザーイリュージョンをもたらす",[75,2485,2486],{},"システムの内部的な仕組みを隠しながら、バーチャルな世界観の中で対象を現し、ユーザーが作業に集中できるようにする。",[40,2488,2489],{"id":2489},"理念",[48,2491,2492,2502],{},[51,2493,2494],{},[54,2495,2496,2498,2500],{},[57,2497,59],{},[57,2499,62],{},[57,2501,1041],{},[70,2503,2504,2513],{},[54,2505,2506,2508,2510],{},[75,2507,1003],{},[75,2509,1006],{},[75,2511,2512],{},"デザインは問題を解決するだけでなく、物事の新しい捉え方を導く。",[54,2514,2515,2517,2519],{},[75,2516,1014],{},[75,2518,1017],{},[75,2520,2521],{},"道具のデザインは、人がもつ短所への寛容と長所の増進によって人類に奉仕し、生活を豊かにするためにある。",[29,2523],{},[32,2525,2527],{"id":2526},"実装計画vueコンポーネント化","実装計画：Vueコンポーネント化",[40,2529,2530],{"id":2530},"目的",[14,2532,2533],{},"UIデザイン原則のGood/Bad例を表示するVueコンポーネントを作成する。",[40,2535,2536],{"id":2536},"データ構造",[2538,2539,2544],"pre",{"className":2540,"code":2541,"language":2542,"meta":2543,"style":2543},"language-typescript shiki shiki-themes vitesse-light vitesse-light","interface DesignPrinciple {\n  no: number\n  name: string\n  description: string\n  category: string      // 大カテゴリー\n  subcategory?: string  // 中カテゴリー\n  good?: GoodBadExample\n  bad?: GoodBadExample\n}\n\ninterface GoodBadExample {\n  title: string\n  description: string\n  image?: string  // スクリーンショットやイラスト\n  code?: string   // コード例がある場合\n}\n","typescript","",[2545,2546,2547,2564,2577,2588,2598,2613,2629,2642,2654,2660,2667,2677,2687,2696,2711,2726],"code",{"__ignoreMap":2543},[2548,2549,2552,2556,2560],"span",{"class":2550,"line":2551},"line",1,[2548,2553,2555],{"class":2554},"stQ0i","interface",[2548,2557,2559],{"class":2558},"sSkh3"," DesignPrinciple",[2548,2561,2563],{"class":2562},"shFtX"," {\n",[2548,2565,2567,2571,2574],{"class":2550,"line":2566},2,[2548,2568,2570],{"class":2569},"s4oTP","  no",[2548,2572,2573],{"class":2562},": ",[2548,2575,2576],{"class":2558},"number\n",[2548,2578,2580,2583,2585],{"class":2550,"line":2579},3,[2548,2581,2582],{"class":2569},"  name",[2548,2584,2573],{"class":2562},[2548,2586,2587],{"class":2558},"string\n",[2548,2589,2591,2594,2596],{"class":2550,"line":2590},4,[2548,2592,2593],{"class":2569},"  description",[2548,2595,2573],{"class":2562},[2548,2597,2587],{"class":2558},[2548,2599,2601,2604,2606,2609],{"class":2550,"line":2600},5,[2548,2602,2603],{"class":2569},"  category",[2548,2605,2573],{"class":2562},[2548,2607,2608],{"class":2558},"string",[2548,2610,2612],{"class":2611},"sxvE3","      // 大カテゴリー\n",[2548,2614,2616,2619,2622,2624,2626],{"class":2550,"line":2615},6,[2548,2617,2618],{"class":2569},"  subcategory",[2548,2620,2621],{"class":2554},"?",[2548,2623,2573],{"class":2562},[2548,2625,2608],{"class":2558},[2548,2627,2628],{"class":2611},"  // 中カテゴリー\n",[2548,2630,2632,2635,2637,2639],{"class":2550,"line":2631},7,[2548,2633,2634],{"class":2569},"  good",[2548,2636,2621],{"class":2554},[2548,2638,2573],{"class":2562},[2548,2640,2641],{"class":2558},"GoodBadExample\n",[2548,2643,2645,2648,2650,2652],{"class":2550,"line":2644},8,[2548,2646,2647],{"class":2569},"  bad",[2548,2649,2621],{"class":2554},[2548,2651,2573],{"class":2562},[2548,2653,2641],{"class":2558},[2548,2655,2657],{"class":2550,"line":2656},9,[2548,2658,2659],{"class":2562},"}\n",[2548,2661,2663],{"class":2550,"line":2662},10,[2548,2664,2666],{"emptyLinePlaceholder":2665},true,"\n",[2548,2668,2670,2672,2675],{"class":2550,"line":2669},11,[2548,2671,2555],{"class":2554},[2548,2673,2674],{"class":2558}," GoodBadExample",[2548,2676,2563],{"class":2562},[2548,2678,2680,2683,2685],{"class":2550,"line":2679},12,[2548,2681,2682],{"class":2569},"  title",[2548,2684,2573],{"class":2562},[2548,2686,2587],{"class":2558},[2548,2688,2690,2692,2694],{"class":2550,"line":2689},13,[2548,2691,2593],{"class":2569},[2548,2693,2573],{"class":2562},[2548,2695,2587],{"class":2558},[2548,2697,2699,2702,2704,2706,2708],{"class":2550,"line":2698},14,[2548,2700,2701],{"class":2569},"  image",[2548,2703,2621],{"class":2554},[2548,2705,2573],{"class":2562},[2548,2707,2608],{"class":2558},[2548,2709,2710],{"class":2611},"  // スクリーンショットやイラスト\n",[2548,2712,2714,2717,2719,2721,2723],{"class":2550,"line":2713},15,[2548,2715,2716],{"class":2569},"  code",[2548,2718,2621],{"class":2554},[2548,2720,2573],{"class":2562},[2548,2722,2608],{"class":2558},[2548,2724,2725],{"class":2611},"   // コード例がある場合\n",[2548,2727,2729],{"class":2550,"line":2728},16,[2548,2730,2659],{"class":2562},[40,2732,2733],{"id":2733},"コンポーネント構成案",[2538,2735,2740],{"className":2736,"code":2738,"language":2739},[2737],"language-text","components/\n  design-principles/\n    DesignPrincipleCard.vue      # 単一原則のカード（Good/Bad表示含む）\n    DesignPrincipleList.vue      # カテゴリー別リスト\n    GoodBadComparison.vue        # Good/Bad比較表示\n    CategoryNav.vue              # カテゴリーナビゲーション\n","text",[2545,2741,2738],{"__ignoreMap":2543},[40,2743,2744],{"id":2744},"実装ステップ",[2746,2747,2750,2764,2774,2783,2792,2801],"ol",{"className":2748},[2749],"contains-task-list",[2751,2752,2755,2759,2760,2763],"li",{"className":2753},[2754],"task-list-item",[2756,2757],"input",{"disabled":2665,"type":2758},"checkbox"," データファイル作成（",[2545,2761,2762],{},"data/design-principles.ts","）",[2751,2765,2767,2769,2770,2773],{"className":2766},[2754],[2756,2768],{"disabled":2665,"type":2758}," ",[2545,2771,2772],{},"DesignPrincipleCard.vue"," - 原則カード（タイトル、説明、Good/Bad）",[2751,2775,2777,2769,2779,2782],{"className":2776},[2754],[2756,2778],{"disabled":2665,"type":2758},[2545,2780,2781],{},"GoodBadComparison.vue"," - Good/Badの比較UI",[2751,2784,2786,2769,2788,2791],{"className":2785},[2754],[2756,2787],{"disabled":2665,"type":2758},[2545,2789,2790],{},"DesignPrincipleList.vue"," - カテゴリー別表示",[2751,2793,2795,2769,2797,2800],{"className":2794},[2754],[2756,2796],{"disabled":2665,"type":2758},[2545,2798,2799],{},"CategoryNav.vue"," - カテゴリー切り替え",[2751,2802,2804,2806],{"className":2803},[2754],[2756,2805],{"disabled":2665,"type":2758}," ページ統合（この記事またはVueページで使用）",[2808,2809,2810],"style",{},"html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":2543,"searchDepth":2566,"depth":2566,"links":2812},[2813,2824,2825,2826,2830,2835,2840,2845,2849,2854,2858,2862,2863,2867,2868,2873],{"id":34,"depth":2566,"text":35,"children":2814},[2815,2816,2817,2818,2819,2820,2821,2822,2823],{"id":42,"depth":2579,"text":43},{"id":141,"depth":2579,"text":142},{"id":255,"depth":2579,"text":256},{"id":369,"depth":2579,"text":370},{"id":483,"depth":2579,"text":484},{"id":584,"depth":2579,"text":585},{"id":685,"depth":2579,"text":686},{"id":773,"depth":2579,"text":774},{"id":874,"depth":2579,"text":875},{"id":1024,"depth":2566,"text":1025},{"id":1028,"depth":2566,"text":1028},{"id":1064,"depth":2566,"text":1065,"children":2827},[2828,2829],{"id":1068,"depth":2579,"text":1068},{"id":1143,"depth":2579,"text":1143},{"id":1200,"depth":2566,"text":1201,"children":2831},[2832,2833,2834],{"id":1204,"depth":2579,"text":1204},{"id":1257,"depth":2579,"text":1257},{"id":1329,"depth":2579,"text":1330},{"id":1387,"depth":2566,"text":1388,"children":2836},[2837,2838,2839],{"id":1391,"depth":2579,"text":1391},{"id":1483,"depth":2579,"text":1483},{"id":1520,"depth":2579,"text":1520},{"id":1546,"depth":2566,"text":1546,"children":2841},[2842,2843,2844],{"id":1549,"depth":2579,"text":1549},{"id":1605,"depth":2579,"text":1605},{"id":1676,"depth":2579,"text":1676},{"id":1739,"depth":2566,"text":1740,"children":2846},[2847,2848],{"id":1743,"depth":2579,"text":1743},{"id":1802,"depth":2579,"text":1802},{"id":1846,"depth":2566,"text":1846,"children":2850},[2851,2852,2853],{"id":1849,"depth":2579,"text":1849},{"id":1895,"depth":2579,"text":1895},{"id":1948,"depth":2579,"text":1948},{"id":1985,"depth":2566,"text":1985,"children":2855},[2856,2857],{"id":1988,"depth":2579,"text":1988},{"id":2023,"depth":2579,"text":2023},{"id":2068,"depth":2566,"text":2068,"children":2859},[2860,2861],{"id":2071,"depth":2579,"text":2071},{"id":2115,"depth":2579,"text":2115},{"id":2159,"depth":2566,"text":2159},{"id":2216,"depth":2566,"text":2217,"children":2864},[2865,2866],{"id":2220,"depth":2579,"text":2220},{"id":2270,"depth":2579,"text":2270},{"id":2329,"depth":2566,"text":2329},{"id":2368,"depth":2566,"text":2368,"children":2869},[2870,2871,2872],{"id":2371,"depth":2579,"text":2371},{"id":2428,"depth":2579,"text":2428},{"id":2489,"depth":2579,"text":2489},{"id":2526,"depth":2566,"text":2527,"children":2874},[2875,2876,2877,2878],{"id":2530,"depth":2579,"text":2530},{"id":2536,"depth":2579,"text":2536},{"id":2733,"depth":2579,"text":2733},{"id":2744,"depth":2579,"text":2744},"personal",null,"UIデザインの基本原則をカテゴリー別に整理","md",{},"/design",false,"2026-01-10T00:00:00.000Z",{"title":5,"description":2881},"2026-01/2026-01-10/design",[2890,2891,2892],"UIデザイン","UX","設計原則","memo","TF9apL6kvem5NUiXOBMV2NjgsGUK3m34bkh4uvDgUiY",[],[2897,2901,2905,2909,2913],{"title":2898,"path":2899,"publishedAt":2900},"コーディング原則ページのUX大改修：Bad/Good横並び・フローチャート・ベン図抽象化・難易度レベル付け","/coding-principles-ux-overhaul","2026-06-13T00:00:00.000Z",{"title":2902,"path":2903,"publishedAt":2904},"クイズの復習フィルタを「累計誤答」から「直近連続誤答」に変えた話","/quiz-streak-filter-design","2026-05-15T00:00:00.000Z",{"title":2906,"path":2907,"publishedAt":2908},"投資判断クイズを2カラムレイアウトへ移行：1ページ完成→コンポーネント化→横展開","/investment-quiz-2col-refactor","2026-05-14T00:00:00.000Z",{"title":2910,"path":2911,"publishedAt":2912},"Excel講座の統合記事パターンを ScrollArticle に共通化した日","/2026-04-29-excel-scroll-article-unification","2026-04-29T00:00:00.000Z",{"title":2914,"path":2915,"publishedAt":2916},"教育コンテンツのUI改善 — ミラーカラムからスクロール形式へレイアウトを変換した記録","/miller-to-scroll-layout-conversion","2026-04-23T00:00:00.000Z","https://log.eurekapu.com/og/blog/design.png?v=2026-01-10T00%3A00%3A00.000Z&title=UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%8E%9F%E5%89%87&author=Kei%20Komatsu&sig=b6b5eabcc7c494fa",1785654713088]