ブログデザイン一新。技術をAIに任せて残るのは意思かも。
目次
ブログデザインを一新
ブログのデザインを新しくしました。
前回の記事で、WordPressからAstroにブログのフレームワークを変えたという話をしました。今回のデザイン刷新もほぼAIに頼りながら作ってます。
ビフォーアフターはこんな感じ。
自分では表現できないところまで、AIで手が届くようになってしまった。
AIが何でも作ってくれるなら、人には何が残るんだろう？
ブログのデザインをAIと作り直して、そんなことを考えました。
これまでとは全く違う作り方
これまで、ブログを作るときは、手書きでデザインの枠組みを描いて、イメージに合う素材を準備して、コーディングして作っていた。
それができることが、自分の技術だと思っていた。
でも、自分で作ろうとすると、想像がなかなか見える形まで落とせなくて、手が止まってしまうこともあった。
「これってどうやったら作れるのか？」と調べることで時間が過ぎていくこともあった。
正直、AIは丸っと全部やってくれる。
もちろん、私はWebデザインにどんな工程が必要なのか、どんなコードを書いているのかは知っている。だからこそ、細かくAIに頼むことができたり、AIが出した内容の修正も細かく伝えることができる。
でも、私が手作業で何日もかけていたことを、AIは数分で終わらせてしまう。
正直、私の技術力はAIには及ばない。
私よりも多くのことを知ってて、難しいことを早くできる。
自分が持っていた技術力という価値を、手放すことになった。
でも悲しいところばかりではなくて、自分では簡単にできないものまで作れるようになった。
そして、作る側の私に問われるのは、技術よりも、意思や判断になった。
今回のコンセプト
私にとって憧れだったアナログな雰囲気を取り入れて作っていきました。
デザインコンセプトは「森に住む魔法使いのアトリエ」
プログラミングとかデジタルな創作は、自分のイメージしたものがパッと形になる魔法だから。私自身、RPGのファンタジーの世界が大好きだから。
ただ、発信する内容は実生活に即しているので、現実世界と乖離しすぎないようにしたかった。あまりゲームっぽくしすぎたり、アナログに寄りすぎると、アイキャッチ画像と合わなくなってしまうし。
そういう迷っているポイント、AIに伝えると「こんな感じですか？」と見せてくれる。
言葉で作っていく
まず何からやったかというと、デザインシステムを決めるところから。
デザインシステムは、私の作りたい世界観。また、全体のデザインで統一感を出すために、配色やフォント、余白など、何に揃えるのかという決め事です。
プロンプト「森に住む魔法使いのアトリエ」をコンセプトにしたデザインシステムを作って。
Claude Code「森の中の小さな工房」。静かで、あたたかく、少し物語がある。学び・制作・開発の記録を、森の本棚に並べるように見せる。
- 方向性：サイト名 0forest に寄せた「ゼロの森」
- 雰囲気：やさしい・手づくり ／ ファンタジー・物語 ／ すっきり・知的
- 避けるもの：ビビッドな原色、情報の詰め込み、冷たい青系、機械的で硬いデザイン
AIはここから連想してデザインを提案してくれる。
使いたい色をピックアップしたら、合わせてダークモードの色も選んでもらう。
コントラストが少ないと文字が読みにくくなったりしてしまいますが、みやすさの配慮はAI側がやってくれて、困らずに選ぶことができた。
そしてデザインシステムをもとに、今のブログを刷新したモックアップ（完成イメージの見本のこと）を作ってもらう。
そのモックアップをみながら、配置や色、ヘッダーなど、具体的なイメージを決めていく。
このモックアップがとってもありがたくて、絵で見せてもらうとイメージが湧く。
「これがいい」「これは違う。変えたい」というのが分かる。
ファンタジーゲームの世界が好きだといっても、ファミコンっぽいレトロなUIなのか、もう少し近代的なものがいいのかで変わってくる。
これは、最初、別のAIに「ファンタジーゲームのUIっぽく。森の魔法使いのアトリエをイメージしたブログ」って言って出てきたもの。確かに、ゲームのUIなんだが・・・・全然違う！となった。
モックアップを渡して実装
完成イメージが出来上がったら、そのままコーディングしてもらって完成！
自分では作れないものを形にしてくれた
ブログのカードはちょっと位置を傾けてマスキングテープを貼るというのはAIが提案してくれた内容です。こんなことがCSSやコードだけで表現できるんだと感動。
サイドバーや記事ページはカードを重ねるようなデザイン。（自分でコード書こうとしたらどれくらい時間かかるのやら。笑）
ヘッダーとフッターはClaude Code経由でCanvaで画像を作ってもらいました。
特にお気に入りがヘッダー。
ヘッダーは「森の景色を眺める窓際の木の机、本や植物、ランプが置いてあるヘッダー画像を作って」と言ったら、こんなヘッダー画像になりました。
このブログには、ライトモードとダークモードがあるので、ヘッダーを朝の風景と夜の風景に切り替える形にしました。
夜のヘッダーでは森は暗くランプの明かりが灯る感じです。
さらに、ダークモードは夜の森というコンセプトに合わせて、ページ全体の背景で光がゆっくり舞うような表現を追加してくれています。（これも自分ではコード書けない。笑。）
吹き出しにつけるアバターの画像はChatGPTとMidjourneyで作っています。
ピクセルアートにして、ファンタジーの女の子と狼耳の男の子を作ってもらいました。
ChatGPTで作ったピクセルアートのアイコン。
ChatGPTは少ない説明でも一般的に想像するであろうイメージを汲み取ってくれて使いやすい。
なぜか二人とも考えごとしている。
Midjourneyで作った自分自身のアバターアイコン。
アーティスティックなイラストが得意な印象。
ピクセルアートでも、背景からの光の差し込みやキャラクターの表情に変化がある。想定外だけど、この表現好き、と発見がある。
人の手と目が必要だったところ
線引きを決める目
画像の調整・加工は、AIに全ておまかせとはいかなかった。
ヘッダーの下に紙をちぎった感じの加工を入れたかったけど、AIにたのむと機械的なギザギザっぽくなり、ちょっとイメージと合わなかった。
これは、AIはコーディングのエフェクトで対応しようとしてたから。
でも、紙っぽいランダムな表現はコーディングでは難しい。
アナログ感を出すのに、画像素材でやるべきか、コーディングで対応できるのか、作り方の方針は私が決める必要があった。
また、生成した画像は綺麗に揃わないので、そのままだと、朝と夜で切り替えた時に画像の位置がずれてしまう。
1枚の画像の色を変えているわけじゃなくて、それぞれ生成している別の画像だからです。
そこは、自分で手作業で位置を調整した。
実際の作業で、私が手を動かしたのは、ここだけかもしれない。
もう一歩を伝える語彙
正直、画像生成に関しては、もうちょっと何かしたい感じが残っている。
でも、その違和感が何なのか、どう伝えればヴィジュアルに落としこめるのかわからずここで止まっている。
デザインとして表現するための語彙力が必要だなぁとおもった。
そして全体を見る目
AIは実装面で動かない不具合などはカバーしてくれるんだけど、
ユーザーとして全体的に揃えた方がいいところは自分で押さえとく必要がある。
マウスを重ねた時のアニメーション（ホバー）、サイドバーのデザインなどは一つ一つ希望を伝えて設定した。
ただ、その場その場の好みで決めてしまうと全体の動きがバラバラになってしまった。
例えば、あるページではリンクが青に変わるのに、別のページではピンクに変わるような感じ。同じ意味の動作で色が変わるとユーザーを混乱させちゃう。
なので、デザインの矛盾があるところは後でリストアップして揃えるようにした。
技術力を手放して、残るのは私の意思
もうコーディングしなくていい。
自分でレイアウトを揃えなくていい。
作り方を知らなくても見た目から仕組みまで通ってくれる。
人間側はただ「こうしたい、ああしたい」って、言葉にしていくだけでいい。
文章で伝えきれないところは、参考画像を添付すればいい。
作りたいイメージがパッと形になる。
ほんっとうに簡単なのだ。
技術力がなくたってものは作れるようになった。
（もちろん、知ってた方がAIとやり取りしやすい・話が早いというメリットはある。）
じゃあ、私には何が残るのか。
まずは「こういうのが欲しい・作りたい」という欲求。
こういうのあったら便利だと思ってた。
でも、今まで、作り方がわからなくて・あるいは手間がかかり過ぎて形にできなかったもの。
作りたいという意思は人が持っている原動力だと思う。
さらに、AIが作ったものへの批評。
「私のいい感じはコレなのか？」という判断は自分でやらなきゃいけない。
じゃないと、自分の好き・こだわりが反映されない。
AIが量産する平凡な作品になってしまう。
技術力を手放して、なお残るのは
「私が作りたいのは何？」
「私が欲しかったのはこれ？」
そんな自分の意志ではないかな、と思う。
ブログとAI活用の記事：よかったらこちらもどうぞ！
