マルチスクリーンを考慮したデザイン入門

昨日は矢野りんさんのセミナーに参加してきました。のでメモ。

セミナータイトル

「マルチスクリーン対応を視野に入れたデザイン入門」
おおよその内容は、マルチスクリーン対応のサイトを作る注意点とデザインの心がけについて。

アプリとHTML

スマートフォン向けアプリを開発する際に
・ネーティブアプリ専用技術
・HTML
を選択する。
HTMLでもアプリが作れる → WEBデザイナーがアプリを作れる。

では、WEBデザインのスキルとアプリ（スマホ向けサイト）のデザインスキルは同じか？そもそもデザインのスキルとは？

デザインとは

×「かっこいいデザインにしたい」という要望をかなえることではない。
○デザインは現状かかえる問題の「解決策」である。

ターゲットとは

×年齢、性別で判断できない
○いつ、どこで、だれが、何のために、どう使うのか、その使用する人を指す

マルチスクリーン＝多様なデバイス

・利用シーン、画面サイズ、操作方法、通信速度、など色々相違点がある
・ユーザーは場所や目的によってデバイスを使い分ける
　ディスクトップPCとスマホを同じ目的で使うユーザーは少ない。
　スマホは主にコミュニケーションを目的として利用される

PCとスマホ、見えるページは同じでいいのか

・ダメ　スマホ向けに最適化する 例）amazon
・イイ　PCと同じ情報を提供する　例）App Store

ユーザーの利便性を考える

これまでWEBサイト制作は企画から制作、運用段階に入るとユーザーのことより企業の事情を優先された。
（企業が伝えたい情報をのせ、運用に手間がかからず、コストがかからず、１ページに複数のリンクを、、、）
PCサイトはユーザー中心の設計になりにくい

スマホの導線設計　ハブ＆スポーク

常にノードの中心に戻る設計。
どの情報が中心かを考え、情報の中心を見失わないUI設計を心がける
ファーストビューにコンテンツ、ナビは下、ロゴすら下になる場合もある。

検索ボックの性能に注意

検索結果にデバイスごとに最適化されたページだけを表示できるか。

文字サイズ

最小16px、見出しは24pxを目安に基本は相対指定。
（PCサイトで大きめの文字サイズ設定がされている場合、ユーザービリティよりもデバイス対応のため）
画像テキストは含めない。拡大縮小に対応できないため。
必要な場合は画像上にCSSでテキストを重ねる

レイアウト

規則性のあるパーツを組み合わせたカラム構成とすることでマルチスクリーン対応がしやすくなる
各パーツは幅可変としておく。

スモールスクリーンから考える

スモールスクリーンの画面イメージを想定したうえで設計をする
（逆だと破綻するケースが多い）
スモールスクリーンの場合はいくつかの要素を非表示にして情報量を調整することがある。

ナビゲーション

画面タッチUIにはマウスオーバーの概念がない。
このため、ボタンであることが一目でわかるデザインにする必要がある。
→グラデーションによる立体感、テキストの右側に矢印マークなど

リストメニュー

アコーデオン形式のリストメニューには「メニューの開閉」と「画面遷移」のリンクがあり、この違いを明確にする
→開閉ボタン：テキスト頭に上下矢印マーク、画面遷移ボタン：テキスト右に右向き矢印マーク

スマホの操作は一連の流れ

スマホの操作は一連の流れとして「つながっている」感覚が重要。
PCはかいつまんだ遷移をする

カラーリング

色相、明度、彩度をまとめ、多色や激しいグラデーションを使わない。
立体感のグラデやシャドーも微妙な変化で表現する
UIスタイリングの基本＝同一色相で明度違いの色使い
※多彩な色使いはユーザーの思考を中断させる

UI

UIに独創性は不要
みんなが使っているUIが他人にも使いやすい
UIは多数決
基本的なUIを流用してデザインする

参考サイト