ガンズターン 公式サイト

楽しいことに、まじめです。 ——ガンズターンアプリ研究所公式サイト

画面設計は手書きから始めています

Pocket

ゲームバランスについてよく考えています。

今日は、これまでに書いたコードのリファクタリングをやったりしつつ、リファクタリングのつもりで手を加えたらうまく動かなくなって巻き戻しの必要性が生じ、gitの手を借りようとしたけど肝心のタイミングでコミットをしていなかったので、巻き戻しの作業に相当の無駄な時間を使ってしまいました。絶望先生的にいうと「絶望した!」て感じです。

冒頭から長い一文ですみません。ガンズターンのRyosukeです。
今後は一日に一度は必ずコミットします。(戒め)

そんな中、実はちょっと今作っているパズルゲームが難しすぎるんじゃないかという気がしてきて、不安な気持ちが生じてきました……。

お昼頃からずっと、どうやったら老若男女に楽しんでもらえる仕上がりになるのかを考えています。(色んなことしながら、脳の裏側で)

けれどなかなか、難しいんですよね。

パズルなので、ヒントの出し方次第で難易度調整は簡単に行えるだろう、なんて甘く考えてましたが……

今、こうして実際に動くものが手元に生まれて、初めてわかったことがあります。
それは、そもそも「ヒントの出し方」自体に相当の工夫が必要である、ということです。

今作っているパズルゲームでは、(今の所)自前のランキング機能を実装する予定です。
そのため、変な実装をしてしまうとフェアなランキングに支障をきたすかも知れません。
じっくりとよく考えて、仕様を詰めていきたいと考えています。

というわけで、本日も一日新規アプリの開発に専念していたわけですが、今日のブログの本題では、そんなアプリ開発においてわたしが用いている「ある手法」について、ご紹介してみたいと思います。


1. こんなアイテムご存知ですか?

Paper Prototyping padの写真

一見するとただのノートのようですが……

こちらの写真に写っているのは、わたしが2年ほど前に、AppBankさんの通販サイトでまとめ買いした「Paper Prototyping Pad」という代物です。(メーカーさんの名前は「THE GUILD」さんというようです)
一見、ただの方眼ノートのようですが、めくってみるとこんな感じです。

Paper Prototyping Pad の中身

中身はこんな感じです。

なんだか、iPhoneみたいな形状をした罫線がいくつも引かれていますね。
写真が粗くて分かりづらいかもしれませんが、iPhoneの画面に相当する部分には非常に細かくグリッドが刻まれています。

はて。いったいこれは、なんのために用いるアイテムなのでしょうか?

2. 手書きで画面設計する開発手法があります

ピンときましたか?
——おそらく、あなたのその直感は正解です。

何を隠そう、このアイテム、実は「ペーパープロトタイピング」と呼ばれる開発手法を実践するための、いわば「iPhoneアプリの画面設計専用のノート」なんですね。

ここでいう「ペーパープロトタイピング」とは、いったいなんでしょうか?

横文字で言われてもわからねえやい、てな江戸っ子気質のあなたのために、わたしがわかりやすく日本語で説明してあげましょう。(←偉そうですみません。^^; )

「ペーパープロトタイピング」とは、そのままずばり「紙上で行う画面設計」のことです。

おそらく広義では、エクセルなどで作成したファイルをプリントアウトして、並べ替えたりしながら画面遷移を考えたりするやり方も「ペーパープロトタイピング」に含まれるかも、ですが……

ひとまず本日、ここでわたしがご紹介したいのは、とりわけ「手書き」で行う「ペーパープロトタイピング」です。

3. 具体的にはこんな感じ(悪い例)

実際に手書きしてみた内容(悪い例)

「うわ、きったねー」と言うあなたの声が聞こえてくるようです。

はい。すみません。このめちゃくちゃ汚い設計図、わたしの手書きです。
(ちなみに新規アプリの画面設計時のものです)

本当は、もっときっちりと、グリッドの幅に合わせた直線でやるべきものだとは思うんですが……。

まあ、わたしの場合はド個人で開発してますので、こうしてブログにでも載せない限り誰の目にも触れない代物ですからね。だいたいいつも、こんな感じでかなりラフ「ペーパープロトタイピング」してます。

こんな汚いメモ、なんの役に立つの? と思われるかもしれませんが、実際にやってみると色々と気づくことが多くて、この手法、侮れないんですよね。(こんな適当なやり方ですら)

例えば、一つの画面内におけるUIの数には限りがあることとか、UIの重要度に応じて大きさや配置を考えないとしっちゃかめっちゃかの画面になるとか、そういうことが——

何度も何度も、消しては描き、消しては描き、しているうちに体感的にわかってきます。

なんか苦行のように書いていますが、実際にやってみるとこれ、めちゃくちゃ楽しいんですよね。

「ここでユーザがこの操作すると、こっちの画面に飛んで……あれ? ちょっと待て、元の画面に戻るボタンはどこにおけばいいんだ? いやいやそもそも、このボタンって本当に必要か?」

なあんて、あれこれ想像しながらやっていくうちに、デザインと同時に画面遷移まで自然とできあがっていくのです。

しかもエクセルとかでシートに分かれているのと違って、「ペーパープロトタイピング」の場合は、机の上に書いたものをずらっと並べるだけで、アプリ全体の画面構成が一目で確認できちゃうんですよね。

全体を俯瞰できると、初めて整合性が取れてないところに気づいたりして。
そんなところを、チマチマ修正してみたり……。あるいは大胆に、画面ごとボツにしてみたり。
ほんと、尽きることないぐらい楽しい作業です。(小学校の時の図工の授業になんか近い)

4. 方眼なので、実装時にも楽々

わたしが使っている「Paper Prototyping Pad」の場合は、iPhoneの画面のだいたい8ピクセルあたりが、方眼の1グリッドに相当しています。

そのため、ただノート上のグリッドの数を数えるだけで、実際にコーディングする際にどんな座標に落とし込めばいいのかがわかっちゃうんです。

わたしみたいに、「Interface Builder」イマイチなじめず、未だにUIの座標をコード内に手打ちしている人間にとってみたら、神ツールに等しいです。

ゲームアプリに限らず、どんなアプリの製作においても、非常に有効かつ、楽しい開発手法かと思いますので、やったことのない方は気分転換のつもりでぜひチャレンジしてみてください。

とまあ、そんな感じで、本日は「ちょっと珍しい」(←と思い込んでるのは、わたしだけかも知れませんがw)アナログな開発手法についてご紹介してみました。

写真の綺麗な撮り方も今後勉強していく必要があるかな、と今日改めて感じたRyosukeでした。 m(_ _)m

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トラックバックURL: http://www.gunsturn.com/2015/05/17/free_hand_design/trackback/