Meng To

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

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

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

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

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

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

SaaSの料金ページを、利用者がプランを選びやすい構成に整理します。料金表や比較表、申込ボタンの文言、FAQ、検索対策まで、設計と原稿づくりを支援します。

• SaaSの料金ページを新設したいとき
• 料金プランの違いを整理したいとき
• 購入前の不安に答えるFAQ作成

ページや章の切り替えに、紙が燃えて次の場面が現れるWebGL演出を実装するスキルです。揺れる火種や崩れる炭の縁、描画負荷や動きを抑える設定まで扱います。

• 紙が燃える演出で章を切り替えたいとき
• 火種の境界から動く次の場面を見せるとき
• 文章位置に合わせて燃える方向を調整

実際の製品画面や操作デモを中心に、SaaS・AI製品のランディングページを設計・改修します。入力から出力までの流れと料金の制限、FAQをつなぎ、検討に必要な情報を整理します。

• 実際の画面を軸にSaaSのLPを改修したいとき
• AIの入力から出力までを見せたいとき
• 料金の制限とFAQを整理したいとき

黒に近い背景と紫のアクセントを使い、角丸の枠やカードを重ねた画面を設計します。検索欄やナビゲーション、発光する装飾まで統一したデザインに整えるスキルです。

• 未来的な人材サービスの画面設計
• カードや検索欄の見た目を統一したいとき
• 紫の照明や動く装飾を取り入れたいとき

カードや料金パネル、ボタンに、控えめなグラデーションの枠線を付けます。背景に応じたCSSの選択やTailwindでの記述、角丸・透明度・テーマ別の調整を扱います。

• カードや料金パネルの控えめな縁取り
• 複雑な背景を保った枠線の追加
• ホバー・フォーカス時の色のアクセント

Webページの見出しや短い文章を、スクロールに合わせて単語ごとに下から順番に表示するスキル。GSAPを使い、動きを抑える設定や読み上げにも配慮します。

• ページ冒頭の見出しを演出したいとき
• セクション名を単語ごとに表示したいとき
• 動きを抑える設定に対応したいとき

中央に置く外枠と、余白を取った内枠でページを組み立てるスキル。縦の境界線や角のマーカー、背景、角丸を使い、各セクションの階層を見せます。

• ページ全体の境界を見せたいとき
• メイン領域・特徴・実績・CTAの区分
• 各ブロックの内側の余白を揃えたいとき

企業やツールのロゴをIconify Simple Iconsから選び、64×64の枠で統一して配置するスキル。連携サービスや取引先の一覧を整えます。

• 連携サービスのロゴを一覧にしたいとき
• 導入企業やパートナーのロゴ配置
• ツールのバッジの見た目を統一したいとき

落ち葉や花びらが表裏を見せながら舞うアニメーションを、2Dのcanvasや3Dで実装するスキル。回転に連動する横滑り、奥行き、描画負荷まで整えます。

• Webページに紅葉を舞わせたいとき
• 桜の花びらを漂わせたいとき
• 3D空間に奥行きのある落ち葉演出

工程や機能紹介、カードに01・02・03の装飾番号を添え、視覚的な区切りを整えるスキル。見出しや行動を促すボタンを引き立てる控えめな配置と書体を指定します。

• 工程紹介に控えめな番号を添えたいとき
• 機能カードの角の目印を統一したいとき
• 見出しの横に装飾番号を置きたいとき

画面の上端や下端に向かって段階的に強くなる背景ぼかしを、HTMLとCSSで追加します。複数のレイヤーを重ね、高さや強さ、前後関係を調整します。

• 画面上端に段階的なぼかしを追加
• 画面下端を柔らかくぼかしたいとき
• ぼかしの高さや強さを調整

暗いガラス面と時計のような円形ダイヤルを軸に、計測機器を思わせるUIを設計します。背景、ナビゲーション、ボタン、緩やかな動きまで、画面全体の表現をそろえます。

• 暗い計器パネル風のUIを作りたいとき
• 円形ダイヤル中心の画面を設計したいとき
• ガラス調のナビやボタンを統一したいとき

Webページに回転する地球儀や拠点マーカーを追加するスキル。cobeを使った描画設定から画面サイズへの追従、表示負荷の調整、ReactやNext.jsへの組み込みまで扱います。

• メインビジュアルに地球儀を置きたいとき
• 地球儀に拠点を表示したいとき
• モバイル向けの表示調整

黒に近い背景へ控えめな粒状の質感と細いレーザー光を重ね、パネルや操作部品、余白まで統一した、奥行きのあるダーク系UIを設計します。

• ダッシュボードをダーク系に統一したいとき
• 平坦な黒い画面に質感を加えたいとき
• 細い光を主役にした冒頭画面の設計

縦スクロールに合わせて固定画面の章を横方向へ切り替え、逆戻りや途中への移動、再読み込みでも表示がずれない、章立ての製品ツアーや物語ページを実装するスキル。

• 横方向に進む製品ツアーの制作
• 章立てのスクロール物語の制作
• ジャンプや再読み込み時の表示ずれ修正

明るいページの外枠に暗い角丸セクションやカードを入れ子で配置し、料金表やサービス紹介、ボタンまで余白と階層をそろえた画面を設計するスキル。

• 制作会社やサービス紹介ページの設計
• 暗い区画で料金表を目立たせたいとき
• 入れ子のカードでサービスを整理したいとき

Webページに物体の落下や衝突を取り入れるため、Matter.jsの初期設定から物体の追加、必要に応じたマウス操作や終了時の後片付けまでを案内するスキル。

• 落下や衝突をWebページに加えたいとき
• 物体をマウスで動かしたいとき
• Reactに物理演算を組み込みたいとき

カーソルの速さに左右されず、粒子が一定間隔で続く軌跡を実装するスキル。移動距離に応じた生成、自然な漂い、3D空間での配置、タッチ操作や動きを抑える設定への対応を扱います。

• カーソルに火花や煙を付けたいとき
• 高速移動で途切れる軌跡の修正
• 3Dシーンでの軌跡の位置調整

ロゴや短い紹介文、スクリーンショットを途切れなく流す表示を実装します。要素の複製と幅の固定でつなぎ目のずれを防ぎ、端のフェードや動きを抑える設定にも配慮します。

• ロゴ一覧を途切れなく流したいとき
• 画像や利用者の声を繰り返し表示
• タグや短い機能紹介の連続表示

Webページの登場演出やスクロール連動の動きをGSAPで実装・修正するスキル。複数要素の動く順序や時間差を整え、描画負荷やReactでの後処理にも対応します。

• ヒーローの要素を順番に表示したいとき
• スクロール連動の演出を作りたいとき
• 見出しやボタンの動きを揃えたいとき

大きな写真を主役に、ガイド線と文字・ボタンの配置でページ全体のデザインを整えます。画像の迫力を保ちながら、見出しや補足情報を読みやすく重ねる設計です。

• 大きな写真を使う冒頭画面の設計
• 写真に見出しやボタンを重ねたいとき
• 写真に合わせてカードやナビを整える