✨ My Blog 2024-02-11.

92thunder · Feb 10, 2024 · 7bef4e3 · 7bef4e3
1 parent d12a65a
commit 7bef4e3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 0 deletions.
diff --git a/posts/2024-02-11/post.md b/posts/2024-02-11/post.md
@@ -0,0 +1,40 @@
+会社のオフサイトミーティングへ参加して、翌日に立ち寄った東京の美術館で受けた刺激を受け、トップページのデザインを作り直した。
+
+--- 
+
+## 美術館で刺激を受ける
+
+「会社のオフサイトミーティングとその後の飲み会よかったなー、明日の予定決めてないけど夕方まで暇だし美術館くらい観に行きたいなー」と考えつつ眠りについた。翌朝にカフェでモーニングを嗜みながら、「前は上野の美術館見に行ったので今回は現代アート行っちゃうか」と考え [東京都現代美術館](https://www.mot-art-museum.jp/) に行くことを決めた。
+
+[MOTアニュアル2023 シナジー、創造と生成のあいだ](https://www.mot-art-museum.jp/exhibitions/mot-annual-2023/) を鑑賞して、**自分も人の心を動かす表現してみたい**と感じた。作品を見ていて「それやられたか〜」と偉そうな敗者の感想を抱き、アーティストと我々の違いは妄想の具現化を試みるか何もしないかだと思った。AI 技術や 3D プリンターによる生成技術の進化によって、芸術の世界にもシンギュラリティの影響が訪れているのかもしれない。
+
+[MOTコレクション 歩く、赴く、移動する　1923→2020 特集展示　横尾忠則―水のように 生誕100年　サム・フランシス](https://www.mot-art-museum.jp/exhibitions/mot-collection-231202/) を鑑賞して、**偶然による美しさ**に気付いた。絵画の中には計算されている美しさも多いと思うが、絵の具と筆による滲み、掠れ、広がりによる美しさを再認識できた。
+
+## 自分にできることを知る
+
+Web 制作に弱いフロントエンドエンジニアなので視覚的な表現を演出する方法は HTML, CSS, JavaScript 以外に思い付かず、今の自分に出来る範囲での表現を考えた。
+
+最初に水彩画のような水による滲みや広がりを表現できないか考えた。CSS を使って表現できないか調査と実験をしてみたが、早々に自分の技術の限界を感じて方向転換した。
+
+生活の合間で調査していく中で、CSS による画像と色の合成に辿り着いた。
+
+[background-blend-mode | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode)
+
+## 偶然を演出する
+
+作成の過程で "偶然の創造" が自分の中でのテーマになった。自分の創造によって偶然を生み出すことで一期一会のクールなグラフィックを演出する。
+
+結果としてこのようなページが出来上がった。[92thunder.dev](https://92thunder.dev/) のデザインに悩んでいたのでトップページに適用することとした。
+
+![](/posts/2024-02-11/screenshot_web.png)
+![](/posts/2024-02-11/screenshot_mobile.png)
+
+ページを読み込む度に異なる背景画像が生成される。自分好みのクールなデザインになってとても気に入っている。さらに偶然を演出するための変数を増やすこともできるが、増やしすぎると作品としての軸がブレるとも考え、これ以上は追加しないこととした。
+
+芸術作品に詳しい解説は野暮(???)なので仕組みの説明は避けるが、簡単な仕組みなので一晩の頑張りで初期実装を完了することができた。
+
+## おわりに
+
+偶然立ち寄った美術館で、作品による刺激を入力して、満足いく成果物を出力することができたので自分という生成システムへの信頼度を上げることができた。今回見た美術館で他のアイデアも浮かんでいるので、妄想を止めることなく今後も作品作りに取り組みたい。
+
+美術館を見に行った翌日、友人と[ルミネtheよしもと](https://lumine.yoshimoto.co.jp/)にお笑いを見に行きました。とても面白かったです。
diff --git a/posts/info.ts b/posts/info.ts
@@ -17,6 +17,13 @@ type ExternalPostInfo = {
 type PostInfo = BlogPostInfo | ExternalPostInfo
 
 export const postsInfo: PostInfo[] = [
+	{
+		id: "my-blog-2024-02-11",
+		mdFilename: "2024-02-11/post.md",
+		publishedAt: "2024-02-11 00:00:00",
+		title: "美術館に行く、トップページを作り直す",
+		type: "blog",
+	},
 	{
 		id: "why-anti-four-keys",
 		mdFilename: "2024-01-30.md",

diff --git a/public/posts/2024-02-11/screenshot_mobile.png b/public/posts/2024-02-11/screenshot_mobile.png
diff --git a/public/posts/2024-02-11/screenshot_web.png b/public/posts/2024-02-11/screenshot_web.png