Claudeでコーディング効率化！HTML・CSS・アニメーションを試してみた

毎日のHTMLコーディング、本当に効率的にできていますか？ タイピングミスに悩まされたり、複雑なレイアウトに時間をかけすぎていませんか？ AIアシスタント「Claude」を活用すれば、コーディングが劇的に変わるかもしれません。

現在、弊社開発中製品、BuddieSの機能一覧画面をノーコードで作成してみました。
ぜひ、コーディング時の参考にしてください！

今回実施したこと（完成形のイメージとClaude成果物）

BuddieSの開発にあたり、機能の画面一覧をデザインしました。
デザインといっても、以下のとおり要素を並べただけであるため、そこまで複雑なものではないんですけどね　笑
まずは、完成形イメージとClaude成果物を見てみてください。

ほぼ、ノーコードで実現したのですが、かなりコーディング工数は削減できました。
体感では、4時間が1時間といった感覚です。

＜デザインした完成形イメージ＞

＜Claudeコーディングの成果物＞

どうでしょう？悪くはないと思います！
ここまで仕上げるために、何を行ったのか、実体験ベースで記事を残しておきます。

Claude活用によるコーディングの目的

BuddieSの製品開発において、意識していることは、とにかくスピード重視。
現在、サービス開発に時間がかかっています。
その理由は既存の制作案件も行っているため、時間の捻出が難しいのです。

そのため、AIを活用して、迅速に仕上げていきたい！
世の中にサービスを早く展開して、AI活用の便利さを届けていきたい！

という思いは表向きで、正直、コーディングが面倒だったからです。
まずはβ版ユーザー向きなので、簡単に仕上げるだけで十分かなぁと。

といったところです。

Claudeでのコーディングで準備したもの

冒頭で記載のとおり、画像を用意しました。
シンプルに、「01_一覧.png」という名前です。

ただ、これだけです。

その他、ボタンのマウスオーバー時のエフェクトをイメージしておきました。

あと、Claudeは有料版を使っています。

やったこと１：Claudeに大雑把にコーディングを依頼する

Youtubeなどでは色々みていましたが、とにかく初めてなので大雑把に依頼しました。

プロンプトは以下です。もはやプロンプトと呼べるものではないですが　笑

プロンプト

添付画面デザインを忠実にHTMLとCSSの静的コードで出力してください。

Claude実行画面

Claudeは賢いので、ゴリゴリHTMLとCSSを出力してくれます。
あー、なんか楽しているなー感がすごかったです。

Claude実行結果

このフェーズでの成果物なこんな感じです。

画像は歯抜けですが、当然ですよね。提供していなんですもの。
注目すべきは、完成イメージのレイアウトがほぼ実現できています。

個人的に良いなと思った箇所は以下です。

• 画像として出力すべき箇所の判断を自動で行ってくれた
• グリッド形式で綺麗なソースコードで記載してくれた
• 文字お越しをしてくれた

足りない要素として「お問い合わせ・ご相談」がありませんが、まずは進めていくことを優先しました。

ぶっちゃけ、ここまでの段階が一番工数が抑えられたといった印象です。

やったこと２：ホバー時のリンク装飾とリンク実装（aタグとアニメーション）

「SEO記事」「インスタフィード投稿」「議事録」「インタビュー記事」の各枠はリンクの想定です。
ボタン「ChatGPT→」「Claude→」「Gemini→」にリンクはついていましたが、流石にAIでもわからなかったようです。

まずは、以下3つを依頼しました。

プロンプト

SEO記事、インスタフィード投稿、議事録、インタビュー記事の枠（<div class="card">）は、リンクで別ページへ遷移させるようにしたいです。
また、その要素にマウスカーソルを合わせると、ボーダーがつくようにjsで組んでください。
「ChatGPT」「Claude」「Gemini」のボタンもマウスオーバーで色を濃くしてください。

Claude実行画面

実行した様子は以下のとおりです。
画面右側にaタグでコードが記述され、左側では最終的に何を変更したのかが詳しく記載されています。

Claude実行結果

気持ちが乗ってきたので、動画でアニメーションの動きを掲載しておきます。

改めて、Claude側の修正点を見比べながら実装結果をチェックすると、しっかりと反映してくれています。

やったこと３：細かな修正を依頼

次は、色々な指示方法で、どこまで修正してくれるのかを試してみました。

プロンプト

以下5点の修正をしてください。
・最初に提供した画像の「ご相談・お問い合わせ」がありません。追加してください。
・bodyのcss「padding: 20px;」を削除してください。
・「Coming soon...」には画像を入れる予定です。
・フッターの赤とマウスオーバー時の赤の色を「#da344c」に変更してください。
・「ChatGPT」「Claude」「Gemini」をマウスオーバー時にキラッとさせてください。配色は維持してください。

最初に提供した画像のお問い合わせ枠がないので追加してほしい。ただ、細かな指示が面倒なので、画像を見て適切な配置をしてくれるかの検証も兼ねて楽をしました。

具体的な指示で、css修正・削除（padding: 20px;）できるかの検証。

ComingSoonの箇所をざっくり伝えて、画像に変えてもらうことの検証。

あとは、ボタンマウスオーバー時にキラッとしたエフェクトをつけることも依頼してみました。

Claude実行画面

Claude実行結果

動画のとおり、グリッドでしっかり配置させ、他のカードとデザインを統一してくれました。
以下が修正結果ですが、依頼した内容はすべて実装してくれていました。

とくに、キラッとしたアニメーションはどのように実装すればよいか分からないので、とても助かりました！

やったこと４：ファイル構造を整理し、HTML/CSS/JSを分離

出力されているデータは、HTMLのみであったため、今後のメンテナンス性・拡張性を意識してファイル構造の整理を行いました。

プロンプト

ソース内の画像は、同じ階層のディレクトリ「img」に格納するように修正してください。
ソース内のjsは、同じ階層のディレクトリ「js」に、ソースを分けて格納するように修正してください。
ソース内のcssは、同じ階層のディレクトリ「css」に、ソースを分けて格納するように修正してください。

Claude実行画面

Claudeでは、フォルダ構造を整理してくれた結果まで出力してくれるので、これに沿ってファイル整理をします。

やったこと５：不具合修正

マウスオーバーのアニメーションが消えてしまったので、修正依頼をしました。

プロンプト

SEO記事などをマウスオーバーした際の赤枠をつける装飾がなくなってしまいました。修正してください。

Claude実行画面

具体的に修正した内容を提示してくれて本当にありがたいです。
これで直れば良いので、とにかく実装。

ところが、解決しなかった。。。

再度、Claudeにお願いをしました。
ここまで楽ができているのに、少しの間違いに腹がたったのか、少し冷たい言い方になってしまいました。
AIだから許されるということで、ご容赦ください。

プロンプト

実施しましたが、動かないです。

・
・
・

これでも動かない。
修正のポイントを見てみると「main.jsが正しくリンクされているか」と記載があり、見てみると「main.js」を「css」のフォルダに格納していました。

いやー、Claudeさん冷たくあたって大変申し訳ございませんでした。

ここでの学びは、Claudeは依頼者の悩み解決に向けて、様々な提案をしてくれているということ。
コード修正、再提案、チェックリストと、人が見るよりも早く、確実に。

さて、表示確認にあわせて、画像も出力して追加してみました。
現在の状況は以下のとおりです。

Claude実行結果

やったこと６：細かなレイアウト修正

アイコンとタイトルが段落ちして崩れていたり、ボタンの配置場所が理想と違うので諸々修正。

プロンプト

SEO記事、インスタフィード投稿、議事録、インタビュー記事の各タイトルとアイコンを一行に並ぶようにしてください。

Claude実行画面

この依頼で直りませんでした。

以下、直るまでのプロンプトと回答を記載します。

5回のやりとりでやっと直りました。

Claude実行結果

ついでに、CommingSoonの画像が大きすぎるので、サイズ調整も依頼。

プロンプト

commingsoonの画像が添付のようになっています。
最初に添付した画像のとおり、サイズを小さくして、枠内の上下左右の中央に配置してください。

Claude実行画面

Claude実行結果

まぁ良い感じになってきました。

やったこと７：キャラクターの配置調整

プロンプト

教えてバディーくんのレイアウトも添付のようになっています。
一番最初に提供した画像のようにしてください。

Claude実行画面

Claude実行結果

はい、結局枠からはみ出した修正は流石に難しかったようです。
CSSを２行修正して、理想の形にできました。

まとめ

コーディング作業の効率化に関する実例をご紹介してきました。

製品開発において時間の捻出が難しい中、AIアシスタントのClaudeを活用することで、4時間かかっていた作業が約1時間で完了するという大きな効率化を実現できました。

実装プロセスとしては、まずデザイン画像からHTMLとCSSの基本構造を自動生成し、その後ホバーエフェクトやリンク実装を追加。さらに細かなレイアウト調整や不具合修正を行い、最終的にファイル構造の整理まで実施しました。

Claudeの特徴として、画像から適切なレイアウトを判断して実装できること、細かな修正要望に柔軟に対応できること、そしてエラー時には具体的な解決提案を提示してくれることが挙げられます。

今回の実践を通じて、特に初期実装段階での時間短縮に大きな効果があることが分かりました。
HTMLコーディングの作業効率を向上させたい方は、ぜひAIアシスタントの活用を検討してみてください！