コード、3D、Web、自動化。AIと進める制作記録。
これから作るものも、これまで試してきたことも、同じ場所に残していきたい。そんな考えから、運営しているサイトを「Neko Lab」としてリニューアルしました。
最初のDev Logは、このサイト自身の制作記録です。デザインの軸を決め、AIとWordPressのテーマを直し、少し無機質だった画面に猫を迎えるまでを振り返ります。
完成品だけでなく、途中も置ける場所に
今回の合言葉は「技術研究室に、猫がちょっと住んでいる。」です。
きれいに完成した作品だけを並べると、そこに至るまでの試行錯誤が見えなくなります。動かなかったコード、直して分かったこと、次に試したいこと。そうした途中の記録も、個人開発には大事な材料です。
そこで、作品をまとめるProjects、制作の経過を残すDev Log、短い技術メモのLab Notesという入口を用意しました。AIとの共同制作も、裏側に隠すのではなく、この研究室の活動として扱うことにしました。
技術者の机を、Webサイトにする
デザインでは、まず読みやすさを優先しました。暖かいオフホワイトを背景に、真っ黒ではないチャコールで文字を置く。アクセントには落ち着いた青緑を使い、カードは細い罫線で区切ります。
日付やStatus、ツール名などは等幅フォント。本文は日本語を読みやすい書体に。少し研究ノートらしく、でも管理画面のようには詰め込まない。その距離感を目指しました。
既存サイトはWordPressで動いていたので、そのテーマを改修しています。記事や画像を引き継ぎながら、トップページ、記事ページ、検索や404ページまで、同じ雰囲気でつながるようにしました。
「いい感じ。でも、ちょっと無機質」
最初のデザインができた時点で、情報はすっきり整理されました。ただ、文字とパネルだけでは、少し整いすぎている感じもありました。
そこで次に伝えたのが、画像生成でアイコンや背景を作り、猫を散りばめたいということ。少し女性らしい柔らかさも加えたくなりました。
生成したのは、ノートPC、回路基板、スケッチブックが並ぶ机で黒猫が眠っている水彩風のイラストと、丸くなった黒猫のアイコンです。絵の中にあるくすんだローズのマグカップや、手描きの線が、画面の印象を和らげてくれました。
猫を置いたのは、ロゴ横、Projectの準備中表示、サイドバー、フッター、404ページ。トップでは制作机のイラストを見せ、Aboutの背景にも薄く取り入れています。
技術サイトとして読んでいると、ところどころに猫がいる。目指していた雰囲気に近づきました。
絵を増やしても、重くしすぎない
生成した画像は、そのままでは机の絵が約3MB、猫のアイコンが約1.9MBありました。サイト用に縮小してWebP形式へ変換すると、次のサイズになりました。
| 画像 | サイト用のサイズ |
|---|---|
| 制作机のイラスト（1200 × 800） | 約167KB |
| 小さい画面用の制作机（幅640px） | 約58KB |
| 黒猫アイコン（256 × 256） | 約6KB |
トップの画像には大きさの違う2種類を用意し、表示幅に応じてブラウザが選べるようにしています。最初に見えるイラストは優先して読み込み、下の方にある猫は遅延読み込みにしました。
見た目を足すときも、読むまでの待ち時間はできるだけ増やしたくありません。
小さく動く、ローズ色のアンダーバー
最後に戻したのが、タイトルの末尾にあるアンダーバーの点滅です。
最初の版にはあった動きですが、画像を加えた段階では静止していました。やっぱり少し動きがある方が好きだったので、淡いローズ色のまま、1.4秒周期で点滅するようにしました。
.hero__cursor {
animation: cursor-blink 1.4s steps(2, end) infinite;
color: var(--rose);
}
@media (prefers-reduced-motion: reduce) {
.hero__cursor {
animation: none !important;
opacity: 1;
}
}
動いているのは、ほんの小さな部分です。それでも「ここで何かを作っている」という感じが出ます。端末で動きを減らす設定を使っている場合は、点滅を止めて表示します。
人間が決めたこと、AIに手伝ってもらったこと
今回、人間側で決めたのは、サイトの方向性と、見たときの感覚です。「少し無機質」「猫を入れたい」「少し動きがほしい」と伝えながら、仕上がりを調整しました。
AIには、既存テーマの調査、PHP・CSSの編集、画像生成、画像の軽量化、サーバーへの反映と確認を手伝ってもらいました。この記事の文章も、その制作記録をもとにAIとまとめています。
Human: コンセプト、デザイン方針、見た目の確認、修正の判断。
AI: 構成案、テーマ実装、画像生成、軽量化、確認作業、記事の下書き。
公開前にはテーマをバックアップし、PHPの構文をチェックしました。反映後はトップページや既存記事、追加画像のHTTP応答を確認しています。すべての端末での表示や操作を網羅したわけではないので、使いながら気づいたところも直していく予定です。
Tools
WordPress / PHP / CSS / JavaScript / Docker / SSH / Codex / 画像生成 / Sharp
次の実験
サイトの入れ物ができたので、次は中身です。
過去に作ったものをProjectsへまとめ、当時どこで悩んだのか、今ならどう作るのかも書き足していきたいと思っています。短いエラーの解決メモも、完成した作品と同じくらい気軽に残せる場所にしたいです。
Neko Labは、完成したサイトというより、これから使いながら育てる制作机。猫にはその隅で、のんびりしていてもらいます。
