ガストロの画面デザインを考えています【記：あおたく】

こんばんは、あおたくです。

ガストロの製作は前回からはあまり進捗はなく、次のような感じです。

• 終盤: プロット100% / テキスト10%
• メインクエスト4つ
  • 最後のクエスト: プロット100% / テキスト5%
  • 最初のクエスト: プロット80% / テキスト5%
  • 二つ目のクエスト: プロット25% / テキスト5%
  • 三つ目のクエスト: プロット40% / テキスト0%
• 序盤の導入: プロット80% / テキスト5%
• 各メインキャラクターとの出会い
  • ユク＝ルク: プロット80% / テキスト5%
  • ジーファス: プロット25% / テキスト0%
  • グリムルーネ: プロット10% / テキスト0%
  • フィヨ: プロット80% / テキスト5%
• サブクエスト: 無

ちょっとだけ進んではいます。

進まなかったかわりに何をやっているかというと、

こんな感じで、前回作ったワイヤーフレームに画像を当てて実際の画面に近いイメージを組んだりしています。実際に組んでみると、見出しの装飾はどうするのが見やすいか、ボタンの配置はどうするのがいいか、など考えないといけないことが見えてきます。
この段階で画像の当て込みをしっかりやってしまうと手戻りが大きいので、ワイヤーフレームに戻って調整して、画像を当て込んで、という流れでやっていきます。

作業しながら思ったんですが、いきなり画像を使ってレイアウトするよりも先にワイヤーフレームを組んでからその上に画像を当て込むほうがやっぱり作りやすいですね。
Figma は作ったワイヤーフレームを画像でエクスポートできて便利なんですが、画像だけでなく各種マージンの数値などの CSS としてエクスポートすることもできます。CSS なので JS+Canvas で描画するときは自前で処理を書く必要はありますが、ほしい情報が数値として出力されるのでコードを書くときにも便利。