SHIBUYA GAME

eスポーツに特化したメディアサイト・ロゴデザイン

eスポーツに特化したメディアサイト「SHIBUYA GAME」のデザインやフロントエンド開発、WordPressの実装、ブランド戦略立案(ロゴデザイン)など、プロジェクトリーダーとして全般的に担当しました。サイト公開後も継続的な改修や運用サポートを実施しています。

目的

  • eスポーツの認知度拡大
  • ゲーム文化の活性化
  • eスポーツWebメディアとしてのブランドイメージ確立

施策概要

  • メディアサイト構築
  • VIデザイン(ロゴデザイン)

依頼主

ビットキャッシュ株式会社

公開

2017年5月

プロジェクト期間

2017年2月〜継続中(初期構築期間:約3ヶ月)

対応デバイス

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

備考

2017年5月以降はサイト運用サポートや機能追加などを実施。

プロデュース

コロニーインタラクティブ(同社在籍時のプロジェクト)

My role

私の役割・主に担当したこと

  • 情報収集・リサーチ
  • Web戦略立案
  • ブランド戦略立案
  • 情報設計
  • アートディレクション
  • テクニカルディレクション
  • Webデザイン
  • VIコンセプト設計
  • VIデザイン(ロゴデザイン)
  • ブランドガイドライン(VIマニュアル)作成
  • システム要件定義
  • コーディング(HTML・LESS・JavaScript・PHP)
  • WordPressの実装・カスタマイズ
  • プロジェクト管理
  • サイト運用マニュアル作成
  • DFP広告管理の導入
  • サイト運用アドバイス・サポート

Challenge

挑戦したこと

  • eスポーツに特化したWebメディアのありかたや表現を模索し、読みやすさと回遊性を重視してWebサイトを設計しました。
  • ブランド戦略の施策としてSHIBUYA GAMEのロゴデザインやブランドガイドライン(VIマニュアル)作成など、ブランドイメージ設計も実施。
  • 依頼主側で運用できるようにCMSとしてWordPressを導入。複数人での運用を想定して運用マニュアルを作成し、効率的に運用しやすくするための仕組みづくりにも注力しました。
  • ランキング表示、検索ボックスの使い心地向上、DFP広告管理機能の導入など、メディアサイトとしての機能面の強化を図りました。

Detail

成果物・制作工程

サイトデザイン

eスポーツのメディアサイトとして、「ビジュアルの魅力を活かすこと」と「文字の読みやすさ」に重点を置いて設計しました。

デザイン趣意書

SHIBUYA GAMEはWordPressというCMS(コンテンツマネジメントシステム)を導入したメディアサイトであり、デザインとシステム開発の両面からサイトを設計する必要がありました。

そこで依頼主との認識共有を円滑に進めるために、画像やテキストなどの記事コンテンツの表示方法やシステム仕様を記載したデザイン趣意書を作成しました。

デザイン趣意書には主にデザインの意図を具体的に記載しています。例えばどういった理由でレイアウトや配色、文字サイズ、記事の表示件数、要素の優先順位付けをしているかを明示しています。

サイトの完成イメージを具現化したデザイン趣意書を元に依頼主と打ち合わせをおこない、デザインやシステム要件を定めます。

ブランドロゴデザイン

SHIBUYA GAMEのブランドイメージ設計の施策として、ブランドロゴを制作しました。依頼主からSHIBUYA GAMEの目指す方向性をヒアリングし、コンセプト設計からデザインまで全てを担当しています。

ロゴデザインのコンセプト

「多様性」というキーワードを含んでコンセプトを再設計しました。そのコンセプトを元にシンボルマークの再構成やロゴタイプの視覚調整などをおこない、デザインの完成度を高めたうえでブランドロゴが完成しました。

以下はブランドロゴ設計のコンセプト資料を抜粋したものです。

ブランドガイドライン

ブランドロゴを適切に運用していただくためのブランドガイドライン(ビジュアルアイデンティティマニュアル)も作成しました。

ブランドガイドラインには主にブランドロゴやシンボルマークのアイソレーション(最小余白)や色指定、禁止事項などのルールや使用例を記載しており、ブランドロゴの扱うかたにわかりやすく伝わるように構成しています。

サイト運用マニュアル

SHIBUYA GAMEサイトを継続的に運用していただくためのサイト運用マニュアルを作成して提供しました。

サイト運用マニュアルを利用する状況を想定した結果、「○○がしたい」や「○○をするためにはどうすれば良いか」といった状況が最も多いと考え、目的から操作方法を調べられるように構成しました。

以下はサイト運用マニュアルの中から一部抜粋したページです。

  • © BitCash Inc.