安藤貴仁/情報デザイン研究II

アンビグラムハクブツカン

アンビグラムを紹介するWebサイト

• 安藤貴仁
• Keywords：Ambigram, Web,
• webサイト

概要

これは何？

あまり知られていない「アンビグラム」の魅力を伝えるWebサイト

背景と目的

近年、ロゴデザインが印象に残る企業が多く、様々なデザインを知っている必要があると思い制作を始めた。
アンビグラムは見た人の記憶に残るようなモダンなデザインなため、ロゴなどのデザインをする際にマッチする。
アンビグラムを用いたPR活動としてボートレースの広告、名探偵コナンの謎解きイベントが挙げられる。
アンビグラムの面白さを視覚的に楽しめるWebサイトを作成する。

コンセプト

• 画像をタップすると画像が反転したり動いたりする、眺めるだけではないWebサイト
• 黒と白を基調とするモダンな雰囲気のサイト
  
  

成果物の仕様

• webサイト
• 制作物
  
  

制作ツール

Adobe Illustrator,Visual Studio Code

プロジェクトの期間

プロジェクトの期間｜2025.09.15 - 2025.12.8

まとめ

• コンセプトにあった、画像の反転等のギミックを多用して、アンビグラムの面白さを視覚的に表現することができた。
• ギミックに注力しすぎてサイトのデザイン不足を感じる。
• 以降の制作はサイトのデザインを増やしてもっと視覚的に楽しめるサイトを目指したい。
  
  
  【変更点の例】
  • 黒メインから白メインのデザインに変更する。
  • ヘッダーやフッターを表示しないようにする。
  • ハンバーガーメニューのデザイン変更。
    
    
    
    

調査

現状調査

• アンビグラム制作1
• Σ | POTEFU
• 挑戦 / 戦場
  
  

先行事例

• Σさん作品集
  
  

技法・技術情報

Illustrator
HTML,CSS,JavaScript

プロジェクト管理

• サイトマップ
  

• OneDriveリンク

スケジュール

• 工程表
  
  

ToDo

• サイトの動きが物足りないのでアニメーションを多用する
• スタートページの更新
• ハンバーガーメニューの内容とそれが示す場所の名称を合わせる
• 各セクションの間の余白を増やして区分分けをわかりやすくする
• 成果物の変更を進捗記録に追加する
• 前期と後期でどのように変わったかわかるように分ける

メモ

• 数を増やす（作品の数を優先するかサイトの出来を優先するか）
• 魅せ方を考える（フレーム固定で画像内だけ回転させるのような）
• サイト自体を回転させる
• overflow:hiddenを外す２５３行目
• <br>を消して<p>などでグループ分けをする
• <br>は</br>はいらない
• contactをaboutに変える
• sectionごとに背景色を変える
• 進捗記録を増やす

制作物一覧

• 完成品制作物はこちら
• 下書きはこちら

2025.12.8

• 学科サイトの更新
  • まとめを追加
  • 制作物の欄を更新
  • 細かな情報の更新と変更
• github
• 新規ページ

2025.12.1

• githubの登録を修正
  • 登録名を「kenkyu」から「ambigram」に変更
• ハンバーガーメニューにドロップダウンメニューを追加
  • VisualStudioCordのAI作成機能を使用
    新規webページ

2025.11.24

• 制作サイトの更新
  • アニメーションの挙動がおかしなところを修正
  • 前回制作したアンビグラムの投稿とアニメーション設定
  • 不要なコードの削除
    webページ

2025.11.17

• 前回制作のアンビグラムの完成

2025.10.27

• 新規アンビグラムの作成

2025.10.20

• 中間審査発表

2025.10.13

作業内容

• コードの見直しと細かな動きの調整
  • 全ての画像のwidthとheightが画像と同じ大きさになるように調整

2025.10.06

作業内容

• 学科サイトの大幅更新
• 新規制作アンビグラムのラフの作成
• 180°回転体アンビグラム「SocialDesign」の作成
  
  
  
  
  
  

2025.09.29

• ヘッダーロゴデザイン２の完成
  
• 画像を回転させると見切れる箇所を改善
  
  

メモ(Nagashima.Tr)

• overflow:hiddenを外す２５３行目
• <br>を消して<p>などでグループ分けをする
• <br>は</br>はいらない
  
  
  
  

2025.09.22

作業内容

• ヘッダーロゴのデザイン２の新規制作
  
  
  

メモ(Iwata.Tr)

• 数を増やす（作品の数を優先するかサイトの出来を優先するか）
• 魅せ方を考える（フレーム固定で画像内だけ回転させるのような）
• サイト自体を回転させる
  
  
  
  

2025.09.15

作業内容

• 安藤貴仁/情報デザイン研究I の学科サイトページをこのページに移行
  
  

これからすること

• 数を増やす
• 魅せ方や配置を整える
• 学科サイトの情報量増加