「action」の検索結果

160件の動きのサンプルからWebページや部品に合う表現を探し、HTML・CSS・JSを既存の構成に合わせて調整するスキルです。文字やスクロール演出にも対応します。

• ボタンにクリック時の波紋を加えたいとき
• 見出しをタイプライター風にしたいとき
• スクロールに応じて要素を表示したいとき

サービスの料金プラン、機能比較表、よくある質問をまとめたHTMLページを作成。プラン数や推奨表示を整え、契約前に内容を比べられる料金ページを試作するスキル。

• サブスクリプション料金ページの試作
• プラン別の機能を比較したいとき
• 個人向けと法人向けのプラン提示

製品紹介、機能、利用者の声、料金、申し込みへの案内を備えたSaaSの紹介ページを作ります。DESIGN.mdの色や書体、配置に沿って単一のHTMLにまとめます。

• SaaS製品の紹介ページを作りたいとき
• 既存のデザイン方針に合わせたいとき
• 機能・利用者の声・料金をまとめたいとき

複雑で判断を誤る影響が大きい課題を、前提の確認から調査、多角的な分析、実行後の検証まで段階的に進め、根拠やリスクを整理して提案するスキル。

• システム構成案を比較したいとき
• 複数システムの変更計画
• 曖昧な依頼の前提を見直したいとき

市場データを密に並べた取引分析ダッシュボードを、単一のHTMLで作成。明暗テーマの切り替えやチャートの詳細表示、コマンドパレットを備えた画面を用意します。

• 金融分析端末の画面を試作したいとき
• 市場情報を密に並べた画面の提示
• チャートの詳細表示や操作感の実演

シルバーやクリーム色を基調に、柔らかな質感のウェブ試作品を作るスキル。二重枠のカード、大きな角丸、浮遊するナビゲーション、滑らかな動きを統一して設計します。

• 落ち着いたSaaSサイトを試作したいとき
• 消費者向けサイトの質感を検討したいとき
• カードとボタンで機能を紹介したいとき

メモや分析資料を、顧客向け提案や技術発表に使えるHTMLスライドへ整理し、テーマ選択から発表者用の台本、PNG出力まで支援するスキル。

• 分析結果を顧客向け提案にしたいとき
• 台本付きの技術発表資料作成
• 製品発表用のスライド作成

アプリの歓迎画面、価値を伝える画面、サインイン画面を、3台のスマートフォン枠で横並びに作成。初回利用の流れを1枚のHTMLで確認するスキル。

• 瞑想アプリの初回案内を作りたいとき
• アプリの価値の伝え方を検討したいとき
• 歓迎からサインインまでの流れの提示

シリーズAの資金調達に向け、成長実績や事業拡大の筋道を投資家に伝えるHTMLスライドを作成します。大きな文字と赤い差し色で、主要な論点を示します。

• シリーズAの資金調達資料を作りたいとき
• 成長実績と拡大計画を投資家に示したいとき
• 創業者のビジョンをスライドにしたいとき

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

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

既存のWebサイトやアプリの画面を点検し、文字・配色・配置・操作時の表示を改善します。現在の技術構成と機能を保ちながら、段階的に整えるスキル。

• 既存サイトのデザインを点検したいとき
• 定型的な画面パターンを見直したいとき
• 読み込み中・空データ・エラー表示の改善

太い見出しと幾何学的なカードを使い、スイス風のプレゼン型ページを単一HTMLで作るスキル。スライド移動やテーマ切り替え、注釈表示も組み込みます。

• プレゼン型の紹介ページ制作
• スイス風のHTMLスライド制作
• 操作できる製品発表ページ制作

提供したHTMLやテキストをiPhoneとMacBookの画面内に配置し、ガラス風のハイライトや床面の反射を添えた立体的な製品紹介ページを作るスキル。

• 製品発表でアプリ画面を見せたいとき
• モバイルとデスクトップのデザイン展示
• テキストやデータをアプリ風に見せたいとき

画面のアニメーション実装を、動きの速さや自然さ、割り込み対応、描画性能、アクセシビリティの観点で点検します。修正案と理由を示し、承認可否を判断します。

• ドロップダウンやツールチップの動きの点検
• 連続操作への追従性を確認したいとき
• 描画性能を損なうアニメーションの発見

ランディングページなどのWebデザイン案を、セクションごとに独立した横長画像で生成。配色をそろえながら構図や余白、ボタンの見せ方を変え、実装の参考に使えます。

• LPをセクション別に検討したいとき
• 冒頭の構図を検討したいとき
• 開発者に参考画像を共有したいとき

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

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

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

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

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

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

幾何学パーツが組み上がるロゴに光の演出を加え、ブランド名や短いメッセージ、行動を促す案内を順に表示します。動画の片尾向け演出を単一のHTMLで作るスキルです。

• ブランドを伝える動画の片尾制作
• 締めにロゴとメッセージを表示したいとき
• 片尾にサイトやSNSの案内を載せたいとき

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

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

公開サイトの配色・フォント・ロゴ・画像・文体を実測して整理し、ブランドガイドやプレビュー付きの再利用可能なデザインシステムにまとめるスキル。

• サイトの配色・フォント・ロゴの整理
• 参考サイトからブランドガイドを作りたいとき
• ブランドを表す画像の収集

既存のWeb画面に、ボタンの反応や状態の切り替えを伝える控えめなアニメーションを加えます。文章やレイアウトを保ち、動きを減らす設定にも対応します。

• ボタンに操作の反応を加えたいとき
• 画面内の状態変化を伝えたいとき
• 主要な内容の登場演出を整えたいとき

ランディングページや作品集を、目的と読者に合わせて設計する旧実験版です。レイアウトの変化・動き・情報密度を調整し、定型的な見た目を避けて配色や操作状態を整えます。

• 読者に合わせた紹介ページの設計
• 動きと情報量を調整した作品集制作
• 既存ブランドを生かしたサイト改修

ReactやNext.jsの画面を、構図・動き・情報密度の設定に沿って実装し、配色や書体から読み込み・空・エラー状態まで整える、旧版互換用のスキル。

• 従来のv1の挙動を維持したいとき
• Reactで非対称な画面を作りたいとき
• 読み込み・空・エラー状態の設計