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

MainTitle

SubTitle ・・・・・・・・・・・・・・・・

 

            メインビジュアル、あるいは
            プロジェクトの最新の状態を視覚的に掲載

森山海莉
Keywords：・・, ・・・, ・・・, ・・・
https://www.example.com

↑

概要

↑

これは何？

同じ情報をアール・ヌーヴォー・バウハウスなど異なるデザイン様式で表現し、理解速度・印象・好感度の違いを比較検証する。LPやポスター、名刺などさまざまな媒体を使うことで媒体による違いも調査。

↑

背景と目的

現代の情報デザインでは、バウハウスの思想に基づく「シンプルで機能的なデザイン」が、情報設計として最適であるとされているが、見やすさ(理解しやすさ)と好感度(好き・印象に残る)は必ずしも一致するとは限らない。そこでデザイン様式の違いが理解のしやすさ印象や好感度にどのような影響を与えるのかに興味を持った。

↑

コンセプト

「理解されるデザイン」と「好かれるデザイン」は同じか？
同一情報を異なるデザイン様式で提示し、理解速度(どれだけ早く読めるか)正確性(どれだけ正しく理解できるか)印象・好感度を比較することで、機能性の最適解＝好感度の最適解ではない”可能性を検証する。

↑

成果物の仕様

研究レポート
また研究に使用するためのLP、名刺、ポスター (名刺、ポスターは主にデジタル上で見られるようにする)

↑

制作ツール

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

↑

プロジェクトの期間

2026.04.09 - 2026.07.16

↑

先行事例

Pinterest
99designs
- 「バウハウス（Bauhaus）」スタイルをテーマにしたインスピレーションページ
artposterarchive
アールデコ参考
アール・ヌーヴォー参考
研究報告書参考
- 舞台演出における映像と感情の関係要素を発見するための調査、研究

↑

技法・技術情報

↑

プロジェクト管理

↑

スケジュール

スプレッドシート

↑

ToDo

進捗記録

↑

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