有名な生成AIのひとつであるClaudeで注目すべきは、「Artifacts」という特徴的な機能がある点です。
これまでの生成AIは対話形式でしたが、「Artifacts」が登場したことで、対話と出力、生成物の目視での確認が同時に行えるようになり、より作業効率が向上しました。
本記事では、「Artifacts」の使い方を解説するとともに、「Artifacts」を活用して作成したプロンプト例を紹介します。
便利な「Artifacts」の使い方を習得し、業務に活かしましょう。
INDEX
Claudeの基本的な活用方法とは
ClaudeはAnthropic社が構築したLLM（大規模言語モデル）を利用して設計されている対話型AIです。数ある生成AIと同様に、Claudeは業務や日常生活のさまざまな場面で活用できます。
Claudeの基本的な活用方法は次のとおりです。
- 特定のキーワードに関する情報収集や分析
- 文章を書く際のたたきの作成
- 記述したプログラミングのコードの添削
- 学習や教育における疑問の解消
- 企画やクリエイティブ業務におけるアイデア出し
- 翻訳による言語間サポート
- 提示した問題の解決方法を提案
生成AIは、ユーザーが知りたいことをわかりやすくまとめて文章で表す能力に長けています。
その中でもClaudeは特に、日本語による「文章を創出する」「文章を要約する」といった「言葉を操る」分野に対して強いのが特徴です。
＼文字より動画で学びたいあなたへ／
Udemyで講座を探す ＞Claude公式サイトが公開しているプロンプトライブラリ
Claude公式サイトには、さまざまなプロンプト（ユーザーが実際に入力する指示や質問のこと）が掲載されているプロンプトライブラリがあります。
プロンプトライブラリには、Excelの関数を教えてくれるプロンプトや慣用句の解説をしてくれるプロンプト、料理のレシピを提案してくれるプロンプトなど、ジャンルを問わず数多くのプロンプト例が掲載されています。
公式プロンプト例1
出典：Claude公式サイト
公式プロンプト例2
出典：Claude公式サイト
プロンプト例3
出典：Claude公式サイト
ユーザーが求める成果物を得るためには、適切なプロンプトの作成が必要不可欠です。
まずは公式のプロンプトライブラリを参考に、独自のプロンプトを作成してみてはいかがでしょうか。
Claudeの新機能「Artifacts」とは
Anthropic社は、2024年8月28日に新機能「Artifacts」を無料ユーザーを含めた全ユーザーを対象に公開しました。Artifacts機能は、iOSアプリおよびAndroidアプリでも使用可能です。
ここからは、新機能「Artifacts」を2部に分けて紹介します。
- Artifacts機能の概要
- Artifacts機能の使い方
Artifacts機能の概要
Artifactsは、ユーザーとClaudeとの対話機能を拡張し、指示されたコンテンツをその場で表示させるための機能です。
Claudeをはじめとした対話型AIは、ユーザーとAIがチャット形式のやり取りで対話を行います。たとえば、プログラムのコードをAIに生成させた場合、コード自体は表示されます。しかし、生成されたコードが「実際どのように動くか」「どのように表示されるか」などは、ユーザーが実装して確認しなければなりません。
しかしArtifactsでは、ユーザーからコンテンツ生成の指示が出た場合、Claudeとの対話用ウインドウを2分割して、即座に画面上に生成物を表示させます。画面左側でAIとの対話を、画面右側で生成物の確認が可能です。
画像のように、生成したコードをもとに出力されるコンテンツをその場で確認できます。
生成をお願いしたのがコードならば、切り替えボタンで実際に生成されたコードの確認も可能です。
Artifacts機能の使い方
ここでは簡単に、Artifacts機能を使えるように簡単な使い方の説明をします。
まず、Claudeにログインしたら、画面左下のユーザーアイコンから「Setting」を選択してください。
次に、設定画面下部にある「Enable artifacts」のトグルボタンをオンにします。
Artifacts機能の設定は以上です。
Artifacts機能がオンになっていれば、AIが対話中にArtifacts機能が必要だと判断した際、自発的にArtifacts機能を使用してコンテンツを生成します。ユーザー側が「Artifacts機能を使用してください」と指示するのも有効です。
AIがArtifacts機能を使用すると判断しやすいコンテンツの種類は、次のとおりです。
- コード：任意のプログラミング言語のコードスニペットやスクリプト
- ドキュメント：プレーンテキストやMarkdown形式の文書
- HTML：単一ファイルのHTMLページ（JavaScriptとCSSを含む）
- SVG：スケーラブルベクターグラフィックス画像
- Mermaid図：フローチャートや図表
- Reactコンポーネント：インタラクティブなUIコンポーネント
初心者のためのClaudeAI超入門講座：Claudeの基本が網羅的に学べます。基本操作や設定、各種機能の解説
ChatGPTとの比較あり。ClaudeAIの基礎知識から基本操作、セキュリティ(個人情報/機密情報の扱い)までを網羅的に学ぶため、仕事でも安心してClaudeAIを活用できます。仕事の生産性UPに繋げましょう。
＼無料でプレビューをチェック！／
講座を見てみるプロンプト例「業務に使えるプレゼン資料の作成プロンプト」
ここからは、具体例を用いながらプロンプトを作る方法を紹介します。
今回作成したプロンプトは、プロンプトをClaudeに渡す際、スライド化してほしいドキュメントなどの資料を添付した状態で渡せば、要点をまとめてスライドを作成してくれるものです。
作成したプロンプトは次のとおりです。
https://claude.site/artifacts/c50b1924-5908-4f79-b70a-081e575fd670
Artifactsは生成したコンテンツを即座に表示できる特徴があります。そのため、対話を続けながら、変更したい部分を指示して改良していきます。
まずはおおまかでよいので、何をしたいかClaudeに伝えます。
完成した資料は次のとおりです。説明内容はある程度まとまっていますが、スライドではありません。
https://claude.site/artifacts/a74bd9c5-41b1-4efa-869e-2593f0e762e4
初期段階で追加の指示を出す際は、可能な限りわかりやすくかつ「おおまかな指示」で行うのがポイントです。
指示を追加するたびに、右側に生成されるコンテンツは指示内容を反映し、「随時変更」されていきます。このコンテンツが指示するたびに生成される機能が、Artifactsの特徴でありメリットです。
https://claude.site/artifacts/2c4f3ece-6d6d-4231-9a84-e4fe1fdc1a9f
おおまかな部分を固めたら、少しずつ詳細を詰めていき、プロンプトを完成させていきます。
納得できるコンテンツを生成できるようになったら、プロンプトとして出力させます。
次に、「Projects」機能（ドキュメントやPDFを追加資料として利用できる機能）を用いて、出力したファイルを参照ファイルとして扱っています。
以上で、業務に使えるプレゼン資料の作成プロンプトは完成です。
このプロンプトを用いて作成したスライド例は、次のとおりです。
https://claude.site/artifacts/0dc74249-330c-4875-9832-e6c95dc480ea
スライドにしてもらうドキュメントで表示する内容は、下の画像のようにClaudeに作らせたものです。
プロンプト例「売上データ可視化ダッシュボード作成プロンプト」
ここからは、更に高度なプロンプトの例を紹介します。
Claude公式では、XMLタグを用いたプロンプト作成を推奨しています。
XMLタグとは、コンピュータが文章の構造を理解しやすいようにするためのマークアップ言語と呼ばれるものです。記述形式がわかりやすいため、ユーザーも視認しやすい特徴があります。
XMLタグはプログラミングの概念が必要となるため、難易度は少し高くなります。しかし、XMLタグを活用することで、より高品質の出力を期待できるためおすすめです。
プロンプト例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<prompt> <task> <title>高度なReactダッシュボードの作成</title> <description>企業の売上データを視覚化する洗練されたダッシュボードをReactで構築してください。</description> </task> <requirements> <ui_components> <component> <name>月次売上グラフ</name> <type>棒グラフ</type> <library>recharts</library> </component> <component> <name>主要指標カード</name> <type>情報カード</type> <library>shadcn/ui</library> <metrics> <metric>総売上</metric> <metric>平均注文額</metric> <metric>顧客数</metric> </metrics> </component> <component> <name>カテゴリー別売上グラフ</name> <type>パイチャート</type> <library>recharts</library> </component> </ui_components> <data> <source>添付したドキュメントファイルに記載された各種データ</source> <types> <type>月次売上データ</type> <type>カテゴリー別売上データ</type> <type>集計指標</type> </types> </data> <design> <aspect>レスポンシブレイアウト</aspect> <grid_system>Flexbox or CSS Grid</grid_system> </design> <performance> <optimization>メモ化を使用したレンダリング最適化</optimization> </performance> </requirements> <coding_standards> <standard>適切なコメントを含める</standard> <standard>ESLintの推奨規則に従う</standard> <standard>関数コンポーネントとHooksを使用</standard> </coding_standards> <output_format> <artifact> <type>application/vnd.ant.react</type> <identifier>advanced-sales-dashboard</identifier> <title>高度な売上ダッシュボードReactコンポーネント</title> </artifact> </output_format> <additional_instructions> <instruction>コードの主要部分には説明コメントを付けてください</instruction> <instruction>使用したライブラリとバージョンを明記してください</instruction> <instruction>潜在的な改善点や拡張可能性についても言及してください</instruction> </additional_instructions> </prompt> |
このように、各項目をXMLタグで囲うことで、項目内容を明確に定義させることができ、AIは理解しやすくなります。
上記プロンプトを用いて作成した売上データのダッシュボードは次のとおりです。
例として作成した生成物は、実際に収集したデータではなく、仮想データをAIに生成させています。
https://claude.site/artifacts/377579ef-01aa-4485-a956-d45896da7d36
ユーザーが作成したプロンプト例3選
ここからは、実際にユーザーの方たちがClaudeのArtifacts機能を使って作成したプロンプトを3つ紹介します。
- 料理お手伝いプロンプト
- 旅行ガイド作成プロンプト
- フィットネス計画作成プロンプト
各項目には、プロンプト文をすべて記載しています。すべてコピーしてドキュメントとして保存し、Claudeに指示を出す際に添付資料として提示してお使いください。
料理お手伝いプロンプト
次のプロンプトは、作りたい料理を伝えると、料理レシピと調理手順を教えてくれるプロンプトです。
指示を出す際は、「エビチリが作りたい」という簡単な文章で問題ありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
# レシピ表示プロンプトドキュメント ## 概要 このプロンプトは、料理レシピを構造化されたXML形式で表現し、それをHTMLとCSSを使用して視覚的に魅力的な形式で表示するためのものです。 ## 構造 ### XML構造 レシピの基本情報はXML形式で構造化されています： ```xml <recipe> <name>レシピ名</name> <servings>何人分</servings> <ingredients> <item> <name>材料名</name> <amount>分量</amount> </item> ... </ingredients> <instructions> <step> <number>手順番号</number> <description>手順の説明</description> </step> ... </instructions> <cookingTime> <prep>下準備時間</prep> <cook>調理時間</cook> <total>合計時間</total> </cookingTime> </recipe> ``` ### HTML構造 XMLデータは以下のような構造のHTMLに変換されます： ```html <!DOCTYPE html> <html lang="ja"> <head> <!-- メタ情報とスタイル --> </head> <body> <h1>レシピ名</h1> <div class="recipe-info"> <!-- 分量と調理時間 --> </div> <div class="ingredients"> <!-- 材料リスト --> </div> <div class="instructions"> <!-- 調理手順 --> </div> </body> </html> ``` ## 使用方法 1. XMLデータの準備： - レシピの情報をXML形式で構造化します。 - 各要素（名前、材料、手順など）を適切なタグで囲みます。 2. HTML/CSSの生成： - 準備したXMLデータを基に、HTML構造を作成します。 - CSSを使用して、レイアウトやスタイルを定義します。 3. カスタマイズ： - レシピの内容に応じて、XML構造を修正します。 - 必要に応じて、HTML構造やCSSスタイルを調整します。 ## カスタマイズのヒント - 色やフォント：CSSの`color`、`font-family`、`font-size`プロパティを変更して、見た目をカスタマイズできます。 - レイアウト：`margin`、`padding`、`display`プロパティを調整して、要素の配置を変更できます。 - 追加情報：必要に応じて、栄養情報や調理のコツなどの新しいセクションを追加できます。 ## 注意点 - レスポンシブデザイン：様々な画面サイズに対応するために、メディアクエリの使用を検討してください。 - アクセシビリティ：適切な見出し構造や代替テキストを使用して、アクセシビリティを確保してください。 - コンテンツの一貫性：異なるレシピ間で構造とスタイルの一貫性を保つようにしてください。 |
このプロンプトを使用することで、構造化されたデータを視覚的に魅力的なレシピ表示に変換できます。必要に応じてカスタマイズし、様々なレシピや料理のスタイルに適応させることができます。
旅行ガイド作成プロンプト
次のプロンプトは、行きたい場所を伝えると、旅行ガイドを作成してくれるプロンプトです。
指示を出す際は、「東京の旅行ガイドを作って」という簡単な文章で問題ありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
# 旅行ガイド表示プロンプトドキュメント ## 概要 このプロンプトは、旅行ガイド情報を構造化されたXML形式で表現し、それをHTMLとCSSを使用して視覚的に魅力的な形式で表示するためのものです。 ## 構造 ### XML構造 旅行ガイドの基本情報はXML形式で構造化されています： ```xml <travel-guide> <destination> <name>目的地名</name> <country>国名</country> <description>目的地の説明</description> </destination> <highlights> <attraction> <name>観光スポット名</name> <description>観光スポットの説明</description> <best-time-to-visit>最適な訪問時期</best-time-to-visit> </attraction> ... </highlights> <practical-info> <best-season-to-visit>おすすめの訪問シーズン</best-season-to-visit> <transportation> <option> <name>交通手段名</name> <description>交通手段の説明</description> </option> ... </transportation> <local-cuisine> <dish> <name>料理名</name> <description>料理の説明</description> </dish> ... </local-cuisine> </practical-info> <tips> <tip>旅行のコツ</tip> ... </tips> </travel-guide> ``` ### HTML構造 XMLデータは以下のような構造のHTMLに変換されます： ```html <!DOCTYPE html> <html lang="ja"> <head> <!-- メタ情報とスタイル --> </head> <body> <div class="container"> <h1>目的地名</h1> <section id="overview"> <!-- 概要 --> </section> <section id="highlights"> <!-- 見どころ --> </section> <section id="practical-info"> <!-- 実用情報 --> </section> <section id="tips"> <!-- 旅行のコツ --> </section> </div> </body> </html> ``` ## 使用方法 1. XMLデータの準備： - 旅行ガイドの情報をXML形式で構造化します。 - 各要素（目的地、見どころ、実用情報など）を適切なタグで囲みます。 2. HTML/CSSの生成： - 準備したXMLデータを基に、HTML構造を作成します。 - CSSを使用して、レイアウトやスタイルを定義します。 3. カスタマイズ： - 目的地の特徴に応じて、XML構造を修正します。 - 必要に応じて、HTML構造やCSSスタイルを調整します。 ## カスタマイズのヒント - 色彩設計：目的地のイメージに合わせて、カラースキームを調整できます。 - セクションの追加/削除：目的地の特徴に応じて、セクションを追加または削除できます（例：歴史、文化、アクティビティなど）。 - レイアウト：グリッドレイアウトやフレックスボックスを使用して、より複雑なレイアウトを作成できます。 - インタラクティブ要素：JavaScriptを追加して、地図の表示や画像ギャラリーなどのインタラクティブ要素を実装できます。 ## 注意点 - レスポンシブデザイン：様々な画面サイズに対応するために、メディアクエリを使用してください。 - アクセシビリティ：適切な見出し構造や代替テキストを使用して、アクセシビリティを確保してください。 - コンテンツの正確性：旅行情報は定期的に更新し、最新の状態を保つようにしてください。 - ローカライゼーション：必要に応じて、多言語対応を考慮してください。 |
このプロンプトを使用することで、構造化された旅行ガイドデータを視覚的に魅力的な形式で表示できます。目的地や旅行スタイルに合わせてカスタマイズし、ユーザーにとって有用な旅行情報を提供することができます。
フィットネス計画作成プロンプト
次のプロンプトは、運動したい日数やダイエットを考えているなど、フィットネス&ダイエットに関する希望を伝えると計画を立ててくれるプロンプトです。
指示を出す際は、「1週間のうち3日運動する計画を立てたい」という簡単な文章で問題ありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 |
# 健康・フィットネスガイドHTMLプロンプトドキュメント ## 概要 このプロンプトは、健康的なライフスタイルのためのガイドをHTML形式で提供します。視覚的に魅力的でユーザーフレンドリーなデザインを採用し、レスポンシブな表示を実現しています。 ## 構造 ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>健康的なライフスタイルのためのガイド</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f0f4f8; } .container { background-color: #ffffff; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); padding: 30px; } h1, h2, h3 { color: #2c3e50; } h1 { border-bottom: 2px solid #3498db; padding-bottom: 10px; } .section { margin-bottom: 30px; padding: 20px; background-color: #ecf0f1; border-radius: 8px; } .exercise-day, .guideline, .snack, .tip { background-color: #ffffff; border-left: 4px solid #3498db; margin-bottom: 15px; padding: 15px; border-radius: 0 8px 8px 0; } .exercise-day h3, .guideline h3, .snack h3, .tip h3 { margin-top: 0; color: #3498db; } .disclaimer { font-style: italic; background-color: #e74c3c; color: white; padding: 15px; border-radius: 8px; margin-top: 30px; } @media (max-width: 600px) { body { padding: 10px; } .container { padding: 15px; } } </style> </head> <body> <div class="container"> <h1>健康的なライフスタイルのためのガイド</h1> <div class="section"> <p>このガイドは、日々の生活の中で健康を維持し、フィットネスを向上させるための実践的なアドバイスを提供します。バランスの取れた食事、適切な運動、そして良質な睡眠の重要性に焦点を当てています。</p> </div> <div class="section"> <h2>週間運動計画</h2> <p>効果的な結果を得るためには、有酸素運動と筋力トレーニングを組み合わせることが重要です。以下は、一般的な成人向けの週間運動計画の例です。</p> <div class="exercise-day"> <h3>月曜日</h3> <p><strong>有酸素運動:</strong> 30分のジョギングまたは速歩</p> </div> <div class="exercise-day"> <h3>火曜日</h3> <p><strong>筋力トレーニング:</strong> 上半身の筋力トレーニング（腕立て伏せ、腹筋など）</p> </div> <div class="exercise-day"> <h3>水曜日</h3> <p><strong>休息日:</strong> 軽いストレッチや散歩</p> </div> <div class="exercise-day"> <h3>木曜日</h3> <p><strong>有酸素運動:</strong> 45分の自転車運動またはスイミング</p> </div> <div class="exercise-day"> <h3>金曜日</h3> <p><strong>筋力トレーニング:</strong> 下半身の筋力トレーニング（スクワット、ランジなど）</p> </div> <div class="exercise-day"> <h3>土曜日</h3> <p><strong>有酸素運動:</strong> 1時間のハイキングまたはダンス</p> </div> <div class="exercise-day"> <h3>日曜日</h3> <p><strong>休息日:</strong> 軽いヨガまたは瞑想</p> </div> </div> <div class="section"> <h2>バランスの取れた食事のガイドライン</h2> <p>健康的な食生活は、適切な栄養摂取と体重管理の鍵です。以下のガイドラインを参考にしてください。</p> <div class="guideline"> <h3>バランスの取れた食事プレート</h3> <p>食事の半分を野菜と果物、1/4を全粒穀物、1/4をたんぱく質源で構成します。</p> </div> <div class="guideline"> <h3>水分摂取</h3> <p>1日に少なくとも8杯（約2リットル）の水を飲むようにしましょう。</p> </div> <div class="guideline"> <h3>食事の頻度</h3> <p>1日3回の主要な食事と、必要に応じて1-2回の軽食を取ります。</p> </div> <h3>健康的なスナックのアイデア</h3> <div class="snack"> <h3>ギリシャヨーグルトとベリー</h3> <p><strong>栄養価:</strong> たんぱく質、抗酸化物質、プロバイオティクス</p> </div> <div class="snack"> <h3>アーモンドとリンゴのスライス</h3> <p><strong>栄養価:</strong> 健康的な脂肪、食物繊維、ビタミン</p> </div> <div class="snack"> <h3>ニンジンスティックとフムス</h3> <p><strong>栄養価:</strong> ビタミンA、食物繊維、たんぱく質</p> </div> </div> <div class="section"> <h2>健康的な生活習慣のヒント</h2> <div class="tip"> <h3>十分な睡眠</h3> <p>毎晩7-9時間の質の良い睡眠を取ることで、身体の回復を促進し、ストレスを軽減します。</p> </div> <div class="tip"> <h3>ストレス管理</h3> <p>瞑想、深呼吸、または趣味の活動を通じて、日々のストレスを管理します。</p> </div> <div class="tip"> <h3>定期的な健康診断</h3> <p>年に1回は健康診断を受け、潜在的な健康問題を早期に発見し予防します。</p> </div> </div> <div class="disclaimer"> <p><strong>免責事項:</strong> このガイドは一般的な情報提供を目的としています。個別の健康アドバイスについては、必ず医療専門家にご相談ください。</p> </div> </div> </body> </html> ``` ### HTML構成 - `<!DOCTYPE html>`: HTML5文書の宣言 - `<html lang="ja">`: 日本語コンテンツの指定 - `<head>`: メタ情報とスタイルシートを含む - `<body>`: ページの主要コンテンツ ### 主要セクション 1. タイトル 2. 概要 3. 週間運動計画 4. バランスの取れた食事のガイドライン 5. 健康的な生活習慣のヒント 6. 免責事項 ## スタイリング ### CSSの特徴 - レスポンシブデザイン: `@media` クエリによる調整 - カラースキーム: 青（`#3498db`）と白を基調とした配色 - フォント: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif - レイアウト: 最大幅800pxのセンタリングレイアウト - セクションの視覚的区分: 背景色とボーダーの使用 ### 主要なCSSクラス - `.container`: メインコンテンツのコンテナ - `.section`: 各主要セクションのスタイリング - `.exercise-day`, `.guideline`, `.snack`, `.tip`: 個別の項目のスタイリング - `.disclaimer`: 免責事項のスタイリング ## コンテンツのカスタマイズ ### 1. タイトルと概要 `<h1>` タグ内のテキストとその下の `<p>` タグ内の説明文を変更して、ガイドの目的を設定します。 ### 2. 週間運動計画 `.exercise-day` クラスを持つ `<div>` 要素を編集し、各曜日の運動内容をカスタマイズします。 ### 3. 食事ガイドライン `.guideline` と `.snack` クラスを持つ要素を編集し、食事に関するアドバイスと健康的なスナックの提案を更新します。 ### 4. 生活習慣のヒント `.tip` クラスを持つ要素を編集し、睡眠、ストレス管理、健康診断に関するアドバイスをカスタマイズします。 ### 5. 免責事項 `.disclaimer` クラス内の文言を必要に応じて調整します。 ## 使用方法 1. HTMLファイルを作成し、提供されたコードを貼り付けます。 2. コンテンツセクションを目的に合わせて編集します。 3. 必要に応じてCSSスタイルを調整し、見た目をカスタマイズします。 4. ウェブサーバーにアップロードするか、ローカルで開いてプレビューします。 ## カスタマイズのヒント 1. 色彩の変更: CSSの色コードを変更して、全体の配色を調整できます。 2. フォントの変更: `font-family` プロパティを編集して、異なるフォントを使用できます。 3. セクションの追加/削除: `.section` クラスを持つ新しい `<div>` を追加または削除して、コンテンツを調整できます。 4. レスポンシブデザインの調整: `@media` クエリ内の値を変更して、異なる画面サイズへの対応を最適化できます。 ## 注意点 1. アクセシビリティ: 適切な見出し構造や色のコントラストを維持し、すべてのユーザーが情報にアクセスしやすいようにします。 2. コンテンツの正確性: 健康・フィットネス情報は最新かつ正確であることを確認し、定期的に更新します。 3. 法的考慮: 免責事項を含め、提供する情報に関する法的責任を明確にします。 |
このプロンプトを使用することで、視覚的に魅力的で情報豊富な健康・フィットネスガイドを簡単に作成できます。目的や対象者に合わせてコンテンツをカスタマイズし、効果的な情報発信ツールとして活用できます。
Artifactsを活用したプロンプトを作るには
Artifactsを活用してプロンプトを作成する際は、AIと対話しながら作り上げていくだけでなく、次の機能を利用することで、さらに高度なプロンプトの作成を目指せます。
- 関連資料の読み込み
- プロンプトジェネレータの使用
これまで紹介してきたプロンプト例のうちいくつかは、「Projects」機能を用いてプロンプトファイルを読み込ませています。
「Projects」機能では、ドキュメントファイルやPDFファイルを読み込ませることができ、AIは読み込まれている資料を情報源として参照しつつ、回答を出力することが可能です。
この機能を用いることで、より専門的かつ限定的な回答をするプロンプトが作成できます。
また、プロンプトジェネレータ機能を使用し、特定のタスクに合わせた高品質のプロンプトテンプレートを生成するように、Claudeへ指示を出すことも可能です。
これらの機能すべてを活用することで、Artifactsで出力結果を見ながら、より高度なプロンプトを作り上げていけます。
まとめ
ClaudeのArtifacts機能は、出力と生成物の目視での確認が同時に行えるようになり、より作業効率が向上しました。
Claudeの使い方やArtifacts機能などはまだ公開されてから日も浅く、体系的にまとめられた情報を探したい場合、公式サイトを見るのがおすすめですが、英語表記という難点があります。
しかし、多くのユーザーが日々情報発信をしているため、新しい情報のキャッチアップを怠らず、トライアンドエラーを繰り返しながら学んでいくのがおすすめです。
ただ、日々情報発信を追いかけるのは時間がかかり過ぎると感じる方や、本当に正しい情報か判断に困り、不安になる人もいるのではないでしょうか。
そこでおすすめなのが、体系的に作られた学習教材です。理解しやすいようにまとめられていて、挫折せず継続して学習を続けられます。
Udemyでは、買い切り型の講座が20万講座以上もあるオンライン学習プラットフォームです。現場で活躍するプロの講師から、動画でわかりやすく学ぶことができます。今話題のClaudeやArtifacts機能を体系的に学べる講座で使い方をマスターして、仕事でも安心してClaudeAIを活用できる人材になりませんか。
下記講座のレビューを一部紹介
評価：★★★★★
ChatGPTとClaudeの違いに興味があったので受講しました。Claudeの基本的なことが網羅的に解説されていて、ChatGPTとの違いも分かり満足です。
評価：★★★★★
ChatGPTを使っていて、Claudeも話題なので受講しました。説明が分かりやすくてClaudeも使ってみようと思いました。
RANKING
RECOMMENDED COURSE
最新情報・キャンペーン情報発信中