OpenDesign

交通拠点の案内システムを題材に、卒業制作の課題・制作過程・成果をHTMLスライドへ整理。付箋風のデザインで、審査員に貢献と根拠を伝える発表資料を作ります。

• 卒業制作の審査発表を準備したいとき
• 案内システムの制作過程を伝えたいとき
• 制作の根拠と限界を整理したいとき

顧客や利用単位の採算と、利用者がAPIキーを持ち込むBYOKのコスト構造を説明するHTMLスライドを作ります。前提条件や条件変化の影響を、暖色の統一デザインで伝えます。

• CFO向けに採算モデルを説明したいとき
• 投資家向けにBYOKの費用を示したいとき
• 前提条件の変化と費用の関係を示す資料

GitHubの直近24時間のPR、レビュー依頼、Issue、CI実行、マージを集約し、要確認事項を通知画面風の日次レポートに整理するスキル。

• 直近24時間のGitHub活動を振り返りたいとき
• レビュー依頼の確認
• CIの失敗を把握したいとき

GitHub・Discord・Xでのコミュニティ拡大施策を、投稿計画や成長につながる数値とともに整理し、コーラル色を使ったHTMLスライドにまとめるスキル。

• コミュニティ拡大計画の提案
• GitHub・Discord・Xの投稿計画
• 成長の仕組みと数値を説明したいとき

フィードやプロフィール、決済など6種類の画面構成を使い、iPhone 15 Proの端末枠に収めたアプリ画面をHTMLで作成するスキル。

• フィードやメッセージ一覧の試作
• プロフィールや商品詳細の検討
• 決済画面や歓迎画面の提示

製品発表の見出し・根拠・行動喚起を整理し、報道関係者や見込み客向けのHTMLスライドに仕立てるスキル。暗い背景とオレンジの差し色で構成します。

• 報道向けの製品発表資料制作
• コミュニティへの新製品紹介
• 見込み客向けの訴求と根拠の整理

Web画面のコードをVercelのガイドラインに照らして点検し、レイアウト・文字・色・動き・アクセシビリティの指摘を、ファイル名と行番号で示します。

• プロダクトのUIコードを点検したいとき
• ガイドラインで利用しやすさを確認したいとき
• 配置・文字・色・動きを点検したいとき

年間の読書時間や読了冊数、メモ、関心キーワードを、紙の質感と本をめくる演出でまとめ、共有用の縦長動画に仕立てるHTMLテンプレートです。

• 年間の読書実績を動画にしたいとき
• 読書メモと関心分野の振り返り
• 読書会の一年間の記録共有

病院の患者データ管理について、リスク、管理体制、責任分担、承認事項を整理し、理事会や規制当局への説明に使う発表者ノート付きのHTMLスライドを作成します。

• 患者データのリスクを理事会に説明したいとき
• 規制当局向けに管理体制を整理したいとき
• データ管理方針の承認資料を作りたいとき

指定したテーマの長文記事を執筆し、見出しや図版用の枠、引用、著者紹介、関連記事を備えた、雑誌のように読みやすい単一のHTMLページに仕上げます。

• 長文ブログの記事ページ試作
• 図版や引用を含む事例紹介
• 既存デザインに沿った記事画面設計

HTMLのページやスライドを五つの観点で根拠付き採点し、レーダーチャートと、残す点・修正点・短時間で直せる点を一つのHTMLレポートにまとめます。

• 納品前のLPのデザイン確認
• HTMLスライドの視認性と操作確認
• 二つのデザイン案の比較

恋愛・マッチングサービスやコミュニティの数値を、主要指標とグラフで見せるデスクトップ向け画面を、落ち着いた誌面風の単一HTMLに仕上げるスキル。

• 恋愛サービスの管理画面を試作したいとき
• コミュニティ活動の一覧画面
• 相互マッチ数とマッチ率の推移表示

文章やデータを、Hyperframes / Remotion向けの連続フレームアニメーションにまとめます。自動再生や手動操作、描画用のメタデータを備えます。

• 短い台本をアニメーションにしたいとき
• データを場面ごとに説明したいとき
• Remotion用の描画素材の準備

YouTube動画の取得から見どころの切り抜き、字幕の追加、書き出しまでを自動化されたワークフローで進め、ハイライト動画の作成・編集を支えるスキル。

• YouTube動画の見どころを切り抜きたいとき
• 字幕付きのクリップを作りたいとき
• ハイライト動画の作成

企業のAI導入を検討するためのHTMLスライドを、暗紫色のグラデーションを使って作ります。経営層やIT・セキュリティ担当者に向け、リスク管理や投資対効果、展開計画を整理します。

• 経営層へAI導入案を説明したいとき
• IT部門とリスク管理を検討
• 投資対効果と展開計画の整理

既存サイトのソースやブラウザ上の動作を調べ、見た目と操作をローカルで再現する手順を提供。素材収集から実装、元サイトとの比較検証、内容の差し替えまで進めます。

• 既存サイトをローカルで再現して学びたいとき
• WebGLやCanvasの演出を調べたいとき
• 再現したサイトと元サイトを比較したいとき

新商品の魅力を伝えるHTMLメールを作成します。ブランドロゴ、商品ビジュアル、見出し、仕様一覧、行動を促すボタンを、中央配置の一列レイアウトにまとめます。

• 新商品の発売告知メールを作りたいとき
• ブランドのニュースレター制作
• 商品の仕様をメールで紹介したいとき

サービスの概要、アラートの初動、実行用コマンド、当番表、障害対応チェックリストを1ページのHTMLに整理し、運用手順書を作成するスキル。

• サービスの運用手順書を作りたいとき
• アラートの初動対応を整理したいとき
• デプロイと復旧手順の文書化

短い宣伝用音楽やBGM、ナレーション、効果音の内容を整理し、用途に合う音声生成モデルへ依頼して、MP3／WAVファイルをプロジェクトに保存するスキル。

• 開店告知用の短いジングル制作
• 楽器を指定したBGM生成
• 確定原稿のナレーション化

スター数、インストール数、利用開始などの週次指標を、変化の要因と次の施策につなげ、成長施策や製品の検討会で意思決定に使うHTMLスライドにまとめます。

• 週次の成長レビュー資料を作りたいとき
• KPIの変化と要因を議論したいとき
• 製品の次の施策を提案したいとき

個人の体験や信条を、聞き手に伝わる物語形式のHTMLスライドにまとめるスキル。パステル調のテンプレートを使い、構成から発表者用ノートまで整えます。

• 自分の信条を伝える登壇資料の作成
• 1年の体験を物語にまとめたいとき
• パステル調のHTMLスライドの作成

上場企業の財務データから将来のキャッシュフローを予測し、DCF法で1株当たりの本源的価値を算出。計算の前提や感度分析を含む評価レポートにまとめます。

• 上場企業の適正株価を見積もりたいとき
• 現在の株価と推定価値の比較
• 前提条件による評価額の変化の確認

OpenDesignの内部構造を題材に、技術発表用のHTMLスライドを作成。構成や根拠、発表者ノートを整理し、エンジニア向けの説明資料に仕上げるスキル。

• OpenDesignの内部構造の技術解説
• 開発者コミュニティ向けの発表準備
• 根拠に基づくAI実装の説明資料作成

趣味の収集体験やゲームの話題を、濃紺とネオンのピクセルアート調で伝えるHTMLスライドにまとめ、友人や趣味仲間に見せる物語として整えるスキル。

• レトロなアーケード機の収集記録紹介
• 友人に趣味の歩みを伝えたいとき
• ゲーム仲間向けの発表資料作成