K.F logo

ロボティクス・ドローン向けB2B Eコマースとブランディング

プロジェクト概要

Norsatのロボティクス・ドローン事業拡大に向け、新しいShopify Plusストアのブランド、UI/UX、フロントエンド実装をリード

期間

2026年 — 継続中

担当

ブランディング、UI/UXリード、フロントエンド開発者、PDM

会社

Norsat International, inc.

チーム

部門横断チーム — プロダクトオーナーおよび事業関係者と、MVPの優先順位とプラットフォーム戦略を協働で検討

技術スタック/ツール

Figma, Illustrator, Shopify Liquid, JavaScript, Shopify Plus, Shopify Metafields, Windchill, Business Central

成果

公開から最初の1か月でユニークユーザー546人に到達し、B2B企業向けに製品を出荷しました。

公開URL

公開URL

背景と課題

背景

Norsat Internationalは衛星通信製品に加え、ロボティクスとドローン分野へ事業を拡大していました。農業分野の官公庁・法人顧客に向けた、新しいブランドとデジタル体験が必要でした。

課題

既存の衛星通信事業と新部門を差別化しながら、高度に専門的なB2B市場で信頼を築くことが課題でした。

解決策

ブランド戦略、UI/UXデザイン、LiquidとJavaScriptによるShopifyフロントエンド開発をリードしました。複雑な商品探索を支える情報設計とデータ構造を整え、拡張可能なプラットフォームを構築しました。

私の役割

ブランドアイデンティティ、ユーザー体験、Shopify Plusのフロントエンド開発をリード。B2Bデザインシステムの構築、Windchill・Business Centralと連携するShopifyメタフィールド設計、MVPの優先順位に関する部門横断の協働を担当しています。

主な取り組み・画面

Aerobot Intelligence ブランドガイドライン

ブランディング

革新性と未来志向の自律型ソリューションを伝えながら、DJIなど主要技術パートナーとの公式連携や熟練エンジニアによる専門トレーニングを通じた信頼性も表現する必要がありました。 メインカラーには彩度を抑えたグリーンを採用しました。多くのロボティクス・ドローン企業が用いる黒ではなく、B2B、特に官公庁顧客に求められる信頼感を保ちつつ、クリーンで革新的な印象をつくりました。低視力のユーザーにも配慮してアクセシビリティを検証しています。 デザインシステムのコンポーネントを構築・同期し、開発チームとグラフィックデザイナーがプロダクトやマーケティング素材に一貫して適用できるようにしました。

戦略基盤とリサーチ

戦略

初期のブランド戦略フェーズで競合分析を行い、プロダクトオーナー、CEO、開発チームへのインタビューと既存サイト・競合の調査を実施しました。 その結果、空と地上の両方を扱えること、40年の実績を持つNorsatの安定性とDJIの公式販売代理店としての専門性、そして単なる製品販売ではなくロボティクスで顧客の課題解決を支援するソリューション企業であることを、3つの強みとして定義しました。

商品カタログとメガメニュー
モバイルナビゲーションとフィルター
アクセサリー互換性確認

カスタム機能開発によるUXナビゲーション

カテゴリと商品モデルのための独自の商品階層を設計し、コレクションページ、商品ページの互換アクセサリー、およびアクセサリーフィルターに実装しました。 例えば「ドローン → DJI製品 → DJI製品ライン」のように、標準のShopify Plusでは実現できない階層を構築。情報設計をShopifyメタフィールドへ落とし込み、フロントエンドを実装するとともに、データ入力・同期のワークフローをプロダクトチームと整備しました。商品を見つけやすくし、ECの成長を支援しています。

カスタムShopify UIコンポーネントとデザインシステム

コンテンツ制作の効率とブランドの一貫性を高めるため、カラーテーマや商品カードを含むカスタムShopify UIコンポーネントを開発しました。 2種類の配色とカードバリエーションにより、デザインの専門知識がなくてもShopifyエディタ上で新しいコンテンツを作成できます。コンポーネントは反復的な開発作業を減らし、最新のテーマ構造にも準拠しています。

情報アーキテクチャマップ

情報アーキテクチャ

収益に直接つながる製品・サービスコンテンツを優先しました。初期案ではトレーニングとレンタルを1ページにまとめる予定でしたが、競合調査から、サービス、レンタル、トレーニングを分けたほうが探しやすいと判断しました。 ケーススタディ、ニュース、ソリューション、業界別ページは初回リリースでは優先度を下げ、ホームページから主要なセクションへ分かりやすく誘導する構成にしました。

成果

公開から最初の1か月でユニークユーザー546人に到達し、B2B企業向けに製品を出荷しました。