「101のヒント」&「もとまか」デザイン開発秘話

101のヒント


AppBank読者のみなさん、はじめまして!
今回からAppBankもとまかチームにデザイン担当として参加させていただく事になった@Jacminikと申します。以後お見知りおきを。

昨日、AppBankさんから新アプリ『アプリ開発 101のヒント』と『もとまか』がダブルリリースされました!101のヒントは以前にもとまかさんが寄稿された以下の記事が原案となっています。
「売れる iPhone アプリ」にするための151のヒント。

それなりの文量がある記事ですし、特に開発者以外の方にとっては少し小難しく感じられた方もいらっしゃるかもしれませんね。
ですが、アプリとして各内容をカテゴライズし整理したことでグッと読みやすく、気が向いたその時にサラッと読める、そんなアプリになりました!
まさに開発者にとってのバイブル!心の友!!
また一般のiPhone/iPadユーザーにとっては、開発者の気持ちや頑張りを垣間見れるようアプリではないでしょうか。

mmBlogは名前の通りもとまかさんのブログ(もとまか日記)をより見やすく便利に楽しむためのアプリです。どちらもより詳細なレビュー記事が上がるかと思いますので、詳しくはそちらをご覧ください。

※開発者もとまかさんのリリース記事はこちら。
iPhoneアプリ開発のヒント集「アプリ開発 101のヒント」がリリースされました – もとまか日記
「もとまか日記」のiPhoneアプリ「もとまか」がリリースされました – もとまか日記

そしてここからが今回の寄稿の本題となります‼
これらのアプリ(主に101のヒント)を創り上げる過程での実際のやりとりや工程を紹介しながら、アプリデザインの一例を挙げていきます。実際に開発には関わらないユーザーの方々にも、「アプリってこんな風に作られてるんだね。」って感じで読んでもらえると嬉しいです。


デザインを入れていくタイミングは色々とありますが、今回は実装やアプリの方向性が大方決まったかな?という時点でデザイン作業に入ることになりました。

skypeでの打ち合わせ

まず、もとまかさんからAdhoc(開発段階のβ版アプリ)を頂きアプリの構造を確認しつつ、appbankさんと打ち合わせをして見た目作りのためのイメージを固めていきます。
もっぱらskypeでの会話になりますが、ここで漠然としたイメージやメインとなるターゲット層、参考にしたい既存アプリやテーマカラーなどを色々と聞いておくことで、次に続くデザインテーマを決めるためのヒントが集まることになります。
感覚的には、断片的なパズルのピースを拾い上げながら、それをどう組み合わせてどんな完成図を作るのがベターなのかを考えていく訳ですね。
とは言っても、iPhoneではあの狭い画面の中に収めなければならないので、そこに入れられる要素は自ずと絞られていきます。
そんな限られた中で如何に情報を整理しつつ使いやすくするか?という点では、デザインも少なからず影響を与える事になるので大事な側面であるのは間違いないと思います。

デザインテーマを決める

そして今回僕が決めたテーマは「道」。
確か丸一日くらいMacの前で無いアタマをひねくり回していた気がします^^;
実はコレ、とある方が全く関係のないツイートとして挙げた写真をたまたま見ていて思いついたんです!
この「道」というテーマを発見できたお陰でアプリの作り手とユーザーを繋ぐためのデザインの形が何となく見えてきました。
(予定調和でないtwitterの良さはこんな時にも役立つものなんですねっ!)
テーマが決まったら、次は連想ゲームのようにして頭の中で色々と妄想しながらそれに関連するビジュアルを思い浮かべていきます。
今回の例だと道を表す『白線』や『足跡』など。

デザインのたたき台を上げる

デザインを作っていく上では、始めに
「こんな感じに作ろうとしているのですが、どうでしょう?」
という確認をとるためのサンプルデザインを上げます。
このサンプルのことを”たたき台”と呼んでいます。
このたたき台を見てもらって初めて「ここはこうして欲しい」などといった具体的な指定をもらえるので、とにかく打ち合わせした内容と考えたイメージを見える形にする作業に入ります。
そうして、一番始めに出来たデザインはこんな感じに。
(左がデザイン前、右がデザイン後。)

101のヒント
101のヒント


最終デザインとは違う部分がありますが、主な方向性はこの時点でほぼ固まっています。
(実は最初の段階ではiAdを入れる構想なんかもあったんですね。)
この時点でまず第一に考えたのは『記事に目が行くようにすること』。
このアプリのメインコンテンツはアプリ開発のヒントとなるそれぞれの記事なので当然ですね^^;
そのためにあえて上部のバー(ナビゲーションバー)を凹ませて、記事部分が少し飛び出して見えるようにしてみました。
電子書籍的なアプリであればもっとずっとシンプルにした方がベターかと思いますが、今回は開発者向けということもあり多少実験的なデザインでもアリだろうと考えたデザインです。

フィードバックと再デザイン

上記たたき台を確認してもらい、フィードバック(修正/変更希望点など)を把握するためのやりとりに入ります。
簡単な変更点ならメールで、再度打ち合わせが必要な場合はskypeなどで行います。
そうしてまたフィードバックを元にデザインを修正し、確認を取り、またフィードバック…
という作業を納得のいくまで繰り返していきます。
※今回はスペースの都合上、流石にすべての画像を紹介することはしませんが、ご希望があれば僕のブログ(Everything was born from Love)でギャラリー公開しますので、twitterなどで声をかけてみてくださいね。
そうやって幾度かの修正を行って決定した最終デザインがこちら!

101のヒント


appbankさんからのフィードバックにより、深海のような雰囲気とボトルメール風イラストが追加されています。
色味なども微妙に修正してあり、より読みやすくなったのではないかと。
雰囲気的には『深海散歩』って感じですかね?
もちろん平行して他の画面も作っていきますが、メインとなる画面のデザインを固めることで他画面も自ずとそれに合わせて決まっていく感じです。
全体の色味やボタンの見た目等を他でも統一することで、全体の統一感を出していきます。

実装を考えてデザインすることの大切さ

iPhoneやiPadアプリのデザインをする上で意識しなければならないことがいくつかあります。
それは第一に『紙面やWebと同じようには出来ないことがある』ということ。
そのひとつの例がレイヤー層(画像の重なり)です。
つまり、実際にアプリにした時にどの部分がどう動くのか?といったことや各画像をどう重ねて見せるのか?など、実装(コーディング)に関わる部分を想定したデザインにする。ということです。
例としては、上の完成イメージで記事を表示している角丸枠の部分はその外側の肌色の画像より凹んでいるように見せているのですが、実際は角丸の枠内の画像が一番上に配置してあります。
それとPhotoshopではオーバーレイや覆い焼きなどの処理によって、半透明の画像が重なった時に微妙な色の変化を加えることができますが、そういったエフェクトがかかった画像パーツを切り出して重ねても同じ見た目にはなりません。
これをデザイン時と同じように見せる方法もなくはないのですが、実際のところ100%再現できるわけではなかったり実装が少し複雑になったりするのであまり現実的とは言えません。
なので、その辺りも考慮しながらデザインしていくことでiPhone/iPadアプリに対応したデザインを作り上げることが出来ると僕は思っています。
具体的にもうひとつ僕が決めているガイドラインは、
『ナビゲーションバーにある標準のボタンより小さいサイズ(特に高さ)のボタンは作らない』
ということです。
実際にやってみると分かるのですが、あまり小さいサイズのボタンを作ってしまうとタップした時に思うように反応しないことがあります。
なので、その最小限度をナビゲーションバーのボタンの高さにしてるってワケですね。

Retina対応と1ピクセルの境界線

iPhone4と言えばあの美しすぎるほどのRetinaディスプレイですね!
ユーザーとして使っている分にはただその美しさに満足していれば良いのですが、アプリデザインをする上ではなかなか大変だったりします^^;
僕の場合は先にRetinaサイズの画像を作り、それを半分に縮小したもの(必要があれば修正)を用意してiPhone4とiPhone3GS以前の両方に対応できるようにしています。
ここで特に気をつけなければいけないことは『奇数ピクセルのサイズや位置を使用しないこと』。
具体的にどういうことかというと、例えば
左から3px、上から15pxの位置に1pxの線を引く。
なんてコトはやっちゃダメ!!ってことです。
(※Appleの審査は通りますが…)
ちょっと分かりづらいと思うので画像を用意してみました。

101のヒント


上の画像を見てもらうと分かるように、Retinaサイズで偶数ピクセルの位置に合わせたものを縮小した場合(上部右)はシャープに見えていますが、奇数ピクセルから縮小したもの(左)はぼやけて見えます。
例えば20pxを半分にすると10pxぴったりになりますが、19pxを半分にすると9.5pxになりますね。
この0.5pxというのは実際のピクセルの単位としてはあり得ないので、自動的にもとの色などを薄くして1px分塗りつぶされることになります。
その結果ぼけたように見えてしまうということです。
それを避けるためにRetina用の画像を作る時点ですべてのパーツの配置やサイズなどを偶数ピクセルになるように計算して作っています。

決定したデザインを実装する

ここまで色々と細かな部分も考慮しながらデザインが仕上がりましたが、これで終わりではありません。
まだ今の状態では一枚の画像なので、それを各パーツごとに切り出しさらにそれぞれのパーツをRetina用とiPhone3GS以前用で2つずつ用意していきます。
ただ、その前に実装の仕方によって切り出し方も変わってくるものについては、事前に開発者に確認しておきます。
確かこの時にもとまかさんに僕が確認したのは『記事部分の背景は罫線を含めたモノにするか?それとも罫線はプログラムで描くか?』といった感じのことだったと思います。
そして、すべてのパーツの切り出しが終わったら、その画像を最適化し少しでも画像の容量を減らしておきます。
この画像容量の削減については、以前に僕が書いた記事がありますので興味のある方はそちらをご覧ください。
アプリに使用する画像容量を減らす方法 for Retina Display « Everything was born from Love

スムーズなデザイン実装のための鍵

そこまで出来たら、あとは開発者に画像を送って実装となるのですが、ただ切り出した画像を送ってOK!とはいきません。
なぜなら、それだけではそれぞれの画像を配置したりテキストの色味などを決めるためにすべて開発者側で元のデザインを確認しながらやらなくてはならなくなってしまうからです。
当然デザインについて100%把握しているのは作った本人なので、その詳細を明確に開発者側に伝えることが必要になります。
この時は僕もこういったやりとりは初めてだったので、要領が掴めないながらもこんな形のものを用意しました。

101のヒント デザイン詳細 (PDFファイル)
(※公開する予定では作っていなかったので雑な作りですみません…<(_ _;)>)

今ではkeynoteを使ってより分かりやすく作っていますが、この時はこんな感じでした。
このデザイン詳細を用意するのは正直かなり大変な作業なのですが、これを用意することで実装されたデザインを確認するやりとりをかなり減らせるので、デザインする側/実装する側との連携をスムーズに行うには不可欠なものと言っても大げさではないと思います。
こういった資料を作ってもうまく伝わらないこともあるくらいなので、コレがなければ必要以上に実装/確認に手間がかかってしまうことになるのではないでしょうか。

アプリにデザインを導入することのメリットとデメリット

アプリにデザイン性を入れることで、より見やすく使いやすくなったり、よりユーザーに楽しんでもらえるものに近づきますね。
ですが、デメリットもないわけではありません。

それは『デザインを考慮しない時より手間がかかり、リリースが遅くなる』ということ。

リリースのタイミングについてはやり方次第でもありますが、手間は確実にかかります。
ですが、本当にユーザーに喜んでもらえるアプリを作りたいという気持ちがあれば、デザインを入れるか入れないか?というのは自ずと答えが出るものだと思います。

ですので、開発者の方々には 是非この機会にデザインについてもう一度考えてみて頂けたらと思います。

以上が今回僕がデザインさせて頂いた経験とちょっとした秘話でした。
感想などありましたらどしどしお寄せ頂けたら嬉しいです!

最後にちょこっとだけ宣伝を。

僕はアプリのデザインだけではなく、開発も行っています。
何とか今年中の処女作リリースに向けて現在奮闘中です!!
(年が明けてしまったらごめんなさい<(_ _;)>)
ちなみに今作っているのはiPadアプリで、トップ画面はこんな感じになっています。

101のヒント


アプリ名などは詳細はまだ未定ですが、写真と言葉を使ったひと味違うアプリになると思いますので、何となくでも気になった方は是非ご期待&応援のほどよろしくお願い致します!!

以上!@Jacminikでした。
みなさま、今日も素敵なiPhone&iPadライフをっ!

[from Masahiro (Jacminik) on Twitter]
参考になったらシェアお願いします!
Twitterへ Facebookへ はてブへ Pocketへ
▼新着記事やオススメ記事を投稿中!