こんにちは、YUICHIです!

今回もフリーランスのお仕事記事として、
ARスマホゲームの「ペチャバト」を運営する
「GRAFFITY Inc.」のコーポレートサイトのリニューアルの
UIデザイン/グラフィックデザインを担当させていただきました🎉

今回は「日本語 / 英語」の両言語対応しているサイトデザインになっています!

▼GRAFFITYリニューアルコーポレートサイト

▼「ペチャバト」

前回同様、どのようにして制作したのか書いていきたいと思います!

1 .キッカケ

キッカケの結論から言うとGRAFFITYのCEOのTottiさん(森本さん)と
シーシャ友達で仲が良かったからですｗ

Tottiさんが三軒茶屋に引っ越してくる時にTwitterで連絡を自分からして仲良くなりました。

その後、「HPをリニューアルしたいから優秀デザイナーでいい人知らない？」と聞かれたので、初めは有名な方々を紹介したのですが、
ついでに「自分でよければやりますよ」と声を掛けましたｗ

思いのほか、Tottiさんは自分は忙しいと思ってくれていたようで、
「えっ、リソース大丈夫ならお願いしたい!」
となり6/17から作業を開始しました💪

2.制作の流れ

今回はとてもスピーディーに制作に打ち込むことができました!
その理由として以下3点があったからだと思います。

・情報内容を事前に「Notion」でまとめてくださっていた点
・具体的イメージ像の言語化がスムーズだった点
・連絡のレスポンスがお互いに早かった点

制作の流れは以下の10工程で行い、
その時に意識したことを書きます。

1. 初回打ち合わせ&ヒアリングMTG
・Notionと以前のHPのデザインを比較して今回の方向性を定める

2. デザインテイストを揃えるため参考サイトやPinterestでイメージを共有
・言語化はすでにできていたので、ヴィジュアルの共有をした
・自分の方で数多くのサイトで流行や業界のテイストをリサーチ(50個程度)

3. Notionを元に情報設計と全体の構成デザイン(UI)を作成
・一旦なるべく早く完成させて修正で一気に理想に近づけるようにした
・サイト内部のモーションで動きも意識(AR/VR感の表現)

4. 変更や修正、追加のデザイン
・GRAFFITYのデザイナーさんのイメージもヒアリング
・相手のイメージの上をいく案を出すことに集中

5. レスポンシブ対応デザイン
・情報にゆとりをもたせて見やす差を意識

6. コーディング会社への引き継ぎ
・デザインデータやリンクの整理(XD)
・デザインの素材をドライブ共有
・モーションやホバーのディレクション準備

7. 実装確認
・モーションの挙動や反応が正常か確認
・インパクトにかける部分がないか確認
・追加/修正点は1度に全て返答できるようにチェック

8. 最終確認
・リンク先が正常か
・テキストの被りや誤字脱字
・レスポンスの確認(全デバイス)

9. English版の調整

10. リリース

以上の工程を6/17~7/11の約4週間で行いました!🔥

今回はGRAFFITYのCEO森本さん、デザイナーの塚本さんと直接3人でどんどん直接議論しながら進めることができたので、お互いにすごく納得できるものが完成しました✨

社員、業務委託関係なく同じ仲間として近(親)しく仕事をするのは、お互いのパフォーマンスを上げるのだと実感しました💡

3 .デザインに関して

GRAFFITYさんのコーポレートサイトのデザインで意識した点は

１. AR/VRを連想させる最先端
-TOPヴィジュアルのモーションやグラデーション
-タイトルの遊び
2. 「ペチャバト」の世界観の保持
-ゲームや今後のサービスカラーによって変更できるスペース
-ゲームのSP画面や実際の使用シーンの配置
3. 今後の新サービスが増えても臨機応変に変化できるデザイン構造
-横長にすることで今後カルーセルにもでき、同じフォーマットで縦に並べることも可能
4. Gameのような楽しみがあるPOP感
-カラーリングはなるべくハイライトを使用
-ホバー時にネオンが放つ光をイメージ
5. 仮想空間を体現する奥行きや立体感
-サイト全体の背面に「点描」を採用し3Dなどの設計図をイメージ
-テキストの重ね時やBOX場の箇所はドロップシャドー
6. CEOのTottiさんが好きな「Avengers感」🦸‍♂️(ここ大事w)
-チームメンバー紹介の部分で自分がキャラのチップの1つを体現

以上の6点を意識しつつデザインしました。

毎回更に意識していることとしては、
外部のフリーの画像はなるべく使用しないことを心がけています。
理由としては、世界観や雰囲気が変わりやすいのと、外部の素材に依存してしまう可能性が高いためです😭

パターン出しでも2〜３つずつして比較検討していました！

また今回は「日本語版」「英語版」でリリースすることも決定していたので、英語でも耐えれるデザインにしています!

参考サイトは海外のAR/VR業界のイケてるサイトを3つほど出しそれを中心に日本の流行やトレンドのサイトを3つ出してデザインを出していました。

デザイン共有はXDのプロトタイプでなるべく共有して実際のイメージに近い形で見てもらい毎回フィードバックもらっていました。
フィードバック回数はおよそ5回ほどでした😊
(※今回XDなのはコーディング会社が対応しているソフトを使用する必要があったため)

またコミュニケーションでは途中から「Slack」に入れてもらいスムーズなレスポンスが図れるようにしていただきました。
とても助かりました!🙇🏻‍♂️

4 .感想

今回は普段仲良くしている人の依頼ともあり、
どんな会社でどんな人が働いているのか事前に知っていたので、かなりスムーズでした。そして、コミュニケーションもやりやすかったです。😊

以上の条件が揃っていれば通常の1.5~2倍の速さで制作は進むと感じました。
なので、案件が始まる前に「飲み」「ランチ」「カフェ」「オフィス」にお邪魔して他愛もない話をすることも大切だと感じました。
結局、人間同士なので感情部分って大切ですね☕️

また、今回は使用したサービスとして「Notion」「Adobe XD」「Slack」「Gyazo」この4つで全てやり取りしていました。
どれもどんどん進化していて業務効率化に役立ちフリーランスの味方でした💪

今後も、Webからアプリのデザインまで様々ご協力させていただきますので、FacebookやTwitterからのメッセージいつでもお待ちしてます!!

5. YUICHI ポートフォリオ

また、ポートフォリオも完成しましたので、是非ごらんください!

ご清聴ありがとうございました🎨