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

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

セミナータイトル

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

アプリとHTML

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

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

デザインとは

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

ターゲットとは

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

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

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

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

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

ダメな理由 (最適化する理由)

・画面サイズが小さい
 1画面で見られる情報量が少ない
・通信速度が低い
 データサイズを抑える=必要最低限の情報に抑える
・通勤途中、空き時間などの利用シーン
 ゆっくり閲覧する時間がない=短時間に読める情報提供
・利用目的が明確
 スマホは直接的なも目的で利用することが多い(購入、ルート検索、SNS)
 =すぐに目的を達成できる構成にする

イイ理由 (最適化しない理由)

・画面が小さくてもスクロールや拡大で閲覧できる
・もともと文字が大きく、可読性が保たれている
・情報そのものは利益にならない
(運用更新の手間、コストをかけたくない)
・提供する情報を一元管理できる
・情報を詳しく提供できる

イイ理由その2 (一部最適化)

・超リキッドデザインのサイト構成にする
・「企業紹介」のように、購入やログインなどの機能をもたない、情報提供のみの中規模サイトに有効
・注意点:PCサイトと同じ機能や処理速度は望めないことを考慮する。

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

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

スマホの場合

デバイス自体、画面が小さく機能も低いため、必然的にと掲載できる情報量、機能が制限される
基本的に1画面内で遷移する(複数のブラウザやタブがない)ため、1本道の導線でないと迷う
ユーザーの使用目的が明確なので、その目的達成のための最短ルートを提供する

PCの場合

ユーザーの目的が多岐にわたる。
閲覧方法も複数のブラウザ、タブを使い、外部リンクにもどんどんアクセスする

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

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

PCの場合

階層構造の並列な情報や複数前の情報にもリンクで遷移できる。(パンクズリンク、グローバルメニュー)

スマホの場合

階層構造の並列な情報には一旦トップに戻ってから別の並列情報へ遷移する。(戻るボタンのみ、トップメニュー)

検索ボックの性能に注意

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

文字サイズ

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

レイアウト

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

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

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

ナビゲーション

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

リストメニュー

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

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

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

カラーリング

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

UI

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

参考サイト

jQuery mobile
簡単なHTMLでスマートフォンサイトを作成
Android patterns
Android UIのデザインパターン集
Yahoo! Design Stencil Kit
iPhone用アプリをつくるときに便利な部品画像テンプレート

デザインに関する記事

コメント