AI技術を活用してコーディング業務を効率化してみた Claude(クロード)編

date_range 2024/04/30
GUARDIAN Marketing BLOG
山本 高広
2024-04-29_120516

こんにちは。フロントエンドエンジニアの山本です。


前回はGoogleのGemini(ジェミニ)利用して画像からコーディングがどの程度出来るか?について検証しました。


今回はAnthropic社の「Claude」(クロード)を試してみました。
いま話題を集めているチャット型生成AIサービスであり、

コーディングに強いのか検証していきたいと思います。

Claude(クロード)とは?

2024-04-29_120633

Claude(クロード)は、Anthropic(アンソロピック)社が提供する生成AIです。
2024年3月に最新版の「Claude 3」が発表されました。
Claude(クロード)は、ChatGPTやCopilotを上回る大規模言語モデルです。

テキストだけでなく、画像や文書の分析も可能で、

Opus、Sonnet、Haikuの3つの異なるモデルを搭載しています。


Opusは人間の理解力に近い最上位モデルで、GPT-4を超える性能を誇ります。

Claude(クロード)には無償版と有償版の「Claude Pro」があり、

OpusやHaikuの利用、より高い性能、新機能への早期アクセスなど、機能と制限が異なります。

Claude(クロード)はチャットインターフェースとAPIを備え、多言語に対応します。

まだ画像生成機能はありませんが、自然な文章生成、正確なコード生成、優れたOCR精度が評価されています。

ただし、他のAIサービスに比べて機能は限定されており、今後の開発が注目されています。

Claude(クロード)で日本語プロンプトからコーディング

ダウンロード

◆日本語プロンプト


# 命令書:
あなたは[プロのフロントエンドエンジニア]です。
[メディアサイト]を構築します。
以下の制約条件と入力文をもとに[HTML,CSS]を記述してください。
# 制約条件:
• 新着情報コンテンツ
• 要素は画像、日付、カテゴリタグ、タイトルを出力
• 画像とタイトルにリンクを設定
• タイトルは2行を超えたら省略
• hover時のリンク効果を付与
• 見出しに[Media],[メディア]と出力
• 詳細ボタンをコンテンツ下部に出力
• 記事件数は6件
• サイト幅は1170px
• id名、class名の先頭に[-w-]を付与する
• 記事一覧は[カード型]で[3カラム]表示
• HTML,CSSはそれぞれ分けて出力
• 画像はダミー画像を使用
• 全体的に[COOL]なデザインに

【Claude出力結果

2024-04-29_122410

【HTML出力一部】

2024-04-29_121555

【CSS出力一部】

2024-04-29_121608

過去一番の出力結果!

AI技術を活用してコーディング業務を効率化してみた Gemini編」で同プロンプトでの出力結果を掲載しましたが、

Claude(クロード)の生成結果が今回一番、そのまま使えるレベルのHTML/CSSの生成物になったと思います。



【ChatGPT3.5出力結果】


【Bard出力結果】



一目瞭然かと思いますがいかがでしょうか?

次回は画像からコードの生成が出来るのか?

プロンプトからのコード生成はClaude(クロード)に軍配が上がる状況となりました。

では画像からはどうなのか?ChatGPTはGPTsを活用すればちょっと使えるかなレベル、

Geminiは論外でした。

Claude(クロード)は私の想像を超えてきてくれるのでしょうか?

次回こうご期待!