開発のスキル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Reactのボタンやカードに、液体金属のように動く枠線を追加します。選択・フォーカスとの連動や色、光の調整に加え、動きを抑える設定や代替表示も扱います。

• 選択中のタブやフィルターの強調
• 主要ボタンへの金属調の枠線追加
• カードの枠・光・角丸の調整

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

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

地球儀上に地点や地点間のつながり、地域別データを重ねる3D表示を実装します。HTMLやReactへの組み込みから、表示サイズやモバイルの負荷への配慮まで扱います。

• 地球儀に拠点を表示したいとき
• 地点間のつながりを可視化したいとき
• 地域別データやラベルの表示

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

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

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

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

画像や文字、コンテナの左右・上下の端を、CSSで徐々に透明にします。フェードの幅や濃さを調整し、Safari向けの指定を含むコードを示すスキルです。

• 画像の左右をフェードさせたいとき
• 文字の上下をぼかして消したいとき
• フェードの幅や濃さの調整

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

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

重いページ構築中も動き続ける、紙が燃えて広がるリング型ローダーを実装します。進捗表示からページへの滑らかな切り替え、動きを抑える設定への対応まで扱います。

• 紙が燃える読み込み画面を作りたいとき
• 重い処理中もローダーを動かしたいとき
• 読み込みから導入演出へつなぎたいとき

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

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

重ねた２枚の画像を使い、カーソルに追従する柔らかな円形の範囲だけ別の画像を見せる演出を実装します。商品の色や質感、加工前後の違いを表現できます。

• モノクロ画像の一部をカラーにしたいとき
• 画像の加工前後を比較したいとき
• 商品の質感や細部を見せたいとき

スクロールに合わせてカメラや光、文章が変化する、連続した3D空間のWeb体験を制作します。章ごとの演出設計から操作、読み込み、端末別の検証まで扱います。

• 3D空間で商品を説明したいとき
• 操作できる作品集の制作
• 展示を章立てで案内したいとき

ゲーム用の3Dキャラクターやモンスターを、骨格・動作・装備・当たり判定まで含めて制作・統合・監査し、実際のゲームへの組み込みと操作可能な確認画面で検証します。

• FBX/GLB キャラクターのゲーム組み込み
• 交換できる武器や防具の本体からの分離
• モンスターの動作と攻撃判定の時間設計

Webゲームのアクション戦闘を、攻撃の予備動作や防御・回避の受付時間から設計・実装・調整します。命中判定と演出の整合性、同じ条件で再現できるテストまで扱います。

• 攻撃・防御・回避の時間調整
• 命中判定と戦闘演出の確認
• ボスの段階変化と防御手段の設計

Three.jsのゲームで、攻撃や命中、状態異常が伝わる視覚エフェクトを設計・実装します。粒子数や後片付けの管理に加え、低画質や動きを減らす設定での見え方も検証します。

• 攻撃予告と命中演出の区別
• ダメージや状態異常の視覚表現
• 連続攻撃時の粒子数の制限

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

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

アクションゲームの敵AIを実装・修正し、戦闘バランスを調整するスキル。索敵や追跡、攻撃前の予告、撤退、ボスの行動を整理し、同じ条件で再現できるテストで確認します。

• 敵の索敵・追跡・撤退を実装したいとき
• 攻撃予告や間合いの調整
• ボスの段階変化や中断処理の修正

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

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