2013年9月19日（木）、Apple Store Ginzaにて開催されたCSS Nite in Ginza, Vol.71「次世代のWebデザインへの2つのヒント」で解説したスライドです。

1. マルチデバイス時代における
WebサイトのUIについて
株式会社サン・サン
鍋坂 理恵

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

3. Webデザインのトレンド

4. フラットなUIの増加

9. 大胆な色使い

10. http://flatuicolors.com/

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

12. https://layervault.com/

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

15. http://www.justinaguilar.com/

17. 日本での事例は？

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

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

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

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

25. ・44px
・レイアウトにゆとりを
・指の大きさ
・重要機能は下側
http://www.lukew.com/ff/entry.asp?1649

26. ・ボタンを最小限に
（コンテンツの整理）
・配色や
ボタンデザインの統一
http://www.lukew.com/ff/entry.asp?1649

27. ナビゲーション

28. ボタン、タブ型
・スマートフォンの標準UIのボタンに
似た形を採用
・項目が少ない場合に適している

29. ボタン、タブ型

30. アコーディオン型
項目が多い場合や
階層が深い場合に
適している

31. リスト型

32. ダッシュボード型
画面全体に
アイコンやボタンを
並べる

33. メニューをまとめる

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

35. コーポレイトサイト

36. ECサイト
・ヘッダーのナビゲーションは最小限
・カテゴリーをまとめる
・商品を見やすく
・商品詳細ページにも十分な情報を

37. ECサイト

38. ECサイト

39. ECサイト

40. ECサイト

41. 情報の多いサイト
・ユーザーのニーズを優先させる構成
優先度の高いものは上部、低いものは下部へ

42. 情報の多いサイト

43. 情報の多いサイト

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

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

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

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

50. ワンカラムのレイアウト

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

53. 罫線を使わない

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

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

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

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

59. タイポグラフィ

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

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

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

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

67. http://skinnyties.com/

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

69. http://www.kavaruzova.cz/

70. http://www.colazionedamichy.it/

71. 階層が深いサイトの場合

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

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

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

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

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

84. ・デザインの方向性
・サイトのコンセプトや実装内容の共有
新しいアイディアや原動力に

85. ・グリッドや余白のバランス
・デザインのルールを決める
見た目の整然さの確保
操作しやすいインターフェイス

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

87. ありがとうございます！
info@sonsun33.com
Twitter : @sonsun
Facebook : sonsun