iPhone デザイン アーカイブ

以前、ボタンの UI についてで、使いやすいアプリケーションを作るためには「細かい部分の使い勝手の追求」が大切、というお話しをしました。今回はその続編で、ボタンなどの要素の配置についてご紹介します。

ここに、テーブルに並んだデータのタイトルを付ける画面があります。

「この画面は横にドリルダウンしてたどり着くべきか、はたまたモーダルで開くべきか」

iOS アプリの UI を考えたことがあれば、何度も出くわす問いです。テーブルのデータをユーザーが編集したり新規作成したりするのはよくある話ですね！どちらがベストか悩んだときは、その画面の役割や操作感の違いに注目することでヒントが得られます。

アプリケーションアイコンとは、iPhone / iPad / iPod touch のホームに表示されるアイコンのことです。作成する際のサイズは

• Retina 画面以外用 ：57ピクセル × 57ピクセル
• Retina 画面用　　 ：114ピクセル × 114ピクセル
• iPad 用　　　　　 ：72ピクセル × 72ピクセル
• App Store 申請用: 512ピクセル × 512ピクセル

で、大事なのは App Store 申請用を作成するということです。これは App Store で表示するものなんですが、実機で表示されるものと同じでなくてはいけません。全く同じではなくとも、見た目に大きく変わってしまうと問題です。

iPad アプリはユーザーがどんな持ち方をしても使えるように、可能な限り縦横に対応することが推奨されています。ふつう、画面をユーザーから見て常に正位置に保つことでそれを実現します。

しかし Inkiness for iPad では、ただ画面を回転するだけでは済みませんでした。Inkiness は現実のノートを “使用感まで含めて” 模した手書きアプリだからです。

最近、企画の仕事をしていてよくあるのが従来の携帯電話のコンテンツを iPhone や Android などスマートフォン向けアプリケーションへ移植したい、というご相談です。その際に気をつけるべきポイントを、特に人間の五感に関連付けてご紹介します。

端末操作 UI のデザインで重視しなければならない感覚は、五感のうち [視覚]、[聴覚]、[触覚] になります。中でも携帯電話の UI をスマートフォン（タッチスクリーン操作）へ最適化する際に一番考慮しないといけない感覚が [触覚] です。

Photoshop を使用した Tips 、前回はタブアイコンについてのお話でしたが、今回はアイコンや文字に付ける影やハイライトについてお話しさせて頂きます。

iPhone、iPad の光は通常、上90度から当たるようになっており、それに合わせてボタンやアイコン、文字に影やハイライトを付けます。その際に、Photoshop の「ドロップシャドウ」や「ベベルとエンボス」なども使えますが、この機能では特に文字がぼやっとしてしまいがちなのが残念です。そこで、自分で影やハイライトを付けてみましょう。まず、影などを付けたいもののレイヤーをコピーして同じものを真下に作ります。そして、ハイライトか影なのかによって次のように調整してやります。

• ハイライト → 白などの薄い色にして下に1ピクセル（Retina Display では2ピクセル）ずらす
• 影 → 黒などの濃い色にして上に1ピクセル（Retina Display では2ピクセル）ずらす

iPhone のホーム画面はフリックでページを切り替え、タップしてアプリを起動するわけですが、隙間なくアプリを敷き詰めれば、当然フリックするときもアプリの上を触ることになります。

よくできた判定によって、フリックとタップはきちんと区別されます。よって操作上は何ら問題ありません。しかし実際には、フリックのときに「タップしないよう」わずかな注意が生じます。ほとんど無意識といっていいくらいのものですが、間違いなく見えないストレスがあると思うのです。

そこで私は画面の一番下一列をなるべく空けています。ストレスフリーになって、実際やってみると考える以上にラクですよ。

さて、この気に留めるほどでもない操作の違和感、テーブルのフリックにもいえるはずなんですが、こちらは気になりません。それがなぜかを考えてみると、ホーム画面とテーブルが、それぞれの設計意図によって細かく調整されていることが垣間見えてきます。

使いやすいアプリケーションを作るための大事なポイントの１つに、「細かい部分の使い勝手の追求」というのがあります。こうした「ちょっとした気づかい」について押さえておくべきポイントをいくつかご紹介します。

■ ボタン要素のサイズについて

ボタンなど、画面タップ操作をする要素は指で十分にタップできるサイズにします。
例：ニュースリーダー系アプリケーションのニュース一覧画面だと、各セルの場合では、入る要素（タイトル、カテゴリ、日付、サムネイル）のサイズのバランスを考慮しつつ、親指でタップしやすいように縦幅を取ります。

Photoshop を使用した Tips 第2段として、今回は iPhone / iPad などで使用されるアイコンについてお話させて頂きます。

iPhone / iPad アプリにはシンプルかつわかりやすいアイコンが必須です。お話はそのアイコンを作成した後からになります。

まず、アイコンが表示される iPhone / iPad の場所として主には以下の3つがあります。

• ナビゲーションバー: 画面の上方に表示され、現在のタイトルを表示しているバーです。

• ツールバー : 画面の下方に表示され、現在のオブジェクトに対するアクションを実行するボタンが置かれているバーです。

• タブバー: 画面の下方に表示され、異なるモードを切り替えるバーです。

iPhone / iPad らしい UI でアプリを制作したい、と思っても、意外とわかっているようでわかっていなかったり、わかっていても、「こんな画像リソースが欲しいのに、作り方がわからない」ということもあるかと思います。そんな開発者の方々の参考になればと思い、デザイン担当の立場から、Photoshop のちょっとした Tips を少しずつお話できれば、と思います。

第1回目は、ナビゲーションバー／ツールバー／タブバーの背景についてです。

iPhone や iPad の UI を考える上で、もっとも重要な資料といえば iPhone / iPad Human Interface Guidelines（以下 HIG）です。

これらを参考にすることは iPhone / iPad に最適なアプリを設計するために欠かせません。しかし、ただ従うだけでなく、もう一歩踏み込んで「なぜこんな風に定義されているのか」「そのためのパーツはなぜこの外観なのか」などを考えてみると、その背景が見えてくることがあります。

例えばタブバーの色。なぜ黒くてつやつやなのでしょうか。