ウェブ制作会社フロントエンドエンジニアの「AIツール、こう使ってます」

この記事では、ウェブ制作会社のフロントエンドエンジニアである佐藤による、リアルなAI活用について、ツールごとにご紹介します。

先にお断りしておきますと、書かれている内容を読んで「あれ？全然普通じゃない？」「もっとすごい秘伝の技みたいなのはないの？」と思われるかもしれません。確かに普通の内容ではあるのですが、2025年2月時点での業務やプライベートでのAI活用法を書いておくことで、後に「この時はこんなふうに活用していたのか、時代は進歩したな」と振り返れるような記事になったらと考えています。

チャット型AI「Perplexity」

最も頻繁に利用しているのは、チャット型AIツールのPerplexityの有料版、Perplexity Proです。今となっては他のAIチャットにもある機能ですが、Perplexityは出典のURLを応答結果に表示してくれるので、ハルシネーション（AIが事実とは異なる情報を生成する現象）に気づきやすいという利点があり、好んで使っています。また、目的に応じて、AIのモデルを選んで結果を再生成できるのも魅力です。
もう一つ、Perplexityを使う理由としては、ソフトバンクユーザーだからというものがあります。ソフトバンクユーザーはPro版を1年間無料で利用できるため、使わない理由はないと感じています。

あらゆる文章の作成に

業務上の連絡は、テキストによるものがほとんどのため、目安として5行以上になりそうな文章の作成にはAIを使っています。Perplexityは、雑な指示に対してもいい感じの結果を返してくれますし、特に利用モデルとして「Claude 3.5 Sonnet」を選択した場合には、自然な日本語で結果を返してくれます。とはいえ、書かれた内容をそのまま利用することほとんどなく、手直しを加えてから送っています。

特に、ちょっと返信しにくいような、気が重くなるような内容を書かなければいけないときには、まずAIに書いてもらうとだいぶ気がラクになります。つい先送りにしたくなるようなことも、とりあえず一旦AIに任せるだけで、返信の大部分が出来あがります。また、技術的な内容の説明なども、要点を箇条書きして、あとはAIに任せると、いい感じに整理して補足してくれるので助かります。

プロンプトはテキストエディタのObsidianで管理しており、必要な時にすぐにコピーペーストで利用できるようにしています。

このほかにも、リリース記事など定形的な文章の下書きを作成したり、議事録をまとめたり、さまざまな文書の作成に利用しています。検索できるという特性を活かして、企業調査レポートの作成などにも活用しています。ただし、やはりハルシネーションはありますので、結果のリンクをクリックして、情報源を確認したうえで採用します。

また、ウェブ制作の講師として活動するとき、教材に合わせて問題集を作成するといった用途にも利用しています。これまで、こういった問題を作成するとき、不正解の選択肢を用意するのもそれなりに頭を使う作業でしたが、手間が減りました。余計なことですが、つい、クスッと笑えるような選択肢を混ぜたくなるのですよね。

業務以外でも、思いつきをメモがてらPerplexityに送信してみたり、誰にも話せないようなことを書いて反応を見てみたりなど、公私問わず活用しています。

コードエディタ「Cursor」

Cursorは、Visual Studio CodeをベースにしたAI搭載のコードエディタです。AIによるコード補完や、チャットツールによるコードの提案機能などがあります。公式ドキュメントを情報源として追加したりもできます。

ほかにも類似のエディタはありますが、Cursorは利用者が多い印象があること、料金プランがわかりやすく、定額で利用できる設定があることから、好んで利用しています。私は$20のProプランを利用しています。

コードの生成＆適用がラク

このエディタを使う大きな利点としては、AIに書いてもらったコードをその場でクリック一つ、あるいはTabキーを押すだけで、実際のコードに適用できるところです。しかも、複数のファイルの情報を読ませてコードを生成できます。

Composer機能では、画面右側にあるチャットでAIに希望を伝えると、変更内容を提案し、コードの内容も説明してくれます。それを読んで納得がいけば「Apply」をクリックし、内容を実際のファイルに適用するという流れです。

特に、個人で開発しているウェブアプリケーションの開発に関しては、効率が爆上がりしました。それまでは、隙間時間に数日かけて実装していた内容が、動作確認も含めて数十分で完成してしまうという具合です。

neccoで制作するようなウェブページのコーディングでは、レイアウトが複雑なこともあり、AIによるコード生成はウェブアプリケーションほどは活躍していません。ただし、文字コンテンツを文脈に応じてコードに入れ込んだり、フレームワークの移行にあたりコードを書き換えるといった作業に関しては、AIでもできますので、単純作業が減り、業務はラクになっています。

コミットメッセージも自動生成

そのほかに便利な点としては、Gitのコミットメッセージを自動で生成できることがあります。
Cursorの設定（Rules for AI）で、日本語でコミットメッセージを書くように指示をしても、なぜか英語で生成されてしまうことも多いのですが、それでもゼロから書くよりはだいぶラクになります。

自作ツール「私のalt生成ちゃん」

コーディングを補助するツールとして、Anthropic (Claude) APIを利用した自作のAIツール「私のalt生成ちゃん」も開発しました。このツールは、ブラウザから画像をアップロードすると、代替テキスト（alt属性）を自動生成できるものです。

AstroとReactで画面を作成しており、画像をアップロードすると、AnthropicのAPIにアクセスし、下記のプロンプトを実行した結果を表示する仕組みになっています。

画像のaltを日本語で書いてください。altのみを返して、余計な文章はつけないでください。

コーディングの際は、前後の文脈を加味して代替テキストを作成することもあり、必ずしも適切な生成結果になるわけではありませんが、画像で何を伝えたいのか考える最初のとっかかりとしては、作業がとてもラクになりました。

当時は存在を知らなかったのですが、もし今から作るのであれば、Dify（後述します）を使って作成すると思います。

コードレビュー「CodeRabbit」

CodeRabbitは、GitHubやGitLab上でコミットした内容をAIがレビューしてくれるツールです。CodeRabbitと連携させた状態でプルリクエストを作成すると、プルリクエストに含まれるコードの内容を解析し、プルリクエストのコメントや変更の概要を自動で作成してくれます。

また、改善できそうな点があればアドバイスをしてくれます。

CodeRabbitは、necco全体で取り入れています。人間によるレビューの前には必ずAIレビューに目を通し、必要な場合は改善してからレビューを依頼する、というフローにすることで、レビュワーの負担が減りました。「console.log()をそのままコミットしちゃった」といったうっかりミスも指摘してくれるので、助かりますね。的外れなコメントがなくもないので、そういった場合は、その旨のコメントを残しつつ、無視して良いルールとしています。

AIアプリ開発プラットフォーム「Dify」（クラウド版）

Difyは、ノーコードでAIアプリケーションを開発できるプラットフォームです。コードを書かずに、チャットツールを作ったり、ワークフローを組んだりできます。コードを書かずに…と言いつつも、複雑な処理を行う場合には、やはり多少はコードを書く必要があるようです。

Difyは無料版を利用しつつ、別で契約しているAnthropic APIを設定して利用しています。

使い始めたばかりで、使いこなせている感は全くないのですが、試験的に、書籍の奥付けの画像をアップロードすると、Notionの書庫データベースに登録できるツールを作ってみました。画像をAIで解析し、文字に起こしてJSONデータとして返却させ、その情報をもとに書籍の表紙の画像URLをAmazonから取得しつつ、Notion APIに情報を送信しています。

Difyのアプリケーション画面にはスマートフォンからもアクセスできるため、スマホのカメラで奥付けページを撮影し、その場でデータベースに登録できます。

表紙画像やタイトル、著者、出版美など、全ての情報を手入力する場合と比べると、格段と手軽に情報を登録できるようになりました。

当初は、書籍の奥付け画像をアップロードするのではなく、バーコード画像をアップロードして情報を取得できるように組んだのですが、うまく動作しませんでした。DifyからGoogle Books APIを利用すると、なぜか常に「該当する本：0」として情報を返してくるため、機能しませんでした。このため、書籍の奥付け情報を利用する形に書き換えました。Google Books APIは、Google Apps Script（GAS）などの、ほかのツールからは正常に利用できたため、なんらかの制限がかかっているのかなと考えています。

Difyに関しては、まだ使い慣れていないこともありますが、正直なところ、GASを使って全てコードで組むほうがデバッグしやすく、開発しやすいと感じています。また、Difyは毎日定時に何かを行うなどの定期実行ができないため、その点でも、定期実行をトリガーできるGASの方が使い勝手が良いです。ただし、今回のNotionへのデータ登録のように、何かしらの画面をユーザーに表示して使わせたい場合や、チャットツールの開発であれば、画面をかんたんに構築できるという点でDifyに利があります。

個人で楽しく遊んだツール

以下は業務とは離れたツールですが、一時期ハマっていたものです。

画像生成「Midjourney」

Midjourneyは、テキストプロンプトから画像を生成するAIツールです。2023年3月ごろ、「AIで結構クオリティ高めの画像が生成できるらしい」と小耳に挟んで、1ヶ月ぐらい楽しんでいました。確かにそれなりの見栄えで生成できて、楽しくはあったのですが、仕事で何かに使えるわけでもなく（学習元に対する不安含め）、作って遊ぶだけだったので飽きてしまいました。

今も、世間的には画像生成ツールそのものは盛り上がっているようですが、仕上がりとして平均的なものが出てくるようです。もろもろ修正後の写真を学習しているためか、人には毛穴がなく、やけにキレイというような印象で、面白みに欠けると感じています。

音楽生成「Suno」

Sunoは、AIを使って音楽を生成するツールです。2023年4月ごろ、性能が上がったらしいという話を聞いて試したものです。過去の自作の歌の歌詞を入れてニューバージョンを作ったり、飼い猫のテーマソングを作ったり、クオリティもなかなかのもので、それなりに楽しめました。

ただし、最終的な音楽は楽器ごとにトラックを分けて出力できず（ボーカルとそれ以外のトラックに分けられるのみ）、MIDI形式などでの出力などもできないため、実用性に乏しいこともあり、やはり1ヶ月ぐらいで飽きてしまいました。

おわりに

思い起こせば、もう十数年以上も前から、「ウェブサイトのコーディングは、そのうち自動でできるようになるから、コーディングの仕事はなくなるよ」と言われてきました。しかしながら、2025年2月時点では、まだ、仕事があるようです。そして、少なくとも私のウェブ制作業務においては、AIツールは業務効率化のための実用的なアシスタントとして定着しています。

ウェブデザインからコードを生成するツールや、ウェブデザインそのものを生成するツールも数多く誕生している中で、私の仕事のあり方はこれから変わっていくのかもしれません。私は、AIが仕事を奪ってくれ、私自身はのんびり趣味でもしながら生きていけることを願っていますが、実際どうなるかはわかりません。機械が得意なことは機械にお願いして、人間は人間らしく生きられればと思うのですが、実際は、機械が不得意な作業や、機械に行わせると高くつく作業を、人間が代替わりして働くようになるだけなのかもしれませんね。

なんにせよ、今の時点では、日々アップデートされるツールを便利に使って、暮らしをラクにできているので、それが続くことを願うばかりです。