こちらは記念すべき秋葉原スクールテックブログ第1回目の投稿です！
まずはしまとー班のアリム(https://zenn.dev/arim)の記事、テーマは「トンマナ、、決めてますか？」です！それではどうぞ！
丁寧な開発、してますか？
なんとなくいいアイディアを思いついて、なんとなく開発を始めて、なんとなくバズらないものが出来上がる。そんな経験をした人、いませんか？
今回はその中途半端さを解消する方法を書いていきます！
そもそもなぜ中途半端になるのか
それはズバリ、、、最初に計画をたてていないからです！
いいアイディアを思いついて、すぐに開発を始めて形にしたい気持ち、痛いほどわかります。
でもちょっと待って！
いざ開発を始めても、計画を最初にたてていないと何度も途中で手が止まってしまいます。
そこでそれらを事前に防いでくれるのがトンマナです。
トンマナとは
それではトンマナについて説明していきます。
トンマナとは、トーン＆マナーの略称で、そのプロダクト「らしさ」を象徴するデザインの要素のことです。
早速ですが、皆さんはこの画像を見た時に何を思い浮かべますか？
クリスマスと答える人が多いのではないのでしょうか。
緑と赤が交互に繰り返されるだけでクリスマスと連想できる、これはトンマナの成功例です。
このように、トンマナを決めることはプロダクトのプロモーションに非常に重要です。
それでは具体的なトンマナの決め方を以下の6つのステップで紹介していきます。
-
トンマナの決め方
- コンセプトキーワードの決定
- イメージソースの収集
- 使用カラーの決定
- フォントの決定
- モチーフ選び
- サンプルイメージの作成
1. コンセプトキーワードの決定
まず初めにトンマナを一言で表す言葉を定義します。
今回は私が開発中のゲームを例に説明します。
このゲームはプレイヤーが創世記に沿って自分だけの世界を創るゲームです。
このように簡潔にまとめるのがお勧めです。ポイントは二つの単語を一つにまとめる感じです。
もととなった二つの単語それぞれに説明を加え、なぜその組み合わせにしたかの説明を加えるとなおいいです。
2. イメージソースの収集
次にそのプロダクトの完成形をイメージすることができる画像を収集します。
このように間違ったイメージをされないようにNGイメージを収集しておくことも重要です。
3. 使用カラーの決定
デザインをするときに困らないようしっかりと決めておきます！
おおむね次のような項目を決めておくとスムーズに進みます。
| 色の種類 | 用途 |
|---|---|
| ベースカラー | 背景などベースに使用する基本色 |
| キーカラー | アクセントに使用する差し色 |
| ポジティブカラー | ユーザーなどが見た時にうれしい気持ちになるように設定する |
| ネガティブカラー | ネガティブな状況を伝える際の色 |
ゲーム開発となるとさらなる色の役割分担が必要ですが、基本的に共通しているのはこれらです。
一番右の進行カラーとは、ゲームが進行する際の指標にする色で、主にボタン類に適応します。
4. フォントの決定
フォントは主に、見出し・本文(・パラメータ)の2から3種類を決めておくとよいでしょう。
手書き系のフォントは読むときの負荷が大きくなったりするので、見出しだけに使用したり、相性の良い異なるフォントを使用することが望ましいです。
5. モチーフ選び
ここで決定するモチーフは、背景に装飾として用いたり、ゲームにおいてはボタンを押したときに表示したりする(集中線など)ことでトンマナの確定に貢献します。
先ほどのイメージソースに沿うと決めやすいです。
6. サンプルイメージの作成
最後にサンプルイメージについてです。
ここまでの情報がそろったら試しにデザインしてみましょう。ラフで構いません。
サンプルなので画面に乗せる情報のすべてを確定しなくて大丈夫です。
あくまでも現時点でのトンマナがプロジェクトのコンセプトに合致しているかを確認するための資料として用います。
参考として、私が使用した手順を書いておきます。
- 手書きのスケッチ:紙とペンでざっくりとスケッチします。
- テキスト配置:選定したフォントをスケッチに沿って配置します。
- 素材はめ込み:キャラクターの画像などを配置します。
- ラフデザイン:細部を整えます。
最後に
以上が開発が中途半端に終わらないための計画の立て方もとい、トンマナの決め方についてでした。
この記事で多くの人が丁寧な開発生活を送れることを願います。
また、この記事を執筆する際に参考にした本を紹介させていただきます。
この本では今回述べたトンマナについてだけでなく、ゲームを開発するときにおいてUIで気を付けることがたくさん、わかりやすく書いてあります！是非読んでみてください！
私の記事を読んでいただき、ありがとうございました！
Discussion