注目の生成AI｢Claude｣はどう使う？ 高度で複雑なデザイン表現制作にも役立つ｢Claude｣のオススメ活用術

低価格で高性能な中国発の生成AI「DeepSeek」の登場により、2024年6月に時価総額で世界1位になったNVIDIAの株が急落するなど、生成AIの勢力図は急速に変化しています。こうした生成AIの進歩に取り残されないよう、各分野において業務での活用が進んでいますが、総務省の調査では日本の生成AIの個人利用は9%にとどまり、中国や米国と大きく開きがあることが明らかになっています。

日本国内では、エンジニアやIT関連職だけが盛り上がっているようにも感じられ、一般の人々は生成AIの影響を思っていたより実感しにくく、利用状況に格差が生じているようにも思われます。こうした傾向はクリエイターも例外ではなく、不正な学習による著作権の問題に対する不信感に加え、Adobeなどのクリエイティブツールにかかるランニングコストもあるため、最新のAI技術をフル活用できる有料版に課金するまでには至ってない方が多いと思われます。

コストをかけずに生成AIの進化を体感するには、複数の生成AIサービスをうまく使い分けることが有益です。そこで、今回は長文処理やコーディングでは有料版のChatGPTに引け劣らないと注目される生成AI「Claude（クロード）」について詳しく解説します。
※参照記事：DeepSeekの衝撃！ 低価格で高性能AIを実現できた理由　長谷佳明（週刊エコノミスト Online）
※参照記事：生成AIの個人利用、日本は9%どまり　中国・米国と大差（日本経済新聞）

目次

注目される「Claude」とは（基本情報とその背景）

最初に「Claude（クロード）」に関する基本情報とClaudeが注目されている背景について説明します。

ClaudeのTOPページ▶「Claude」とは
Claude（クロード）は元OpenAIの研究者Dario Amodei氏とPaul Christiano氏が共同創設した米国のITベンチャー企業であるAnthropic社によって開発された大規模言語モデルです。2023年3月に初版のモデルが一般公開され、2023年7月にはClaude 2、2024年3月にはClaude 3、2024年6月にはClaude 3を強化した中位モデルのClaude 3.5を公開しバージョンアップを重ねています。

現行のClaude 3は高速な応答が特徴の「Haiku」、優れた処理能力とバランスの取れた性能を有する「Sonnet」、文章作成と複雑なタスクに特化した「Opus」という3つの最適化モデルを提供し、最新のClaude 3.5には「Haiku」と「Sonnet」がモデルとしてラインナップされています。

高度な文脈理解力や最大75,000トークン（AIが文章を処理する際の基本単位のこと）の長文処理能力を備えており、多言語対応やマルチモーダル機能（テキスト以外に画像、音声、動画など複数の種類を組み合わせて処理する機能）、画像認識・分析能力に加え、プログラミング分野でも高度な生成・デバッグが可能です。
※参照ページ：Claudeの紹介（Claude公式サイト）

▶Claudeの料金プラン

Claudeの料金プラン本記事では、クリエイター向けに無料版の利用を想定していますが、Claudeの料金プランについても簡単に確認しておきましょう。料金プランは無料プランの他に、ProとTeamがあり、それぞれ月ごとの契約と年間一括契約から選択できます。その他に、大企業向けのEnterpriseプランも提供されています（要問い合わせ）。 以下がClaudeの料金プラン比較表です。

Claude料金一覧表（簡易版）

 説明月ごとの契約年間一括契約無料個人利用を想定無料無料Pro個人利用を想定20ドル／月16.67ドル／月Teamチーム向け30ドル／月（最低5人から）25ドル／月（300ドルの前払い・最低5人から）Enterprise大規模企業向け要問い合わせ要問い合わせ※料金は変更される可能性もありますので、利用される場合はご自身でもプランの価格や内容を確認ください

詳しくはClaude公式の料金プランのページをご確認ください。無料版は利用できる回数が時間によって制限されている、回答の速度が遅い、利用できるモデルが古いバージョンであるといったデメリットはありますが、ヘビーユースしない場合には十分に活用できるプランです。Claudeは日本語対応していますが、日本向けの窓口は確認できていませんので、問い合わせが必要な場合は、公式のヘルプページなども利用してみてください。
※参照ページ：Explore plans（Claude公式サイト）
※参照ページ：Anthropicヘルプセンター：Anthropicチームからのアドバイスと回答（Claude公式サイト）

▶Claudeが注目される背景
Claudeは特に長文処理能力とコード生成の精度において、強みがあるとエンジニアやプログラマを中心に高い評価を得ています。ソフトウェア開発やコンテンツ制作、ビジネス文書作成など、実務的な用途での高いパフォーマンスを期待されている生成AIなのです。また、倫理的な原則（憲法など）を学習した、安全で信頼できる「Constitutional AI」を採用し、安全性と倫理性にも配慮されています。こうした、専門的なタスクにおける正確性と安全性の確保が、ビジネス利用において注目されている理由です。

クリエイターにとっての魅力的な特徴と機能

▶1.卓越したコーディング能力

複雑なコード作成も可能なClaudeClaudeは卓越したコーディング能力を備えており、複雑なプログラミングタスクに強いのが大きな特徴です。Claudeを活用することで、HTMLやCSSのコーディングはもちろんのこと、ReactなどのJavaScriptライブラリやPHPなどのバックエンド系のプログラミング言語もWebデザイナーが調整することも可能になります。デザインの微調整や修正もサポートし、デザインの意図をコードで的確に表現する際に、頼りになる存在となるでしょう。また、例えばWebサイトのパフォーマンスを向上させるために、コーディングの改善、無駄な部分の削除、エラーが出た箇所の特定や修正（デバッグ）といった作業の支援をClaudeに任せることもできます。上の画像は、Claudeに画像ギャラリーのコーディングを下記のようなプロンプトでお願いした結果です。

入力したプロンプトHTML、CSS、JavaScriptを使って、画像ギャラリーを作ってください。
- 画像は5枚
- 画像は横並びで表示
- クリックすると拡大表示
- スライドショー機能付き

生成されたコードはワンクリックでコピーする、ファイルとしてダウンロードするといった操作ができます。また、生成されたコードは、表示欄右下の「Published」というボタンを押すと公開できます。以下は、実際に生成された画像ギャラリーです。

★実際に生成されたコードによる画像ギャラリー★生成されたコードによる表現：画像ギャラリー

▶2.優れた長文処理
Claudeは、前述のように最大75,000トークンの文章を一度に処理できるのが大きな特徴です。75,000トークンは、日本語テキストで考えると、約7万5千文字から10万文字程度であると考えらます。こうした優れた長文処理は、文脈を維持しながら、一貫性のある質の高い文章を生成できるため、小説や漫画などのプロット作成や脚本の執筆、ブログ記事の作成など、長文コンテンツの制作支援においても高いパフォーマンスを期待できます。

▶3.インタラクションデザイン生成

インタラクションデザインの制作支援も可能なClaudeClaudeはコーディングに強みを持つため、レスポンシブなデザイン、ホバーエフェクト、カスタムチャートなど、ユーザー体験を高める動的なUI要素やインタラクティブなコンポーネントの作成・実装をサポートします。SVG、React、Tailwind CSSといったインタラクティブなUI設計に必要となるコード生成をサポートするので、Webデザイナーのスキルアップにも貢献するツールです。上の画像は、Claudeにスライダーで画像が変わるカルーセルのコーディングを下記のようなプロンプトでお願いした結果です。

入力したプロンプトHTML、CSS、JavaScriptを使って、スライダーで画像が変わるカルーセルを作ってください。
- 画像は3枚
- スライダーは自動で切り替わる
- スライダーの操作ボタン付き

このように簡単なプロンプトを入力することで、専門知識を要するインタラクションデザインが簡単に作成・実装できるようになります。下のリンクは実際に作成されたカルーセルを公開したプレビューです。

★実際に生成されたコードによるカルーセル★生成されたコードによる表現：スライダーで画像が変わるカルーセル

▶4.アニメーション開発支援
ClaudeはCSSアニメーション、SVGアニメーション、Reactトランジションなど、様々な技術を組み合わせた動的表現の実装を支援します。ローディング画面、マイクロインタラクション、データの動的な可視化など、魅力的なモーション表現の制作を支援するため、Webデザイナーや動画クリエイターにも重宝されるツールです。

▶5.クリエイティブワークフロー強化
Claudeを活用すれば、制作物に関するアイデアの具現化からプロトタイピングまで、制作プロセス全体の作業効率がアップします。Webディレクターやプロジェクトマネージャーが担当する領域なども含め、デザイン仕様書の作成、プロトタイプの作成、テスト計画の立案など、クリエイティブプロジェクトの各フェーズで必要なデータ作成を、少人数で対応可能にする可能性も秘めています。

▶6.データの視覚化支援

データのグラフ化なども可能なClaudeClaudeは、マルチモーダル機能を備えているため、データの視覚化、インフォグラフィックス、プレゼンテーション資料など、情報を視覚的に魅力的に伝えるコンテンツ作成のサポートやアイデア出しにも役立ちます。上の画像は、Claudeに作成してもらったSNSの月間アクティブユーザー数のグラフになります。また、グラフをコードで生成してくれるので、このままWebページに貼り付けることが可能です。以下は「Published」で公開されたグラフのデータです。

★実際に生成されたグラフ★生成されたグラフ：主要SNSの月間アクティブユーザー数

このように、Claudeは特にWebベースのクリエイティブプロジェクトにおいて高い価値を提供する生成AIツールです。

｢Claude」を使ったコード制作事例

Claudeは回答は日本語には対応してますが、操作画面の言語は英語になりますので、まず簡単にアカウント作成からログインまでの手順についても説明しておきます。

▶事前準備：アカウント作成からログインまで

電話番号を入力しコードを送信 名前を入力まず、Claude公式ページへアクセスします。アカウント新規作成とログインはGoogleアカウント経由か、メールアドレスとパスワードの設定で可能になります。アカウント新規作成の場合は、最初に本人確認として携帯の電話番号が求められます。国を選択して電話番号を入力し、18歳以上である確認の項目にチェックを入れたらコードを送信するボタンをクリックします。携帯のショートメールにコードが送信されますので、遷移後の画面にあるコード入力欄にコードを入力します。その後、名前を入力するステップがあります。Claudeとのやり取りで使われる名前の設定ですので、ハンドルネーム等を入力しても問題ないかと思われます。

利用規約を確認し「Acknowledge & Continue」をクリック プロンプト入力画面次のステップでは、画面をスクロールして利用規約等に確認済みのチェックを入れ「Acknowledge & Continue」をクリックします。プロンプト入力画面に遷移したら、アカウント作成は完了です。事前準備が確認できたら、実際の事例を通してClaudeの活用法を理解していきましょう。

▶事例1：WordPressでPHPを編集しリンクプレビューをカスタマイズ

外部の記事をリンクするときに自動で生成されるサムネイル画像やタイトル、説明文が表示される 「リンクプレビュー」というカード機能があります。WordPressでこのカードを実装する場合は「OGP（Open Graph Protocol）」を利用し、PHPのコードを編集することで 実現できます。「リンクプレビュー」は、リンク提供側が設定しているものもありますが、この「リンクプレビュー」のデザインが自身のサイトと合わない場合があります。今回は事例として、この「リンクプレビュー」がカスタマイズできるようなコード生成をClaudeにサポートしてもらいましょう。

プロンプトを入力 コードが生成されるWordPressのリンクプレビューを作成したいというプロンプトを入力します。この際、仕様など細かく指定しておくと、イメージ通りのコード作成を実現しやすいです。実際に入力したプロンプトは以下のようなものになります。プロンプトが思い浮かばない場合は、他の生成AIなども活用して、プロンプトを考えてもらうとClaude無料版の使用回数を減らさずに作業をすすめられます。

入力したプロンプト「WordPressのリンクプレビューをカスタマイズするPHPコードを作成したいです。
次の仕様を満たすコードを作成してください。」

仕様:
WordPressの投稿内で外部リンクを自動でプレビュー表示
Open Graph（OGP）やTwitter Cardのメタデータを取得
取得した情報をキャッシュし、パフォーマンスを向上
プレビュー表示のレイアウトをカスタマイズ可能にする（タイトル、画像、説明文）
ショートコード [link_preview url="https://example.com"] で埋め込み

また、実装手順や注意点も教えてください。

プロンプトを入力すると、回答とコードが生成されます。実装手順や注意点についても教えてほしいといった指示も追加しておいたので、その手順に従って実装していきましょう。

function.phpを開く function.phpに生成されたPHPコードを貼り付けるWordPressのwp-contentにあるthemesの中から、現在使用しているテーマのディレクトリを開くとfunction.phpというファイルがありますので、これに先ほど生成したPHPのコードを貼り付けていきます。function.phpの編集を間違えると、WordPressが表示されなくなるなど重篤な不具合が起きる可能性がありますので、バックアップを取って慎重に作業します（既存のfunction.phpに生成されたコードの　
★生成されたコード★生成されたコード（PHP）：WordPress Link Preview Plugin
生成されたコード（CSS）Link Preview Styles

外観カスタマイズの追加CSSに生成したCSSコードを貼り付けるページの編集画面にショートコードを貼り付けるClaudeの回答では、ここからCSSをプラグインとして実装していく手順が解説されているのですが、少し複雑でしたので簡単にCSSを実装できるWordPressの管理画面から、外観のカスタマイズを開いて選択できる「追加CSS」に、生成されたCSSのコードを貼り付けてCSSを実装してみます。次に実際にページを編集してコードテキストモードで、[link_preview url="https://example.com"]というショートコードのhttps://example.comの部分を、実際にリンクプレビューに使いたいURLに置き換えて貼り付けます。

リンクプレビューが表示されるようになるCSSを編集すればリンクプレビューを自由にカスタマイズ可能上記のようにリンクプレビューがページに表示されるようになりました。ここまでくれば、追加CSS上で、CSSを編集すれば自由にリンクプレビューのスタイルをカスタマイズできます。

▶事例2：SVGのアニメーション作成のサポート
もう一つClaudeの活用事例を紹介します。SVGによるアニメーションは、Webデザイナーも利用したいオブジェクトかと思います。しかし、SVGの実装にはそれなりに専門的なプログラミングの知識が必要になります。このSVGアニメーションの作成をClaudeにサポートしてもらいましょう。

プロンプトを入力するSVGコードが生成されるプロンプトを入力します。実際に入力したプロンプトは以下になります。ここでは、HTML（SVG）とCSSのみを使用し、JavaScriptは使わないSVGアニメーションを作成したいと指示を出してみます。

入力したプロンプトSVGでシンプルなアニメーションを作成してください。
* バウンドする赤いボールを描きます。
* HTML（SVG）とCSSのみを使用し、JavaScriptは使わないでください。
* ボールの動きは @keyframes を使い、自然なバウンドの動きを表現してください。
* SVGのサイズは 200×200px とします。
* ループ再生されるようにしてください。

プロンプトを入力すると、回答とコードが生成されます。またコードが表示される欄の右上にある「Preview」というというボタンをクリックすると、アニメーションの動きをプレビューできます。

Claude上でアニメーションのプレビューも確認できるこの作成されたコードをページに貼り付ければアニメーションが実装されます。ただし、
この生成されたコードを実装するには、実装環境によって、この他にもいくつかのステップが必要となる場合もあります。

★生成されたコード★生成されたSVGアニメーション：バウンドするボールのアニメーション

生成されたSVGアニメーションの動作

これらの事例からもわかる通り、ある程度HTMLやCSSに慣れている方であれば、どこを調整したほうがいいのか、実装できない場合は自身の作業環境がどういった形式なのかなどを伝えてプロンプトを入力することで、自分一人では無理だった表現形式も作成可能になるでしょう。

実際に試してみて正常に動作しないようであれば、再度状況や作業環境を含めて不具合が生じていることを説明し、修正してほしいとプロンプトを入力するといった作業を繰り返していく必要はあります。しかし、生成AIのサポートがなければ私のようにプログラミングに関する知識をそれほど有していない人には、PHPやSVGのコード作成は不可能だったでしょう。また、Claudeだけに頼るのではなく、他の生成AIに回答を求めるなどして比較検討していくと、少しずつプログラミングの知識も蓄積されていく効果もあるように感じます。このように、プロンプト入力を試行錯誤して、根気よく続ければ複雑なコード作成ができるようになるというのは、生成AIによって誰でもプログラミングを実践できる未来が訪れる可能性を感じます。

もちろん、Claude以外の生成AIでも同様の作業はできますが、高度で複雑な長文のコード生成をストレスフリーで実現でき、なおかつ生成されたコードの制度も高い点に関しては、Claudeに優位性があるように思います。また、プレビューで視覚的に実装後のイメージを確認する、コードを公開する、生成したコードをファイルとしてダウンロードするといったように、コード作成作業に役立つ機能が多数搭載されている点も便利です。

生成AIに関する最新事情とClaudeの立ち位置

生成AIは、言語モデルの性能を競う時代から、用途や目的に合わせて使い分けるフェイズへと少しずつ移行しているように思います。ChatGPTやGeminiのように大きな資本をバックに開発が進められている言語モデル以外にも、各分野に特化した第3勢力の生成AIモデルが登場しており、本連載で取り上げた検索に特化したPerplexityや、今回紹介するClaudeは、その筆頭です。また、AI（人工知能）が人間の知能を超える転換点であるシンギュラリティ（技術的特異点）に到達するのもかつて予想されていた2045年頃よりもかなり早まる可能性があると指摘する有識者もおり、AIの進化から目が離せない状況になっています。

冒頭に述べた安価で高性能な中国産の「DeepSeek」の登場は、生成AI業界だけではく半導体などのハードウェア業界にも大きなインパクトを与えています。また、ChatGPTやGeminiは、頻繁にバージョンアップを重ね、Web検索とデータ分析に特化した「deep research」（Geminiの表記は「Deep Research」）という新たな生成AIによるソリューションの提供をスタートしており、こちらも各方面で話題になっています。

こうした中で、Claudeも独自の進化を遂げていくことが期待されているのですが、エンジニアやプログラマーといった開発者に人気が高いため、良質な学習データも相当数蓄積されていると考えられます。高度な専門性と高い倫理観を兼ね備えたClaudeは、クリエイティブワークの領域でも、存在感を強めていくかもしれません。また、ChatGPTやGeminiといった資本力のある生成AIと、Claudeのような第3勢力の生成AIは得意分野が異なりますので、どちらか一方が他方を駆逐するのではなく、両者は相互補完できる関係性と捉えるのが適切であると考えられます。
※参照記事：2029年に「シンギュラリティ」が到来か ～半導体は「新ムーアの法則」の時代へ（EE Times Japan）
※参照記事：ChatGPT「deep research」 vs. Gemini「Deep Research」──どのくらい違う？　比較検証してみた（IT Media）

まとめ

画像生成AIの問題点と、その他の生成AIが普及している状況については分けて考える必要があります。ライティング分野などは、生成AIを活用したクライアントワークが増加しており、生成AIに真剣に向き合って今後どういったスタンスをとるかといった選択を迫られる段階に来ています。デザイン分野においても、Adobe Fireflyの使い方をフォローアップしていれば十分といった状況でもなくなりつつあり、生成AIの活用を避けて通ることはできないでしょう。

大切なことは、クリエイターが生成AIを取り入れることを選択した場合、最終成果物を生成AIに作らせるのではなく、制作過程の中で上手に取り入れていくことなのではないでしょうか。Web制作やアニメーション作成でのコーディングやプログラミング、フィクションのプロット作成、記事の構成案なども、そうした制作プロセスの一部だと考えることもできます。資料集めや大枠のスキームの制作などを生成AIにサポートしてもらい、それを叩き台に、よりクオリティが高くオリジナリティも備えた制作物に昇華していくことができれば、クリエイターとしての大切な部分を守ることは十分可能なのではないでしょうか。

最終的に自身の手による制作物であるというオリジナリティの根拠やクリエイターとしての職業倫理を、どこに定めるかは、その人の置かれた状況によって様々でしょう。本記事で取り上げたClaudeは、制作プロセスにおける作業をサポートするツールとして大変魅力的な生成AIです。他の生成AIと上手に使い分けることで、Claudeはクリエイターの頼もしいアシスタント的役割を担ってくれるでしょう。