Upload
rie-nabesaka
View
2.278
Download
0
Embed Size (px)
DESCRIPTION
2013年9月19日(木)、Apple Store Ginzaにて開催されたCSS Nite in Ginza, Vol.71「次世代のWebデザインへの2つのヒント」で解説したスライドです。
Citation preview
マルチデバイス時代におけるWebサイトのUIについて
株式会社サン・サン鍋坂 理恵
鍋坂理恵Rie Nabesaka
香川県生まれのWebデザイナー制作会社で各種制作を経て独立カメラマンの夫・6歳の息子育児・家事・仕事に奮闘中
Webデザインのトレンド
フラットなUIの増加
大胆な色使い
シンプルで難しいが、操作エリアは明確に
アイコンを効果的に活用する
日本での事例は?
デザインのポイントと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
横スライドや左メニュー固定
ワンカラムのレイアウト
トレンドを取り入れるテクニック
罫線を使わない
グリッドと余白で、区画を明確にする
タイポグラフィ
文字のジャンプ率を大きく
たくさんのフォントを知っておくしっかり吟味する
レスポンシブWebデザインのレイアウトパターン
ナビゲーションを縮めるメニューをアイコンを使う
レイアウトを大胆に変更する
階層が深いサイトの場合
Webデザイナーに求められるもの
可能なこと、困難なことの理解
・デザインはコンテンツを伝える入れ物・操作感を優先する
プロトタイプで進めるなら、デザインはいらない?
・デザインの方向性・サイトのコンセプトや実装内容の共有
・デザインの方向性・サイトのコンセプトや実装内容の共有
新しいアイディアや原動力に
・グリッドや余白のバランス・デザインのルールを決める
見た目の整然さの確保操作しやすいインターフェイス
http://www.amazon.co.jp/gp/product/4883378942