動画マーケティングエージェンシーのコーポレートサイト
動画マーケティングエージェンシーである、GoGoMarke株式会社のコーポレートサイト制作プロジェクトです。にぎやかさとシンプルさの両立を意識して構成しました。
株式会社GoGoMarke
2021年1月
2ヶ月(第1フェーズ公開までは約1ヶ月)
PC, スマートフォン, タブレット
役割・主に担当したこと
挑戦したこと
「マーケティングとクリエイティブの両方から提案する・動画品質の高さ」というGoGoMarkeの強みを引き出すために、次のようなキーワードからデザインを構成しました。しっかりしている、安心感、シンプル、面白さ、親しみやすさ、カラフル、ワクワク感など。
情報としてテキストでしっかり説明しつつも、堅いイメージにならないように意識しました。コンテンツを引き立たせるためにモノトーンをベースとし、カラーのコンテンツがより強調されることを意図しています。
メインビジュアルのロゴはCSSのmask-imageを用いて表現しています。2021年1月のWebサイト公開当時、動画をCSSのmack-imageで切り抜いて見せる方法はあまり一般的ではなかったと思います。挑戦的な試みでしたが結果的に動きのある印象になり、調整を重ねて動作を安定させられたためこの方法で実装をおこないました。
ロゴがこのWebサイトのキービジュアルになるため、画面幅に対してどのくらいまで大きく(はみ出して)表示するかについて1%単位で検証を重ねました。最終的にはmask-sizeプロパティを112%で確定。さらに画面幅を大きくしていったときに大きくなりすぎないように、ブレイクポイントごとに細かく調整しています。
シンプルなデザインでありつつ、スクロール連動のアニメーションでにぎやかさを演出しています。更新のしやすさとアニメーション品質の観点から、グラフはChart.jsを用いてコードでグラフの数値を編集できるようにしています。コードで数値を変えられるつくりとすることで、年次更新にも対応しやすくしました。
更新頻度がそれほど高くないと思われるコスト比較のグラフは、CSSでアニメーション表現をおこないました。運用のしやすさを考慮し、コンテンツの更新頻度によって実装方法を使い分けています。
動画マーケティングエージェンシーのコーポレートサイト
クラウド録画サービスのプロモーションサイト
eスポーツに特化したメディアサイト・ロゴデザイン
レコード音楽の世界観でベアブリックの魅力を伝えるプロモーションサイト
アメリカンコミックの世界観でベアブリックの魅力を伝えるプロモーションサイト
介護事業者に向けた職員育成のための動画研修サービスサイト
実験的なロゴデザイン
スマートフォン向け放送局のサービスサイト運用・ページ制作
正方形枠のタイポグラフィ作品
実験的グラフィック
ビットキャッシュの新規ユーザー向けプロモーションページ
フランクミュラーの正規認定中古時計を販売するECサイト
アーティストのコラボレーション商品を販売するブランドサイト
Public
13
Limited
4
Total
17
一般公開可能な実績のみを掲載しています。非公開実績をご覧になりたい場合は、お手数ですがお問い合わせください。