2025.2.3
弊社のテクニカルディレクターが
制作した便利ツールをまとめました。
弊社のテクニカルディレクターの梅津と岡部がこれまで制作したツールをまとめました。
皆さんも活用していただけるChromeエクステンションのご紹介だけでなく、過去案件の中で開発したツールも振り返っていますのでぜひご覧ください。
目次
みんなが使える便利ツール
TD岡部が制作・リリースしているChromeエクステンションやその他ツールをまとめました。皆様も使用できますので、ぜひ活用してくださると嬉しいです。
■ Chromeエクステンション
1. crawl sitemap generator
サイトマップが簡単に生成できるChromeのエクステンションです。表示しているサイトをクロールし、ページの一覧を出力します。出力結果をスプレッドシートやエクセルに貼り付ければ、高速・簡単にサイトマップを作成できます。
2. Capture Assist
サイトキャプチャの補助ツールです。スピードやイージングなどのカスタマイズができる自動スクロールが便利です。カーソル表示/非表示も選択できるので、サイトのキャプチャの時にとても重宝しています。弊社ではサイト公開時の紹介映像ををはじめとした映像制作の際に活用しています。
3. gyazooo
オンラインのスクリーンショットサービス gyazo に以下の機能を追加するエクステンションです。撮影後に表示されるページをスキップして、直接画像URLを表示します。シェアする場合にgyazoページのURLを送るよりも、画像URLを直接送ったほうが、表示までの時間が短縮でき喜ばれます。
■ その他
4. 環境情報取得ツール（ https://env.mount.jp ）
クライアントやチームメンバーの環境情報について簡単に把握することができる便利なツールです。「OS／ブラウザ教えて」でなく「このURLの結果をコピペして」で網羅的に相手の環境を把握することができます。
🔗 ネットワークのスピードテスト付きのロゴ無しのデータ
※ 上記リンクをクリックするとダウンロードでき、お好きな環境に設置いただけます。
過去案件で開発したツールまとめ
弊社では、TDがそれぞれの案件に必要な専用ツールを開発することも多々あります。過去にご紹介した専用ツールを振り返ってみましたので、ぜひご覧ください。
1. Yamauchi No.10 Family Office（Dev：梅津）
Yamauchi No.10 Family Office のサイト制作の際に開発した専用モデリングツールとオブジェクト配置ツール。このプロジェクトでは、合計で274種類のオブジェクトを作成し、それらをオブジェクト配置ツールを使って実際にステージ上にレイアウトしていきました。
▼ モデリングツール
各面を見ながらピクセルを一つ一つ積み重ね、側面、平面、正面、立体を表示する画面を行き来しながらオブジェクトを作成。出来上がったオブジェクトをフレームごとにピクセルを調整しアニメーションをつけていきました。
▼ オブジェクト配置ツール
出来上がったオブジェクトたちを一つ一つ配置していきます。全体の流れとオブジェクトのサイズ感を考慮して、PCとSPそれぞれで構成していきました。
2. PERFECT DAYS（Dev：岡部）
PERFECT DAYSのサイト制作の際には3つの専用ツールを制作しました。映画の世界観をサイトで表現するために欠かせないツールたちです。
▼ タイポグラフィツール
専用ツールでなぞった軌跡を、赤＝始点／緑＝終点、の色情報で保存、スプライトシート化することで、1枚の画像に全文字の輪郭・ストローク情報を記録しています。このツールによって、小説の文字が書き順どおりに描かれ、1画ごとにバラバラになる演出を実現することができました。
▼ ミキサーツール
文章と音の連動を設定するツールをつくり、音楽家の佐藤礼央さんと一緒に細かくチューニングしました。これにより、117個の環境音が読んでいる小説の位置に合わせて自然とミックスされ聞こえてきます。（シーンによっては10以上のトラックが重なることも。）
▼ 文字詰めツール
実装されたページに対して、ブラウザ上で文字詰めできるツールを開発しました。Adobeのillustrationと同じショートカットで操作でき、複数人が同時に作業可能です。PERFECT DAYSのサイトでは、見出し・UIのみならず、本文まで細かく調整しています。
このツールは他案件の制作でも活躍しており、AYANA BALIのサイトでも使用し文字詰めを行いました。
3. AYANA BALI（Dev：岡部）
AYANA BALI のサイト制作の際には、4言語で800ページ以上という膨大なコンテンツの管理を効率良く進めるためのツール開発を行いました。
▼ スプシCMS
Googleスプレッドシート／Driveからページ生成できるCMSを開発しました。すべてのテキスト・画像をスプレッドシートで管理でき、なじみのある操作性に加えて、複数人同時編集、セル単位でのコメント機能・編集履歴など、シート本来の機能もフル活用しています。
▼ 画像一括置換ツール
Webサイトで使用している約1200枚の画像を効率よくCMSに反映するために、Figmaプラグインを開発しました。本来であれば全ての画像を1枚ずつ置換するところを、ボタンひとつで一括置換してくれる便利ツールです。別案件でも汎用的に使えるようにアップデートされており、社内で大活躍のツールになりました。
◉ プラグインの機能
レタッチ前後の画像をファイル名マッチで一括置換
デザインデータから書き出し用フレームを一括生成
- フレームサイズが小数点になってしまう問題に対応し整数化
- パララックスのための余剰分を追加
- 使用箇所とデバイスに応じて書き出し倍率を自動設定
4. KUBOTA FUTURE CUBE（Dev：岡部）
KUBOTA FUTURE CUBE のサイト制作の際には、特徴的な3Dの空間を実現するための専用ツールを開発しました。
▼ キューブ作成ツール
細かくパーツ化したイラストを3D空間に配置しキューブを作成できるツールです。下記リンクからツールを体験することができます。保存はできないようになっていますので、お好きなように触ってみてください。
※ PCからの操作を推奨します。
◉ 操作解説
cubeの基本ショートカット
- wheel → ズーム
- drag → カメラぐりぐり
- shift + drag → 平行移動
- shift + 0 → カメラリセット
- shift + alt + drag → 水平垂直移動
cube内メッシュ作成画面のショートカット
- shift押しながら頂点選択 → 複数選択
- edgeを選択しながら cmd + clickで頂点を追加
- alt押しながら頂点をクリック → 削除
まとめ
今回は、弊社のテクニカルディレクターが開発した便利ツールについてまとめてみました。痒いところに手が届くような便利なChromeエクステンションは社内ではほとんどの人が活用しています。今後のリリースの予定は未定ですが、個人的には効率化を図るためのツールが開発されることを期待しています。そして過去案件で開発された専用ツールについては、弊社の制作過程の試行錯誤の一片が見えるものばかりでした。今後のプロジェクトの中で、どんなツールが生まれるのかとっても楽しみです。
