マルチデバイス時代におけるWebサイトのUIについて

マルチデバイス時代におけるWebサイトのUIについて

株式会社サン・サン鍋坂 理恵

鍋坂理恵Rie Nabesaka

香川県生まれのWebデザイナー制作会社で各種制作を経て独立カメラマンの夫・６歳の息子育児・家事・仕事に奮闘中

Webデザインのトレンド

フラットなUIの増加

大胆な色使い

http://flatuicolors.com/

シンプルで難しいが、操作エリアは明確に

https://layervault.com/

アイコンを効果的に活用する

http://www.justinaguilar.com/

日本での事例は？

デザインのポイントとUIの理解

スマートフォン用WebサイトのUIパターン

http://www.lukew.com/ff/entry.asp?1649

http://www.lukew.com/ff/entry.asp?1649

http://www.lukew.com/ff/entry.asp?1649

・44px・レイアウトにゆとりを・指の大きさ・重要機能は下側

http://www.lukew.com/ff/entry.asp?1649

・ボタンを最小限に （コンテンツの整理）・配色や　ボタンデザインの統一

ナビゲーション

ボタン、タブ型

・スマートフォンの標準UIのボタンに　似た形を採用

・項目が少ない場合に適している

ボタン、タブ型

アコーディオン型

項目が多い場合や階層が深い場合に適している

リスト型

ダッシュボード型

画面全体にアイコンやボタンを並べる

メニューをまとめる

スマートフォンでのレイアウト例

コーポレイトサイト

ECサイト

・ヘッダーのナビゲーションは最小限

・商品を見やすく

・カテゴリーをまとめる

・商品詳細ページにも十分な情報を

ECサイト

ECサイト

ECサイト

ECサイト

情報の多いサイト

・ユーザーのニーズを優先させる構成　優先度の高いものは上部、低いものは下部へ

情報の多いサイト

情報の多いサイト

タブレットを意識したWebデザイン

http://www.lukew.com/ff/entry.asp?1649

http://www.lukew.com/ff/entry.asp?1649

横スライドや左メニュー固定

ワンカラムのレイアウト

トレンドを取り入れるテクニック

罫線を使わない

グリッドと余白で、区画を明確にする

http://www.coletownsend.com/#sl2

http://www.coletownsend.com/#sl2

http://www.coletownsend.com/#sl2

タイポグラフィ

文字のジャンプ率を大きく

たくさんのフォントを知っておくしっかり吟味する

レスポンシブWebデザインのレイアウトパターン

ナビゲーションを縮めるメニューをアイコンを使う

http://skinnyties.com/

レイアウトを大胆に変更する

http://www.kavaruzova.cz/

http://www.colazionedamichy.it/

階層が深いサイトの場合

Webデザイナーに求められるもの

可能なこと、困難なことの理解

・デザインはコンテンツを伝える入れ物・操作感を優先する

プロトタイプで進めるなら、デザインはいらない？

・デザインの方向性・サイトのコンセプトや実装内容の共有

・デザインの方向性・サイトのコンセプトや実装内容の共有

新しいアイディアや原動力に

・グリッドや余白のバランス・デザインのルールを決める

見た目の整然さの確保操作しやすいインターフェイス

http://www.amazon.co.jp/gp/product/4883378942

ありがとうございます！

info@sonsun33.comTwitter : @sonsunFacebook : sonsun