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

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

変わったデザインを紹介するWebサイト

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

概要

これは何？

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

背景と目的

ボートレースの広告でアンビグラムを用いたポスターが注目を集め、衝撃を受け制作を始めた。
サイトを訪れる人にこんなアートもあると知ってほしい。

コンセプト

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

成果物の仕様

• webサイト
  
  

メンバー

安藤貴仁

制作ツール

Adobe Illustrator,Visual Studio Code

プロジェクトの期間

プロジェクトの期間｜2025.4.8 - 2025.XX.XX

まとめ

調査

現状調査

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

先行事例

• Σさん作品集
  
  

技法・技術情報

Illustrator
HTML,CSS,JavaScript

プロジェクト管理

• サイトマップ
  

• OneDriveリンク
  
  

スケジュール

• 工程表

ToDo

• 背景、目的、コンセプトを掲載する
• GitHubリポジトリの使い方・公開の仕方を確認
• サイトマップを作成する
• HTML + CSS で、プロトタイプを作成する
• 素材をいくつか作成してサイトに掲載する
• OneDriveに作品(試作含む)を投稿しリンクを成果報告に載せる
• ワイヤーフレーム、デザインガンプの作成

2025.06.03

• 旋回型アンビグラム「芸術」
  

2025.05.27

• visual studio code でサイトの作成2
  • GitHub
  • サイト
    
    

2025.05.20

• visual studio code でサイトの作成
  • GitHub
  • サイト

2025.05.13

• サイトマップの作成
  • サイトマップリンク
    
    
• 制作内容
  • タイトルロゴ「アンビグラムハクブツカン」の作成
    
    
    

• 地反転型アンビグラム「半分」
  

• 360度回転体アンビグラム「明星」
  
  
  
  
  

2025.04.29

• 制作内容
  • 「芸術」の90度回転複合型アンビグラムの作成
  • 「明星」の360度回転複合型アンビグラムの作成
  • 「ドッペルゲンガー」90度反転鏡像型アンビグラムの作成
    
    
• リンクはこちら
  
  

• 制作内容
  • 「I WANNA be,,,」鏡像型アンビグラムを試作
  • 「以心伝心」振動式複合型アンビグラムの試作
    
    
• リンクはこちら
  
  

2025.04.22

• 制作内容
  • タイトルロゴ「アンビグラムハクブツカン」下書き
  • 180度回転体アンビグラムを２つ、地反転型アンビグラムを１つ
    
    
• リンクはこちら
  
  

2025.04.15

テーマ案

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

工程表の作成

• 工程表
• 参考
  • 動画
    
    
    
    

2025.04.08

テーマ案

• ボカロMV制作
• 家業のHP作成
• LEET表記
• 温泉紹介
• 水墨画を用いたweb,or動画の制作
• ラインアート
• "アンビグラム博物館"← 一番興味ある
  
  

メモ

• 文字列生成型
• Nagashima Laboratory →index →transition
• 動画を使う際はGIFよりもアニメーションpng、webpが良い
• translate rotateで回転
• ワイヤーマップの制作
• デザインガンプの制作
• 全体の流れ
  • 1アンビグラムについて
  • 2作品紹介
  • 3作り方事例
  • 4作品紹介(リンク集)
  • 5このサイトについて(about)