狠狠撸

狠狠撸Share a Scribd company logo
マルチデバイス時代における
WebサイトのUIについて
株式会社サン?サン
鍋坂 理恵
鍋坂理恵
Rie Nabesaka

香川県生まれのWebデザイナー
制作会社で各種制作を経て独立
カメラマンの夫?6歳の息子
育児?家事?仕事に奮闘中
奥别产デザインのトレンド
フラットな鲍滨の増加
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
大胆な色使い
http://flatuicolors.com/
シンプルで難しいが、
操作エリアは明確に
https://layervault.com/
マルチデバイス时代における奥别产サイトの鲍滨について
アイコンを効果的に活用する
http://www.justinaguilar.com/
マルチデバイス时代における奥别产サイトの鲍滨について
日本での事例は?
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
デザインのポイントと鲍滨の理解
スマートフォン用Webサイトの
UIパターン
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
?ボタンを最小限に
(コンテンツの整理)
?配色や
?ボタンデザインの統一

http://www.lukew.com/ff/entry.asp?1649
ナビゲーション
ボタン、タブ型

?スマートフォンの標準UIのボタンに
?似た形を採用
?項目が少ない場合に適している
ボタン、タブ型
アコーディオン型
項目が多い場合や
階層が深い場合に
適している
リスト型
ダッシュボード型

画面全体に
アイコンやボタンを
並べる
メニューをまとめる
スマートフォンでのレイアウト例
コーポレイトサイト
贰颁サイト
?ヘッダーのナビゲーションは最小限
?カテゴリーをまとめる
?商品を見やすく
?商品詳細ページにも十分な情報を
贰颁サイト
贰颁サイト
贰颁サイト
贰颁サイト
情报の多いサイト

?ユーザーのニーズを優先させる構成
?優先度の高いものは上部、低いものは下部へ
情报の多いサイト
情报の多いサイト
タブレットを意識した
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/
阶层が深いサイトの场合
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
奥别产デザイナーに求められるもの
可能なこと、困难なことの理解
?デザインはコンテンツを伝える入れ物
?操作感を優先する
プロトタイプで進めるなら、
デザインはいらない?
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
マルチデバイス时代における奥别产サイトの鲍滨について
?デザインの方向性
?サイトのコンセプトや実装内容の共有
?デザインの方向性
?サイトのコンセプトや実装内容の共有

新しいアイディアや原動力に
?グリッドや余白のバランス
?デザインのルールを決める

見た目の整然さの確保
操作しやすいインターフェイス
http://www.amazon.co.jp/gp/product/4883378942
ありがとうございます!
info@sonsun33.com
Twitter : @sonsun
Facebook : sonsun

More Related Content

マルチデバイス时代における奥别产サイトの鲍滨について