完成版
こんにちは！UIデザイナーのmennmiです！
以前Xで投稿した「架空のスマホゲームのホーム画面」についての制作記事です！✨️
どういう考え方で作ったか日記のような感じでまとめたので、ぜひ読んでくださったら嬉しいです！
このデザインを作り始めたきっかけは、普段の業務では決まったテイストのUIを制作することが多く、表現の幅を広げたいと思ったからです。
「勉強も兼ねて、休日に挑戦してみよう！」と思い立って制作を始めました。
とはいえ、いざ休日に制作しようとすると腰が重く時間がかかってしまい…自主的に作品を作り続けている方々は本当にすごいなと改めて感じました…！
①コンセプトと世界観
近未来のクリエイター育成学校「ネオ・クリエイティブ専門学校」を舞台に、
学生として仲間と共に作品を創り、競い、成長していくクリエイティブ育成シミュレーションゲーム。
まず、chatGPTに出してもらった架空のゲームの要件を元にイメージを膨らませていきました。
今回やってみて、chatGPTにゲーム設定の部分を助けてもらえるおかげで、自主制作のとても良いアシスタントになってくれました。
結果的に、「学生」「成長」「近未来」などのキーワードを元にして、リファレンスを探して分類していきました。
リファレンス探しはだらだらやると永遠と眺めてしまいがちなため、ルールを決めて行っています！
- 時間を決める(10分間)
- リファレンスのどこが良いと思ったかメモを書く
画像をFigmaにペタペタ貼っていき、その横に「自分が良いと思ったポイント」を書いていくと共通化出来る部分が見出され、どこを要素として抽出していくか見えてくるのでおすすめです。
【余談】
今回パターン出し(ラフ)も1案だけやってみました。
透明感のあるオシャレな雰囲気も合うかなと思い作ってみたのですが、今回は「学生の力強さ」も表現したかったため1案目のままいくことにしてこちらは没にしました🙏
②カラーとシェイプ
カラーはビビットな配色にすることで爽やかで近未来的な印象を入れました。
また、学生の成長していく力強い印象をイメージして、全体的に右上がりのシェイプにしました。
方向が見えてきた段階で言語化しておくと清書がしやすいのでおすすめです。
③情報設計
今回「学生」という明確なテーマがあったため、学生手帳というモチーフを使ってみようと最初から考えていました。
ホーム画面はイラストを魅力的に見せることが重要ですが、ステータス、イベント、サブメニュー、、、など載せたい要素も多い画面になります。
そこで、学生手帳というキャラクターが常に携帯しているであろうモチーフの上にユーザーに紐づく情報を載せ、逆に、システマチックな情報（お知らせ、メニュー）はよくあるUIのボタンの見た目で制作してみました。
④アセット
実は今回の自主制作では、デザイン内に使われているイラストやアイコンの多くをAIで生成しています。
普段、UIデザイナーが自主制作をしようと思っても、「使えるイラストや素材がない…」という壁にぶつかることが多いと思います。
そんなときにAIを活用すれば、自分のイメージに近いアセットを短時間で作り出すことができ、自主制作が捗るな〜と感じました！
最近はAIの精度もかなり上がっていて、参考になるレベルの出力も多くなっているので、上手く使いこなしていきたいです！
最後に
ここまでご覧いただきありがとうございました！
これからも制作記事も上げていこうと思っていますので、引き続き見ていただけると嬉しいです🌼
今回作ったUIに、たかゆさんが神アニメーションをつけてくださったのでそちらもぜひご覧ください！↓
