#author("2025-07-01T11:00:09+09:00","default:art-gs","art-gs") #author("2025-07-01T11:02:21+09:00","default:art-gs","art-gs") // - Header - #setheadercolor(white,"linear-gradient(to top, #f83600 0%, #fe8c00 100%)",0.9) // --- *Keywords ~ ~ **ピークエンドの法則 (Peak-End Rule) ~ ***概要 人は全体の体験よりも、「ピーク（最も強く印象に残った瞬間）」と「終わり」の印象で記憶を評価する。 ~ ~ ***応用例 -操作完了時に「達成感」や「フィードバック」を与える -最後のステップで感情的な満足を作る ~ ~ ~ ~ **ポステルの法則 (Postel's Law) ~ ***概要 「入力は寛容に、出力には厳格に」 ~ ~ ***応用例 -ユーザーのミスを許容する（例：電話番号にハイフンがなくても受け入れる） ~ ~ ~ ~ **アフォーダンス (Affordance) ~ ***概要 オブジェクトの見た目から使い方が直感的に理解できるべき。 ~ ~ ***実用例 -ボタンは「押せそう」に見せる（影や枠をつける） ~ ~ ~ ~ **ドハティの閾値 (Doherty Threshold) ~ ***概要 ユーザーの満足度はシステムが0.4秒以内に応答することで大きく向上する。 ~ ~ **実用例 ***実用例 -ローディング時間を0.4秒以下に保つか、ローディング状態を明示する ~ ~ ~ ~ **テスラーの法則 (Teslaer's Law / Law of Conservation of Complexity) ~ ***概要 アプリケーションの複雑さは最小限にできても完全に消せない。その負荷は「開発者」か「ユーザー」が負う。 ~ ~ ***実用例 -フォームの自動補完機能やデフォルト値で、ユーザーの負荷を軽減 ~ ~ ~ ~ **ミラーの法則 (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} \right) ); CENTER:( T = 時間、D = 距離、W = 幅 ) ~ ~ ***実用例 -よく使うボタンは大きく配置する -ナビゲーションは近くに置く ~ ~ ~ ~ **Japandi Style ~ ***概要 ジャパンディスタイル (Japandi Style) は、「Japanese」と「Scandinavian (北欧)」のインテリアスタイルを融合させたデザインスタイルである。両者の共通点である「ミニマリズム」「自然との調和」「機能美」を活かしつつ、日本の禅に代表される侘び寂びの文化と、北欧のヒュッゲ (Hygge) に代表される居心地の良さを組み合わせている。 ~ ~ ~ ~ **Democratic Design ~ ***概要 IKEA が提唱している、製品は美しいデザイン、優れた機能性、サスティナビリティ、高品質を兼ね備え低価格で入手できる必要があるというデザイン哲学。 ~ ~ ***IKEA のビジョン ~ CENTER:''「より快適な毎日を、より多くの方々に」'' CENTER:Create a better everyday life for the many people ~ ~ ***参考 -[[デモクラティックデザインとは何ですか？>https://www.ikea.com/jp/ja/customer-service/knowledge/articles/d17f696g-ff79-4g2b-9db6-751797c15967.html]] -[[知ってほしい、イケアが大切にしている5つのこと>https://www.roomie.jp/2015/06/262823/]] ~ ~ ~ ~ **Atomic Design ~ ***概要 アトミックデザインは、UI の構成要素を5つのコンポーネントに分解し、順番に設計していく手法である。小さな要素から順番に組み合わせて、より大きなコンポーネントを作ることで、UI が完成する。 最小単位となるコンポーネントを「原子」、より大きなコンポーネントを「分子」や「生体」などの化学用語になぞらえていることが、アトミックデザインの特徴である。ただし、各構成要素の定義はデザイナーや企業によって異なることがある点に注意が必要である。Brad Forest 氏によって提唱。 ~ ~ ***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.2-3を組み合わせてよく使うパターンをコンポーネント化する。 -何をどこに配置するか -この画面で何があれば何が伝わるか -この画面で何があれば何ができるか -目的にあったレイアウトや配置になっているか -気持ちの良い見た目、操作性になっているか ~ ~ ***Lv.5 ページ (Pages) -Top -コンテンツページ -問い合わせフォーム -FAQ -イメージビュー ~ ~ ***Atomic Design のメリット ~ -''作成したものの再利用がしやすい'' --AtomsやMoleculesといった小さい単位からデザインを設計していくため、一度作成したものを保存しておけば要素の再利用がしやすい --再利用することによって、ページ作成の時間短縮に繋げる事ができる --そのまま再利用できずとも、AtomsやMoleculesを少し修正するだけなどで、新たな要素を作成することも可能 ~ -''デザインの変更が容易'' --前述の「再利用できずとも少しの修正で新たな要素を作成可能」と関連して、Atoms、Molecules、Organisms のどれかを修正すればデザイン変更のコストが最小限になる --しかし、Atoms や Molecules 時点でのデザインが統一されていなければ、変更コスト削減にはつながらないので注意 --また、それらの小さい要素の入れ替えが多い Organisms や Templates でなければ、意味をなさない場合がある ~ -''要素の役割が明確になる'' --細かい単位でページデザイン・機能を設計していくため、それぞれがどの役割・機能を持つかが明確になる --複数人で開発している場合の要素の役割の認識違いなどを防ぐことができる --複数人で開発していない場合、メリットが薄れることがある ~ ~ ***Atomic Design のデメリット ~ -''大規模になるとコンポーネントの数が増えすぎる'' --コンポーネントを流用してページの作成効率を上げるという名目だが、大規模な開発になってくると増えすぎて把握できなくなる可能性がある --1画面しか使わないコンポーネントも作りがちなため、これに拍車がかかる --どこまでコンポーネント化するかというチーム内の取り決めがあれば解消できる -''データの受け渡しが難しい'' --特に Atoms や Molecules は流用することが多いので、Templates からデータを受け渡されることだけ（依存関係を減らす）ことに注力しないといけない点が難しくしている --そもそもUIデザインの手法であるため、開発に活かすには工夫が必要になってくる ~ ~ ***参考 -[[Atomic Design by Brad Frost>https://atomicdesign.bradfrost.com/]] -[[Brad Frost(著)から解くAtomic Designのコンポーネント分割方法>https://note.com/nviveto/n/na85c82d002ee]] -[[Atomic Designってなあに>https://qiita.com/akira-hagi/items/f424045e39055019ff41]] -[[アトミックデザイン（Atomic Design）とは？メリット・注意点を解説！>https://udemy.benesse.co.jp/design/web-design/atomic-design.html]] ~ ~ ~ ~ **Noto Sans JP ~ #img(noto-sans-jp.jpg) CENTER:Noto Sans JP ~ ~ ***概要 Noto Sans JPは、Google と Adobe が共同開発して2014年にリリースされたフォントである。日本語の美しさを表現するために設計されており、読みやすさだけでなく、デザイン性も兼ね備えている。日本語版 Web フォントの定番の一つであり、多くの Web サイトで使用されている。 ~ ~ ~ ***名前の由来 「Noto」の名前の由来は「No tofu」(No 豆腐) である。コンピューターで表示できない文字がある場合、文字の代わりに小さい四角 (◻︎) 、通称”豆腐”が表示されることが多いが、全ての言語に対応したフォントを開発することで”豆腐”が現れることがなくなるようにという意味をこめて Noto (No tofu) という名称が付けられた。 ~ ~ ~ ***参考 -[[「Noto Sans JP」を選びたくなる理由。>https://note.com/howmanydesigns/n/n838ca2699c0a]] -[[めちゃすごいフォント、Noto Sans>https://note.com/zotjils/n/n96329013cf9a]] ~ ~ ~ ~ **Pop Art ~ ***概要 Pop Art とは、1950年代後半から1960年代にかけて欧米で盛んになった芸術運動の一つで、大衆文化や新聞や漫画、テレビといったマスメディアのイメージを取り入れた美術表現である。作品の特徴としては第二次世界大戦後の大量生産・大量消費の時代をシニカルに表現することが挙げられる。また、Pop Art は「Popular Art」の略である。 ~ ~ ~ ***歴史 ~ ''〜1950年'' 第二次世界大戦が終結し、アメリカやイギリスなどの先進国では特に労働者階級の人々が、大量の製品に囲まれる生活を送っていた。そして、彼らはテレビや雑誌など、情報を手にする事を重要視するようになった。その中で、アートも人々に求められるようになった。 また、戦争後の疲弊したイギリスには豊かなアメリカから伝わった SF やアメコミ、ポップスミュージックなどのアメリカ大衆文化が浸透していった。特にイギリスの若者がアメリカの大衆文化に夢中になったが、一部否定的な意見を持つ層も存在した。 当時、理解しづらい抽象表現主義の作品に多くの人々は飽き始めていた。ジャクソン・ポロックらに代表される抽象表現主義のアーティストはモダニズムを信奉する立場であり、「グッドデザイン」を規範とし、大衆文化に逆らう立場であった。これに対し、廃物や既製品などを使用して芸術にする作家らが、しばらくの間「ネオダダ」と呼ばれ、抽象表現主義に飽き始めて、ダダイズムや反芸術の影響を強めた。 ~ アートは大衆のためのものか？芸術家のためのものか？ ~ 戦後、間もなくイギリス (スコットランド) の彫刻家、美術家であるエドゥアルド・パオロッツイ (Eduardo Paolozzi) は1947年に米軍兵士らと共に持ち込まれたアメリカの雑誌の切り抜きでコラージュを作り、Pop Art の始まりとなる作品を作っていた。パオロッツイは常に自分の作品はシュルレアリスムであると述べていた。 ~ ~ ''1950年代'' ~ -1952年 ロンドンの ICA (Institute of Contemporary Arts) というギャラリーで、パオロッツイらの若い美術かやローレンス・アロウェイなどの評論家が集まり「インディペンデント・グループ」というグループが結成され、芸術と大衆文化の関係に関する研究が行われた。 ~ -1956年 ローレンス・アロウェイが商業デザインなどを指して、「ポピュラーなアート」という意味で「Pop Art」という言葉を使用した。 ロンドンで「This is Tomorrow」(これが明日だ) 展が開催され、ここで発表されたリチャード・ハミルトンの作品「[[Just what is it that makes today's homes so different, so appealing?>https://en.wikipedia.org/wiki/Just_what_is_it_that_makes_today%27s_homes_so_different,_so_appealing%3F#/media/File:Hamilton-appealing2.jpg]]」(一体何が今日の過程をこれほどに変え、魅力あるものにしているのか？) は、雑誌や広告の魅力的な商品やゴージャスなモデルの写真をきりはりしたコラージュで、Pop Art の先駆的な作品と言われている。特にボディビルダーの男性が持つロリポップキャンディーの包み紙の「POP」の文字が強い印象を与えた。 ~ ~ ''1960年代'' ~ -1961年代 渡米していたローレンス・アロウェイがアメリカに「ポップアート」という言葉を紹介し、これらの傾向の呼び名になった。これによって、イギリスで誕生したと言われることもある、実際にポップアートの元になる商品や大衆文化の発信地は1960年代のアメリカ (特にニューヨーク) であると言える。 -1960年代後半 ポップアートは1960年代終盤に衰退を迎える。その代わりにミニマルアートやアースワークが台頭する。ミニマルアートはポップアートと同様に、1950年代の抽象表現主義へのアンチとして始まったが、ポップアートとは異なり、クールで洗練された作品が特徴である。また、アースワークは政治的、文化的、地理的な側面からアートを捉え直した作品が特徴である。どちらも「わかりやすさ」を重視したポップアートとは真逆で、ポップアートが否定したアートの常識よりもさらに知性や創造性を重視したスタイルといえる。 特に1960年代後半は、ベトナム戦争や冷戦の影響であり、ポップアートのような楽しさを味わいにくい雰囲気が漂う時代であった。大衆に受け入れられるカルチャーは、ヒッピーやロックンロール、フォークロア、ドラッグといった方向に転じた。また、戦時下のベトナムではアメリカ兵を説得させるためにポップアートを彷彿させるプロパガンダアートが街中に描かれた。 ~ ~ ~ ***著名なアーティスト ~ ''ジャスパー・ジョーンズ'' ジャスパージョーンズは、ネオダダやポップアーティストの1人としてられている。代表的な作品として、アメリカの国旗である清浄機をモチーフにしたものが挙げられる。 彼は、多くのアーティストと異なり幼少期に芸術に触れることはなかったが、朝鮮戦争の兵役を終えてアメリカに帰国した後、ロバートランシェンバーグと出会う。彼らとともにネオダダやポップアートの先駆者とも言えるべき存在となった。 ジョーンズの代表的な作品の1つである「4つの顔のある標的」は、画面いっぱいに標的が描かれており、その中に鼻や口といった人間の身体のパーツをから取った石膏が埋め込まれていて、グロテスクに感じる。しかし、アートを平面としてだけではなく立体的にも捉えられるよう提示した彼の作品は高い評価を得た。 ~ ~ ''アンディー・ウォーホル'' アンディウォーホルは、ポップアートの巨匠として知られるアーティストである。商業デザイナーとしてキャリアを積んだ彼は、ポップアートの画家のみならず、ロックバンドのプロデュース、彫刻作家、執筆活動、映像制作といった多岐にわたる活躍をした。 ウォーホルはポップアート画家として活動する前に、多くの試みを取り入れながらドローイングで脚光を浴びていた。ポップアート以前の抽象表現主義では、大衆に受けるテーマよりも精神性の高い崇高な作品が評価を得ていたが、それに対して彼は疑問を抱き、後の彼の作風に繋がった。 なかでも女優のマリリン・モンローの写真を並べた「狙撃されたマリリン」(1962年) は、彼女の死の直後に制作されたものであり、多くの反響を呼んだ。2022年にクリスティーズが開催したオークションでは、彼女をモチーフとした作品の1つである「ショット・セージブルー・マリリン」(1964年) が約254億円で落札された。 なお、晩年のウォーホルはローリング・ストーンズのミック・ジャガーやイラン国王から作品を依頼されるなど、各界の著名人のポートレイトを残した。 ~ ~ ''ロイ・リキテンスタイン'' ロイ・リキテンスタインは、アメリカのポップアーティストである。アメコミの1コマのように見える原色で太めのドットで描かれた作品が特徴である。作品に近付いて見てみると、絵画がドットで描かれている。大胆なデザインと思いきや緻密な彼の作品スタイルは、ウォーホルのような反逆児的なスタンスとは真逆といえる。 リキテンスタインはインタビューにて自身の作品について「それは何かの絵のように見えるのでなく、物そのもののように見えるのです」と答えているように、ドットといった「物」といった側面からアートを問い直そうとした。 代表作「M-Maybe」(1965年) はコミックの1コマを切り取った作品で、左上に書かれた彼女のセリフがそのままタイトルになっている。これまでのアート界では、コミックはアートと言うべき存在ではなかった。リキテンスタインは、日頃より大衆が親しんでいる作品をアートとして昇華させた。 ~ ~ ~ ***参考 -[[ポップアートとは？誕生した背景や、有名なアーティストと代表作品を徹底解説>https://kaitoriart.com/blog/popart]] -[[このアートは知られるべき:Pop-art (Part1)>https://note.com/pon_phan/n/n9e30134d2145]] ~ ~ ~ ~ **Liquid Glass Design ~ #image(liquid-glass.jpg) CENTER:iOS 26の画面 ~ ~ ***概要 2025年6月9日に行われた WWDC にて、発表された iOS の新しいデザインである。Liquid Glass は半透明の素材であり、周囲の光を反射したり、屈折させたりしてコンテンツへの注目を高め、コントロール、ナビゲーション、アプリアイコン、ウィジェットなどに新たな活力をもたらす効果がある。 発表直後から、X では海外ユーザーを中心に、同じくすりガラスのような透明感があるデザイン「Aero Glass」を採用していた Windows Vista (2007年) のようだと言及する人が目立った。 ~ ~ ***参考 -[[Apple、iOS 26でiPhoneの体験をさらに上のレベルへ>https://www.apple.com/jp/newsroom/2025/06/apple-elevates-the-iphone-experience-with-ios-26/]] -[[Appleの新OSデザイン「Liquid Glass」で、往年の“Windows Vista”を思い出す人が続出>https://www.itmedia.co.jp/pcuser/articles/2506/10/news064.html]] ~ ~ ~ ~ **浮世絵 ~ #image(kanagawaokinamiura.jpg) CENTER:神奈川沖浪裏 (葛飾北斎 作) CENTER:&scale(80){参照: The Metropolitan Museum of Art}; ~ ~ ***概要 浮世絵とは、江戸時代に一般の人たちの間で流行した絵である。「浮世」とは「今の世の中」と言う意味であり、人気のある歌舞伎役者や一般の人たちの生活や風景を描いたものが浮世絵と呼ばれた。今でいうところの人気アイドルのプロマイドや、旅行先で買う絵はがきのようなものである。当時は「かけそば」一杯ぐらい (現在の価値で400円ほど) の比較的安い金額で一般の人たちが気軽に楽しんだものであった。明治時代になると、浮世絵は日本にやってきたヨーロッパやアメリカの人々の目にとまり、大量に海外に持ち帰られた。そのため海外の有名美術館には、今でも状態のよい浮世絵が多数保管されている。 ~ ~ ***浮世絵のはじまり 浮世絵を制作方法で区別すると「肉筆画」(手書きの一点ものの絵) と「版画」に分かれる。江戸時代前期に活躍した菱川師宣が最初の浮世絵師だといわれており、肉筆画である「見返り美人」が知られる。 ~ #image(mikaeribijin.jpg,center,30%) CENTER:見返り美人 (菱川師宣 作) CENTER:&scale(80){参照: [[パブリックドメインQ>https://publicdomainq.net/hishikawa-moronobu-0027345/]]}; ~ 師宣は当初、絵入本の挿絵を手がけたが、挿絵から独立した墨一色の版画である「墨摺絵」や「肉筆画」の分野でも精力的に活動し、一枚絵としての浮世絵の形式を確立させた。 ~ ~ ***浮世絵版画の技法の進化 江戸初期に絵入本の挿絵から独立して描かれるようになった墨摺絵は、町に出回り、庶民の観賞用として広がった。やがて墨一色では飽きたら無くなった人々は、より豊かな色彩表現を求めるようになった。それに応えるべく、墨摺絵に彩色するいくつかの技法が生まれた。しかし、いずれも筆による彩色であったため量産はできなかった。 江戸中期になると「色版」による彩色が始まる。色ごとに作られた何枚もの色版をずれないように摺るため、版木には「見当」という目印がつけられた。この工夫により、よりカラフルな多色摺の版画が量産できるようになった。中には10色以上もの色版を重ねた、豪華な多色摺版画も登場し、それらは「東錦絵」と呼ばれ、江戸の名物となった。「東」とは江戸のこと、「錦絵」とは絹織物の「錦」に匹敵するほど美しい絵という意味である。 鈴木春信は江戸時代中期に活躍した浮世絵師で、明和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 の構造 ~ ***概要 ブランド・アイデンティティ・プリズムは、ブランド・アイデンティティの定義に必要な要素を、プリズム (六面体) の形で整理するフレームワークである。フランスの HEC 経営大学院の教授である Jean Noel Kapferer が提唱した。 ~ ブランド・アイデンティティ・プリズムは、以下の6つの構成要素で成り立つ。 -''Physique: ブランドの物理的特徴'' パッケージ、ネーミング、カラー、ロゴ、キャッチコピー、ジングルなど、ブランドを物理的に表現するものを指す。店舗であればその概観や店内の雰囲気、Webサービスならユーザーインタフェースなども含まれる。 -''Personality: ブランド・パーソナリティ'' 人は皆、独自の個性（パーソナリティ）を持っているように、企業もそれぞれのパーソナリティを持っている。そのパーソナリティを明文化したものがここに入る。 -''Relationship: 顧客とブランドの関係性'' 名称の通り、顧客とブランドがどのような関係性を築くかを指す。顧客とブランドが、共通する価値観や目的、意義を通じて精神的に繋がり、顧客の行動にポジティブな影響を及ぼすとき、関係性ができたと言える。 -''Culture: 文化'' ブランドが持つ価値観や行動規範などの文化を指す。顧客がブランドの持つ文化に共感すると、強固なロイヤルティが形成される。 -''Reflection: ブランドのターゲット'' ブランドの主要な顧客となる人々はどのようなグループなのかを指す。性別・年代などの表面的なデモグラフィック情報だけでなく、心理的な特徴やライフスタイルを明確にすることが重要である。 -''Self-Image: セルフイメージ'' 顧客自身が、ブランドと接したり、ブランドを思い出したりしたとき、自分についてどのようなセルフ・イメージを持つかを指す。 ~ ~