GoGoMarke

動画マーケティングエージェンシーのコーポレートサイト

動画マーケティングエージェンシーである、GoGoMarke株式会社のコーポレートサイト制作プロジェクトです。にぎやかさとシンプルさの両立を意識して構成しました。

目的

ブランディング・集客
動画制作とマーケティングの会社であることを伝える
動画の品質やクオリティ感、安定感を伝える

施策概要

Webサイト構築
VIデザイン（ロゴデザイン）

依頼主

株式会社GoGoMarke

公開

2021年1月

プロジェクト期間

2ヶ月（第1フェーズ公開までは約1ヶ月）

対応デバイス

PC, スマートフォン, タブレット

Role

役割・主に担当したこと

情報収集・リサーチ
Web戦略立案
情報設計
アートディレクション
テクニカルディレクション
Webデザイン
VIデザイン（ロゴデザイン）
コーディング（HTML・CSS・JavaScript）

Challenge

挑戦したこと

動画をロゴの形に切り抜いた演出表現（CSSのmask-imageを使用）。
にぎやかさとシンプルさの両立を目指したデザイン。
スクロールに連動したグラフアニメーション。

にぎやかさとシンプルさの両立

「マーケティングとクリエイティブの両方から提案する・動画品質の高さ」というGoGoMarkeの強みを引き出すために、次のようなキーワードからデザインを構成しました。しっかりしている、安心感、シンプル、面白さ、親しみやすさ、カラフル、ワクワク感など。

情報としてテキストでしっかり説明しつつも、堅いイメージにならないように意識しました。コンテンツを引き立たせるためにモノトーンをベースとし、カラーのコンテンツがより強調されることを意図しています。

動画をロゴで切り抜いて印象的に

メインビジュアルのロゴはCSSのmask-imageを用いて表現しています。2021年1月のWebサイト公開当時、動画をCSSのmack-imageで切り抜いて見せる方法はあまり一般的ではなかったと思います。挑戦的な試みでしたが結果的に動きのある印象になり、調整を重ねて動作を安定させられたためこの方法で実装をおこないました。

ロゴがこのWebサイトのキービジュアルになるため、画面幅に対してどのくらいまで大きく（はみ出して）表示するかについて1%単位で検証を重ねました。最終的にはmask-sizeプロパティを112%で確定。さらに画面幅を大きくしていったときに大きくなりすぎないように、ブレイクポイントごとに細かく調整しています。