#author("2025-07-15T16:38:25+09:00","default:member","member") #author("2025-07-15T16:40:24+09:00","default:member","member") #settextcolor(#777) *アンビグラムハクブツカン アンビグラムを紹介するWebサイト #image(アンビグラムハクブツカン.jpg) -''安藤貴仁'' -'''Keywords：Ambigram, Web, ''' -[[webサイト>https://andotakahito.github.io/kenkyu4/]] ~ **概要 ***これは何？ あまり知られていない「アンビグラム」の魅力を伝えるWebサイト ~ ***背景と目的 近年、ロゴデザインが印象に残る企業が多く、様々なデザインを知っている必要があると思い制作を始めた。 以前ボートレースのPR広告でアンビグラムが用いられSNSで話題になった。 アンビグラムは見た人の記憶に残るようなモダンなデザインなため、ロゴなどのデザインをする際にマッチする。 サイトを訪れる人にこんなアートもあると知ってほしい。 ~ ***コンセプト -画像をタップすると画像が反転したり動いたりする、眺めるだけではないWebサイト -モダンな雰囲気のサイト ~ ***成果物の仕様 -[[webサイト>https://andotakahito.github.io/kenkyu4/]] -[[制作物>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as005_st_kyusan-u_ac_jp/EUa7LagnSlxFrcxM505qytUBdLBaurO7BiIZPHcNVKX0Rg?e=zd9rnr]] &color(red){↑作品のまとめはこちらから}; ~ ***制作ツール Adobe Illustrator,Visual Studio Code ~ ***プロジェクトの期間 プロジェクトの期間｜2025.4.8 - 2025.07.15 ~ ***まとめ -[前期] --今回の研究ではあまり認知されていない「アンビグラム」というデザインをwebサイトを用いて紹介した。 アンビグラムに興味を持ってもらいたいので、なるべく字数を減らし、ギミックを多く採用し、楽しめるサイトの完成を目指した。 反省点としてはVisual Studio Codeの知識と技術が全く足りておらず、一つの動作をとりいれるのに時間がかかったり、断念することが多かった。 アンビグラムの制作は楽しく、思いついた時にメモしているため後々数は増えてくると思う。 ~ -[後期] -- ~ ~ **調査 -JR西日本 #image(JR西日本.webp) ~ -日清 #image(NISSIN.jpeg) ~ ***現状調査 -[[アンビグラム制作1>https://note.com/kasakasaumbrella/n/n37211b7ddff0]] -[[Σ | POTEFU >https://potofu.me/sigma]] -[[ 挑戦 / 戦場 >https://withnews.jp/article/f0180101006qq000000000000000w00o10101qq000016526a]] ~ ***先行事例 -[[Σさん作品集>https://posfie.com/@912_sigma/p/y34HMm5]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; Illustrator HTML,CSS,JavaScript ~ ~ **プロジェクト管理 -[[サイトマップ>https://www.figma.com/design/jIOx4AUuGleNNb59mR2ZBk/%E7%84%A1%E9%A1%8C?t=5vYgoqSYvph5Wmjm-1]] #image(サイトマップ.png) -[[OneDriveリンク>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as005_st_kyusan-u_ac_jp/EmXF0suW3UJMnTk9UJyBP_UB0sIwO6PcFztUtAdu5DYvzw?e=BNeWDt]] ~ ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; -[[工程表>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as005_st_kyusan-u_ac_jp/EUKHKH24_BRPhAlyhedzq88B9raHK1j_bqzpZKbdvocu0A?e=RtFsSv]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -&color(red){背景、目的、コンセプトを掲載する}; -GitHubリポジトリの使い方・公開の仕方を確認 -サイトマップを作成する -HTML + CSS で、プロトタイプを作成する -素材をいくつか作成してサイトに掲載する -OneDriveに作品(試作含む)を投稿しリンクを成果報告に載せる -ワイヤーフレーム、デザインガンプの作成 //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr **2025.07.15 --[[180度回転体アンビグラム「SocialDesign」>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as005_st_kyusan-u_ac_jp/EQbaAOulVjVOq73l3V0WUc4BP6sIh4JeAv1yjndu8k4xOA?e=1aEZ6R]] #image(SocialDesign.jpg,40%) --[[90度回転体鏡像共存型アンビグラム「キャラメル/チャルメラ」>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as005_st_kyusan-u_ac_jp/EUa7LagnSlxFrcxM505qytUBdLBaurO7BiIZPHcNVKX0Rg?e=7fD8jI]] #image(caramel&Charamel.jpg,40%) **2025.07.08 --[[文字列生成型180度回転体アンビグラム「夕やけ赤のちオレンジ」>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as005_st_kyusan-u_ac_jp/ERXsTkF7j4hBvRaw2Dywio8BVVih-vNu_kqsbRBRmw5kRw?e=LFaAHf]] #image(Orenge_Red.jpg,40%) **2025.07.01 -発表と「[[サイトの作成3>https://github.com/AndoTakahito/kenkyu4.git]]」の改善 -試作 --[[試作1「夕焼け赤のちオレンジ」>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as005_st_kyusan-u_ac_jp/EdmXELPEW9dGkd1E-H1kwTYBHMUtjA9yq6Q7MymKhPSMbA?e=Kyadxv]] --[[試作2「SocialDesign」>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as005_st_kyusan-u_ac_jp/EWh1DW7iV3FJocNiF2AMdqUBlQKXoY3f6GCS1Y7FiBhVvQ?e=J9yYrH]] **2025.06.24 --[[180度回転体アンビグラム「黄昏の最果て」>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as005_st_kyusan-u_ac_jp/EXJsSGJUZhZNqytkrQwU3dYBffkMk7ZA0UfmTQVYF80yhw?e=QbIEqo]] #image(twilight_end.jpg,40%) -visual studio code でサイトの作成3(続き) --[[GitHub>https://github.com/AndoTakahito/kenkyu4.git]] --[[サイト>https://andotakahito.github.io/kenkyu4/]] **2025.06.17 -visual studio code でサイトの作成3 --[[GitHub>https://github.com/AndoTakahito/kenkyu4.git]] --[[サイト>https://andotakahito.github.io/kenkyu4/]] **2025.06.10 --[[同一型アンビグラム「以心伝心」>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as005_st_kyusan-u_ac_jp/EaWREgSCR-ZDjaWAxzNkeS8BVu7GJVUvI56bJUa6u4BOMw?e=HmKeyZ]] #image(以心伝心.jpg,40%) **2025.06.03 --[[旋回型アンビグラム「芸術」>https://ksumail-my.sharepoint.com/:i:/g/personal/k23as005_st_kyusan-u_ac_jp/EUkU3dfMGypGvDp-y72Ga9cBRyUTMiYJwejWtOq31leM6A?e=Ycde7g]] #image(芸術1.jpg,40%) **2025.05.27 -visual studio code でサイトの作成2 --[[GitHub>https://github.com/AndoTakahito/kenkyu2.git]] --[[サイト>https://andotakahito.github.io/kenkyu2/]] ~ **2025.05.20 -visual studio code でサイトの作成 --[[GitHub>https://github.com/AndoTakahito/kenkyu1.git]] --[[サイト>https://andotakahito.github.io/kenkyu1/]] **2025.05.13 -サイトマップの作成 --[[サイトマップリンク>https://www.figma.com/design/jIOx4AUuGleNNb59mR2ZBk/%E7%84%A1%E9%A1%8C?t=5vYgoqSYvph5Wmjm-1]] ~ -制作内容 --[[タイトルロゴ「アンビグラムハクブツカン」の作成>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as005_st_kyusan-u_ac_jp/EmXF0suW3UJMnTk9UJyBP_UB0sIwO6PcFztUtAdu5DYvzw?e=BNeWDt]] #image(アンビグラムハクブツカン.jpg,40%) ~ --[[地反転型アンビグラム「半分」>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as005_st_kyusan-u_ac_jp/EmXF0suW3UJMnTk9UJyBP_UB0sIwO6PcFztUtAdu5DYvzw?e=BNeWDt]] #image(地反転型アンビグラム(仮).jpg,40%) ~ --[[90度回転体アンビグラム「明星」>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as005_st_kyusan-u_ac_jp/EmXF0suW3UJMnTk9UJyBP_UB0sIwO6PcFztUtAdu5DYvzw?e=BNeWDt]] #image(明星(仮).jpg,40%) ~ ~ **2025.04.29 -制作内容 --「芸術」の90度回転型アンビグラムの作成 --「明星」の360度回転複合型アンビグラムの作成 --「ドッペルゲンガー」90度反転鏡像型アンビグラムの作成 ~ -[[リンクはこちら>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as005_st_kyusan-u_ac_jp/EmXF0suW3UJMnTk9UJyBP_UB0sIwO6PcFztUtAdu5DYvzw?e=BNeWDt]] ~ -制作内容 --「I WANNA be,,,」鏡像型アンビグラムを試作 --「以心伝心」振動式複合型アンビグラムの試作 ~ -[[リンクはこちら>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as005_st_kyusan-u_ac_jp/EmXF0suW3UJMnTk9UJyBP_UB0sIwO6PcFztUtAdu5DYvzw?e=BNeWDt]] ~ **2025.04.22 -制作内容 --タイトルロゴ「アンビグラムハクブツカン」下書き --180度回転体アンビグラムを２つ、地反転型アンビグラムを１つ ~ -[[リンクはこちら>https://ksumail-my.sharepoint.com/:f:/g/personal/k23as005_st_kyusan-u_ac_jp/EmXF0suW3UJMnTk9UJyBP_UB0sIwO6PcFztUtAdu5DYvzw?e=BNeWDt]] ~ **2025.04.15 ***テーマ案 -アンビグラム博物館 --[[アンビグラム制作1>https://note.com/kasakasaumbrella/n/n37211b7ddff0]] --[[Σ | POTEFU >https://potofu.me/sigma]] --[[ 挑戦 / 戦場 >https://withnews.jp/article/f0180101006qq000000000000000w00o10101qq000016526a]] ~ ***工程表の作成 -[[工程表>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as005_st_kyusan-u_ac_jp/EUKHKH24_BRPhAlyhedzq88B9raHK1j_bqzpZKbdvocu0A?e=RtFsSv]] -参考 --[[動画>https://www.youtube.com/watch?v=avFgUpxHdQU]] ~ ~ **2025.04.08 ***テーマ案 -ボカロMV制作 -家業のHP作成 -LEET表記 -温泉紹介 -水墨画を用いたweb,or動画の制作 -ラインアート -"アンビグラム博物館"&color(red){←};&small(一番興味ある); ~ ***メモ -文字列生成型 -[[Nagashima Laboratory →index →transition>https://nagashima.kyusan-u.ac.jp/note/css-transition/]] -動画を使う際はGIFよりもアニメーションpng、webpが良い -translate rotateで回転 -ワイヤーマップの制作 -デザインガンプの制作 -全体の流れ --1アンビグラムについて --2作品紹介 --3作り方事例 --4作品紹介(リンク集) --5このサイトについて(about) -調査の部分は現状どんなアンビグラムがあるのかなど興味を持ってもらえるものを載せる ~