はじめまして、あゆこです。
今回は、今まで自分がiPhone用UIデザインをするときに考えていたことや、
お世話になったサイトなどをざくざくっと紹介して参ります。
まず何から考えればいいのか
自分が作りたいUIについて、以下のことを洗い出します。
———————————————————————-
(1)誰が使うの？
男性か女性か、若者か年配か、
今や赤ちゃんからおじいちゃんまで、ターゲットは様々です。
(2)どこで使うの？
盛り上がる場所で使うのか、１人のときにじっくり使うのか
(3)どうやって使うの？
歩きながらや、寝そべりながらなど、
シーンによってはボタンの配置場所がとても重要です。
———————————————————————-
ターゲットの行動パターンや、ターゲットを取り巻く環境などを調べてみると、
重要な要素がわかってきます。
たとえばレシピアプリ・サイトなどを作るときは、
主婦の皆さんの行動パターンを考えますよね。
料理といえば時間との戦い。めんどくさい操作は嫌われるかもしれません。
レシピの流れはボタン切り替えよりも、
大きい写真の一覧をささっとスワイプできたほうが良いかもしれないなぁ…
など考えるとデザインも考えやすいかもしれません。
ほかにも基礎知識として、
下記のサイトなどを参考にしてみましょう。
———————————————————————-
50のスマホサイト調査から見るナビゲーションのUIデザイン5パターン
マインドマップを書いてみよう
なんとなくイメージが固まってきたら、マインドマップを書いてみましょう。
書いているうちにどんどんイメージが湧いてくる…！なんてこともあるかと思います。
自分の思考整理にも、構成の決定にも、マインドマップは欠かせません。
またページの階層が深ければ深いほど、
ユーザーは「使いにくいなぁ…」と感じるものです。
ユーザの目的のページまで、
2ステップ程度でたどり着ける理想的な階層を目指しましょう。
マインドマップをPC上でざくざくっと作れる
下記のようなフリーツールもあります。
———————————————————————-
Xmind（windows）
モックアップを書いてみよう
じっくり構想を練ったら、実際にモックアップを作ってみましょう。
下記の素材をプリントして、まずはざかざか描いてみると良いです。
———————————————————————-
iPhone 5 Doodlers（PDF：A4）
Free Printable iPhone 5 Templates
Iphone4 Drawing Template Freebie（PDF）
———————————————————————-
描くのめんどくさいよ！って方はこんなのどうでしょう。
PC上である程度のモックアップの作成ができます。
———————————————————————-
iPhone Mockup
早速デザインしよう！
デザインの基礎が整ったら、いよいよ本番デザインに入っていきます。
まず何を作ろう…と思い悩むあなたに朗報です！
実際にiphone上で使われているものと同じ素材が、フリーで提供されています。
ぜひダウンロードして、よりクオリティの高いデザインを実現しましょう。
———————————————————————-
※写真以外の角度のデータもPSD内にあります
iPhone 4s Psd Vector Mockup Template（white&black）
デザインしていくと、何かが違う…他のデザインも気になる…
そんな壁にぶち当たることって結構あると思います。
そこで、私が日ごろ参考にしていたデザイン集サイトを共有させていただきます。
日本のデザインもさながら、海外のサイトもとっても参考になりますよね～。
あなたに合ったサイトを見つけてくださいね。
———————————————————————-
●日本のUIデザイン集サイト
———————————————————————-
●海外UIデザイン集サイト
iPad and iPhone Design Inspirations Gallery
———————————————————————-
●海外のアイコンデザイン集サイト
おまけ
アプリアイコンの切り出し、ひとつひとつやるのめんどくさーい！
というあなたに、こんなツールいかがですか？
———————————————————————-
スマフォアプリ開発支援ツール～ 各種サイズのアイコンを一括して制作 ～
———————————————————————-
またデザインするときは、
上に表示されるステータスバーや、
下に表示するツールバーなどを意識してデザインすると、
後で気付いてあわててリサイズ…なんてことにならなくて安心だと思いますよ。
ざかざかと語ってみましたが、いかがでしたでしょうか？
素敵なUIデザインの一助にでもなれれば嬉しいです！
ではまた～。
