森山海莉/情報デザイン研究I の履歴(No.11)

色と幾何学のコンポジション

ワシリー・カンディンスキーの色彩・構成分析を基にした設計手法の提案

森山海莉
Keywords：幾何学, 色彩, カンディンスキー, 応用
発表用スライド

↑

概要

↑

これは何？

本研究では、ワシリー・カンディンスキーの作品に見られる構成、幾何学的形態、色彩の関係性を分析し、そこから抽出した造形原理を現代のWebデザインに適用する。

↑

背景と目的

美術館においてワシリー・カンディンスキーの作品を初めて鑑賞した際、他の作品と比較して強く視線を引き、「面白い」と感じた経験によって考案された。
この「面白さ」は単なる主観的感想ではなく、色彩や形態、構成といった視覚的要素によって生み出されている可能性があると考えた。
その感覚の要因を分析・言語化し、再現可能なデザイン原理として整理することを目的とする。
そして、それらの原理を現代のWebデザインに応用する。

↑

コンセプト

本研究では、「カンディンスキー風」の表層的な模倣ではなく、ワシリー・カンディンスキーが用いた色彩・形態・構成の考え方を分析し、それらを現代の情報デザインに適用可能な設計原理として再構築することを目指す。

↑

成果物の仕様

webサイト

↑

制作ツール

figma
Illustrator
VScode
claude(補助として活用してみる)

↑

プロジェクトの期間

2026.04.09 - 2026.07.16

↑

まとめ

↑

調査

↑

現状調査

ワシリー・カンディンスキーの造形理論は美術分野で確立されている
Webデザインでは機能性や可読性が重視され、芸術理論の応用は少ない
デザインの印象評価は主観に依存しやすく、再現性に課題がある

↑

ToDo

① 分析
- ワシリー・カンディンスキーやパウルクレーの著書を読む
- ワシリー・カンディンスキーの作品リサーチ（5〜10作品）
- 色彩（配色・コントラスト）の分析
- 形態（点・線・面など）の特徴抽出
- 構成（バランス・リズム・視線誘導）の整理
- 参考文献・論文の収集
- アウトプット：「分析シート（図解）」を作る
② 原理化
- 分析内容を言語化（ルール化）
  - 例：強い色対比 → 視線を引く、円形 → 柔らかさ・安定感、デザイン原理として整理（3〜5個に絞る）、Webにどう適用するか定義
- アウトプット：「デザインガイドライン」
③ 制作
- Webデザインのテーマ設定
- ワイヤーフレーム作成
- デザイン制作（PC / スマホ）
- コーディング or モックアップ制作
- ポイント：「カンディンスキー風」ではなく“原理が効いてるか”を意識
まとめ
- 研究結果整理
- 成果と課題
- 今後の展望
- 発表資料作成

進捗記録

↑

2026.06.04

↑

2026.05.21

↑

審査を終えて　2026.05.14

↑

完成イメージ

単に情報を閲覧するWebサイトではなく、ユーザーがスクロール操作を通して視線誘導や視覚的リズムを体験できる実験的な情報デザインを目的とする。
載せる情報としてはカンディンスキーのデザイン原理のまとめについてを載せる。

↑

デザイン方針

バウハウスのグリッド構成を基盤としながら、カンディンスキー作品に見られる幾何学的構成や色彩バランスを取り入れる。(カンディンスキー風ではない)
装飾過多にはせず、情報デザインとして成立するミニマルな画面設計を目指す。

↑

テーマの変更　2026.05.07

↑

ワシリー・カンディンスキーの色彩・形態理論を分析し、現代のWebデザインに応用した際の印象・理解への影響を検証する

テーマ変更の理由
- 当初は、デザイン様式の違いによる好感度や理解速度の差異を明らかにすることを目的としていた。
  しかし、このテーマはデザイン様式が表層的な「〜風」の表現に留まる可能性があり、また好感度についても個人の嗜好や制作クオリティに強く依存するため、客観的な分析が困難であるという課題があった。

概要
- 本研究では、ワシリー・カンディンスキーの作品に見られる構成、幾何学的形態、色彩の関係性を分析し、そこから抽出した造形原理を現代のWebデザインに適用する。

背景と目的
- 美術館においてワシリー・カンディンスキーの作品を初めて鑑賞した際、他の作品と比較して強く視線を引き、「面白い」と感じた経験によって考案された。
  この「面白さ」は単なる主観的感想ではなく、色彩や形態、構成といった視覚的要素によって生み出されている可能性があると考えた。
  その感覚の要因を分析・言語化し、再現可能なデザイン原理として整理することを目的とする。
  さらに、それらの原理を現代のWebデザインに応用する。

コンセプト
- 本研究では、「カンディンスキー風」の表層的な模倣ではなく、ワシリー・カンディンスキーが用いた色彩・形態・構成の考え方を分析し、それらを現代の情報デザインに適用可能な設計原理として再構築することを目指す。

↑

2026.04.30

↑

研究の流れ

①制作
- 同じ情報を使い、異なるデザイン様式で制作する。
②実験
- 制作したデザインを実際に見てもらい、反応を調べる。
③分析
- 集めた結果を比較し、傾向を調べる。
④ レポート
- 研究内容を文章としてまとめる。
  - 背景・目的
  - 制作内容
  - 実験方法
  - 結果
  - 考察
  - 結論

↑

調査　2026.04.23

↑

デザインをするにあたっての特徴等

バウハウス風
- キーワード
  - 機能主義 / 合理性 / 整理 / 幾何学 / 無駄を省く

特徴
- 装飾より機能を優先
- グリッド設計
- 読みやすい文字組み
- 図形（円・四角・線）で構成
- 非対称レイアウトも多い
- 色数が少ない

レイアウト
- きっちり整列
- 左揃え中心
- カラム設計
- 要素間の余白を明確に

色
白・黒・赤・青・黄など原色
2〜3色までに制限

フォント
サンセリフ体
太さ違いで階層表現

装飾
- 線、円、矩形のみで十分
研究仮説
- 理解速度は最も高くなりやすい

アール・ヌーヴォー風
- キーワード
  - 自然 / 曲線 / 有機的 / 装飾 / 優雅
- 特徴
  - 花、植物、蔦、女性像など自然モチーフ
  - うねる曲線
  - 手仕事感
  - 枠や装飾が主役級
- レイアウト
  - 直線的でなく流れる配置
  - 枠を曲線にする
  - 中央配置も相性良い
- 色
  - オリーブ、生成り、深緑、金、くすみ色
- フォント
  - 装飾的セリフ体 (当時のポスターの字はほとんど手書きだから手書きでも良いかも)
  - 曲線あるロゴタイプ風
- 装飾
  - 花、葉、蔦、曲線フレーム
- 研究仮説
  - 印象・好感度・記憶残存率が高い可能性
アールデコ風
- キーワード
  - 豪華 / 幾何学 / 都会的 / 対称 / 高級感
- 特徴
  - 直線＋放射線＋階段形
  - シンメトリー
  - 金属感
  - 力強く洗練された印象
- レイアウト
  - 中央軸で対称
  - タイトル中心配置
  - 縦長構図とも相性良い
- 色
  - 黒×金
  - ネイビー×ゴールド
  - 白×黒
- フォント
  - 縦長・直線的・クラシック体
- 装飾
  - 扇形
  - 放射線
  - ジグザグ
  - フレーム
- 研究仮説
  - 印象は強い、理解速度は中程度
現代風 (グラスモーフィズム / リキッドグラス)
- キーワード
  - 透明感 / 浮遊感 / UI / 未来感 / 柔らかいデジタル感
- 特徴
  - 半透明パネル
  - 背景ぼかし
  - ガラス質感
  - 光沢
  - レイヤー感
  - 丸みのあるUI
- レイアウト
  - カードUI
  - 情報をパネル分け
  - 余白広め
- 色
  - 青、紫、ピンク、白
  - グラデーション
- フォント
  - 現代的サンセリフ
- 装飾
  - ぼかし
  - 透明レイヤー
  - 発光
  - 液体っぽい曲面
- 研究仮説
  - 若年層好感度が高い可能性

↑

研究をするにあたって

統一ルール
- 全様式で固定するもの
  - タイトル文言
  - 本文量
  - 情報順序
  - 要素数
  - 画像点数
- 変えるもの
  - 配色
  - フォント
  - 装飾
  - レイアウトの雰囲気
  - 余白感
  - 視線誘導方法
軸
情報は伝わったか、早く理解できたか、好印象だったか、記憶に残ったか、媒体によって変わるか
- 見やすいデザインと、選ばれるデザインは同じか？

↑

テーマの絞り込み　2026.04.16

↑

デザイン様式によってユーザーの理解速度、または印象が変わるか？

概要
- 同じ情報をアール・ヌーヴォー・バウハウスなど異なるデザイン様式で表現し、理解速度・印象・好感度の違いを比較検証する。LPやポスター、名刺などさまざまな媒体を使うことで媒体による違いも調査したい。
背景・目的
- 現代の情報デザインでは、バウハウスの思想に基づく「シンプルで機能的なデザイン」が、情報設計として最適であるとされているが、見やすさ(理解しやすさ)と好感度(好き・印象に残る)は必ずしも一致するとは限らない。そこでデザイン様式の違いが理解のしやすさ印象や好感度にどのような影響を与えるのかに興味を持った。
コンセプト
- 「理解されるデザイン」と「好かれるデザイン」は同じか？
  - 同一情報を異なるデザイン様式で提示し、理解速度(どれだけ早く読めるか)正確性(どれだけ正しく理解できるか)印象・好感度を比較することで、機能性の最適解＝好感度の最適解ではない”可能性を検証する。
調査
- 99designs
  - 「バウハウス（Bauhaus）」スタイルをテーマにしたインスピレーションページ
- artposterarchive
  - ポスターアーカイブサイト
  - アールデコ参考
  - アール・ヌーヴォー参考
- 研究報告書参考
  - 舞台演出における映像と感情の関係要素を発見するための調査、研究
備考
- 対象とするデザイン様式案 (バウハウスとスイス・スタイルは融合して使って良いかも？)
  - バウハウス（機能性・シンプル）
  - アール・ヌーヴォー（装飾・有機的）
  - アール・デコ（装飾＋幾何学）
  - スイス・スタイル（グリッド・可読性重視）
  - ポストモダンデザイン（多様性・視覚的インパクト）
  - 構成主義　（何学・斜め構図・強いコントラスト　視線誘導が強制的に起きる）
  - フラットデザインまたはグラスモーフィズムやリキッドグラス　（現代ユーザーが慣れているデザインを使うことで他様式との比較でリアルな結果が出るかも）
やること
- それぞれの様式の比較スケッチ

↑

デザイン史を落とす人向けにデザイン史の基本をまとめる

概要
- 大学の講義で理解しづらい「デザイン史」を、初心者でも理解できる形で再設計したWebコンテンツとして制作する。年表・様式・特徴・視覚資料を整理し、学習支援を行うWebサイト。
背景・目的
- ~~割と基本をわかっていればそこまで難しくないものの、みんな資料をまとめるということに必死すぎて迷っている。~~
- ~~→基本をわかりやすく抑えたサイト~~
コンセプト
- ~~文章よりも視覚（図・レイアウト・比較）重視~~
- ~~「様式ごとの差」を一目で理解できる構造~~
- ~~初心者に最適化~~

↑

私自身がすごく痛い思いをしたからこそみんな歯を大切にして欲しい歯に対する等身大の思い

概要
- 自身の歯のトラブル経験をもとに、歯の重要性や予防の必要性を伝えるWebサイトを制作する。歯の基礎知識に加え、歯を軽視した場合に起こる問題についても視覚的にわかりやすく整理し、ユーザーの意識変容（予防意識の向上）を目的とする。
背景・目的
- ~~私自身が歯を軽視してとんでもない痛みを経験したから。~~
コンセプト
- ~~歯の基礎知識はもちろん自身の体験を入れて、警告を促す。~~

↑

案出しと調査　2026.04.09

↑

テーマ案

興味のあるもの(デザイン史)
- 現代のグラフィックに、アール・ヌーヴォーのデザインを落とし込んでみる。
- デザイン史を落とす人向けにデザイン史の基本をまとめる。
- 時代や文明ごとに装飾や紋様をまとめ、使用例の提示としてそれらを落とし込んだデザインを制作。
- デザイン様式によってユーザーの理解速度、または印象が変わるか？
- バウハウスから学んだデザイン理論を用いてデザインを作成。
興味のあるもの(webデザイン)
- 「ゲームつくろうラボ」の東京ゲームショー向けサイト制作
- LPを作成し、視線誘導を研究。
日常の困りごとや思うこと
- バイト先の業務(ミルクの交換、荷物預かり)が難しすぎる。
- SNSにおける一次創作と二次創作の比較。
- 私自身がすごく痛い思いをしたからこそみんな歯を大切にして欲しい。歯に対する等身大の思い。
- 趣味が合う人と知り合いたい！情報交換がしたい！多学科の人も巻き込んでプロフ交換

↑

調査

デザイン史関連
- とても簡単に歴史をまとめられているサイト
- 紋様や様式について幅広くまとめられた本
webデザイン関連
- 東京ゲームショウ2025サイト
  - ポップだが近代風なデザインが参考になるかもしれない
- 2026 webトレンド
  - Bento UI / Bento Grid / モジュラーレイアウト
  - ソフトグローグラデーション
  - ノスタルジックな幾何学模様