Codexで業務CRAFTを作り直した。トップでおじが動きます
業務CRAFTのトップを、ドット絵のおじが動く画面へ変更しました。変更前後の実キャプチャと、何を残して何を変えたか。Codexと作り直した制作記録です。
この記事でわかること
- 文字と実績カードが中心だったトップに、動くおじを追加した
- 記事や文章は残し、最初の画面と記事の入口を変えた
- AIへ修正を頼むときは、変なところと残したいところを分けて伝えた
業務CRAFT、ちょっと硬いなと思っていた。
おじっぽさはある。でも、初めて来た人が「なんかよさそうだぞ。中身も見てみるか」と思う画面になっているか。そこが気になって、Codexとトップを作り直しました。
いまはドット絵のおじがキーボードを打って、紙が減って、コーヒーを飲みます。
変更前と変更後
変更前は、文章の横に実務の改善事例を大きく置いていた。
変更後は、その場所に動く仕事場を置きました。実務の改善事例は消さず、下の著者紹介の隣へ。記事へ進むボタンも残しています。
どちらも実際の公開画面です。動きはトップページで見られます。
サイト全部を作り直したわけではない
使っているのはAstro、CSS、JavaScript。おじの絵をパーツに分けて、ブラウザ上で動かしています。公開先はこれまでと同じCloudflare Workersです。
今回は、記事や本文を丸ごと変えるのではなく、最初の画面と記事の入口を整理した。PCでは文章とおじを横に並べ、スマホでは縦にする。
動きっぱなしも落ち着かないので、一度再生したら止まります。「もう一度」で見直せる。
いちばん直したのは、手だった
最初からこの形になったわけではないです。
キーボードを打っているように見えない。コップを持つと手が急に切り替わる。手首で切れて、腕と別パーツに見える。
そこは何度も直してもらった。
一方で、紙が減っていく演出や、左まで広い机はよかった。全部変えてほしいわけではないので、残したいところも伝えています。
「いい感じにして」から始めても、途中からは「ここの手首」「この切り替わり」と、実物を見ながら詰めていく。今回はそこにずいぶん付き合った。
サイトをきれいにするはずが、最後はずっと手を見ていた気がする。
まずは動くおじを見てみてください。仕事を一つ減らして、コーヒーを飲んでます。
AIに日本語で頼んでみるところからなら、Excelの関数を聞いた記事もどうぞ。
実際に送った指示はnoteに載せました
キーボードの位置、手首、コップを持つときの切り替わり。どこが気になって、どう頼んだか。実際に送った言葉と途中の画像をnoteにまとめました。