「motion」の検索結果

画面の余白、文字、角丸、影、動きを見直し、見た目と操作感を整えるスキル。ボタンやカードなどの細部を点検し、変更前後が分かる具体的な改善案を示します。

• 窮屈で未完成に見える画面の点検
• ボタンやカード、フォームの仕上げ
• ホバーや読み込み状態の改善

技術の仕組みやグラフ、システム構成、製品の流れをManimのアニメーションで説明し、絵コンテとシーン計画、短い動画、サムネイルを作るスキル。

• 技術の仕組みを動画で説明したいとき
• グラフやネットワークの変化を可視化
• 業務フローやシステム構成の説明

Webサイトや業務画面の目的・利用者に合うデザイン方針を定め、文字・配色・レイアウト・動きを整えます。既存の部品を生かし、画面幅ごとの表示も確認します。

• 動く業務画面の見た目を整えたいとき
• 新しいサイトのデザイン方針を決めたいとき
• モバイル表示や長いラベルを改善したいとき

ReactやNext.jsの画面を実装・レビューするために、部品の組み立て、状態管理、データ取得、表示速度、フォームや操作性の改善パターンを示すスキル。

• Reactの部品を再利用したいとき
• 状態管理とデータ取得の見直し
• 長い一覧の表示を軽くしたいとき

発表用のメモやPowerPointから、ブラウザで動くHTMLスライドを作ります。見本でデザインを選び、画面に収まるレイアウトとアニメーションを整えます。

• 登壇や社内報告のスライド作成
• PowerPointをHTML化したいとき
• 見本から資料のデザインを選びたいとき

スクロールに合わせて映像や演出が進むランディングページを制作します。見せる順序や感情の変化を設計し、HTML実装から各位置の画面検証まで進めるスキルです。

• スクロールで動画が進むLPを作りたいとき
• 場面の変化でブランドを紹介したいとき
• 手持ちの写真や映像でページを作りたいとき

ランディングページや複数画面のWeb製品を、配色・書体・動きの方針から設計して実装します。スクロールに連動した演出にも対応し、見た目や表示性能、画面間の統一感を検証します。

• ランディングページの新規制作・再設計
• スクロールで物語を伝えたいとき
• 複数の製品画面のデザイン統一

プロジェクトの内容を読み取り、紹介の切り口とトーンを決めて短い告知動画を制作するスキル。動画に加え、ポスター画像と共有用の文章も出力し、縦横比や音声を指定できます。

• プロジェクトの告知動画を作りたいとき
• 縦長・正方形の紹介動画を用意したいとき
• プロジェクトに合う動画のトーンを選びたいとき

曲の構成や韻、歌いやすさを考えた歌詞と、Suno向けの曲調・歌唱指示を作るスキルです。替え歌の語句調整やAI歌唱の発音対策も扱います。

• テーマとフックから歌詞を作りたいとき
• 替え歌を元のリズムに合わせる推敲
• Suno向けの曲調・歌唱指示作成

粒子の動きや数学的な規則から、p5.jsで独自の生成アートを制作します。同じ絵を再現するシードや操作画面を備え、数値を変えながら表現を探れます。

• コードで独自のアートを作りたいとき
• 粒子や流れの表現を試したいとき
• シードや数値を変えて比較したいとき

Slackの絵文字やメッセージ向けに、画像や図形を動かすGIFを制作します。サイズや色数、動きの速さを調整し、付属ツールで要件に合うか確認できます。

• Slackのリアクション用GIF制作
• アップロード画像を動かしたいとき
• メッセージ用のGIFを作りたいとき

新しい画面の制作や既存UIの改修で、題材と利用者に合う配色・書体・レイアウトを設計し、画面内の言葉や動きまで意図を持って整えるデザイン支援スキル。

• 新しいサイトの見た目を設計したいとき
• 定型的なUIを改修したいとき
• 利用者に合う配色・書体・配置の検討

新しい画面の制作や既存UIの改修で、題材と利用者に合う配色・書体・レイアウトを設計し、画面内の言葉や動きまで意図を持って整えるデザイン支援スキル。

• 新しいサイトの見た目を設計したいとき
• 定型的なUIを改修したいとき
• 利用者に合う配色・書体・配置の検討

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

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

プロダクトマネージャーの年末評価に向けて、役割・成果・学び・要望を根拠とともに整理し、上司や評価委員会の判断に使うHTMLスライドを作るスキル。

• プロダクトマネージャーの年末自己評価
• 評価委員会に成果の根拠を示したいとき
• 上司向けに学びと今後の要望を整理

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

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

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

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

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

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

年間マーケティング計画や新製品発表を、成長・商談創出につながる説明に整理し、雑誌風のHTMLスライドに仕上げるスキル。構成、本文、見た目まで組み立てます。

• 年間マーケティング計画の承認資料
• 新製品の発売計画を説明したいとき
• 施策予算と成長目標を結び付けたいとき

曲やポッドキャスト、自己紹介を、カバー画像・進行バー・再生操作風アイコンを備えたSpotify風カードにし、動画や個人サイト向けのHTMLにまとめます。

• 動画に再生中カードを重ねたいとき
• 個人サイトで好きな曲を紹介
• ポッドキャストのタイトルと作者紹介

用途や読者、ブランドに合わせてランディングページやポートフォリオを設計し、配色・書体・動きの一貫性と読みやすさを確認しながら実装するスキル。

• ブランドに合うLPを作りたいとき
• 読者に合わせたポートフォリオ作成
• 既存の印象を保つサイト改修

温かみのあるモノトーンと文字の強弱、広い余白を使い、カードのグリッドや淡い差し色で、雑誌のように情報を整理したミニマルなWeb画面を設計するスキル。

• ミニマルなプロダクト画面を試作したいとき
• 機能紹介カードの非対称グリッド配置
• 書体・余白・配色を統一したいとき

動画の転換場面やサイバーパンク風のメインビジュアルに使うタイトル画面を、色ずれや走査線、文字の乱れを重ねた単一のHTMLで作るスキル。

• 動画の転換用タイトルを作りたいとき
• サイバーパンク風の画面制作
• 見出しに文字の乱れを加えたいとき

デスクトップ向けのランディングページを、注目から行動へ導く構成、大きな文字と余白、隙間のないグリッド、スクロールに連動する動きを組み合わせて設計するスキル。

• スクロール演出のあるLPを試作したいとき
• 冒頭の配置や文字組みを変えたいとき
• 空きのないカードグリッドの設計