OpenDesign

ピクセルアートのキャラクター、大きな年号、動く文字や年表を組み合わせ、歴史や豆知識を紹介する画面録画向けのアニメーション付きHTMLを作るスキル。

• 歴史解説の一場面を作りたいとき
• 豆知識をピクセルアートで伝えたいとき
• 画面録画用のレトロな動きを作りたいとき

画面構成を検討するための手描き風ワイヤーフレームをHTMLで作ります。方眼紙、付箋、ラフなグラフ、案を示すタブを使い、設計初期の考えを可視化します。

• ポータルやダッシュボードの初期構成を検討
• 複数案をタブラベルで示したいとき
• 画面の下書きにレビュー用の注釈を付ける

公開前の製品の先行登録ページを、ブランドの配色や書体に合わせて作成します。ロゴと製品紹介、メール登録フォームを一つのHTMLにまとめるスキル。

• 製品公開前のメール登録ページ作成
• ベータ版の参加者を募集したいとき
• 先行アクセスへの関心を集めたいとき

Notionの過去24時間の文書編集、コメント、メンション、データベースの行変更を集め、日々の更新を確認しやすいNotion形式のページにまとめます。

• 前日のNotion文書編集を確認したいとき
• コメントやメンションを日次で確認したいとき
• データベースの行変更をまとめて確認したいとき

ロゴ・配色・書体と運用ルールを伝えるブランド発表用のHTMLスライドを作成。クリーム色の背景と多彩なアクセントを保ち、顧客やチームの検討資料に整えます。

• アウトドアブランドのデザイン発表
• 制作会社の提案資料作成
• 顧客とのブランド案レビュー

ポスターや作品のメインビジュアル、記事用イラストを生成するスキル。構図・光・配色などの要望を整理し、PNGやJPEG画像としてプロジェクトに保存します。

• 映画祭のポスター作成
• 作品のメインビジュアル制作
• 記事用イラストの生成

四半期の事業進捗・停滞・資源の再配分案を、経営会議の判断につながるHTMLスライドに整理。クリーム色とコバルトブルーの統一されたデザインで仕上げるスキル。

• 経営陣向けの四半期事業レビュー
• 資源の再配分案を説明したいとき
• 投資家向け報告や助言資料の作成

回転する文字や地球儀、速度の異なる複数のレイヤーを組み合わせ、CSSで動く16:9のヒーロー画面を制作。動画書き出し用のHTMLにまとめます。

• マーケティング用の動くヒーロー画面制作
• 文字が動くタイトルカード制作
• リングと地球儀のループポスター制作

地域の食品スーパーの利益率回復に向け、課題の要因・施策の優先順位・実行計画を整理するスキル。落ち着いた配色のHTMLスライドで、経営判断用の資料にまとめます。

• 食品スーパーの利益率回復を提案したいとき
• 運営委員会に施策の優先順位を説明したいとき
• 温かみのある助言・提案資料を作りたいとき

野外調査の卒業研究などを、研究の貢献・根拠・限界が伝わるHTML発表資料にまとめます。黄色い紙と安全ピン、手書き風文字を使った温かみのあるデザインです。

• 野外調査の卒業研究を発表したいとき
• 定性的な調査結果の発表
• ワークショップの振り返り資料作成

人文学の講義や研究発表に向けて、資料・論点・根拠を整理したHTMLスライドを作るスキル。濃紺と暖かな黄色を使い、落ち着いた学術的な見た目に整えます。

• 人文学の講義資料を作りたいとき
• 大学院ゼミで研究発表したいとき
• 研究の要点をスライドにまとめたいとき

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

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

シニアデザイナーの面接に向け、3つの制作事例と判断の根拠を採用担当者に伝えるHTML資料を作るスキル。黄のアクセントと高密度な誌面風レイアウトで構成します。

• シニアデザイナー面接の作品集発表
• 3つの制作事例を整理したいとき
• デザイン判断の理由を伝えたいとき

研究報告や社内レビューを、紙面風の落ち着いたHTMLスライドにまとめます。濃い青と紙色、セリフ体で章や数値を整理し、横スワイプやキー操作で閲覧できます。

• 研究設計・結果・限界を研究室で報告したいとき
• 四半期の社内レビューをまとめたいとき
• 日本語の研究発表資料を作りたいとき

チームの主要指標、7日間の推移、活動履歴、タスク一覧を、Notion風のHTML画面にまとめます。手動・自動更新に対応し、未接続時はサンプルデータで表示します。

• チームの指標とタスクを一覧したいとき
• Notion連携のダッシュボード作成
• サンプルデータでのオフライン確認

製造現場の労働安全に関する指摘、根拠、是正要求を、規制当局や工場幹部向けのHTMLスライドに整理します。紙の質感とアースカラーを使った資料にまとめます。

• 規制当局に労働安全の指摘事項を説明
• 工場幹部に証拠と是正要求を共有
• 安全レビュー資料を統一したスライドにする

音楽祭のポスターシリーズを、コンセプトから各媒体への展開まで説明するHTMLスライドにまとめます。太い枠線とずらした影を使う統一様式で、事例紹介や提案資料を作ります。

• 音楽祭ポスターの制作事例を発表
• ブランドの表現ルールと媒体展開の説明
• 視覚表現の強いポートフォリオ作成

文化誌の刷新案やブランド提案を、ピンク・クリーム・バーガンディの3色と書体の対比でまとめるスキル。統一した誌面風のHTMLスライドを作成します。

• 文化誌のリニューアル提案
• ファッションブランドの資料作成
• 編集デザインの方向性レビュー

既存の保険会社のデジタル変革を、現状診断・施策の順序・実行体制まで整理したHTMLスライドにまとめます。経営陣の意思決定に向けた資料づくりに使えます。

• 保険会社のデジタル変革計画の提案
• 施策の優先順位と実行順序の説明
• 経営陣の意思決定に向けた資料づくり

ブランドの存在理由や価値観、今後の方向性をパートナーやメディアへ伝える資料を、横スワイプや一覧表示で閲覧できる雑誌風のHTMLスライドに仕上げるスキル。

• パートナーやメディアへのブランド説明
• 創業者の提案資料や登壇資料の作成
• 商品説明・実績・顧客の声の資料化

新聞や雑誌の特集ページ風に、長文を読ませる一枚のHTMLポスターを制作。大きな見出しと6つの番号付きセクションで、意見や発表内容を組み立てます。

• 発表内容をポスターにしたいとき
• 活動理念を一枚にまとめたいとき
• 新聞風のエッセイポスター制作

フィッシングの見分け方や最初の60秒の対応を伝える社員研修資料を作成します。Windows 95風の見た目を保ち、内容や枚数を調整したHTMLスライドにまとめます。

• 社員向けフィッシング対策研修
• 最初の60秒の対応を伝えたいとき
• 新入社員向けのセキュリティ説明

未着手・進行中・レビュー中・完了の列にタスクカードを並べ、担当者や見積もり、スプリントの進捗を見渡せるカンバン画面をHTMLで試作するスキルです。

• チームのスプリントボードを試作したいとき
• 担当者と見積もりを一覧する画面設計
• フィルターや検索付きのボード画面の検討

都市の緑地・樹冠拡大の政策提案を、市議会や行政審査向けのHTMLスライドにまとめるスキルです。公共の必要性、根拠、選択肢、資金判断を整理します。

• 市議会向けの都市緑化提案を作りたいとき
• 行政審査用に根拠と選択肢を整理したいとき
• 政策の資金判断を説明したいとき