山田真央/情報デザイン研究I

Pictacite

「暗黙の了解」をピクトグラムにしたサイト

• '山田真央''
• Keywords：web, pictogram,
• 完成作品

概要

これは何？

• ピクトグラムで「日本文化の暗黙の了解」をまとめたWebサイト
  
  

背景と目的

• 背景：日本文化には学校で習わない「暗黙の了解」が多く、分かりにくく煩わしいと感じた
• 目的：海外の方や小さい子にも「暗黙の了解」を視覚的に理解できるようにし、無意識に行われている配慮や忖度を共有する
  
  

コンセプト

「見えないルールの可視化」
普段意識されずに守られている社会的ルールや空気を、誰もが直感的に理解できるアイコンにする

成果物の仕様

• Webサイト
  
  

制作ツール

• Illustrator
• Canva
  
  

プロジェクトの期間

2025.04 - 2025.07

まとめ

情報サイトでも堅苦しさを除きたかったため、コミックのようなデザインにし、ポップな仕上がりにした。
webサイト全体のデザインと情報の載せ方は見やすく満足いくものに仕上がったが、「ピクトグラムである必要性」が欠けつつあったことと、ノーコードツールには限界があることを学んだ。
「コンセプト」を明確にすることを課題点とし、新たに技術を身につけたうえで後期につなげたい。

調査

現状調査

ピクトグラム

情報や注意を示すために表示される案内記号のこと
文字の代わりに視覚的な図記号で表現することで、言葉の違いや年齢等に
よる制約を受けずに情報の伝達を行うことができる

• 日本の暗黙の了解
• 日本のピクトグラムデザイン
  
  

先行事例

• 日本のルールを教える教材
  
  

技法・技術情報

• web：canva
• ピクトグラム：Illustrator・Canva
  
  
  
  

プロジェクト管理

スケジュール

スケジュール表

ToDo

• 日本文化の暗黙のルール →Web・ChatGPT
• ピクトグラムの制作（20個）
• Webサイトにまとめる

2025.07.15

成果物

• 完成作品
  【良かった点】webサイトのデザインは満足いくものに仕上がった
  【反省点】コンセプトから外れつつあった・ノーコードツールではレスポンシブデザインに対応できない
  
  

ブラッシュアップ

• 見出しの位置がすべてそろうように調整（Windowsとmacでは表示のされ方が違うみたい）
• 間に合わなかったピクトグラムの制作→全体調整
  
  
  
  

2025.07.08

最終審査準備

• webページ完成（topページの制作）
  
  • 全体のデザインを見直し、フォントサイズや位置調整など細かいところを調整
  • 概要・背景と目的・コンセプトなどの見直し→審査の準備

2025.07.01

進捗

• ピクトグラム+webサイト制作（ページ４）

【ページ4のピクトグラム（伝統儀礼）】

※左から「祝儀の金額」「手土産」「お辞儀の角度」「靴をそろえる」

2025.06.24

進捗

• ピクトグラム+webサイト制作（ページ３）

【ページ3のピクトグラム（食事マナー）】

※左から「音を立てない」「おしぼりで顔を拭かない」「挟み箸をしない」「茶碗を持つ」

2025.06.17

進捗

• ピクトグラム+webサイト制作（ページ２）

【ページ2のピクトグラム（ビジネス）】

※左から「乾杯のグラスは下」「電話3コール以内」「名刺は両手で」「直接的拒否を避ける」

2025.06.10

進捗

• ピクトグラム+webサイト制作（ページ１）（about）

【ページ１のピクトグラム（日常生活）】

※左から「5分前行動」「公共の場での通話禁止」「会釈」「列を守る」


【about】

2025.06.03

進捗

• 内容文書き出し
  • webサイトに乗せるピクトグラムの説明文かき出し→校閲→Excelにまとめる
  • サイト内文章(Excel)
    
    
    
    

2025.05.27

改善作業

• ピクトグラムのスケッチ+案出し+修正
  • 中間報告でもらった意見をもとに「ピクトグラムである意味」の見直し
  • 作っていたピクトグラムを見直し新しいイラストへ書き直し→わかりやすく情報量の少ないイラストを目指す

2025.05.20

Web制作開始

• 概要の詳細書出し
  
  

中間報告準備

• 背景・目的・コンセプト・研究成果の確認
• プレゼン準備
  
  
  
  

2025.05.13

メインビジュアル

試作

• ピクトグラムの制作案
  ※左から「5分前行動」「音を立てない」
  
  
  
  

2025.04.29

プロトタイプ

• サイトマップ
  
  
  

• ワイヤーフレーム
  
  
  

• 制作ツール
  • サイトマップ：エクセル
  • ワイヤーフレーム：AdobeXD
    
    
    
    

2025.04.20

タイトル決定

Pictacite（ピクタシット）
Pictogram（ピクトグラム） + Tacit（暗黙の）　の造語

工程表

スケジュール表

試作（ピクトグラム題案）

⚪︎日常生活
　・5分前行動（時間厳守）・電車内通話禁止　・エスカレーターは片側
　・列を守る（割り込み厳禁）・会釈　・ゴミを持ち帰る　　・相槌
　・ゴミの分別
⚪︎職場・ビジネス
　・上座と下座（食事・タクシー）・上司への同調　・無言は同意　・謙遜
　・ストレートな拒否は避ける　・電話は３コール以内　・乾杯のグラス
⚪︎食事マナー
　・食事の音立てない　・和食は皿を持つ　・立て箸NG　・渡し箸NG
⚪︎伝統・儀礼
　・祝儀の金額　・手土産（控えめ）・プライバシーの尊重　・靴揃える
　・目上の人より先に手をつけない　・名刺交換（両手）
　　　　　　　　　　　　　　　　　　      　　　　　　　　　　　etc....

ToDo

• 日本文化の暗黙の了解の例を出す →Web・ChatGPT
• ピクトグラムの制作（20~30個）
• Webサイトにまとめる
• ステッカー（時間が余ったら）
  
  
  
  

2025.04.15

企画の方向性

• 日本の「暗黙の了解」をピクトグラムで作り、webサイトにまとめる
  
  

調査：現場調査

• 日本の暗黙の了解
• 日本のピクトグラムデザイン
  
  

調査：先行事例

• 日本のルールを教える教材
  
  

調査：技法・技術

• web：HTML・CSS
• ピクトグラム：Illustrator・Canva
  • ピクトグラムの作り方
    
    
    
    

2025.04.08

テーマ候補

• 見えないものの可視化
  • 日本の暗黙の了解を可視化（ピクトグラム）

• 感情を可視化するデザインの研究
  • 1つのストーリーを作り、色や形で感情状態を視覚的に伝える（言葉×）

• 「体感」を伝えるデザインの研究
  • 温度・季節感など非数値的な情報「体感」を色で伝える研究

• 日常ゲームフィルター
  • 日常を切り取り、「ドット絵＋仮想空間」に変換するフィルター（AR）
    
    

参考リンク

• 感情と色について
• 色温度
• ゲームフィルター参考