見出し画像

「コピペで使えるAIプロンプト公開」　記事生成やってみました

じぇんなむ

こんにちは、noteデビューしましたじぇんなむです。
まず本記事を見ていただきありがとうございます！
僕については、プロフィールを見ていただけたらと思いますが、生成AIでプロンプト書いたり、ツール作ることにハマりまくっているデザイナーです。

本記事は、前置きとか概念的な話はしないです。
僕が使いやすいなと思ったプロンプトをコピペできる形で紹介するので、
何ができるかサラッと見て気になったらChatGPTとかにコピペして使ってみてください。

色々とプロンプトの記述形式あると思うんですが、個人的に7Rの形式が一番使いやすいと思っています。
※7Rは僕が定義した型ではありません。SHIFT AIの講義で教えてもらったものです。

7Rの形式って何？

以下の7つのRの記述形式に沿ってプロンプト作成する型のようなものですね。

  1. #request （要求）

    1. 何をしてほしいか書きます。

    2. 例：デザインシステムに関する記事作成の企画案を提案してください

  2. #role （役割）

    1. AIに役割を指定します。

    2. 例：あなたは経験豊富なUI/UXデザイナー兼コピーライターです。

  3. #regulation （規則）

    1. どんな形式の出力結果がほしいかを指定します。

    2. 例：魅力的な記事タイトルと本文のアウトラインを箇条書きで提案してください。

  4. #rule （ルール）

    1. そのままですが、出力結果にルールを指定します。

    2. 例：1,000文字を上限に実現可能な記事案を出してください

  5. #review &refine（レビューと修正）

    1. レビューの観点を指定して、AI自身に内容に対する評価と修正を実行させます。

    2. 例：非デザイナーでも理解できるように専門用語や難しい言葉は使わない。もし使う場合は補足の説明をいれる

  6. #reference （参照または引用など）

    1. 根拠を示すように指定します。

    2. 例：デザインシステムに関する最新の事例や具体的なデータを含めて

  7.  # Run Scenario（実行シナリオ）

    1. どのような流れで実行プロセスを進めるか指定します。

    2. 例：1回目の出力を行い、ユーザー（※自分のこと）にフィードバックを聞く

Chat GPTに企画の提案から記事作成までをやってもらう

7Rの記述形式に沿ってAIが作ってくれたのが以下の記事です。
使用したプロンプトは記事の後に貼っておきます。

‐‐-

デザインシステム整備による確かな生産性向上について

1. はじめに

デザインシステムは、デジタルプロダクトの一貫性を保ちつつ、デザイン・開発プロセスを効率化するための重要な仕組みです。この記事では、デザインシステムの整備が生産性向上にどのように寄与するのか、具体的な事例やデータを交えて解説します。

2. デザインシステムとは？

デザインシステムとは、コンポーネント、スタイルガイド、UIパターンなどを体系的に管理する仕組みです。これにより、デザイナーとエンジニアが一貫したデザインを作成しやすくなります。

主な要素:

  • コンポーネントライブラリ（ボタン、フォーム、ナビゲーションなど）

  • スタイルガイド（タイポグラフィ、カラー、アイコンセット）

  • デザイン原則（アクセシビリティ、レスポンシブデザインなど）

3. デザインシステム導入による生産性向上の具体例

3-1. Airbnbのデザインシステム「DLS」

Airbnbは2016年に「DLS（Design Language System）」を導入し、デザインの一貫性を強化しました。

  • 成果：「コンポーネントの一貫性が向上し、デザイナーとエンジニアの連携がスムーズになった」（参考：Airbnb Design Blog）

  • 具体的な生産性向上：デザイン修正の時間が短縮され、開発スピードが向上

3-2. Shopifyのデザインシステム「Polaris」

Shopifyは「Polaris」を導入し、社内外のデザイナーや開発者が統一されたUIを作成できる環境を整備しました。

  • 成果：「デザインの一貫性が確保され、エンジニアの開発時間が短縮」（参考：Shopify UX Blog）

  • 具体的な生産性向上：デザインの再利用が可能になり、プロダクトのデプロイが迅速化

4. デザインシステムが生産性を向上させる3つの理由

4-1. コンポーネントの再利用 → デザイン作業の短縮

  • 根拠：「デザインシステムを導入すると、UI設計の時間を最大50%短縮できる」（Google Material Designチーム）

  • 実際の効果：ボタン、フォーム、アイコンなどの再利用により、デザイン作成・修正のコストが削減

4-2. 開発プロセスの最適化 → エンジニアの実装時間の削減

  • 根拠：「デザインシステムを活用すると、エンジニアのデザイン確認・調整時間が30〜40%短縮」（参考：InVision Design Systems Handbook）

  • 実際の効果：統一されたデザインガイドラインとコンポーネントライブラリにより、デザインとコードの不整合を削減

4-3. デザインの一貫性維持 → 修正・更新が容易に

  • 根拠：「デザインシステムの導入により、デザインの一貫性を維持しやすくなる」（Salesforce Lightning Design System）

  • 実際の効果：統一されたコンポーネントを使用することで、変更時に一括修正が可能となり、運用負荷が軽減

5. まとめ

デザインシステムの整備により、デザインの一貫性が向上し、開発プロセスが効率化されることで、確実な生産性向上が実現できます。

ポイントまとめ:
✅ デザインシステムを導入すると、デザイン・開発工数を大幅に削減できる
✅ 一貫性のあるデザインで、ユーザー体験の品質向上が可能
✅ 修正や更新が容易になり、長期的な運用コストを削減できる

デザインシステムの導入・整備を進めることで、より効率的でスケーラブルなプロダクト開発が実現できます。

‐‐‐
今回、かなり簡易的な指定をしているのでサラッとした内容ではありますが、他社事例や具体的なデータがあるので説得力があるかなと思います。
記事作成の企画提案依頼をお願いしましたが、社内でデザインシステム整備を推進する提案書の草案とかにも使えそうですよね。

実際のプロンプト

最初に、若干カスタマイズしてますが7Rに形式に沿ってプロンプトを投げています。まずは企画案として、タイトルと記事のアウトラインを出力してもらいました。

＃request:
あなたは{＃role}です。次の{＃rule}を守り、{#regulation}に従って、noteの記事作成の企画案を提案してください。

＃role:
 あなたは経験豊富なUI/UXデザイナー兼コピーライターです。

＃regulation: 
魅力的な記事タイトルと本文のアウトラインを箇条書きで提案してください。

＃rule: 
記事のテーマは「デザインシステム整備における確かな生産性の向上について」
・{＃review&refine}の方法で評価し、出力に含めてください
・{＃reference}を例にして出力してください
・{＃run scenario}に従って私とやりとりしてください

＃review&refine: 
非デザイナーでも理解でき、デザインシステム整備に関して前向きに検討できるようになれるかを評価し、改善のための具体的な提案をしてください。

＃reference:
 デザインシステムに関する最新の事例や具体的なデータを参照して、記事の内容に根拠を持たせてください。

# Run Scenario（実行シナリオ）
1回目の出力を行い、ユーザーにフィードバックを聞く

こちらのプロンプトを実行したら以下の結果が返ってきました。

‐‐‐

企画案：デザインシステム整備における確かな生産性の向上について

記事タイトル案

1. 「デザインシステムが生産性を劇的に向上させる理由とは？」
2. 「非デザイナーでもわかる！デザインシステムがもたらす3つの生産性向上」
3. 「デザインの属人化を防げ！システム化がもたらす効率革命」

記事アウトライン

1. はじめに：デザインシステムとは？

• デザインシステムの定義と役割
• なぜ今、デザインシステムが必要なのか？

2. デザインシステム未整備のデメリット

• 一貫性の欠如 → 各プロダクトで異なるデザインが発生
• 生産性の低下 → デザイナー・エンジニアの作業負担が増加
• スケールしづらい → チームが拡大すると管理が困難

3. デザインシステム導入による生産性向上の具体例

• 事例1：Airbnbのデザインシステム「DLS」
→ UIコンポーネントの統一でデザイン・開発のスピード向上
• 事例2：Shopifyの「Polaris」
→ ガイドライン整備によるブランド統一とチーム間連携の強化

4. デザインシステムが生産性を向上させる3つの理由

1. コンポーネントの再利用 → デザイン作業の短縮
2. 開発プロセスの最適化 → エンジニアの実装時間の削減
3. デザインの一貫性維持 → 修正・更新が容易に

5. デザインシステム導入のステップ

• ステップ1：現状のデザインの課題を洗い出す
• ステップ2：コアコンポーネントとガイドラインを定義
• ステップ3：デザイナーとエンジニアで運用フローを確立

6. まとめと次のアクション

• デザインシステムの整備が企業の生産性向上につながる
• 小さく始めて徐々に拡張することが成功のカギ
• 経営層・開発チームと連携して導入を進めよう

#review &refine

• 非デザイナーでも理解できるか？
→ 用語の解説を追加し、図解・具体例を用いることで理解しやすくする
• デザインシステム整備を前向きに検討できるか？
→ 実際の企業の成功事例を交えて、メリットを明確にする
• 改善のための提案
→ 読者がすぐに実践できる「チェックリスト」や「簡易テンプレート」を追加
この構成で記事を書いた場合、読者がデザインシステムの重要性を理解し、導入を前向きに検討できるようになるはずです！
フィードバックをお願いします。

‐‐‐

アウトラインに違和感はないものの、具体例と生産性向上の理由に説得力が感じられなかったので以下をFeedbackしました。

アウトラインの３と４の具体的な根拠はありますか？

‐‐‐
アウトラインの3と4の具体的な根拠

3. デザインシステム導入による生産性向上の具体例 の根拠

① Airbnbのデザインシステム「DLS（Design Language System）」
• Airbnbは2016年に「DLS」を導入し、デザインの統一性を強化。
• 成果：「コンポーネントの一貫性が向上し、デザイナーとエンジニアの連携がスムーズになった」との報告。（参考：Airbnb Design Blog）
• 具体的な生産性向上：デザインの修正時間が短縮され、UIの一貫性が確保されたことで開発スピードが加速。

② Shopifyのデザインシステム「Polaris」
• Shopifyは「Polaris」を導入し、社内外のデザイナーや開発者が統一されたUIを作成できる環境を整備。
• 成果：「デザインの一貫性が確保され、エンジニアの開発時間が短縮された」と公式ブログで報告。（参考：Shopify UX Blog）
• 具体的な生産性向上：デザインの再利用が可能になり、プロダクトのデプロイが迅速化。

4. デザインシステムが生産性を向上させる3つの理由 の根拠

1. コンポーネントの再利用 → デザイン作業の短縮
• 根拠：「デザインシステムを導入すると、デザイナーがゼロからデザインを作成する必要がなくなるため、UI設計の時間を最大50%短縮できる」とGoogleのMaterial Designチームが報告。（参考：Material Design Blog）
• 実際の効果：ボタン、フォーム、アイコンなどの再利用により、デザインの作成・修正コストが削減。
2. 開発プロセスの最適化 → エンジニアの実装時間の削減
• 根拠：「デザインシステムを活用すると、エンジニアがデザイン仕様の確認や調整にかかる時間が30〜40%短縮される」とInVisionが調査。（参考：InVision Design Systems Handbook）
• 実際の効果：統一されたデザインガイドラインとコンポーネントライブラリにより、デザインとコードの不整合を減少。
3. デザインの一貫性維持 → 修正・更新が容易に
• 根拠：「デザインシステムの導入により、デザインの一貫性を維持しやすくなり、全社的なブランド統一が実現できる」とSalesforceが報告。（参考：Salesforce Lightning Design System）
• 実際の効果：統一されたコンポーネントを使用することで、変更が必要な際に一括修正が可能になり、運用負荷が軽減。

‐‐‐
具体的なデータや事例の詳細も追加され、説得力も増したかなと思うので、
こちらの根拠を含める形で最後記事作成を実行してもらいました。

根拠を含めて、記事の作成をお願いします。

これで先程の記事が作成されました。

プロンプトは構造化して記述することで、出力結果の精度が高くなる。

プロンプトを構造化して記述すると、出力結果の精度が高くなる理由は以下の通りです。

1. 明確な意図伝達

プロンプトが体系的に整理されていると、AIが指示の意図を正確に理解しやすくなります。
• 曖昧なプロンプト：「デザインシステムのメリットについて教えて」
• 構造化プロンプト：「デザインシステムの生産性向上に関するメリットを、実際の企業事例を交えて説明してください」
→ 構造化することで、回答の方向性が明確になります。

2. コンテキストの一貫性維持

構造化されたプロンプトでは、AIに与える情報の流れが整理され、コンテキストが一貫します。
例えば、以下のような構成を使うことで、AIは必要な情報を適切に組み立てやすくなります。

# Role（役割）: あなたはデザインシステムの専門家です。  
# Task（タスク）: デザインシステムが生産性を向上させる理由を解説してください。  
# Requirement（要件）: 具体的な企業事例とデータを含めてください。  
# Format（フォーマット）: 箇条書きで整理してください。

→ AIがどのような視点で回答すべきかを明確に理解できます。

3. 必要な情報の網羅性向上

構造化することで、回答に含めるべき情報が明示され、不足が生じにくくなります。
例えば、「デザインシステムの効果」に関する質問では、以下のように分解できます。
• 背景（なぜデザインシステムが必要なのか）
• メリット（具体的な効果）
• 実例（実際の企業事例）
• データ（数値的な根拠）
→ AIが適切な要素を考慮し、より網羅的な回答を出せるようになります。

4. 出力の一貫性と品質向上

プロンプトを体系化することで、同じ意図の質問でも再現性の高い回答が得られます。
特に、フォーマットを指定することで、回答の構造も整いやすくなります。

# 書き方の指定例:  
- イントロダクション（背景説明）  
- 具体的なデータ（企業事例・統計）  
- まとめ（結論・示唆）

→ これにより、回答のばらつきを減らし、品質の高い出力が得られます。

5. AIの処理負荷の軽減

曖昧なプロンプトでは、AIが意図を推測する必要があり、不要な処理が発生します。
構造化したプロンプトでは、必要な情報が明示されるため、AIが効率よく回答を生成できます。
→ より短時間で、精度の高い出力が得られるようになります。

結論

プロンプトを構造化することで、
✅ 明確な意図伝達
✅ コンテキストの一貫性維持
✅ 情報の網羅性向上
✅ 出力の一貫性と品質向上
✅ AIの処理負荷の軽減
といった効果が得られ、より高精度な出力が期待できます。

プロンプト設計の精度を上げることは、生成AIを活用する上で非常に重要なポイントです。

最後に

本記事は以上となります。読んでいただきありがとうございました！
検索くらいにしかAI使わないとか、プロンプト書いても思うような出力結果が出なくて悩んでる方が、本記事を見て少しでも学びがあれば嬉しいです。

はじめてのnoteだったので乱文だったかと思いますが、これからもデザインとAIの観点で何か役立つ情報やツール、プロンプトなどあれば発信していければと思いますので、よろしくお願いします👋

ちなみにこの記事作るのにかかった時間は30分程度ですw

いいなと思ったら応援しよう！