スマートフォンアプリの開発エンジニアがデザインをするために必要な物をまとめてみた!


はじめに


ちょっとアプリデザインをする機会があったのと、打合せなどしている中で、「AndroidやiOSデザインで注意すべきことってありますか?」とよく聞かれますので、デザインに必要な物をまとめてみました。

デザインガイドライン


まずはデザインガイドラインは一通り目を通しておいた方がいいでしょう。

あと、iPhoneアプリとAndroidアプリのデザインの違いについては、こちらが参考になると思います。

モックアップが欲しい!


アプリ開発するときは、動作確認できる端末が欲しくなりますよね。
端末にあたるのが、デザインではモックアップになると思います。
(いや、端末のサイズだけわかれば十分だ!という人はとくにいらないかもしれませんが、
エンジニアって実際にどう動くか見てみたいものですよね?)

そのモックアップを探してみました。
有償/無償あわせてまぁまぁありますが、下記は登録なしでダウンロードすることができます。

200+ Smartphone Mockup PSD Templates
http://www.cssauthor.com/smartphone-mockup-psd/

android_mock_sample

こっちはAndroidとiOSがあるのに加えて、部品も一緒にダウンロードできますね。こっちの方がいいかもですね。

55+ GUI Templates For Android And IOS
http://www.cssauthor.com/gui-templates-for-android-and-ios/

iOS_mock_sample

部品が欲しい!


Androidらしいデザインにするには、自作するのもいいんでしょうけど、デザイナーではない自分が作るには時間がかかり過ぎる!
ので、あるやつを使わせて頂こう!ということで、公式から部品をダウンロードすることができます。
(モックアップのダウンロードの時に部品もセットでダウンロードしている人は不要かもですが)

Downloads -> Phone & Tablet Stencils
https://developer.android.com/design/downloads/index.html

android_stencils

フォントが欲しい!


初めてAndroidのRobotoフォントを扱おうとすると、

cannot_find_android_font

フォントが無い!って怒られます(´・ω・`)
ですので、Androidフォントを入れます。

ダウンロードは、下記からダウンロードできます。

Typography | Android Developers
http://developer.android.com/design/style/typography.html

android_font

ダウンロードできたら、インストールしないと使えませんので、インストールしましょう!これで怒られなくなります。

フォントのインストール方法
http://helpx.adobe.com/jp/x-productkb/global/233292.html

コマンドでコピーするなら、下記のような感じでしょうか。(cpのところはmvでもいいかもです)

% cd ~/Downloads/Roboto_v1.2
% find ./ -name '*.ttf'  | xargs -J % cp % /tmp/myfont

そういえば、フォントってどれを使えばいいの?

日本語フォントはどれを採用すべきかについては、下記が参考になると思います。

Androidの日本語フォントは、Android4.0から「モトヤフォント」が採用されていますので、必要ならダウンロード。ダウンロード方法は下記に書かれていますが、platform_frameworks_baseリポジトリから「MTLc3m.ttf」(モトヤLシーダ3等幅)と
「MTLmr3m.ttf」(モトヤLマルベリ3等幅)を探し、View Rawのリンクからダウンロードできます。

フォントに関する参考リンク

これらをつなげると


モックアップに好きな部品をポコポコはめていくと、

Android

android_design_sample

iOS

iOS_desing_sample

右側のようにタブとリストがあるような画像が簡単に作れちゃいます!

最後に


いかがでしたでしょうか。
ほとんど部品としてあるので、アプリをどう見せたたいか・どう使って欲しいかに集中してデザインできますね。

ここまで揃ってると、エンジニアの僕でもデザインができそうな気になってきました。