架空サイトリニューアル【eスポーツ編】
こんにちは。QUOITWORKS（@quoitworks）の遠藤（@en_design0315）です。
自主学習で架空のサイトリニューアルに挑戦したので、デザイン完成までの過程を記録していこうと思います。
今回は、eスポーツに関する大会やイベントの企画・運営を行なっている企業のコーポレートサイトをお題に設定しました。
実在する企業を題材としているため、企業名は伏せています。（デザインもロゴの部分にはぼかしを入れています）
題材サイトの選定理由は、普段業務で固めのサイトを作ることが多いため、海外っぽいデザインを作りたかったということと、eスポーツにz世代や先進的なイメージがあり、そういうデザインが出来そうだと思ったことが理由です笑（単純ですみません😂）
完成したデザインはこちらです。
●ファーストビュー
●全体のデザイン
今回は以下のワークフローで進めていきました。
1.ヒアリング
2.課題の抽出・ゴール設定
3.ワイヤーフレーム作成
4.デザイン作成
ヒアリング
今回はクライアントワークではないので、会社のホームページを見たり、ネットで会社名を調べるなどして、事業内容や今後目指していきたい方向性等を会社で実際に使用しているヒアリングシートに埋めていきました。
課題の抽出・ゴール設定
ヒアリングシートから現状抱えている課題を抽出し、そこからゴールを導き出します。ここで言うゴールというのは、課題に対して「〇〇な状態になっていればいい」という具体的なアプローチ(どういった手法で解決するか)を言語化したものです。
「事業姿勢」「機能訴求」「KPI関連」「ブランディング」「イメージ関連」の5つに項目を分けて整理していきました。
リニューアルサイトの方向性として、一番に「問い合わせの増加」、二番目に「採用応募の増加」を設定しました。
ワイヤーフレーム作成
リニューアルの方向性から、大まかな構成を以下にしました。
●上段
どういった企業であるか、何を提供しているかをビジュアルを用いながら情緒的に伝えることで、自社をより強く印象付ける、また具体的なサービスの紹介を通じて内容が深く伝わるようにする。
●中段
「取引先企業」や「数字で知るコンテンツ」などこれまでの実績、実力を社会的評価から具体性を持って提示することで、サービスの信頼感を高める。
●下段
「メンバーインタビュー」や「ジャーナル」など働く人や社内の雰囲気が感じられるコンテンツを用意。求職者に入社後のイメージを具体的に想起させ、応募へのハードルを下げる。
デザイン作成
ヒアリング、ゴール設定、ワイヤー作成を経て、やっとデザインを作り始めます。完成したデザインは最初にお見せしたので、ここでは割愛します。
色々と紆余曲折を経て最終的なデザインになったのですが、初稿はかなりボロボロで…
初稿では下記のFBを受けました。
●伝える部分に関して
・FVのビジュアルが小さく何の会社か分かりづらい。
・ヘッダー、フッターが英語だらけ。飾りに見える。
●トンマナに関して
・ビットマップフォントが古いゲームの印象で、eスポーツの近未来感とずれている。
→今、流行っているeスポーツのUIを調査する。また題材としている会社がeスポーツの中でも特にどの分野が得意なのかを調べて、そのゲームのUIの傾向を取り入れるなどしないとこの会社ならではの表現にならない。
・カラーがネオン系なのは良い
→ゲーミングパソコンなどネオン系のため印象が合っている。
そもそもデザインの表現が内容とずれている、調査不足、何となくのイメージで作っていることを指摘されました。
（下手だと思われたくない、ダサくないかなど見た目の担保を優先しすぎてしまい、中身が伝わらないデザインをつくってしまいがちなのは自分の悪い癖でよくやってしまいます😭）
なので改めて、そもそも 「eスポーツとは何か」や「題材としている会社は特にどういった分野のeスポーツのイベントを行っているか」を調べました。
調べたところeスポーツにはサッカー、野球などのように様々な種目があり、主に下記7つに分類されるそうです。
今回題材にしている会社の実績を見てみると、特にFPS/TPS、MOBAのイベント企画・運営を行うことが多かったため、その企業が実際に行ったイベントのゲームタイトルや、Twitchの視聴者数ランキングなどからFPS/TPS、MOBAの中で特に何のタイトルが人気かを調査しました。
●Twitchとは
ライブストリーミング配信プラットフォーム。ここでの配信者はストリーマーと呼ばれている。PCゲーム、ニンテンドーswitch、PS5などとの連携が容易で、ゲームプレイ生配信に強い。eスポーツ大会の独占配信も行っており、世界中のプロゲーマー、ストリーマーの多くがこのプラットフォーム上を中心に活動している。
次に該当のゲームのUIに何かしらの傾向がないか観察してみました。
下記は、ゲームUIのキャプチャをまとめたサイトなのですが、検索一つで各ゲームごとの様々な場面の画面が一覧で見れてめちゃくちゃ便利でした😳
・ボタンなどは楕円や四角形ではなく、一部に斜めのあしらいが入っている。
・何かしらの機能？の画面を開いている時は、全く別の画面に切り替わるのではなく、元の画面のまま背景がぼける。
・またその上に乗っている要素はベタ塗りのオブジェクトではなく、背景よりも若干暗く透過している。
・タブのカレント表示やハイライトしているボタンは色が反転するなど明らかに変わるのではなく、ぼんやり光っている。
→機能が多く、画面の広範囲を占有するのに対して圧迫感を感じさせないため？
→ゲームの世界観により没入感を感じさせるためにあえて目立ちすぎない見た目にしている？
→途中で敵が来てもすぐに分かるようにするようにするため？
→スピード勝負のため、いちいち切り替えて時間をロスしないようにするため？
・ボタンが枠線で囲まれているが四隅だけアクセントが付いている。
→UIより世界観、キャラクター（グラフィック）を目立たせたい？
こんな感じで各ゲームごとに気づいたことを書き出していって、特徴をキャッチアップしていきました。
キャッチアップしたものは下記などに踏襲しています。
そういえば、この記事を書いている途中でふと思い出したのですが
YouTubeで日本デザインセンターのアートディレクターである有馬トモユキさんが、APEXのUIについて解説されている動画がめちゃくちゃ学びが多かったです✏️
（デザイン作っている時に思い出したかった…！）
●サイドナビに関して
・暗闇や雪山など、背景にどんな絵が来たとしても成立するように（文字などの要素が馴染まないように）座布団が敷かれている。
・色の薄い座布団と濃い座布団が混在。
→目に入ってくる情報の順番を色味のコントラストでコントロールしている
●ブラー（ぼかしの表現）に関して
・背景の情報量が少なくなっているのに背景に何があるかが分かるため
文字などを入れてもつぶれにくい。
・単にぼかしただけだと文字が見づらいため、ぼかした上に少しだけ明度を落としている。
●UIの一部が斜めになっていることに関して
・基本的に構造物に対して斜めのものがくると視覚的に別のものに見えるため、UIが馴染まない。
また上記以外に+a、eスポーツならではのデザインを取り入れたいと考えた際に、eスポーツの楽しみ方として実際にゲームをプレイするのはもちろん、大会・イベントに参加する他に、ゲーム配信・実況を見るという楽しみ方もあるようなのですが
（eスポーツ界ではそういった配信で得た、再生回数や視聴者からの投げ銭を主な収入源として活動する人のことをストリーマーと呼ぶそうです。）
これらの楽しみ方、どの場面においてもモニター（ディスプレイ）を必ず使うなと思いました。これはeスポーツならではの特徴であると感じたため、
画像には縞模様の表現を入れています。
まとめ
何とか形にはなったものの、その会社"ならでは"の表現が上手く見出せなかったことと、デザインを大きく作り直したことで大幅に時間がかかってしまったので、次は方向性がずれないように内容を正確に捉えられるようにしたいです。
（あと前回のnote更新からかなり日が空いてしまったので、もっと発信できるように頑張りたいです。。。😂）
最後に
少しだけ自社の宣伝をさせてください🙏
現在、QUOITWORKSでは8月末まで採用を積極的に行ってまして
ホームページやSNSなど覗いて頂けたら嬉しいです…！
よろしくお願い致します！
＜採用情報＞
— ムラマツヒデキ｜QUOITWORKS Inc.｜デザイナー (@muuuuu_chang) June 23, 2023
QUOITWORKSでは業務拡大のため夏ぐらい目安で現在デザイナーの募集を行なっております。
カルチャーフィットや人間力を重視しておりますので社会人経験者歓迎です！ご応募お待ちしております！
●募集要項https://t.co/grD7PS0O8Q
この記事が気に入ったらサポートをしてみませんか？