#author("2026-06-24T23:28:36+09:00","default:member","member") #author("2026-06-24T23:31:57+09:00","default:member","member") *カンディンスキーの理論を現在に [[森山海莉/情報デザイン研究I]] [[森山海莉/情報デザイン研究Iまとめ]] [[森山海莉/絵画研究]] 現代デザイン(Webデザイン、UI\UXデザイン)に応用可能な設計要素のまとめ。 ~ **点 -UI対応 --通知バッジ --ドットインジケータ --アイコン --カーソル位置 -意味 --「ユーザーの視線を刺す装置」 --最小単位の情報圧力 --行動の起点 -設計ポイント -1点の強度＝UIの優先順位 -数を増やすとノイズ化する(視線が散らばる) ~ **線 -UI対応 --ナビゲーションバー --スクロール遷移 --カードの整列グリッド --プログレスバー -意味 -視線の流れそのもの --ユーザー行動の時間的誘導 -設計ポイント --水平＝安定・理解 --垂直＝流れ・階層 --斜線＝強い感情・動的誘導 ~ **面 -UI対応 --カードUI --セクションブロック --モーダル -意味 --情報の「意味のかたまり」 --ユーザーの認知単位 -設計ポイント --面の切り方＝情報設計そのもの --余白は面の呼吸 ~ **内的響き（Inner Sound） 形や色は、それぞれ固有の感情的印象を持つ。 UIデザインでは、使いやすさだけでなく「どのような印象や体験を与えるか」を設計することが重要である。余白の多いレイアウトは落ち着きや整理された印象を与え、鮮やかな色彩や大胆な構成は活発さや期待感を生み出す。 -応用例 --ブランドイメージの構築 --サービスごとの世界観設計 --感情に訴えるUXデザイン ~ **緊張（Tension） 要素の位置によって視覚的な緊張感が変化する。 中央は安定感を与える一方、画面の端や角は緊張感や注意を生み出す。そのため、重要な情報や通知を配置する場所によってユーザーの認知が変化する。 -応用例 --CTAボタンの配置 --通知やアラート表示 --視線誘導の設計 ~ ** 地平面（Basic Plane） 画面そのものが方向性を持つ。 カンディンスキーは、画面上部を軽く自由な領域、下部を重く安定した領域として捉えた。この考え方はWebサイトのレイアウト設計に応用できる。 -応用例 -上部：キャッチコピーやビジュアル -下部：詳細情報や説明 -情報の階層構造の設計 ~ **形態の心理効果 カンディンスキーは形態ごとに異なる性質を見出した。 | 形態 | 印象 | UI要素 | | 円 | 調和・安心 | アイコン、プロフィール画像 | | 三角形 | 方向性・変化 | 矢印、再生ボタン | | 四角形 | 安定・秩序 | カードUI、モーダル | -応用例 --アイコン設計 --コンポーネント設計 --デザインシステム構築 ~ **色と形の対応 カンディンスキーは色彩と形態の関係性を提唱した。 | 色彩 | 形態 | 印象 | | 黄 | 三角形 | 活動的・刺激的 | | 赤 | 正方形 | 力強い・安定 | | 青 | 円 | 静か・深い | 色と形を組み合わせることで、より一貫した視覚表現が可能になる。 -応用例 --アイコンデザイン --UIカラー設計 --ブランドデザイン ~ ** 線の方向性 線は視線の流れや感情を生み出す。 水平線：安定・静けさ 垂直線：力強さ・成長 対角線：動き・躍動感 線の使い方によって、ユーザーが受ける印象や視線の流れをコントロールできる。 -応用例 --ナビゲーション設計 --グリッドレイアウト --スクロール体験の演出 ~ **構成（Composition） 重要なのは要素単体ではなく、要素同士の関係性である。 カンディンスキーの作品では、点・線・面が相互に作用しながら画面全体のリズムを形成している。これは現代の情報設計やレイアウト設計にも共通する考え方である。 -応用例 --情報アーキテクチャ --レイアウト設計 --ダッシュボード設計 ~ **余白の響き 余白もまた一つのデザイン要素である。 余白は単なる空白ではなく、情報同士の関係を整理し、視覚的な呼吸や静けさを生み出す。 -応用例 --ミニマルデザイン --情報の優先順位付け --可読性向上 ~ **形態の心理効果 カンディンスキーは形態ごとに異なる性質を見出した。 | 形態 | 印象 | UI要素 | | --- | ------ | ------------- | | 円 | 調和・安心 | アイコン、プロフィール画像 | | 三角形 | 方向性・変化 | 矢印、再生ボタン | | 四角形 | 安定・秩序 | カードUI、モーダル | -応用例 --アイコン設計 --コンポーネント設計 --デザインシステム構築 ~