OpenDesign

新製品の公開前や先行テストに向け、参加希望者のメール登録ページを作るスキルです。製品の説明、3つの特長、登録欄、創業者のメッセージを簡潔に配置します。

• 製品公開前の登録ページ作成
• 先行テストの参加者募集
• 製品の特長を3つに絞って紹介

会議名や出席者、議題、決定事項を整理し、担当者・期限・進捗が分かる対応事項の表と、次回会議の案内までをまとめた議事録のレイアウトを作ります。

• チーム会議のメモを整理したいとき
• 1対1の面談の決定事項と宿題の記録
• 議事録で担当者と期限を示したいとき

指定した一文を、光るカーソルで入力するように一文字ずつ表示します。暗い背景に色のずれや光の軌跡、光帯の演出を重ね、動画の冒頭向けのHTML画面を作ります。

• 動画冒頭で指定の引用文を見せたいとき
• 文字入力風のオープニング画面制作
• 動く文章に出典や章名を添えたいとき

製品紹介ページを、ナビゲーションや特徴紹介、利用手順、行動を促すボタンまで含む操作可能な試作として作るテンプレート。スマートフォン向けの表示にも対応します。

• 製品紹介ページを試作したいとき
• ナビゲーションやボタンを確認したいとき
• スマートフォンとPCの表示を確認したいとき

iPhone 15 Proの端末枠に収めたアプリの単一画面をデザインし、ステータスバーや検索欄、下部タブまで含めて画面構成を示すスキル。

• アプリ画面をiPhoneの枠付きで見せたいとき
• フィードや一覧、詳細、フォームの画面設計
• 下部に4〜5個のタブを置く構成の検討

SaaSの3段階の料金プランを、月払い・年払いの切り替え、機能比較表、よくある質問とともに配置し、価格と提供内容を見比べやすくするページ作成スキル。

• 3段階の料金ページを作りたいとき
• 月払いと年払いの選択肢を示したいとき
• プラン別の機能を表で比較したいとき

SaaS製品の紹介内容を、特徴・利用手順・料金・FAQなどに整理して１ページのLPにするスキル。申し込みを促すボタンやロゴ一覧を配し、スマホでは１列にまとめます。

• SaaS製品のLPを作りたいとき
• 特徴・利用手順・料金を整理したいとき
• PCとスマホ向けの製品紹介ページ設計

チームの四半期目標と主要な成果指標を、3列の目標と進捗バーで見渡せる追跡ページを作るスキル。各指標の数値、担当者、状態と四半期の要約をまとめます。

• 四半期目標の進捗を確認したいとき
• 成果指標の担当者と状態の確認
• 目標と四半期の要約を共有したいとき

提供した物語や質問を、投票矢印やコメント数を備えたReddit風の投稿カードに仕立てます。動画に重ねる表示やSNSでの共有に使える、単一HTMLのデザインです。

• 動画に物語のカードを重ねたいとき
• 質問をReddit風カードで共有したいとき
• 短い笑い話を投稿風に見せたいとき

プロダクトの課題や成功指標、対象範囲を整理し、一ページの要件文書にまとめます。利用場面、設計メモ、公開計画、未解決の論点まで見通せる構成です。

• 新機能の要件をまとめたいとき
• 成功指標と対象範囲の明確化
• 利用場面と設計メモの文書化

発表内容を大見出しと短い説明に絞り、Keynote風のスライドに整えます。キーボードでのページ切り替えや現在位置の表示、フェードイン演出も備えます。

• 製品紹介を短いスライドにしたいとき
• データ図や要点を大きく見せたいとき
• キーボードで発表資料を操作したいとき

商品発表やSNSでの共有に使う、縦長のマーケティングポスターを設計するスキル。大きな見出し、グラデーション背景、要点カードとQRコードの仮枠を配置します。

• 新商品の縦長告知ポスターを作りたいとき
• SNSで共有する宣伝画像を作りたいとき
• 要点とブランド・QR枠を１枚にまとめたいとき

ピクセルアートのマスコットと動く日本語・中国語の文字を組み合わせ、レトロな配色と流れる年表で説明内容を見せる、CSSループアニメーションのスキル。

• レトロなアニメーション解説を作りたいとき
• ドット絵と動く日本語を組み合わせたいとき
• 動画収録用の動くポスターを作りたいとき

シルバーやクリーム色の背景に、二重の縁を持つカードや入れ子のボタンを配するWeb原型を作るスキル。丸みのある形と軽く弾む動きで、柔らかな質感を表現します。

• 柔らかな質感のWeb原型を作りたいとき
• 丸いカードと入れ子ボタンの設計
• ホバー時に軽く弾む動きを試したいとき

タスクを４つの進捗列に並べる、Trello風のカンバン画面を設計するスキル。担当者やラベルでの絞り込み、期限やコメント数を備えたカードの配置をまとめます。

• チームのタスク一覧を設計したいとき
• レビュー待ちも含めて進捗を示したいとき
• 担当者や作業単位でタスクを分けたいとき

方眼紙の背景に手描き風の線や付箋を組み合わせ、画面構成のラフ案を作るスキル。複数案のタブラベルや仮のグラフを配置し、初期のデザイン検討に使います。

• 画面構成の初期案を検討したいとき
• 複数のデザイン案をタブラベルで示す
• ラフ案に付箋で注釈を添えたいとき

複数のSNSの主要指標、グラフ、注目投稿を一画面で見比べるダッシュボードのテンプレート。期間比較や補足情報の表示、明暗テーマの切り替えを備えます。

• 複数SNSの主要指標を比較したいとき
• 期間ごとの実績を見比べたいとき
• 注目投稿をまとめて確認したいとき

チームの週報を6〜8ページの横送りスライドにまとめるスキル。公開済みの成果、進行中の作業、障害、指標の前週比較、支援依頼を決まった構成で共有します。

• チーム定例会の週報を作りたいとき
• 作業の障害と支援依頼を共有したいとき
• 主要指標を前週と比較したいとき

チームの主要指標、直近7日間の推移、活動履歴、タスクをNotion風のダッシュボードにまとめます。データソースがない場合はサンプルデータで画面を構成します。

• チームの指標と活動を一覧したいとき
• 直近7日間の推移を確認したいとき
• 状態ラベル付きのタスク表作成

アプリ起動時のロゴ表示、価値を伝える案内、サインインの3画面を、iPhoneの枠で横並びに構成し、初回利用時の画面案をまとめるデザイン用テンプレートです。

• アプリの初回案内を設計したいとき
• イラストと一文で価値を伝えたいとき
• 複数のログイン方法を画面に配置

回転する文字のリングや地球儀、タイマー、浮遊ラベルを組み合わせ、繰り返し動く画面を作ります。動画の冒頭やランディングページの大きなメイン画像に使うスキルです。

• 動画の冒頭画面を作りたいとき
• ランディングページのメイン画像制作
• 複数の動きをループ画面にまとめたいとき

単色背景と大きな見出し、矢印付きリストで、伝えたい言葉を中心にしたスライドを作るスキル。内容に応じてページを増やし、配色を切り替えて構成します。

• 図や写真が少ない発表資料
• 大きな見出しで意見を伝えたいとき
• 要点を矢印付きリストにまとめたいとき

講座や研修のスライドを、学習目標を左側に表示し続ける構成で作ります。概念と具体例、選択式の自己確認問題、まとめと次の単元の予告まで整理します。

• 講座の単元別スライド作成
• ワークショップ教材を整理したいとき
• 授業中に学習目標を表示したいとき

A/Bテストや製品実験の記録を、次の判断につながる報告書に整理するスキル。仮説・指標・結果を検討し、導入、改善、期間延長、中止の提案と追加実験をまとめます。

• 実験した変更を導入するか決めたいとき
• 成長施策や価格実験の振り返り
• 初回利用手順やメール施策の検証