「with」の検索結果

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

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

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

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

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

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

ブランドの説明をもとに、紙の質感とコラージュを使った雑誌風の縦長ランディングページを作るスキル。画面幅への対応やスクロール時の動きも組み込みます。

• ブランドの紹介ページを作りたいとき
• スタジオのサービスと実績を紹介したいとき
• 仮画像でページ構成を確認したいとき

ガイドやAPIリファレンスの画面を、ナビゲーション・本文・目次の3列で設計し、コード例や表も含む単一のHTMLページとして試作するスキル。

• APIリファレンスを試作したいとき
• コード例付きのチュートリアル作成
• 目次付きガイドの画面設計

ReactとTailwindを使い、claude.ai向けの複雑なHTMLアーティファクトを作成するスキルです。埋め込み可能なWebコンテンツの制作に使えます。

• claude.ai向けHTML成果物の制作
• ReactとTailwindでの制作
• 埋め込み用Webコンテンツの作成

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

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

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

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

デジタルガイドの表紙と本文ページを横並びのHTMLで試作します。目次、引用、手順リスト、演習欄を備え、余白と書体を生かした誌面に整えます。

• クリエイター向けガイドの試作
• ルックブックの誌面検討
• 配布用マーケティング資料の試作

OpenDesignへのスキル・デザインシステムの提供、文書の翻訳や修正、不具合報告を支援します。内容の検証から変更提案や報告の作成まで案内します。

• 作成済みスキルやデザインシステムの提供
• 文書の翻訳を追加・更新したいとき
• 誤字・リンクの修正や事例記事の執筆

文字組み、余白、配色、カードの重なり、控えめな動きを具体的なルールで整え、上質で落ち着いた印象のWebページをコードで制作するスキルです。

• 文字組みにこだわったLP制作
• 非対称なSaaS機能紹介の制作
• 柔らかな影と余白の作品紹介

製品紹介や発表内容を、余白と大きな見出しを生かしたKeynote風のWebスライドにまとめます。左右キーやスペースキーで切り替え、ページ番号も表示します。

• 製品紹介のスライド作成
• 登壇用の発表資料を準備したいとき
• データ図を1枚で見せたいとき

インタビューや問い合わせ、アンケートを整理し、製品やデザインの判断に使うHTML画面を作ります。根拠の一覧、テーマ、確信度、改善案の比較、次の実験をまとめます。

• インタビューと問い合わせの分析
• 初期設定の改善案を比較したいとき
• 根拠と不確実性を関係者に共有

商品発表やSNS共有向けの縦長ポスターを作成。大きな見出し、鮮やかなグラデーション、要点カードを組み合わせ、伝えたい情報を一枚にまとめます。

• 新商品の縦長ポスターを作りたいとき
• SNSで共有する告知画像の作成
• 特徴3〜5点を一枚にまとめたいとき

業務手順やシステムの流れを、付箋と曲線の矢印で白板風に図解するスキル。分岐や合流も表し、導入案内や運用説明に使える単一HTMLにまとめます。

• 利用開始までの流れを図解したいとき
• 運用手順を説明したいとき
• システム構成の説明

アニメーションを使ったHTMLプレゼンテーションを作るスキル。見た目のプレビューを確認しながら、オンライン講演や埋め込み用の発表資料を制作できます。

• オンライン講演のスライド作成
• Webページへの発表資料の埋め込み
• 操作できる説明資料を作りたいとき

Webページの要素やSVGに、移動・回転・フェードなどの動きを実装します。GSAPの基本APIを使い、速度変化や時間差、画面幅と動きを減らす設定への対応も扱います。

• Webページに移動やフェードを付けたいとき
• 複数要素を時間差で動かしたいとき
• 画面幅に応じて動きを変えたいとき

GSAPのプラグインを使い、文字やSVGの動き、ドラッグ操作、レイアウト切り替えを実装するスキルです。用途に合う機能の選択から登録、設定、後始末まで扱います。

• 見出しを一文字・一行ずつ動かしたいとき
• SVGの描画や図形変形を加えたいとき
• 慣性のあるドラッグ操作を作りたいとき

質問と回答を折りたたみ表示し、検索やカテゴリで絞り込めるFAQページを作成。サービスに合う質問内容から問い合わせ先への案内まで、単一のHTMLにまとめます。

• SaaSのヘルプページを作りたいとき
• 料金やアカウントの質問整理
• ネットショップのFAQ検索ページ作成

コードベースをもとにFigmaのデザインシステムライブラリを作成・更新します。実装済みの部品と、デザイン側で参照するライブラリを揃える作業に使えます。

• コードからFigmaライブラリを作りたいとき
• 実装に合わせたデザインライブラリの更新
• デザインの参照資料と実装を揃えたいとき

Figma Plugin APIのスクリプトを実行し、キャンバスへの書き込みや内容の確認、変数の操作、デザインシステムに関わる作業を進めるスキル。

• スクリプトでキャンバスに書き込みたいとき
• Figmaのキャンバス内容を確認したいとき
• 変数やデザインシステムを扱いたいとき

暖色の光漏れ、35mmフィルム風の粒子、大きなセリフ体を組み合わせ、映画風の冒頭画面や章タイトルを作るスキル。単一のHTMLにまとめます。

• ドキュメンタリーの冒頭画面制作
• 個人短編のタイトル画面作成
• 映画風の章タイトル制作

要素を抑えた画面構成で、見た目の整ったランディングページやWebサイト、アプリのUIを作成します。OpenAIのフロントエンド制作指針を利用するスキルです。

• 控えめな構成のLPを作りたいとき
• 見た目の整ったWebサイト制作
• アプリのUIを作りたいとき

Webサイトや業務画面を、用途に合う見た目と動くコードまで仕上げるスキル。文字組み、配色、レイアウトに加え、スマートフォン表示や操作時の状態も整えます。

• 方向性のあるランディングページ制作
• 日常業務向けダッシュボードの設計
• 既存UIの見た目と操作を整えたいとき