10年WEBやってきたわけですが、途中から出てきたスマホアプリというやつをずっと敬遠していました。
お客さんにとっては、何かスマホ関連の施策をやるときに、当然WEBの方がいいのか、アプリのほうが良いのか、はたまたどっちも必要なのか？
という選択肢があるわけで、当然相談もあるわけですが、土俵が違うんで、、、といってお断りしてたんです。
ですが、今年になってやっと仕事としてやりはじめたんで、記事にしようと思います。
結構ここの線引きしちゃってる、WEB屋さんや個人のWEBデザイナーさんも多いと思うので、少しでも始める際の後押しになれればと思います。
WEBデザインとUIデザイン
ユーザインターフェースというのは、主に機械、特にコンピュータと人間が情報をやり取りするためのインターフェースのことだそうです。（Wikipediaより）
であれば、WEBサイトの画面は、間違いなくUIなわけですが、WEBデザインは長い間、UIデザインというより、紙ものなどのグラフィックデザインの延長線として作られることが多かった気がします。
情報設計という工程があって、ワイヤーでユーザビリティやアクセシビリティといったものを重視して、画面設計を行うということはありましたが、そのワイヤーフレームは多くの場合実寸で作られてもいなければ、デザイナーに渡されたあとにはただの構成として扱われることも多々あったのではないでしょうか？
クライアントの評価やアートディレクションの現場でも、ワイヤーをそのままビジュアルアウトプットとして出すことを良しとしないことが定石でした。
デザイナーが情報設計にたいして深い知見を持ち、理解した上で、情報設計者と相談しながらビジュアライズをするのであれば良いですが、多くの場合はそこまでせっかくUIデザインしたものを、UIであることを考慮しないグラフィックデザインに変換するという作業を行ってきたのではないかと思います。
また、ワイヤーフレームをひく方も、ただの構成、原稿をやり取りするだけのフォーマットという意識で作っている場合も多く、そもそもみんなからユーザーインターフェースという意識が希薄だったのかもしれません。ワイヤーが原寸で作られてこなかったという点からも伺えるでしょう。。
それに対してアプリは、AppleやGoogleという元々しっかりしたガイドラインを持っている土俵での勝負になるため、作る側はしっかりとそのガイドラインを理解し、最後までUIデザインとしてのスタンスを貫く必要があったんじゃないでしょうか。
また、スマホという限られた領域では、グラフィカルなアプローチよりも、より機能的、合理的な設計思想が必然的に有効だったのではないかと思います。
WEBデザインも、スマホの登場によって、スマホ用のデザインやレスポンシブデザインをすることが当たり前になりました。
しかし、レスポンシブでも、PCのデザインから作るデザイナーが多いのは事実です。かく言う自分も多くの場合PCから着手しますし。。。
必然的にUIデザインに寄っていった
ただ、変わってきたことがあります。
これは必然的にそうなってきたのですが、スマホのデザインをしたり、評価したりする際の拠り所として、上記AppleやGoogleのガイドラインを考慮するようになってきたのは、自分だけではないはずです。
また、デザインをツール側も変わってきました。
長い間、WEBデザイナーの標準ツールだったPhotoshopは、SketchなどのUIデザインツールのようにデバイスに応じたアートボードが標準になりました。
これでは、もうUIを意識せずに作ることのほうが難しいです。
ワイヤーを書く人も、上記Sketchなどのアプリを使って、実寸で精密に設計する人が増えてきました。
また、別の大きな要因は、WEBのフロントエンド技術が進んだということです。
AppleやGoogleのガイドラインには、ボタンや文字、アイコンの大きさ、位置関係などユーザビリティやアクセシビリティに関することもさながら、モーションや何かユーザがアクションした時のレスポンスといったような、インタラクティブな表現に関することが、多く書かれています。
一昔前までは、アプリだったらその動き簡単かもしれないけど、WEBブラウザでそれ厳しくね？みたいな雰囲気でしたが、ここ最近は遜色なくできてしまうので、このちょっとした（だけど人にはすごく優しかったり、楽しくなる）インタラクションを考慮せざるを得なくなったというのもあるんでしょうね。
こういった、環境の変化があり、気づいたら「あれ？もうアプリデザイン断る理由なくね？」となったのです。
何が変わったか？
意識するポイントと、フォーマットが変わりました。
まあ、これは個人的なポイントなんで、人によって感じるポイントも違うと思うので参考までに。
まず、特にECやメディア、会員サイトのようなユーザー行動と密接に関わる事案や、スマホを重視する事案では、ワイヤーを実寸で作るようになりました。
その為、ツールもパワポからSketchに変えました。
コンテンツの縦マージンや、マージンや囲みをどういった表現にするかは、デザイナーに任せますが、各種バーの高さやフォントサイズ、クリッカブルな要素の領域、位置関係、カラム幅などは、意図を伝えた上でしっかり守って作ってもらいます。これらは、各OSのガイドラインが定めた、いわゆる人が操作しやすいデザインを意識したものだからです。
スマホでは、手を意識するようになりました。
多くの人は右手でスマホを持って親指で画面をタッチします。両手の場合は左手で持って、右手の人差指か親指でしょうか。
いずれにしても、押しやすい領域というのは、PCのWEBデザインとは全く異なる位置になってくるのはおわかりでしょう。
だから、ワイヤー段階から実寸で作り、スマホ画面に映してみて確かめる必要があるし、デザイン段階になってもその位置を変えてもらっては困るのです。
解像度を意識するようになりました。
PCの場合、たしかに高解像度モニタもありますが、高額ですし、一般的にはシェアの少ないものになります。
ですがスマホはどうでしょう？iPhoneの解像度は世代を追うごとにどんどん上がっていきますし、Androidは機種によって多種多様な解像度を揃えています。
スマホのデザインは2倍で作るは、今までも常識でしたが、それは単なる画像の書き出しの際にぼやけないようにって意識でした。
しかし、解像度を意識したデザインでは、例えばアイコン表現をよりシンプルにする（複雑なものは縮小されたときに判別しづらくなる）といった考慮を重視するというように変わりました。
各種バーと、一画面一機能を意識するようになりました。
もはや、これはアプリの世界に十分踏み込んでいる考えですが、スマホの場合、画面が変わってしまう違和感より、一画面の中でいろんなことができる方が、よっぽど使いづらいし、下手すると気づいてもらえません。
その画面でできることは可能な限り一つに絞り、その他の機能は、下部のツールバーや、上部のトップ、ナビゲーションバーにグルーピングしてまとめる、プライオリティの低いものはメニューの中に格納するといった対応を施すように心がけます。
これは、レスポンシブが流行りだした頃から意識されるべきことだったかもしれませんが、いかんせんPCのデザインから作るなんちゃってレスポンシブでは、難しいことでした。。。
画面表示時、アクション時、アクション後、遷移中をワンセットで考えるようになった。
ここはまだまだ勉強中ではありますが、これを考えていないと、静的な位置関係や、強弱の付け方が変わって来てしまいます。
ようは、ひとは動いているモノには、意識を取られやすいため、動いた先にあるもののプライオリティが変わってきたり、一見目立たないような表現でも、モーションを付けることで十分にユーザを誘導できたりするということです。
これはアプリのときはガイドラインや様々な自分の使っているアプリを参考に考えますし、WEBの場合でもフロントエンドの人と相談したり、様々なTipsサイトを見るようにしています。
開発にも携わりたい
実際にスマホアプリのデザイン相談を受けるようになって、やっていますがデザインを作っていると、開発のほうも見え隠れして、気になります。
まだまだ会社にとっては主流のビジネスではないので、デベロッパーを採用することはできないのですが、パートナーさんには少しずつあって、今後も仲良くしていこうと思っています。
ディレクションしていく中で自分も覚えて、趣味アプリとか売れたらいいなって思ってます。
まあ、こういうのは好きこそものの上手なれなんでね。
