安川電機 AIロボット

安川電機様「AIロボット」特設サイトのWeb制作

デザインコンセプト

「産業用ロボットは、自分で考えて動く時代へ」というメッセージを軸に、AIロボット「MOTOMAN NEXT」の世界観を一冊のブランドブックを読み進めるように体験できる、特設サイトとしてデザインしました。

安川グループのコーポレートサイト内に位置付けながらも、「AIロボット」という新しい製品ブランドの独自性が伝わる、未来感のあるトーン＆マナーへ大胆に振り切っています。

工場の現場で稼働する産業用ロボットならではの「重厚さ・確実性」と、AIが自律的に思考する「知性・繊細さ」。一見相反するこの二つの世界観を、一画面のなかにバランスよく同居させることを、デザイン全体の骨格としました。

カラーリング・キービジュアル

カラーリングは、安川グループのコーポレートカラーであるブルーをキーカラーとして、サイト全体をコーポレートブランドの統一感あるデザインとしています。AIテクノロジーらしい知的でクリーンな印象を重ね合わせました。

質量感のあるロボットの世界観と、繊細なデジタルの世界観を、色数を絞り込むことで一画面に共存させています。

ファーストビューではAIロボットを象徴する製品名「MOTOMAN NEXT」を大きく配置し、安川電機が新たに切り拓くAIロボットというフロンティアを、一目で印象づける設計としました。

レイアウト・アニメーション

ページ全体は、縦スクロールによるストーリーテリング型のレイアウトを採用しています。「AIロボットとは？」→「なぜ必要か」→「何ができるか」→「実際の活用事例」→「製品紹介」へと、段階的に理解が深まっていく情報の流れに沿って、自然と読み進められる構造です。

スクロールに連動したフェードイン／スライドインアニメーションを各セクションへ実装し、テキストや図版が呼吸するように現れる演出によって、技術的な情報を一度に押しつけず、読み手のペースで世界観に没入してもらえる構造にしました。

セクションの境目には大きな余白とフルワイドのビジュアルを配置し、テーマごとに「呼吸」のあるリズムを生み出すことで、長尺ページにありがちな読み疲れを防いでいます。

さらに、TOP →「AIロボットとは？」→「ユースケース」という複数ページ間の遷移にも、統一されたトランジションとビジュアルトーンを通底させ、3ページ全体が一つのブランド体験として成立するように設計しています。

グレート・ビーンズは、Webマーケティングの戦略からコンテンツ制作、デザイン・実装まで、ワンストップでお任せいただける強みがあります。