渡邊和幸/Keywords をテンプレートにして作成

開始行:
// - Header - #setheadercolor(white,"linear-gradient(to top, #f83600 0%... // --- *Keywords ~ ~ **ピークエンドの法則 (Peak-End Rule) ~ ***概要 人は全体の体験よりも、「ピーク（最も強く印象に残った瞬間... ~ ~ ***応用例 -操作完了時に「達成感」や「フィードバック」を与える -最後のステップで感情的な満足を作る ~ ~ ~ ~ **ポステルの法則 (Postel's Law) ~ ***概要 「入力は寛容に、出力には厳格に」 ~ ~ ***応用例 -ユーザーのミスを許容する（例：電話番号にハイフンがなくて... ~ ~ ~ ~ **アフォーダンス (Affordance) ~ ***概要 オブジェクトの見た目から使い方が直感的に理解できるべき。 ~ ~ ***実用例 -ボタンは「押せそう」に見せる（影や枠をつける） ~ ~ ~ ~ **ドハティの閾値 (Doherty Threshold) ~ ***概要 ユーザーの満足度はシステムが0.4秒以内に応答することで大き... ~ ~ ***実用例 -ローディング時間を0.4秒以下に保つか、ローディング状態を... ~ ~ ~ ~ **テスラーの法則 (Teslaer's Law / Law of Conservation of ... ~ ***概要 アプリケーションの複雑さは最小限にできても完全に消せない... ~ ~ ***実用例 -フォームの自動補完機能やデフォルト値で、ユーザーの負荷を... ~ ~ ~ ~ **ミラーの法則 (Miller's Law) ~ ***概要 人が記憶できる情報は「&mathjax( 7 \pm 2 );」個まで。 ~ ~ ***実用例 -ナビゲーションやフォームは選択肢を絞る -ステップを分けて提示する（ステップ・バイ・ステップ） ~ ~ ~ ~ **ヤコブの法則 (Jakob's Law) ~ ***概要 選択肢が多いほど決定に時間がかかる。 ~ ~ -UIの慣例を崩さない（例：ロゴをクリックするとトップページ... ~ ~ ~ ~ **ヒックの法則 (Hick's Law) ~ ***概要 選択肢が多いほど決定に時間がかかる。 ~ ~ ***実用例 -メニューや選択肢をグループ化する -「最小限の選択肢」を提示することで判断負荷を減らす ~ ~ ~ ~ **フィッツの法則 (Fitts's Law) ~ ***概要 ターゲットが大きく、近くにあるほど、ユーザーはそれを素早... ~ ~ ***公式 #mathjax( T = a + b \cdot \log_2\left(1 + \frac{D}{W} \ri... CENTER:( T = 時間、D = 距離、W = 幅 ) ~ ~ ***実用例 -よく使うボタンは大きく配置する -ナビゲーションは近くに置く ~ ~ ~ ~ **Japandi Style ~ ***概要 ジャパンディスタイル (Japandi Style) は、「Japanese」と「... ~ ~ ~ ~ **Democratic Design ~ ***概要 IKEA が提唱している、製品は美しいデザイン、優れた機能性、... ~ ~ ***IKEA のビジョン ~ CENTER:''「より快適な毎日を、より多くの方々に」'' CENTER:Create a better everyday life for the many people ~ ~ ***参考 -[[デモクラティックデザインとは何ですか？>https://www.ike... -[[知ってほしい、イケアが大切にしている5つのこと>https://... ~ ~ ~ ~ **Atomic Design ~ ***概要 アトミックデザインは、UI の構成要素を5つのコンポーネント... 最小単位となるコンポーネントを「原子」、より大きなコンポ... ~ ~ ***Atomic Design の5段階設計 ~ Lv.1 ''原子 (Atomics)'' Lv.2 ''分子 (Molecules)'' Lv.3 ''生物 (Organisms)'' Lv.4 ''テンプレート (Templates)'' Lv.5 ''ページ (Pages)'' ~ ~ ~ ***Lv.1 原子 (Atomics) 下記のようなものが該当する。 -Button (Default, Primary, Secoundary, Radio ... etc) -Title (h1, h2, h3, Label ... etc) -Text (Paragraph, Description, Alert ... etc) -Form -Icon -Image ~ ~ ***Lv2. 分子 ((Molecule) Lv.1 の原子で作成したコンポーネントを組み合わせたものが該... -Button + Form + Label -Icon + Title -Image + Text ~ ~ ***Lv3. 生物 (Organism) 一つの塊として使い回しのできるもの。 -Header -Footer -Card -List -Menu ~ ~ ***Lv.4 テンプレート (Templates) ここからは科学の概念から外れ、UI デザインの概念のみで構成... -何をどこに配置するか -この画面で何があれば何が伝わるか -この画面で何があれば何ができるか -目的にあったレイアウトや配置になっているか -気持ちの良い見た目、操作性になっているか ~ ~ ***Lv.5 ページ (Pages) -Top -コンテンツページ -問い合わせフォーム -FAQ -イメージビュー ~ ~ ***Atomic Design のメリット ~ -''作成したものの再利用がしやすい'' --AtomsやMoleculesといった小さい単位からデザインを設計し... --再利用することによって、ページ作成の時間短縮に繋げる事... --そのまま再利用できずとも、AtomsやMoleculesを少し修正す... ~ -''デザインの変更が容易'' --前述の「再利用できずとも少しの修正で新たな要素を作成可... --しかし、Atoms や Molecules 時点でのデザインが統一されて... --また、それらの小さい要素の入れ替えが多い Organisms や T... ~ -''要素の役割が明確になる'' --細かい単位でページデザイン・機能を設計していくため、そ... --複数人で開発している場合の要素の役割の認識違いなどを防... --複数人で開発していない場合、メリットが薄れることがある ~ ~ ***Atomic Design のデメリット ~ -''大規模になるとコンポーネントの数が増えすぎる'' --コンポーネントを流用してページの作成効率を上げるという... --1画面しか使わないコンポーネントも作りがちなため、これに... --どこまでコンポーネント化するかというチーム内の取り決め... -''データの受け渡しが難しい'' --特に Atoms や Molecules は流用することが多いので、Templ... --そもそもUIデザインの手法であるため、開発に活かすには工... ~ ~ ***参考 -[[Atomic Design by Brad Frost>https://atomicdesign.bradf... -[[Brad Frost(著)から解くAtomic Designのコンポーネント分... -[[Atomic Designってなあに>https://qiita.com/akira-hagi/i... -[[アトミックデザイン（Atomic Design）とは？メリット・注... ~ ~ ~ ~ **Noto Sans JP ~ #img(noto-sans-jp.jpg) CENTER:Noto Sans JP ~ ~ ***概要 Noto Sans JPは、Google と Adobe が共同開発して2014年にリ... ~ ~ ~ ***名前の由来 「Noto」の名前の由来は「No tofu」(No 豆腐) である。コンピ... ~ ~ ~ ***参考 -[[「Noto Sans JP」を選びたくなる理由。>https://note.com/... -[[めちゃすごいフォント、Noto Sans>https://note.com/zotji... ~ ~ ~ ~ **Pop Art ~ ***概要 Pop Art とは、1950年代後半から1960年代にかけて欧米で盛ん... ~ ~ ~ ***歴史 ~ ''〜1950年'' 第二次世界大戦が終結し、アメリカやイギリスなどの先進国で... また、戦争後の疲弊したイギリスには豊かなアメリカから伝わ... 当時、理解しづらい抽象表現主義の作品に多くの人々は飽き始... ~ アートは大衆のためのものか？芸術家のためのものか？ ~ 戦後、間もなくイギリス (スコットランド) の彫刻家、美術家... ~ ~ ''1950年代'' ~ -1952年 ロンドンの ICA (Institute of Contemporary Arts) というギ... ~ -1956年 ローレンス・アロウェイが商業デザインなどを指して、「ポピ... ロンドンで「This is Tomorrow」(これが明日だ) 展が開催され... ~ ~ ''1960年代'' ~ -1961年代 渡米していたローレンス・アロウェイがアメリカに「ポップア... -1960年代後半 ポップアートは1960年代終盤に衰退を迎える。その代わりにミ... 特に1960年代後半は、ベトナム戦争や冷戦の影響であり、ポッ... ~ ~ ~ ***著名なアーティスト ~ ''ジャスパー・ジョーンズ'' ジャスパージョーンズは、ネオダダやポップアーティストの1人... 彼は、多くのアーティストと異なり幼少期に芸術に触れること... ジョーンズの代表的な作品の1つである「4つの顔のある標的」... ~ ~ ''アンディー・ウォーホル'' アンディウォーホルは、ポップアートの巨匠として知られるア... ウォーホルはポップアート画家として活動する前に、多くの試... なかでも女優のマリリン・モンローの写真を並べた「狙撃され... なお、​​晩年のウォーホルはローリング・ストーンズのミック... ~ ~ ''ロイ・リキテンスタイン'' ロイ・リキテンスタインは、アメリカのポップアーティストで... リキテンスタインはインタビューにて自身の作品について「そ... 代表作「M-Maybe」(1965年) はコミックの1コマを切り取った作... ~ ~ ~ ***参考 -[[ポップアートとは？誕生した背景や、有名なアーティストと... -[[このアートは知られるべき:Pop-art (Part1)>https://note.... ~ ~ ~ ~ **Liquid Glass Design ~ #image(liquid-glass.jpg) CENTER:iOS 26の画面 ~ ~ ***概要 2025年6月9日に行われた WWDC にて、発表された iOS の新しい... 発表直後から、X では海外ユーザーを中心に、同じくすりガラ... ~ ~ ***参考 -[[Apple、iOS 26でiPhoneの体験をさらに上のレベルへ>https:... -[[Appleの新OSデザイン「Liquid Glass」で、往年の“Windows ... ~ ~ ~ ~ **浮世絵 ~ #image(kanagawaokinamiura.jpg) CENTER:神奈川沖浪裏 (葛飾北斎 作) CENTER:&scale(80){参照: The Metropolitan Museum of Art}; ~ ~ ***概要 浮世絵とは、江戸時代に一般の人たちの間で流行した絵である... ~ ~ ***浮世絵のはじまり 浮世絵を制作方法で区別すると「肉筆画」(手書きの一点ものの... ~ #image(mikaeribijin.jpg,center,30%) CENTER:見返り美人 (菱川師宣 作) CENTER:&scale(80){参照: [[パブリックドメインQ>https://pub... ~ 師宣は当初、絵入本の挿絵を手がけたが、挿絵から独立した墨... ~ ~ ***浮世絵版画の技法の進化 江戸初期に絵入本の挿絵から独立して描かれるようになった墨... 江戸中期になると「色版」による彩色が始まる。色ごとに作ら... 鈴木春信は江戸時代中期に活躍した浮世絵師で、明和2年 (1765... ~ #image(woman-dancer-in-daimyo's-palace.jpg,center,80%) CENTER:Woman Dancer in Daimyo's Palace (鈴木春信 作) CENTER:&scale(80){参照: The Metropolitan Museum of Art}; ~ ~ ***浮世絵の技法 -墨摺絵 墨摺絵とは、墨一色で摺られた浮世絵のことである。墨摺絵は... ~ -紅摺絵 紅摺絵とは初期の多色摺版画で、墨でアウトラインを摺り、紅... ~ ~ ~ ~ **Brand Identity Prism #image(brand-identity-prism.png) CENTER:Brand Identity Prism の構造 ~ ***概要 ブランド・アイデンティティ・プリズムは、ブランド・アイデ... ~ ブランド・アイデンティティ・プリズムは、以下の6つの構成要... -''Physique: ブランドの物理的特徴'' パッケージ、ネーミング、カラー、ロゴ、キャッチコピー、ジ... -''Personality: ブランド・パーソナリティ'' 人は皆、独自の個性（パーソナリティ）を持っているように、... -''Relationship: 顧客とブランドの関係性'' 名称の通り、顧客とブランドがどのような関係性を築くかを指... -''Culture: 文化'' ブランドが持つ価値観や行動規範などの文化を指す。顧客がブ... -''Reflection: ブランドのターゲット'' ブランドの主要な顧客となる人々はどのようなグループなのか... -''Self-Image: セルフイメージ'' 顧客自身が、ブランドと接したり、ブランドを思い出したりし... ~ ~

終了行:
// - Header - #setheadercolor(white,"linear-gradient(to top, #f83600 0%... // --- *Keywords ~ ~ **ピークエンドの法則 (Peak-End Rule) ~ ***概要 人は全体の体験よりも、「ピーク（最も強く印象に残った瞬間... ~ ~ ***応用例 -操作完了時に「達成感」や「フィードバック」を与える -最後のステップで感情的な満足を作る ~ ~ ~ ~ **ポステルの法則 (Postel's Law) ~ ***概要 「入力は寛容に、出力には厳格に」 ~ ~ ***応用例 -ユーザーのミスを許容する（例：電話番号にハイフンがなくて... ~ ~ ~ ~ **アフォーダンス (Affordance) ~ ***概要 オブジェクトの見た目から使い方が直感的に理解できるべき。 ~ ~ ***実用例 -ボタンは「押せそう」に見せる（影や枠をつける） ~ ~ ~ ~ **ドハティの閾値 (Doherty Threshold) ~ ***概要 ユーザーの満足度はシステムが0.4秒以内に応答することで大き... ~ ~ ***実用例 -ローディング時間を0.4秒以下に保つか、ローディング状態を... ~ ~ ~ ~ **テスラーの法則 (Teslaer's Law / Law of Conservation of ... ~ ***概要 アプリケーションの複雑さは最小限にできても完全に消せない... ~ ~ ***実用例 -フォームの自動補完機能やデフォルト値で、ユーザーの負荷を... ~ ~ ~ ~ **ミラーの法則 (Miller's Law) ~ ***概要 人が記憶できる情報は「&mathjax( 7 \pm 2 );」個まで。 ~ ~ ***実用例 -ナビゲーションやフォームは選択肢を絞る -ステップを分けて提示する（ステップ・バイ・ステップ） ~ ~ ~ ~ **ヤコブの法則 (Jakob's Law) ~ ***概要 選択肢が多いほど決定に時間がかかる。 ~ ~ -UIの慣例を崩さない（例：ロゴをクリックするとトップページ... ~ ~ ~ ~ **ヒックの法則 (Hick's Law) ~ ***概要 選択肢が多いほど決定に時間がかかる。 ~ ~ ***実用例 -メニューや選択肢をグループ化する -「最小限の選択肢」を提示することで判断負荷を減らす ~ ~ ~ ~ **フィッツの法則 (Fitts's Law) ~ ***概要 ターゲットが大きく、近くにあるほど、ユーザーはそれを素早... ~ ~ ***公式 #mathjax( T = a + b \cdot \log_2\left(1 + \frac{D}{W} \ri... CENTER:( T = 時間、D = 距離、W = 幅 ) ~ ~ ***実用例 -よく使うボタンは大きく配置する -ナビゲーションは近くに置く ~ ~ ~ ~ **Japandi Style ~ ***概要 ジャパンディスタイル (Japandi Style) は、「Japanese」と「... ~ ~ ~ ~ **Democratic Design ~ ***概要 IKEA が提唱している、製品は美しいデザイン、優れた機能性、... ~ ~ ***IKEA のビジョン ~ CENTER:''「より快適な毎日を、より多くの方々に」'' CENTER:Create a better everyday life for the many people ~ ~ ***参考 -[[デモクラティックデザインとは何ですか？>https://www.ike... -[[知ってほしい、イケアが大切にしている5つのこと>https://... ~ ~ ~ ~ **Atomic Design ~ ***概要 アトミックデザインは、UI の構成要素を5つのコンポーネント... 最小単位となるコンポーネントを「原子」、より大きなコンポ... ~ ~ ***Atomic Design の5段階設計 ~ Lv.1 ''原子 (Atomics)'' Lv.2 ''分子 (Molecules)'' Lv.3 ''生物 (Organisms)'' Lv.4 ''テンプレート (Templates)'' Lv.5 ''ページ (Pages)'' ~ ~ ~ ***Lv.1 原子 (Atomics) 下記のようなものが該当する。 -Button (Default, Primary, Secoundary, Radio ... etc) -Title (h1, h2, h3, Label ... etc) -Text (Paragraph, Description, Alert ... etc) -Form -Icon -Image ~ ~ ***Lv2. 分子 ((Molecule) Lv.1 の原子で作成したコンポーネントを組み合わせたものが該... -Button + Form + Label -Icon + Title -Image + Text ~ ~ ***Lv3. 生物 (Organism) 一つの塊として使い回しのできるもの。 -Header -Footer -Card -List -Menu ~ ~ ***Lv.4 テンプレート (Templates) ここからは科学の概念から外れ、UI デザインの概念のみで構成... -何をどこに配置するか -この画面で何があれば何が伝わるか -この画面で何があれば何ができるか -目的にあったレイアウトや配置になっているか -気持ちの良い見た目、操作性になっているか ~ ~ ***Lv.5 ページ (Pages) -Top -コンテンツページ -問い合わせフォーム -FAQ -イメージビュー ~ ~ ***Atomic Design のメリット ~ -''作成したものの再利用がしやすい'' --AtomsやMoleculesといった小さい単位からデザインを設計し... --再利用することによって、ページ作成の時間短縮に繋げる事... --そのまま再利用できずとも、AtomsやMoleculesを少し修正す... ~ -''デザインの変更が容易'' --前述の「再利用できずとも少しの修正で新たな要素を作成可... --しかし、Atoms や Molecules 時点でのデザインが統一されて... --また、それらの小さい要素の入れ替えが多い Organisms や T... ~ -''要素の役割が明確になる'' --細かい単位でページデザイン・機能を設計していくため、そ... --複数人で開発している場合の要素の役割の認識違いなどを防... --複数人で開発していない場合、メリットが薄れることがある ~ ~ ***Atomic Design のデメリット ~ -''大規模になるとコンポーネントの数が増えすぎる'' --コンポーネントを流用してページの作成効率を上げるという... --1画面しか使わないコンポーネントも作りがちなため、これに... --どこまでコンポーネント化するかというチーム内の取り決め... -''データの受け渡しが難しい'' --特に Atoms や Molecules は流用することが多いので、Templ... --そもそもUIデザインの手法であるため、開発に活かすには工... ~ ~ ***参考 -[[Atomic Design by Brad Frost>https://atomicdesign.bradf... -[[Brad Frost(著)から解くAtomic Designのコンポーネント分... -[[Atomic Designってなあに>https://qiita.com/akira-hagi/i... -[[アトミックデザイン（Atomic Design）とは？メリット・注... ~ ~ ~ ~ **Noto Sans JP ~ #img(noto-sans-jp.jpg) CENTER:Noto Sans JP ~ ~ ***概要 Noto Sans JPは、Google と Adobe が共同開発して2014年にリ... ~ ~ ~ ***名前の由来 「Noto」の名前の由来は「No tofu」(No 豆腐) である。コンピ... ~ ~ ~ ***参考 -[[「Noto Sans JP」を選びたくなる理由。>https://note.com/... -[[めちゃすごいフォント、Noto Sans>https://note.com/zotji... ~ ~ ~ ~ **Pop Art ~ ***概要 Pop Art とは、1950年代後半から1960年代にかけて欧米で盛ん... ~ ~ ~ ***歴史 ~ ''〜1950年'' 第二次世界大戦が終結し、アメリカやイギリスなどの先進国で... また、戦争後の疲弊したイギリスには豊かなアメリカから伝わ... 当時、理解しづらい抽象表現主義の作品に多くの人々は飽き始... ~ アートは大衆のためのものか？芸術家のためのものか？ ~ 戦後、間もなくイギリス (スコットランド) の彫刻家、美術家... ~ ~ ''1950年代'' ~ -1952年 ロンドンの ICA (Institute of Contemporary Arts) というギ... ~ -1956年 ローレンス・アロウェイが商業デザインなどを指して、「ポピ... ロンドンで「This is Tomorrow」(これが明日だ) 展が開催され... ~ ~ ''1960年代'' ~ -1961年代 渡米していたローレンス・アロウェイがアメリカに「ポップア... -1960年代後半 ポップアートは1960年代終盤に衰退を迎える。その代わりにミ... 特に1960年代後半は、ベトナム戦争や冷戦の影響であり、ポッ... ~ ~ ~ ***著名なアーティスト ~ ''ジャスパー・ジョーンズ'' ジャスパージョーンズは、ネオダダやポップアーティストの1人... 彼は、多くのアーティストと異なり幼少期に芸術に触れること... ジョーンズの代表的な作品の1つである「4つの顔のある標的」... ~ ~ ''アンディー・ウォーホル'' アンディウォーホルは、ポップアートの巨匠として知られるア... ウォーホルはポップアート画家として活動する前に、多くの試... なかでも女優のマリリン・モンローの写真を並べた「狙撃され... なお、​​晩年のウォーホルはローリング・ストーンズのミック... ~ ~ ''ロイ・リキテンスタイン'' ロイ・リキテンスタインは、アメリカのポップアーティストで... リキテンスタインはインタビューにて自身の作品について「そ... 代表作「M-Maybe」(1965年) はコミックの1コマを切り取った作... ~ ~ ~ ***参考 -[[ポップアートとは？誕生した背景や、有名なアーティストと... -[[このアートは知られるべき:Pop-art (Part1)>https://note.... ~ ~ ~ ~ **Liquid Glass Design ~ #image(liquid-glass.jpg) CENTER:iOS 26の画面 ~ ~ ***概要 2025年6月9日に行われた WWDC にて、発表された iOS の新しい... 発表直後から、X では海外ユーザーを中心に、同じくすりガラ... ~ ~ ***参考 -[[Apple、iOS 26でiPhoneの体験をさらに上のレベルへ>https:... -[[Appleの新OSデザイン「Liquid Glass」で、往年の“Windows ... ~ ~ ~ ~ **浮世絵 ~ #image(kanagawaokinamiura.jpg) CENTER:神奈川沖浪裏 (葛飾北斎 作) CENTER:&scale(80){参照: The Metropolitan Museum of Art}; ~ ~ ***概要 浮世絵とは、江戸時代に一般の人たちの間で流行した絵である... ~ ~ ***浮世絵のはじまり 浮世絵を制作方法で区別すると「肉筆画」(手書きの一点ものの... ~ #image(mikaeribijin.jpg,center,30%) CENTER:見返り美人 (菱川師宣 作) CENTER:&scale(80){参照: [[パブリックドメインQ>https://pub... ~ 師宣は当初、絵入本の挿絵を手がけたが、挿絵から独立した墨... ~ ~ ***浮世絵版画の技法の進化 江戸初期に絵入本の挿絵から独立して描かれるようになった墨... 江戸中期になると「色版」による彩色が始まる。色ごとに作ら... 鈴木春信は江戸時代中期に活躍した浮世絵師で、明和2年 (1765... ~ #image(woman-dancer-in-daimyo's-palace.jpg,center,80%) CENTER:Woman Dancer in Daimyo's Palace (鈴木春信 作) CENTER:&scale(80){参照: The Metropolitan Museum of Art}; ~ ~ ***浮世絵の技法 -墨摺絵 墨摺絵とは、墨一色で摺られた浮世絵のことである。墨摺絵は... ~ -紅摺絵 紅摺絵とは初期の多色摺版画で、墨でアウトラインを摺り、紅... ~ ~ ~ ~ **Brand Identity Prism #image(brand-identity-prism.png) CENTER:Brand Identity Prism の構造 ~ ***概要 ブランド・アイデンティティ・プリズムは、ブランド・アイデ... ~ ブランド・アイデンティティ・プリズムは、以下の6つの構成要... -''Physique: ブランドの物理的特徴'' パッケージ、ネーミング、カラー、ロゴ、キャッチコピー、ジ... -''Personality: ブランド・パーソナリティ'' 人は皆、独自の個性（パーソナリティ）を持っているように、... -''Relationship: 顧客とブランドの関係性'' 名称の通り、顧客とブランドがどのような関係性を築くかを指... -''Culture: 文化'' ブランドが持つ価値観や行動規範などの文化を指す。顧客がブ... -''Reflection: ブランドのターゲット'' ブランドの主要な顧客となる人々はどのようなグループなのか... -''Self-Image: セルフイメージ'' 顧客自身が、ブランドと接したり、ブランドを思い出したりし... ~ ~

ページ名: