Webとアプリのデザインをするときの違い
PCサイトのデザインと違うのは、使う時の状況が違うことです。
PCサイトは、ほぼ机の上で使うことが前提でした。しかし、スマートフォンのアプリ（サイトもですが）では、「外で使う」「忙しいときに使う」「通信環境が遅い場所で使う」などの使う状況も意識しないといけません。
次に違う点は、タスクの処理です。
PCでは、画面が広いために一度に複数のタスクを表示することができます。しかし、スマートフォンではいくつものタスクをこなすことはほぼ不可能です。まず、画面が狭すぎます。iPhoneの3.5インチの画面ではまず狭すぎます。Androidの7インチのタブレットでも、以外と画面が狭くていくつもの画面を表示するのは厳しいです。
ユーザーは面倒なのが嫌い
また、普通のスマートフォンユーザーが難しいタスクをこなせる人ばかりではありません。某案件に関わっていた途中、あるiPhone使いの女子（そこらにいっぱいいる普通の素敵女子）に、雑談ついでに「どんなアプリだったら使いたい？」と聞いてみたことがあります。
- 面倒くさくない
- 簡単
- 忙しい時でも使いやすい
- シンプルなほうがいい
おそらくこれが一般の人の意見だと思います。実際、ゲーム以外のiPhoneアプリで売れているもので複雑なものはあまりないと思います。
指の操作性を考慮
最後に、利用するマウス・タッチパッドやポインタとの違いです。
PCではマウス・タッチパッドをポインタとして使いますが、スマートフォンでは指がポインタです。
PC向けのサイトではテキストリンクが多くあります。しかし、テキストリンクは指では押しにくいものです。
指の大きさも操作に影響をあたえます。ボタンもしっかり考慮しないと、リンクなどの押し間違えが多発するものです。
以上のことを考えると、アプリのデザインでは利用シーンを想定して、以下にアプリを使いやすくするかをデザイナーでも常に考えなければいけません。
]]>
制作するツールなどの違い
次に、制作するツールでの違いについてです。
Webサイト制作ではPhotoshopやFireworksをメインに使う人が多いです。カンプなどを作成する時は、PhotoshopやFireworksで制作する人がほとんどでした。パーツ作成など以外では、以外とIllutratorを使う機会は少なかったです。
しかし、アプリのデザインの場合、画面サイズや解像度が違うなどの都合上、Illutratorデータの納品を求められることが多くなりました。また、Fireworksで制作しても、解像度が大きいデータで制作してほしいということも言われます。
解像度は紙とほぼ同じの300dpi以上のデータで作成することがほとんどです。
世に溢れている、PhotoshopやFireworks形式のiPhone/Androidのモック用ファイルは、ほほとんどがWeb用の72dpiのデータです。モックアップ作成時には使ってもいいと思いますが、実際のアプリのデザインを行うときには解像度の違いがあるので注意しましょう。
世にあるこの手のモック用ファイルはほとんどがWeb用です。使用許諾の問題もあるので使用するときには注意しましょう。（納品用データではちゃんと新しく作っていますからねっ！）
]]>
デザインする上での違い
スマートフォンアプリのデザインは、はっきりいって、Webのデザインというよりも、GUIのデザインの領域に近くなります。というかGUIそのものですね。カーナビなどのUIのデザインに近いかもしれません。
カーナビのUIのデザインに似ていて、狭い画面上で情報をどう伝えるか、どう快適に使ってもらうかがキーになります。（以前、某派遣会社のトレーニングでGUIのトレーニングを受けたことがありますがそれが役に立っている気がします）。PCサイトのデザインのように、スペースが空いているからバナーを入れてとかはありません。
アイコンが大活躍
また、テキストラベルではなく、アイコンを多く使うことが多いです。スマートフォンでは画面が狭いため、どうしてもテキストラベルを使うスペースが小さい・もしくは存在しないことです。必然的にどうしてもアイコンを多く使うことが多くなります。
スマートフォンアプリでは、アイコンのみでユーザーにその機能を理解させなければいけないということになります。
問題は、実際にアイコンを作るといっても作る時間がないことです。そして、アイコンのモチーフを考えるのも大変です。
アイコンは作るのも考えるのも大変なので、有料のアイコン素材集（商用利用可のもの）を複数購入しています。時間が足りないのなら購入してしまうのが一番楽だと思います。
アプリのデザインをすることを考えると、アイコン集はAI形式もしくはPDF形式で編集可能なものを選ぶのがいいです。また、後で加工することを考えると、モノクロアイコンを購入する方がいいと思います。
]]>
画面設計やワイヤーフレームでの違い
画面設計やワイヤーフレームなどでの違いについていうと、従来のPCサイトの手法はほぼ通用しません。
なぜならば、いままでPCサイトでは何とかなっていたものが、画面（画面サイズもしくは画素数）が小さくなることにより破綻することが多くなるからです。
画面サイズだけでなく、画素数が小さいのも問題になります。某Androidの7インチタブレットの画素数は800px×480pxです。画素数が小さいため、クライアントがユーザーにやってほしい意図が実現できないことがありました。結果、ワイヤー制作からやり直しになったことがあります。
特にシステムが絡んだ案件の話ですが、従来の手法だと、最初にがっちり決めてそれから制作するということが多いらしいです。しかし、この手法はスマートフォンアプリでは通用しません。
画面が小さいということは、操作性に影響を与えます。また、画面が小さいために制作者がユーザーに伝えたいことが実現できないこともあります。画面が小さくなると、従来1画面で載せていたものが、小さい画面だと2画面にしないといけない、ということが出てきます。実際に制作すると、最初はできそうだと思っていた機能が、操作性が悪いため使えないということが出てきます。
つまり、PCサイトのシステムでは、PCの冗長性でいままで何とかなっていたものが、スマートフォンアプリでは破綻してしまうということになります。
ここで、がっちり決めてしまうと修正するときに揉めたりします。これはよくあることらしいですね（ここでDという広告代理店が絡むとさらに云々らしいですが）。
このようなことにならないためには、アプリのデザインに入る前に、しっかりペーパーモックで検証することが必要性が高まってきます。実際には画面サイズに合わせて制作するといいでしょう。
P.S iPhoneアプリ、画面デザインが10枚でも相当重いとからしいですね。開発者の方のお話だと。お仕事するときにはそこも考えないといけません。
]]>
まとめ
iPhoneやAndroidのアプリのデザインは、PCサイトのデザインをやっていた人にはある意味異質かもしれません。
しかし、これからはスマートフォン関連の案件は増えてきます。それがアプリでなくても、サイトの制作に生きてくる日は来ると思います。今のうちに何かしら挑戦してみるのもいいかもしれません。
最後に宣伝ですが（笑）、iPhone/iPad/Andriodアプリのデザイン（UIデザイン・UXデザイン）・スマートフォンサイトのデザインやコーディング（ほとんどレスポンシブWebデザインのサイトですが）のお仕事を大絶賛募集中です。ご相談等お待ちしております。
]]>
