WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

ホームページ制作、とりわけコーディングをするにあたり、AIは使わない手はないと言えるくらい便利で欠かせない心強いパートナーになりました。

そんなAIをエンジニアの私がどのように使っているのか今回ご紹介したいと思います。

私が使っているAI

1. Claude
2. Cursor

この2つです。

主にこの2つを駆使しながら日々ホームページの制作を行っています。

どちらもホームページ制作の心強い味方になってくれます。

今回はこの２つをご紹介できればと思います。

Claude

一番有名なのはChatGPTだと思いますが、「コードの生成にはClaudeが一番良い！」という話をYouTubeを観ていて良く耳にしたので使ってみることにしました。

使ってみて思ったのですが、確かに凄く良い。

体感ですが、評判の通りコードを書くのはChatGPTより長けている印象でした。

余談ですが、コードを書く以外の日常使いにも便利で、

『私の体重を記録して』、『食べたものを記録して』、『○○駅まで行くのにかかる時間と運賃を教えて』というリクエストにも応えてくれます。本当に便利なものですからもうAIなしに生きられない身体になっています。

Claude最大の魅力はアーティファクトという機能だと思います。

アーティファクトとはチャット画面の右側に、Claudeが生成したコードの実装結果をリアルタイムでプレビューできる機能です。

例えば、私が「グリッドレイアウトの実装例をアーティファクトを使って見やすく解説して。」と指示を出せば、ご覧の通り、こんな素晴らしく見やすいマニュアルを数分で作ってくれます。凄まじいです。

こんな凄いものをたった数分で作ってくれるなら飽きも来なくてずっと楽しみながら学習できてしまいますね。

今回はコーディングのマニュアルみたいなものを作ってもらいましたが、自分がホームページ制作でやりたいインタラクションを試してみるのにももってこいですね。

画面をスクロールしたら、写真がポップな感じで拡大しながら出現する。もっと早く出現して、ちょっとポップさが足りないかも、これに3枚同時でもいける？なんて感じでチャットで楽しく相談しながらコーディングができます。

こんな風に作っていったマニュアルや実装例をClaude内にストックしていって、いざ構築をする際にやり方を忘れてしまったときや過去のあのやり方を応用して実装できそう！となった時に大いに役立つリファレンスになります。

ClaudeもChatGPTと同じく、チャットをカテゴリーごとに分けて整理して保存しておくことができますので、私の場合は『コーディング』という箱を用意してその中に今まで作ったコーディングのマニュアルや実装方法をアーカイブしてあります。

Cursor

Cursorについては過去のブログで紹介したこともありますが、AIが搭載されたエディタソフトです。

Cursorの強み

関連記事

VS codeの進化版！AI搭載の新時代のエディタCursorを使ってみた！

過去の記事では、エディタ内のコードを部分的に選択して、AIに指示して追加・削除・編集ができる。

次に自分が書きたいコードを予測して提案してくれる。

チャットしながらサイトを構築できる。

といったようなメリットを話したかと思います。

でも何よりもClaudeの最大の強みだな、と思えるものって自分が今開いているディレクトリ内のファイルの中身や画像を全部把握してくれている事だと思うんです。

つまり、いちいち説明する手間が省けるんですよ。

例えば、ホームページを制作していて、時短したい！ちょっと詰まったから聞きたい！ってなり、ChatGPTやClaudeと作業するとなった場合、まず現在のプロジェクトの簡単な概要を伝えて、今自分が何に困っていて、どこで不具合が起きていてみたいなことを伝えたうえで、コードも貼り付けないといけません。

全部のコードを貼り付けるとなるとすぐ容量オーバーになって使えなくなってしまうので自分が今困っている部分しか貼り付けることができなくて、共有していない他のコードとの整合性は？競合しないかというところまでは考慮してくれない。

何か困る、またお願いしたいってなるたびにコードをコピペして聞く・お願いする。

さらには、今立ち上げているスレッドのチャットの回数制限が来たら、また新たにスレッドを立ち上げて説明し直さなければなりません。現在のClaudeだと他のスレッドで話した内容も結構把握してくれていることも多いですが、それでもやっぱりコードのコピペ作業はしなくてはならず、煩雑でミスも誘発しそうです。

Claudeを使えば、こういったストレスから解放されます。

• 前述の通り、ディレクトリ内のコードや画像、ドキュメントを全部把握してくれているから説明する手間が大いに省ける。
• すべてを把握してくれているから生成したコードが他のコードと競合しないかなどもチェックしてくれる。
• 生成してくれたコードを移す作業も必要なく、自分が編集したいところを自動で生成・書き換えをしてくれる。つまりヒューマンエラーっぽいミスがない。
• 同じディレクトリ内で作業をし続ける限り、ClaudeやChatGPTみたいに新たにスレッドを立ち上げてまた前提などを説明する必要もなく、「あの時のあのコードの話なんだけどさ〜」な感じのラフさで理解して生成してくれる。

これらの強みがあるおかげで制作が一気に楽になりました。

同じディレクトリ内でチャットし続ける限り、数か月後に再びディレクトリを開いて「あの時のあそこのコードをこのように変えて。」と言えば説明をせずとも理解して実行してくれる。楽ですね。

応用編① -昔構築したサイトの活用

画期的でも何でもないのですが、ここからは私がサイト構築時にやっているCursor活用方法をご紹介します。

ディレクトリ内の情報は全部把握してくれるという最大の強みがあるので、そこは活かしたいものです。

私ならこんな感じで活用します。

添付画像の赤枠で囲った部分が過去に自分が制作したサイトたちです。

ホームページ制作をしていると、過去に手がけたサイトと似たような実装やアニメーションを求められることは少なくありません。

そんな時、過去案件のファイルをディレクトリ内に配置しておけば、「ここの箇所を、過去に作ったAサイトのaboutエリアのスライダーと同じように実装して」と指示するだけでCursorがAサイトのコードを確認し、現在のプロジェクトに合わせた形で実装してくれます。

画像内の『reference』 > 『past_site』というディレクトリがそれにあたります。

いちいちファイルを開いてコードを探して、という手間がなくなるのは本当に楽です。

自分が過去に作ったサイトをどんどんストックしていくほどに効率化・リファレンスの充実に繋がります。しっかり管理していきましょう。

応用編② -過去に躓いたことを文書化して取り込む

こちらは先程の画像の中の『reference』 > 『past_troubles』の中のmdファイルの中身です。

どういうものかというと自分が過去に失敗したこと、上手くいかなかったことをまとめて文書化したもので、もし自分が現在構築中のサイトで躓いたときに参照するためのものです。

過去に自分って同じような失敗していないかな？同じ失敗はしていなくても応用して解決できることはないかな？、と確認することができます。こちらを踏まえたうえでAIに相談すると回答の質が変わってくるのではないかなと思い、入れています。

応用編③ -構築後のチェック

サイト構築後のチェックにも活用します。

目視での確認はもちろんの事、AIにも自社で用意したマニュアルを読んでもらったうえでチェックをしてもらうことで自分でも気づけなかったミスや確認の漏れを防ぎます。

これらの画像は1枚目の画像の中の『reference』 > 『coding_manual』の中のmdファイルの中身とこのマニュアルに沿ってチェックしてくれた結果です。

正確にチェックしてくれますし、特に驚いたのがサイトに使用されていない画像や容量が重すぎる画像

の洗い出しまでしてくれます。本当に助かる。

まとめ

Cursor、本当に凄まじいですね。

どれだけ作業が楽になったか分かりません。

サイト構築の際にはCursorがメインになるかとは思いますが、自分用のコーディングの見やすい教科書や試したいアニメーションのプレビューは圧倒的にClaudeのアーティファクト機能が良いです。

どちらも素晴らしい、本当に。

使い分けてどんどんスキルアップしていきましょう！