Meng To

動物や物をキャラクターにして、開発やデザインの考えを表す手描き風SVGカードを作ります。太さの揺れる筆線と水彩風の色、大きな目で、読み込みやエラー画面などを彩ります。

• カタツムリで読み込み中を表したいとき
• エラー画面にキャラクターを添える
• 開発の考えをブログ画像で伝える

Three.jsなどのWebゲームを、検証済みのコミットからビルド・配信し、本番での操作や表示を確認して、公開の記録とロールバック先まで整えるスキル。

• 検証済みのWebゲームを公開したいとき
• 本番の操作や素材を確認したいとき
• 公開記録と復旧先の整理

太い輪郭の主役モチーフに太陽や文字を組み合わせ、レトロな紋章風のSVGイラストを制作します。７色の平塗りと木版画風の陰影で、チームやイベントのバッジを描くスキルです。

• チームやクラブのバッジ制作
• リリース告知カードの制作
• ステッカーやワッペン用の図案制作

厳密な段組みと大きな見出し、広い余白を軸に、建築・デザイン・戦略会社のサイトを設計。画像やサービス一覧、ボタン、控えめな動きまで統一するスキル。

• 建築・デザイン会社のサイト設計
• ページ全体の見た目を統一したいとき
• サービス一覧を段組みで整理

見下ろし型の斜め視点で遊ぶアクションRPGを、Web技術で開発・拡張します。移動、戦闘、報酬、成長、セーブを一つの遊べる流れとして組み立て、検証まで進めます。

• 遊べるアクションRPGの試作を作りたいとき
• 戦闘や敵、報酬を段階的に追加したいとき
• 装備やクエストのデータを整理したいとき

太さの異なる輪郭線と明るい配色で、人物と小道具を組み合わせたSVGイラストを制作。初回案内や成功画面、ブログの見出しに使う親しみやすい挿絵を描くスキル。

• 初回案内の挿絵を作りたいとき
• 空の画面やエラー画面の人物イラスト
• 操作成功を伝えるイラスト

アバターや人物写真、Webサイト背景に使うUnsplash画像を選び、写真ページのURLと用途に合う縦横比・解像度、切り抜きやサイズ調整の手順を案内します。

• 正方形のアバター画像を選びたいとき
• プロフィールカード用の人物写真選び
• Webサイトの横長背景を選びたいとき

Webサイトの背景に、マウスを追う白い点描の光跡を追加します。WebGPUによる描画と、タッチ端末や動きを抑える設定に応じた静止背景への切り替えを扱います。

• ヒーロー領域に光の軌跡を加えたいとき
• 問い合わせ欄の背景を動かしたいとき
• タッチ端末では静止背景にしたいとき

Three.jsの3Dモデルを、輪郭や構造を示すワイヤーから立体の表面へと順に出現させ、最後にワイヤーを消すスキャン演出を実装するスキル。

• 3Dモデルをスキャンで登場させたいとき
• 表面より先にモデルの構造を見せたいとき
• ホログラムの組み立て演出

細いインディゴの線と白を基調に、室内やテラスで働く人物のSVGイラストを制作し、控えめな差し色や家具の配置、手の形までそろえて仕上げます。

• リモートワークの場面を描きたいとき
• ホワイトボードでのチーム相談の挿絵
• 初回利用案内のイラスト制作

Three.jsのページ冒頭の3D演出に、マウスの動きに滑らかに追従するカメラ移動と小さな回転を加え、文字やカードとの構図を保ちながら奥行きを出すスキル。

• ページ冒頭の3Dをマウスに反応させたいとき
• 手前と奥で動きに差を付けたいとき
• 文字やカードとの構図を保ちたいとき

サイトやアプリの制作・修正で、目的のない装飾や不統一な見た目、操作上の欠陥を見つけて整えるスキル。既存の個性を保ちながら、情報の優先順位や操作状態も点検します。

• 既存ページの不要な装飾を整理
• 追加部品をデザイン規則に合わせたいとき
• 情報の優先順位と主な操作の確認

カーソルやタッチの移動に合わせて花粉やほこりのような粒子を発生させ、操作速度が変わっても粒の間隔を保つ表現を、固定数のGPU粒子を再利用して実装するスキル。

• カーソルやタッチの粒子軌跡
• 表面から花粉やほこりを舞わせたいとき
• キーボード対応の粒子放出ボタン

Three.jsのアクションゲームで、敵の能力・見た目・攻撃を再利用可能なデータとして設計し、戦闘処理との分離からモデルの規格統一、動作検証まで進めるスキル。

• 共通データで敵を追加したいとき
• 敵の定義と戦闘中の状態を分けたいとき
• モデルと仮モデルの規格統一

黒い線と細かな網点を使い、協働や通勤などの場面をSVGイラストに描きます。手描き風の開いた輪郭と温かみのある紙色で、サービス画面や記事に添える挿絵を作るスキルです。

• 協働やレビュー場面の挿絵制作
• モノクロの導入案内イラスト制作
• データなし画面や404ページの挿絵制作

一本の連続した黒い線と、版ずれ風の色面で、動きのある人物のSVG挿絵を制作します。配色やポーズをそろえ、Webページや告知カードに使うイラストを仕上げます。

• 空の一覧画面や404ページの挿絵
• 初回利用の案内画面の人物イラスト
• ブログ見出しや公開告知の画像

広告サイトやポートフォリオを、独自の画像・文字組み・動きで設計し実装します。GSAPによる演出に加え、アクセシビリティや表示負荷、素材の出典も確認するスキルです。

• 画像と動きを統一したLP制作
• 独自性のあるポートフォリオ制作
• 操作しやすいスクロール演出の設計

GSAP、ScrollTrigger、Lenisで、サイト全体の動きを設計するスキル。文字や画像の表示、スクロール、ホバーを穏やかな演出に揃えます。

• ポートフォリオ全体の動きを揃えたいとき
• スクロールに合わせた文字と画像の表示
• 固定セクションで物語を見せたいとき

Webサイトやアプリの過剰な装飾、定型的な構成、使い勝手の問題を、画面やコードの根拠付きで点検します。既存の方向性を保ち、削除や最小限の修正に優先順位を付けます。

• LPの過剰な装飾を見直したいとき
• 画面の読みやすさと操作性の点検
• 既存デザイン内で修正を優先付けする

パソコン作業などをする人物を、紫の窓枠とパステル背景で描くSVGイラストの制作スキルです。枠をまたぐ吹き出しや細い輪郭線で、カードの絵柄をそろえます。

• サポートやチーム紹介ページの挿絵制作
• 初回利用案内や404画面の絵柄統一
• UI設計やコーディング中の人物を描くとき

ブラウザゲームの操作や進行、セーブを実際のプレイで検証します。同じ状態を再現するテストと画面上の証拠を組み合わせ、不具合の再現手順や重要度を整理します。

• 公開前のゲーム動作確認
• 更新後の回帰テスト
• タッチ操作とモバイル表示の確認

デザイン案やマーケティングに使う背景・建築・人物画像をAura Assetsから探し、カテゴリごとに5件の直接URLと用途に合う解像度・縦横比を提案するスキル。

• Webサイトのメイン背景を探したいとき
• デザイン案に使う人物画像の選定
• スマートフォン用の抽象壁紙探し

スクロールで要素が画面内に入ったとき、登場アニメーションを開始する実装を支援します。Tailwind向けのクラスと動きの定義を示し、開始位置や速度を調整します。

• スクロールに合わせて内容を見せたいとき
• 複数要素の登場を順番にずらしたいとき
• アニメーションの開始位置の調整

Vesperfallのゲーム素材を、一覧用の透過PNGと確認用の動く3Dモデルの組で整備します。素材の出所や動作、接地状態まで確かめるレビュー用スキルです。

• Vesperfallにキャラクターや装備を追加
• 透過PNGと3Dプレビューの組を整備
• 単独ページで動作や接地を確認したいとき