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

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

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

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

概要

これは何？

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

背景と目的

近年、ロゴデザインが印象に残る企業が多く、様々なデザインを知っている必要があると思い制作を始めた。
以前ボートレースのPR広告でアンビグラムが用いられSNSで話題になった。
アンビグラムは見た人の記憶に残るようなモダンなデザインなため、ロゴなどのデザインをする際にマッチする。
サイトを訪れる人にこんなアートもあると知ってほしい。

コンセプト

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

成果物の仕様

• webサイト
• 制作物
  ↑作品のまとめはこちらから
  
  

制作ツール

Adobe Illustrator,Visual Studio Code

プロジェクトの期間

プロジェクトの期間｜2025.4.8 - 2025.07.15

まとめ

• [前期]
  • 今回の研究ではあまり認知されていない「アンビグラム」というデザインをwebサイトを用いて紹介した。
    アンビグラムに興味を持ってもらいたいので、なるべく字数を減らし、ギミックを多く採用し、楽しめるサイトの完成を目指した。
    反省点としてはVisual Studio Codeの知識と技術が全く足りておらず、一つの動作をとりいれるのに時間がかかったり、断念することが多かった。
    アンビグラムの制作は楽しく、思いついた時にメモしているため後々数は増えてくると思う。

• [後期]
  • 
    
    
    

調査

• JR西日本
  
  
  
• 日清
  
  
  

現状調査

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

先行事例

• Σさん作品集
  
  

技法・技術情報

Illustrator
HTML,CSS,JavaScript

プロジェクト管理

• サイトマップ
  

• OneDriveリンク
  
  

スケジュール

• 工程表

ToDo

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

2025.07.15

• 180度回転体アンビグラム「SocialDesign」

  #image(): File not found: "SocialDesign.jpg" at page "安藤貴仁/情報デザイン研究I"

• 90度回転体鏡像共存型アンビグラム「キャラメル/チャルメラ」
  

2025.07.08

• 文字列生成型180度回転体アンビグラム「夕やけ赤のちオレンジ」
  

2025.07.01

• 発表と「サイトの作成3」の改善
• 試作
  • 試作1「夕焼け赤のちオレンジ」

2025.06.24

• 180度回転体アンビグラム「黄昏の最果て」
  

• visual studio code でサイトの作成3(続き)
  • GitHub
  • サイト

2025.06.17

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

2025.06.10

• 同一型アンビグラム「以心伝心」
  

2025.06.03

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

2025.05.27

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

2025.05.20

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

2025.05.13

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

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

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

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)
• 調査の部分は現状どんなアンビグラムがあるのかなど興味を持ってもらえるものを載せる