Meng To

アプリの操作手順を、録画のように動くHTMLデモとしてWebページに組み込むスキル。実際の画面や文言を再現し、手順の切り替えや一時停止、幅に応じた拡縮に対応します。

• LPに動くアプリ紹介を載せたいとき
• 機能の操作手順を順番に見せたいとき
• 操作録画やGIFをHTMLに置き換える

Tailwind CSSで余白や文字組みをそろえ、画面幅や操作状態に応じたUIを実装します。ボタンやページの構成例を使い、ダークモードや共通部品の設計も支援します。

• 画面幅に応じたレイアウトの実装
• ボタンや共通部品の見た目の統一
• ダークモードのスタイル追加

暗いモノクロ画面に、分解した3Dワイヤーフレームと注釈線、数値表示を組み合わせ、製品の構造やシステムの状態を読み取れる統一感のあるUIを設計します。

• 製品の分解図UIを設計したいとき
• システムの診断画面づくり
• 注釈付きの構造・仕様説明

ゲームなどの変更を、画面記録・変更履歴・テストからコミット、本番公開まで進める手順を揃えます。公開結果と転送量を確認し、作業内容を根拠付きで報告します。

• ゲームの機能追加や修正を画像付きで公開
• 画像付きの変更履歴を版ごとに残す
• 最新mainの取り込み後にテストしたいとき

記事や事例、ブランドの物語を、スクロールで展開する一枚のWebページに仕立てます。動画、Three.js、HTMLの3方式から内容に合う表現を選びます。

• 長文記事を視覚的に読ませたいとき
• 製品の物語を3D空間で伝えたいとき
• 調査結果をスクロール連動の図表で説明

画面を二つのパネルに分け、ビジュアルと説明を整理するデザイン指針です。細い枠線や等幅ラベル、余白を組み合わせ、製品紹介や作品展示のページ全体を整えます。

• 製品画像と仕様を並べたいとき
• 作品と解説を分けたポートフォリオ
• 技術的なコンセプトの紹介

Webページに、立体形状と光の反射がある3Dオブジェクトを追加するスキル。Three.jsで素材や照明を調整し、ゆっくり回転・浮遊するビジュアルを実装します。

• ページ冒頭に多面体を配置したいとき
• 金属やセラミック風の立体表現
• Webの立体を回転・浮遊させたいとき

Three.jsのシーンに雨、嵐、雪を加え、天候を切り替えられるようにします。距離に応じた雷鳴の遅れ、積雪や濡れた地面、継ぎ目のない環境音まで含めて整えます。

• シーンに天候の切り替えを付けたいとき
• 距離に応じて雷鳴を遅らせたいとき
• 積雪の増加と周期的な吹雪を表現

Webページの背面に、白く細い縦のレーザーとブランド色の光・煙を描くスキル。WebGLで全画面背景を実装し、光の幅や位置、煙の濃さ、描画負荷を調整します。

• ページ背面に細いレーザーを加えたいとき
• 光と煙をブランド色に合わせたいとき
• レーザーの位置や煙の濃さの調整

成果物を明確な基準で10点満点評価し、指定された目標点に向けて改善を繰り返すスキル。項目ごとの改善前後の点数と根拠、未達の理由を整理します。

• 全項目を10点満点で8点以上にしたいとき
• 改善前後の点数と根拠の比較
• 目標点に届かない理由の整理

同じプロジェクトで動く複数のClaudeセッションの進捗を整理し、mainへの統合、画像付き変更履歴、本番の状態を確認して、完了・中断・対応待ちを見分けるスキル。

• 並行するClaudeセッションの進捗確認
• 統合済み変更と本番反映の確認
• 画像を保全して完了セッションを整理

スクロールの進み具合に合わせて文章を単語ごとに表示し、リンクや強調、画面幅に応じた自然な改行を保ちながら、読みやすさに配慮したテキスト演出を実装します。

• 見出しをスクロールで表示したいとき
• 引用や理念文の読ませ方の調整
• 製品紹介へのスクロール演出の追加

ナビゲーションや操作ボタンのアイコンを、Iconify Solar Duotone Boldで統一します。サイズ、ラベル、二色の濃淡、背景とのコントラストをそろえるスキルです。

• ナビゲーションのアイコン統一
• 操作アイコンへのラベル付け
• 機能紹介カードのサイズ調整

塔や城、ドームをThree.jsの数値設定から組み立て、下から建ち上がるアニメーションを作るスキル。反り屋根や足場、工程表示まで設計します。

• 城や塔の建設アニメーション制作
• 建築を題材にしたタイトル演出
• 数値設定からランドマークを生成

WebGLを使うランディングページの演出方針を、目的やブランドの印象に合わせて選びます。文章や申込ボタンの分かりやすさ、表示性能、実装の複雑さを踏まえて設計します。

• WebGLを使うLPの演出方針を決めたいとき
• 3D製品モデルを使う公開ページの設計
• モバイル表示の重さや動きを改善

手順や沿革を、スクロールに合わせて進捗線と現在のステップが変わるタイムラインにします。縦横の配置、スマートフォン表示、キーボード操作にも対応します。

• 導入やサービスの手順を案内したいとき
• ロードマップや沿革の進捗表示
• タイムラインを小画面に対応させたいとき

見出しや短い紹介文が画面に入ると、単語ごとに少しずつ浮かび上がるアニメーションを実装するスキル。動きを抑える設定や読み上げ、JavaScript無効時の表示にも配慮します。

• ポートフォリオの見出し演出
• 冒頭コピーを画面内で順次表示
• セクション導入文に控えめな動きを追加

建物や商品、人物を置くための自然な3D風景をThree.jsで作るスキル。起伏のある地形、風に揺れる草、石、空や星を組み合わせ、時間帯も滑らかに切り替えます。

• ヒーロー背景に風景を作りたいとき
• 商品や建物を自然の中に置きたいとき
• スクロールで進む世界の背景制作

Unicorn Studioで作った対話的なアニメーションをWebサイトに埋め込むスキル。画面サイズに応じた表示や文字との重なりを調整し、描画負荷や表示不良も確認します。

• 対話的なシーンをサイトに埋めたいとき
• 文字や画像に動く演出を重ねたいとき
• モバイル向けに描画設定を調整したいとき

Webページの背景に、Vanta.jsで波や霧などの動く表現を追加します。色や動きの調整から、Reactなどでの組み込み、画面サイズ変更や描画負荷への対応まで扱います。

• ページ冒頭に動く波の背景を置きたいとき
• 背景効果の色や動きの調整
• ReactやNext.jsへの背景の組み込み

スクロール位置に合わせて映像や画像、図を進めたり戻したりする演出を実装します。画面内に固定する表示領域や、動きを減らす設定、読み込み中の代替表示まで扱います。

• スクロールで製品の組み立て過程を表示
• 操作画面や図解の変化を段階的に説明
• スクロールに連動する物体回転や写真表示

UIやゲーム、3Dなどの変更前・操作中・変更後を実画面から撮影し、確認済みの画像を説明付きで作業の節目に共有するスキル。見た目の進捗を途中から確認できます。

• UI制作の途中経過を確認したいとき
• 表示不具合の修正前後を比較
• ゲームや3Dの実画面確認

ボタンやカードに実物のような厚みや押し込み感を与えるため、グラデーション、内外の影、反射する縁、細かな質感を組み合わせてWeb UIを作るスキル。

• ボタンに押し込み感を付けたいとき
• カードやパネルに厚みを加えたいとき
• 操作部品に樹脂や金属の質感を付けたいとき

マットな黒とエメラルド色を軸に、カード、ナビゲーション、データ表示を統一。控えめな発光と技術的な枠線で、落ち着いたダークモード画面を設計するスキル。

• ダークな分析画面を設計したいとき
• カードとナビゲーションの統一
• 状態やグラフを緑色で強調したいとき