メンバーとの制作をよりスムーズに！ゲーム画面構成(UI)の作成手順

ゲーム画面構成の手順について、参考になりそうな記事があったので簡単にまとめてみます。全部で4ステップ。
制作にあたっては中間チェックをする場合があると思うので、この4ステップのどこかでメンバーと意見交換がし合えたらいいなと思っています！

詳しくはこちら↓
参考サイト：　
● S.Design.Labo　https://sdesignlabo.com/photoshop/ps-gameui1/
●　https://cocoda-design.com/contents?category_id=17

【推奨】

・横幅1920px、高さ1080px、解像度72、RGBカラーで作成
・photoshopで作成



＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

【ゲーム画面構成(UI)・作成手順】
〜4つのステップを紹介〜

①どんなゲームにするか、イメージを膨らませてラフを描く。
この時点でストーリーやどんなテンションで進められるか、隅々までイメージを膨らませてメンバーですり合わせていく必要がありそう。

②載せる要素を決める。ざっくり配置。
S.Design.Laboさんでは手書きで配置していたので私も今回は手書きで。
本当はXD等で遷移先を含めたワイヤーフレームをキッチリ作成するみたい

③テキストや画像を配置してみる。
ラフを元にフォトショップでシェイプツールと文字ツールでざっくりレイアウトここでフォントも決めたい。

④各アイコンを作成して配置。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

【画面構成の手順まとめ】

①イメージを膨らませ、ラフを描く。
②載せる要素を決める。ざっくり配置。
③テキストや画像を配置してみる。
④各アイコンを作成して配置。

今後制作にあたってはメンバーとイメージ共有しながら進める必要があると思うので、この4つのステップのどこかで確認をとりながら制作に取り掛かれたらいいと思いました。

次はゲームの画面上にアイコンがどのように並んでいるか、調査・まとめてみます！