Communitygithub.com

事例ページ

プロジェクトのメモ、画像、資料、リンクを、事例ページと PDF と Markdown にする。結果は作らない。

事例ページ とは?

課題、洞察、アイデア、プロセス、作り、結果、クレジットを含むポートフォリオ事例を組む。同じ話を会社や職種向けに調整でき、レスポンシブなページ、PDF、Behance や Notion や LinkedIn 用の Markdown として出せる。結果も引用もでっち上げない。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/BeautifulEngine/case-study/tree/HEAD/case-study

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ケーススタディ

プロジェクトの生の素材(メモ、画像、デッキ、リンク、クライアントメール)を、その人の思考プロセスと、その仕事によって何が変わったかを示すケーススタディに変換します。1つのストーリー、3つの形式:Webページ、PDF、Markdown。

使用方法

/case-study <プロジェクト名> [for <企業名や職種>] [short | long]

画像、PDFデッキ、メモ、プレスリンク、結果など、存在するものを添付してください。プレーンなリクエストでも機能します。

  • 「Sphereパートナーシップローンチのケーススタディを書いて。メモと画像を添付します。」
  • 「このデッキをポートフォリオ用のケーススタディに変換して、短いバージョンで。」
  • 「私のアートカープロジェクトのケーススタディ。エクスペリエンシャルエージェンシーの職種を対象に。」
  • 「このケーススタディをNetflixのデザインリード応募用に書き直して。」(既存のものを添付)

長さ。 デフォルトは約600〜900語、6〜10枚の画像です。「short」はポートフォリオグリッドやLinkedIn投稿向けの150〜250語のカードです。「long」はデザインチーム向けにプロセスの詳細を追加します。

ユーザーだけが知っていることは一度だけ尋ねる

執筆前に収集するもの:ユーザーの役割と個人的に行ったこと(チームと区別して)、クレジットすべきチームメンバーと協力者、クライアントとそのクライアント名を記載してよいかどうか、結果(数値、プレス、受賞、引用)とその出典、NDA対象のもの。不足しているものがあれば、1つの短いメッセージで尋ね、その後は利用可能なもので続行し、ギャップは返信に記します。

ファイル。 <skill-dir> は現在のスキルフォルダ、つまりこのSKILL.mdが置かれているフォルダを意味します。テンプレートは assets/ に、スクリプトは scripts/ に、PDFの共有手順(フォント、色、レンダリング、チェック)は references/rendering.md にあります。

厳格なルール

  • 結果、引用、数値、クライアント、受賞を決して捏造しないこと。 ユーザーから提供されたもの、または公開ソースで確認したもの(出典を明記すること)のみを使用します。結果がない場合は、その仕事が何を可能にしたかについて書き、追加すべき内容を伝えます。
  • ユーザーの役割を明確に。 ユーザーが行ったことを述べ、他の人々は名前または役割でクレジットします。「私がリードした」は、ユーザーが実際にリードした場合にのみ使用します。
  • 機密を尊重する。 NDA対象または未公開のものは除外します。クライアント名を記載してよいか確信が持てない場合は尋ね、匿名バージョン(「あるグローバルスポーツ&エンターテイメント企業」)を提供します。
  • 画像はユーザーのもの。 ユーザーが提供した、または表示権利を所有する画像のみを使用します。各画像にaltテキストとキャプションを記述します。クライアントやブランドの画像をウェブからケーススタディに取得しないでください。
  • 思考プロセスを示す。 すべてのケーススタディは次の問いに答えます:問題は何だったか、何に気づいたか、何を決定しなぜか、何を作ったか、何が変わったか。
  • Beautiful Engineのクレジットやその他のサードパーティブランドは不要:ケーススタディはユーザーのものです。

ワークフロー

  1. 収集して読む:添付されたすべてのものを読みます。デッキやPDFの場合は、キーフレームを画像として抽出し(pdftoppm -r 110 -png deck.pdf frame)、最も強力なものを選びます。
  2. ストーリーを見つける:4文で:挑戦、洞察、アイデア、成果。これがデック(リード文)とセクションリードになります。
  3. 調整する(企業名や職種が指定された場合):相手のニーズに合う仕事の部分を前面に出し、正直に適合する場合は相手の語彙を使用し、それを証明する画像を選びます。会話内に対象企業の「企業概要」があれば、それを使用します。
  4. case-study.md を書く:タイトル、1行のデック、メタブロック(クライアント、役割、チーム、年、専門分野)、次に挑戦、洞察、アイデア、プロセス、クラフト、結果、クレジット。短い段落、画像配置とキャプション、プルクォートは実際の引用がある場合のみ。
  5. ページを構築する assets/case-study-template.html から:
    • 画像を隣の images/ にコピーします。
    • ユーザー自身のポートフォリオスタイルがある場合はそれに合わせて色とフォントを設定し(ユーザーのサイトを確認)、ない場合はニュートラルにして、作品自体に彩りを任せます。
    • PDF用:scripts/fonts.py でフォントをリンクし、references/rendering.md に従ってレンダリングします。
    • Web版用:index.html としてコピーを保存し、FONT LINKS を同一ファミリーのGoogle Fonts <link> に置き換えて、ホストされたときに機能するようにします。
  6. レンダリング、監査、チェック:PDFのコンタクトシートを確認し、ブラウザが利用可能な場合は電話幅でWebページを開きます。
  7. 提供する:PDF、Webフォルダ(index.html + images/ をzip圧縮)、および case-study.md。返信には、4文のストーリー、機密保持のために省略した内容、およびより強力にするための事実や数値を含めます。

出力名:<プロジェクト名>-Case-Study.pdf、<プロジェクト名>-Case-Study-web.zip、<プロジェクト名>-Case-Study.md。

関連スキル