架空サイトリニューアル【eスポーツ編】
こんにちは。QUOITWORKS(@quoitworks)の遠藤(@en_design0315)です。
自主学習で架空のサイトリニューアルに挑戦したので、デザイン完成までの過程を記録していこうと思います。
今回は、eスポーツに関する大会やイベントの企画・運営を行なっている企業のコーポレートサイトをお題に設定しました。
実在する企業を題材としているため、企業名は伏せています。(デザインもロゴの部分にはぼかしを入れています)
題材サイトの選定理由は、普段業務で固めのサイトを作ることが多いため、海外っぽいデザインを作りたかったということと、eスポーツにz世代や先進的なイメージがあり、そういうデザインが出来そうだと思ったことが理由です笑(単純ですみません😂)
完成したデザインはこちらです。
●ファーストビュー
●全体のデザイン
今回は以下のワークフローで進めていきました。
ヒアリング
今回はクライアントワークではないので、会社のホームページを見たり、ネットで会社名を調べるなどして、事業内容や今後目指していきたい方向性等を会社で実際に使用しているヒアリングシートに埋めていきました。
課題の抽出・ゴール設定
ヒアリングシートから現状抱えている課題を抽出し、そこからゴールを導き出します。ここで言うゴールというのは、課題に対して「〇〇な状態になっていればいい」という具体的なアプローチ(どういった手法で解決するか)を言語化したものです。
「事業姿勢」「機能訴求」「KPI関連」「ブランディング」「イメージ関連」の5つに項目を分けて整理していきました。
リニューアルサイトの方向性として、一番に「問い合わせの増加」、二番目に「採用応募の増加」を設定しました。
ワイヤーフレーム作成
リニューアルの方向性から、大まかな構成を以下にしました。
デザイン作成
ヒアリング、ゴール設定、ワイヤー作成を経て、やっとデザインを作り始めます。完成したデザインは最初にお見せしたので、ここでは割愛します。
色々と紆余曲折を経て最終的なデザインになったのですが、初稿はかなりボロボロで…
初稿では下記のFBを受けました。
そもそもデザインの表現が内容とずれている、調査不足、何となくのイメージで作っていることを指摘されました。
(下手だと思われたくない、ダサくないかなど見た目の担保を優先しすぎてしまい、中身が伝わらないデザインをつくってしまいがちなのは自分の悪い癖でよくやってしまいます😭)
なので改めて、そもそも 「eスポーツとは何か」や「題材としている会社は特にどういった分野のeスポーツのイベントを行っているか」を調べました。
調べたところeスポーツにはサッカー、野球などのように様々な種目があり、主に下記7つに分類されるそうです。
今回題材にしている会社の実績を見てみると、特にFPS/TPS、MOBAのイベント企画・運営を行うことが多かったため、その企業が実際に行ったイベントのゲームタイトルや、Twitchの視聴者数ランキングなどからFPS/TPS、MOBAの中で特に何のタイトルが人気かを調査しました。
次に該当のゲームのUIに何かしらの傾向がないか観察してみました。
下記は、ゲームUIのキャプチャをまとめたサイトなのですが、検索一つで各ゲームごとの様々な場面の画面が一覧で見れてめちゃくちゃ便利でした😳
・ボタンなどは楕円や四角形ではなく、一部に斜めのあしらいが入っている。
・何かしらの機能?の画面を開いている時は、全く別の画面に切り替わるのではなく、元の画面のまま背景がぼける。
・またその上に乗っている要素はベタ塗りのオブジェクトではなく、背景よりも若干暗く透過している。
・タブのカレント表示やハイライトしているボタンは色が反転するなど明らかに変わるのではなく、ぼんやり光っている。
→機能が多く、画面の広範囲を占有するのに対して圧迫感を感じさせないため?
→ゲームの世界観により没入感を感じさせるためにあえて目立ちすぎない見た目にしている?
→途中で敵が来てもすぐに分かるようにするようにするため?
→スピード勝負のため、いちいち切り替えて時間をロスしないようにするため?
・ボタンが枠線で囲まれているが四隅だけアクセントが付いている。
→UIより世界観、キャラクター(グラフィック)を目立たせたい?
こんな感じで各ゲームごとに気づいたことを書き出していって、特徴をキャッチアップしていきました。
キャッチアップしたものは下記などに踏襲しています。
そういえば、この記事を書いている途中でふと思い出したのですが
YouTubeで日本デザインセンターのアートディレクターである有馬トモユキさんが、APEXのUIについて解説されている動画がめちゃくちゃ学びが多かったです✏️
(デザイン作っている時に思い出したかった…!)
また上記以外に+a、eスポーツならではのデザインを取り入れたいと考えた際に、eスポーツの楽しみ方として実際にゲームをプレイするのはもちろん、大会・イベントに参加する他に、ゲーム配信・実況を見るという楽しみ方もあるようなのですが
(eスポーツ界ではそういった配信で得た、再生回数や視聴者からの投げ銭を主な収入源として活動する人のことをストリーマーと呼ぶそうです。)
これらの楽しみ方、どの場面においてもモニター(ディスプレイ)を必ず使うなと思いました。これはeスポーツならではの特徴であると感じたため、
画像には縞模様の表現を入れています。
まとめ
何とか形にはなったものの、その会社"ならでは"の表現が上手く見出せなかったことと、デザインを大きく作り直したことで大幅に時間がかかってしまったので、次は方向性がずれないように内容を正確に捉えられるようにしたいです。
(あと前回のnote更新からかなり日が空いてしまったので、もっと発信できるように頑張りたいです。。。😂)
最後に
少しだけ自社の宣伝をさせてください🙏
現在、QUOITWORKSでは8月末まで採用を積極的に行ってまして
ホームページやSNSなど覗いて頂けたら嬉しいです…!
よろしくお願い致します!
この記事が気に入ったらサポートをしてみませんか?