決めたはずのデザインを、もう一度作り直した

2026年11月1日 10:01

エンジニアじゃない私が、Claude Codeを使いながら少しずつ強くなっていく記録です。今回はLv.7を目指します。

前回は、アプリの紹介ページを作り直すことにして、デザインを選んだところまで書きました。

その紹介ページを、アプリの公開と同じ日に新しくしました。ただ、公開したのは前回の記事で選んだデザインではありません。あのあと、もう一度作り直しています。

動きがほしくなった

和紙のような紙に伝統色がにじむデザインに決めて、いったんは満足していました。でも、だんだん見た目だけでは物足りなくなってきた。

止まった絵ではなく、動きのあるページにしたい。そう思っていたときに、Claude CodeでWebページのデザインを作る動画をYouTubeで見ていて、「scroll-craft」というスキルを見つけました。スクロールに合わせて画面が動くページを作るためのスキルです。

このスキルは、いきなりページを作り始めません。最初に8つの質問をしてきます。

ページの雰囲気、スクロールしたときに見せる順番、静かにする所と盛り上げる所、見ている人にどんな気持ちになってほしいか、このページだけの動き……。

答えるのは簡単ではありませんでした。でも言葉にしていくうちに、自分がこのページで何を伝えたいのかが整理されていきました。

たとえば「いちばん覚えて帰ってほしい場面は？」という質問には、薄い色が一枚ずつ重なって、深い色になっていく瞬間だと答えました。アプリで大事にしているところを、そのまま動きにしてもらうことにしたんです。

できあがったのは、スクロールするたびに色のついた和紙が一枚ずつ重なっていくページです。重なるほど色が深くなっていきます。

初めて動くのを見たときは、感動しました。動きのあるページになると、こんなにもワクワクするのかと思った。

プライバシーポリシーとサポートのページも、同じ和紙の見た目にそろえてもらいました。

前のページと並べてみると、違いがよく分かります。

特に変わったと思うのは、アプリの名前の由来などの、自分の思いが伝わるようになったところです。前のページは必要な情報を並べただけでしたが、今はブランドとしての形がはっきりしたと思います。

新しいページは、アプリをApp Storeに出したのと同じ10月30日に公開しました。

ところが、公開してすぐに自分のiPhoneで開いてみると、ページの動きが重かったんです。

これは直さないと。

Claude Codeに伝えると、直しているあいだは前のデザインに戻しておくことを提案してくれました。その提案どおり、いったん戻してもらいました。

そこから、和紙の模様やにじみを前もって画像にしておくなどして、ページを軽くしてもらいました。iPhoneで縦にきれいに並ぶようにしたり、横にはみ出さないようにしたりもしています。直した版を出し直したのは、戻してから30分ほどあとです。

直った版をiPhoneで開いたときは、安心した。

自分で作り上げた達成感がありました。それと同時に、これからいろんな人に届くんだと想像して、うれしくなった。

ここまで読んでくれてありがとう！スキしてもらえると、次のレベル上げの励みになります。