【この記事でわかること】
- Webサイトや採用ページをAIで高速作成する具体的な手順
- 高度なデータ分析をAIに任せて業務を効率化する方法
- AIのアウトプットを最大限に活かし、自分らしい成果を出す「マイルール」
使用AIは「ChatGPT o3」と「Claude」
有薗：小松さん、本日はお忙しい中お時間いただきありがとうございます。早速ですが、普段どのようなAIツールを使われていますか？
小松：ありがとうございます。普段は主にリサーチにChatGPT o3を、そして実装にはClaudeを使用しています。本当はGeminiも使いたかったのですが、まだ使い慣れていない部分もあります。
有薗：ChatGPT o3とClaude、この2つのツールを選ばれている理由を教えていただけますか？
小松：ChatGPT o3はディープリサーチに強く、とにかくアウトプットが速いのが魅力的です。待つのが嫌なので、これは大きな利点ですね。一方、Claudeは日本語の文章生成に優れており、特に「アーティファクト」という機能でソースコードを生成し、その場で実際のビューを確認できるのが非常に便利です。プロトタイプ作成にも適しています。
採用ページも数分で！Webサイト構築をAIに任せる実践フロー
有薗：Webサイト構築における具体的なAIの活用方法について、もう少し詳しくお聞かせいただけますか？採用ページ作成の事例など、人事担当者もイメージしやすいかと思います。
小松：はい、もちろんです。例えば、医療スタートアップの採用ページをFigmaライクに作成するケースを想定しましょう。
まず、ChatGPT o3でリサーチを行い、どのようなサイト構成が良いかを検討し、Notion AIで、ファーストビュー・アバウトなど、ページ構成をまとめます。次に、その構成に基づいてClaudeにHTMLとCSSのソースコードを生成させます。プロンプトはとても簡単で
「Figmaライクに、医療スタートアップの採用ページをHTML CSSで作って。（以降に調査した情報を貼り付け）」
Claudeの生成速度は非常に速く、驚くほどです。
ちなみに現在、Google Stitch AI（https://stitch.withgoogle.com/）というデザインツールも非常に便利です。このツールは、会話をするように指示を出すだけで、画面UIを自動で生成してくれます。さらに、生成されたUIはFigmaファイルやコードデータとして出力できるため、既存のワークフローにもスムーズに組み込めます。
元々は「Stitch」というサービスでしたが、Googleが買収し、さらに先日「Galileo AI」も買収して統合されました。これにより、より高度なUI生成とデザインプロセス全体の効率化が期待されています。
生成されたコードは「Code to Design」というfigmaのプラグインツールで貼り付けることで、瞬時にプロトタイプが完成します。さらに、このツールはモバイル表示への自動最適化（レスポンシブデザイン）も可能なため、非常に効率的です。
有薗：モバイル対応は通常、手間がかかるイメージですが、それが自動でできるのは画期的ですね！
小松：はい。最近では、デザインからWebサイト公開までをノーコードで実現できる「Figma Sites」サービスもあり、ウェブサイトを公開するまでの一連の流れがほぼ完結します。プロトタイプの叩き台やイベントのLP作成には、エンジニアがいなくても、作れます。装飾はデザイナーと協力し、エンジニアリングの実装はAIに任せられる部分は任せています。
Figma（フィグマ）とは…
ブラウザ上で動作する共同編集可能なデザインプラットフォームです。UIデザインやプロトタイピング、Webサイトやアプリのデザイン、さらにはプレゼンテーション資料の作成など、幅広い用途で利用されています。