森山海莉/情報デザイン研究I

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

ワシリー・カンディンスキーの作品を分析し、構築したインタラクティブWebサイト

• 森山海莉
• Keywords：Geometry, Color, Kandinsky, Synesthesia
• 著書調査
• 絵画分析
• 応用可能な設計要素
• 分析ドローイング集

概要

これは何？

Webのスクロールを時間軸として活用することで、カンディンスキーが追求した絵画のリズムや運動性をインタラクティブに体験できるWebデザインの制作

背景と目的

美術館でワシリー・カンディンスキーの作品を鑑賞した際、他の作品と比べて強く視線を引き、「面白い」と感じたことが本研究のきっかけである。この魅力は色彩や形態、構成などの造形要素によって生み出されていると考え、それらを分析し、Webデザインへ応用することを目的とする。
現在のWebデザインでは、機能性や可読性を重視した表現が主流であり、カンディンスキーの造形理論や運動性を応用した事例は少ない。そこで本研究では、スクロールを時間軸として活用し、点・線・面や色彩が時間とともに変化するインタラクティブなWeb表現を提案する。

コンセプト

本研究では、ワシリー・カンディンスキーの作品を色彩・形態・構成といった造形理論を分析し、再構築することを目指す。
さらに、その造形原理をスクロール(いわゆる時間軸)と組み合わせることで、ユーザーの操作に応じて点・線・面や色彩が変化し、作品を体験するWebサイトを制作する。また、カンディンスキーが追求した「色を音として聴き、音を色として見る」という共感覚的な芸術表現を、視覚的な動きやリズムによって感じられるインタラクティブな体験として表現することをコンセプトとする。

成果物の仕様

webサイト

制作ツール

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

プロジェクトの期間

2026.04.09

まとめ

本研究では、カンディンスキーの著書や作品分析、ドローイングを通して、造形原理を整理し、Web デザインへ応用可 能なデザイン原理を抽出した。これらの分析結果は成果物として学科サイトに掲載し、調査・分析内容をまとめた。 今後は、本研究で得られたデザイン原理を基に、スクロール を時間軸として活用したインタラクティブな Web サイトの 設計・制作を進め、カンディンスキーが追求したリズムや運 動性を体験できる表現の実現を目指す。

調査

現状調査

• Webデザインでは機能性や可読性が重視され、芸術理論の応用は少ない
  • バウハウスの影響を受けたWebデザインは多いが、その多くはレイアウトやタイポグラフィ（グリッド・機能性）の継承に留まっている。
  • バウハウス創立100周年を記念して制作された公式プロジェクトサイト
  • ドイツのプロダクトデザイナー、ディーター・ラムスがデザインした家具を販売するブランドサイト
  • 「Bauhaus」をテーマにした受賞Webサイトをまとめたギャラリー
• カンディンスキーの造形理論や運動性をインタラクティブに応用した事例はあるものの時間(スクロール)を活かしたものは見られない。
  • 画面をマウスでドラッグすると、システムがそれを自動認識して、一瞬でカンディンスキーの絵画のようなきれいな幾何学シェイプに変換するインタラクティブサイト
  • 代表作『黄・赤・青』を「触れる音楽インストゥルメント（楽器）」として丸ごと再構築した体験型サイト

先行事例

先行事例として、カンディンスキー自身が幾何学の力に着目した著書、共感覚について、スクロールや反応に応じて画面や演出が変化するインタラクティブサイトや、図形やアニメーションを用いた表現が可能な p5.js の作品を調査した。
またカンディンスキーは「絵画を音楽のような芸術にしたい」と考えた画家であり、多くの音楽家や音楽思想から影響を受けているのでまとめた。

• カンディンスキー自身の著書
  • 点と線から面へ
  • カンディンスキーの作品は、なぜ画面から音が聴こえてくるような強烈な「音楽性」を放つのか。そして、一見無機質に見える正円や直線といった「幾何学」が、なぜ人間の感情を揺さぶる表現力（力学）を持ち得るのかという点に着目するためにこの本を選んだ。
  • 著書の内容をまとめたもの
• カンディンスキーの共感覚
  • カンディンスキーは「色や形を音として聴き、音を色として見る」という共感覚(人口の約4%と言われる特異体質)を持っていた。
  • 共感覚について
  • カンディンスキーが提唱した「共感覚」を、誰もが直感的にブラウザ上で体験できるように作られたサイト
    
    
• インタラクティブサイト
  • キャンバスに描いた幾何学図形がそのまま音に変換されるサイト
  • PCのキーボードを叩いたり、マウスを動かしたりすると幾何学図形のアニメーションと音が出現するサイト
  • スクロールするとセクションごとに図形や色彩の切り替わる
• p5.js
  • Webブラウザ上で数行のコードを書くだけで、簡単にグラフィックを描画したり、アニメーションを作ったりできるJavaScriptのライブラリ。アーティスト、デザイナー、教育者、そしてフロントエンドの初心者向けに作られており、「コードでアートを描く（クリエイティブ・コーディング）」の定番ツール。
  • 世界中のコーダーがp5.jsで作った作品を投稿している最大の共有サイト
    
    
• 影響を受けた音楽家
  • リヒャルト・ワーグナー
    • カンディンスキーが若い頃にオペラ ローエングリンを鑑賞した体験は、芸術観を大きく変えた。彼は「色彩が音楽のように感情を動かす」ことを実感し、画家を志すきっかけになったと言われている。
    • 後に、「音楽を聴いている最中、私の目の前に、モスクワの夕暮れのあらゆる色が線や形となって現れた。ワーグナーは私の画の時間を音楽で表現していた」と語ってる。これがいわゆる彼の「共感覚」が覚醒した瞬間であり、音楽・演劇・美術が一体となる「総合芸術（ゲザムトクンストヴェルク）」への憧れへと繋がった。
    • ローエングリン」第3幕への前奏曲
  • アルノルト・シェーンベルク
    • カンディンスキーに最も思想的な影響を与えた音楽家。1911年にシェーンベルクの演奏会を聴き、「音楽が調性から自由になったように、絵画も対象から自由になれる」と確信した。その興奮のまま一晩で描き上げたのが、彼の代表作『インプレッションIII（コンサート）』。
    • 当時のシェーンベルクは、従来のクラシック音楽のルール（調性・ドレミの心地よい決まりごと）を破壊し、不協和音を自由に使う「無調音楽」を生み出した。カンディンスキーはこれに深く共鳴し、「音楽がリンゴや人間などの『具体的な形』を描かずに感情を表現できるなら、絵画も山や川などの『具体的な対象』を描かずに、色と形だけで感情を表現できるはずだ」と確信した。
    • 3つのピアノ曲 作品11（Drei Klavierstücke Op.11）
    • これまでのクラシック音楽にあった「ハ長調」や「ト短調」といった調性のルール（主音に帰結する心地よさ）が完全に崩壊。メロディの予測がつかず、不協和音が連続する、まるで暗闇を彷徨うような緊張感に満ちた楽曲。
    • 弦楽四重奏曲 第2番 嬰へ短調 作品10（Streichquartett Nr.2 Op.10）
    • 弦楽四重奏（ヴァイオリン2、ヴィオラ、チェロ）に、「ソプラノ歌手（歌声）」が途中で加わるという、当時としては前代未聞の構成をとった曲。第1〜2楽章まではかろうじて伝統的な調性を保っていますが、ソプラノの歌声が入る第3〜4楽章から、一気に独自の「無調の世界」へと引きずり込まれていく。この時歌われる詩の冒頭は、「私は別の惑星の空気を呼吸している（Ich fühle Luft von anderem Planeten）」という言葉で始まる。

技法・技術情報

プロジェクト管理

スケジュール

スプレッドシート

ToDo

① 調査・分析
目的：カンディンスキーの造形理論とWeb表現の特徴を理解し、デザインの根拠を整理する。
-インタラクティブWebサイトの調査
-スクロール演出を用いたWebサイトの調査
-カンディンスキーの著書（『点・線・面』など）の読解
-カンディンスキー作品の分析（点・線・面・色彩・構図・リズム・運動性）
- Webデザインへ応用可能なデザイン原理の抽出
──────────────────
② ドローイング・スケッチ
目的：抽出した造形原理を理解・再構成し、スクロールによる時間的変化を検討する。

• カンディンスキー作品の分解スケッチ（点・線・面・構図）
• 造形要素を組み替えた再構成ドローイング
• スクロールによる図形変化のアイデアスケッチ
• スクロールごとの画面遷移（絵コンテ）の作成
• Webで使用する図形・モチーフの選定
  ──────────────────
  ③ コンセプト・情報設計
  目的：サイト全体の体験と構成を設計する。
• サイトコンセプトの策定
• ユーザー体験（UX）の設計
• サイトマップの作成
• ワイヤーフレームの作成
• スクロールフローの設計
• 各セクションの役割整理
  ─────────────────
  ④ ビジュアル・インタラクション設計
  目的：カンディンスキーの理論を反映したWebデザインを具体化する。
• 配色設計
• タイポグラフィ選定
• レイアウト設計
• 図形・アニメーション設計
• スクロールと図形変化の対応関係の整理
• プロトタイプ作成
  ──────────────────
  ⑤ 実装
  目的：設計内容をWeb上で実現する。
• HTML構築
• CSSデザイン
• スクロールアニメーションの実装
• レスポンシブ対応
• パフォーマンス調整
  ──────────────────
  ⑥ 評価・改善
  目的：制作物が研究目的を満たしているかを検証する。
• 動作確認
• ユーザーテスト
• 改善点の抽出
• デザイン・実装の修正
• 最終成果物の完成

2026.06.25

• 研究概要の見直し
• 研究そのものの見直し
  • 先行事例の見直し
    • 先行事例を見直したことでカンディンスキーの造形理論や運動性をインタラクティブに応用した事例はあるものの時間(スクロール)を活かしたものは見られないこと、カンディンスキーは「色や形を音として聴き、音を色として見る」という共感覚(人口の約4%と言われる特異体質)を持っていたことを知る。
• サイト概要を変更
• スケッチ・ドローイング
  • カンディンスキーの造形原理を身体的に理解するため、オリジナルの構成を生み出すためドローイングを行った。
• 研究名を変更。

2026.06.18

進捗

• 森山海莉/情報デザイン研究Iまとめに追記
• 作品概要への記載
  
  

2026.06.11

進捗

• 森山海莉/情報デザイン研究Iまとめに追記
• 作品概要への記載
  

2026.06.04

進捗

• 森山海莉/情報デザイン研究Iまとめに追記
• 作品概要への記載
  
  

2026.05.21

進捗

• 新たにページを増やしカンディンスキーのデザイン原理をまとめた。
  • 森山海莉/情報デザイン研究Iまとめ
    
    

審査を終えて　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 / モジュラーレイアウト
    • ソフトグローグラデーション
    • ノスタルジックな幾何学模様