Web を Web らしくデザインするということはどういうことなのでしょうか。コンテンツを補助するためのビジュアル。まったく同じ見た目にするのではなく、利用者の状況に寄り添う形のデザイン。Web へアクセスするための手段がますます増えていく中、今までの Web デザインの捉え方を変える時期にきています。 http://www.yasuhisa.com/could/article/experience-layers/

1. 終 わりなき Web の 旅
CSS Nite in KOBE, Vol.1 2012年10月6日 長谷川恭久

2. ハ セ ガ ワ ヤ ス ヒ サ
長谷川恭久
@yhassy

5. モバイル
デスクトップ
2007 2009 2011 2013 2015
by Robert Scoble

6. 87%
by Maureen Sill

7. by Johan Larsson

8. 15,000,000,000
by Brett Neilson

9. 30,000,000,000
by Brett Neilson

10. ‣ ソーシャルメディア
‣ UX : User Experience
‣ 制作効率化

12. ‣ Webとコンテンツ
‣ Webにおける見た目
‣ Webデザイン思考

14. ‣ 限りなく可変でダイナミック
‣ どのように見られるのか
‣ 拡散・共有を前提とした配信
‣ 制作や管理体制

18. ‣ 厳密なレイアウト作り
‣ コンテンツとレイアウトの関連性が強い
‣ 一方通行の発信

19. ‣ 可変の世界
‣ コンテンツがダイナミック
‣ 双方向・多方向の対話

20. ‣ どのハードウェアを使うか
‣ どのアプリケーションを利用するか
‣ どう設定するか

21. 26%

22. ‣ 自分にとっての「好き」
‣ 自分にとっての「便利」
‣ 自分にとっての「楽」

31. ‣ 手がかりを示してくれる
‣ 要素の囲い込み
‣ 位置や状態を知らせる
‣ 雰囲気をつくる
by Joshua Thomas

41. Atmosphere

42. by Danny Knaak

43. by Danny Knaak

47. 具体化
質問
部品構築
模索

48. ‣ ビジネスモデルはなにですか？
‣ 知ることができる場所や媒体は？
‣ 顧客が最も気にしていることは?
‣ Web サイトを必要とされている？
photo by Tim O'Brien

49. 空間
線
質感
色
形
様式
photo by Ky

50. ‣ ボタン ‣ ボタン
‣ ヘッダー ‣ 本文
‣ ボックス ‣ 画像・写真
‣ リスト ‣ テーブル
photo by Wally Gobetz

51. Web制作者の
モチベーションアップ
CSS Nite（シーエスエス・ナイト）はWeb制作に関わるすべての方のためのセミナーイベントで
す。 参加するにあたって資格などはありません。Web業界に興味のあるさまざまな方々の参加をお
待ちしています。
v
登壇者紹介 v
スケジュール v
準備にあたって
新着情報
twitterみんなのつぶやきページ
株式会社日本情報化農業研究所さまより季節の野菜色々詰め合わせをプレゼント協賛頂きました
懇親会のお知らせ

52. v
登壇者紹介
v
スケジュール
v
準備にあたって
新着情報
Web制作者の
モチベーションアップ
twitterみんなのつぶやきページ
株式会社日本情報化農業研究所さまよ
り季節の野菜色々詰め合わせをプレゼ
ント協賛頂きました CSS Nite（シーエスエス・ナイト）はWeb制作に関わるすべての方のためのセミナーイベントで
す。 参加するにあたって資格などはありません。Web業界に興味のあるさまざまな方々の参加をお
懇親会のお知らせ
待ちしています。

53. v
登壇者紹介
v
スケジュール
v
準備にあたって
新着情報
twitterみんなのつぶやきページ
株式会社日本情報化農業研究所さまよ
り季節の野菜色々詰め合わせをプレゼ
ント協賛頂きました
懇親会のお知らせ

55. 模索がしやすい
ムードボードより
具体的
様々な状況が
考慮できる
コンテンツを
考慮できる

58. Webサイト 利用者

59. Webサイト ソフトウェア ハードウェア インプット 利用者

60. Progressive Enhancement
photo by Eustaquio Santimano

61. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Webサイトはまったく同じ見た目である必要はない

62. コンテンツ
マークアップ
スタイル
インタラクション

64. 購入 購入 購入 購入
.box{
background: #715886 // 背景色
background: linear-gradient(top, #715886 0%,#2f2539 100%); // グラデ
border-radius: 20px; // 角丸
box-shadow: 0 0 5px #000000; // ボックスシャドー
-webkit-transition: All 1s ease; // アニメーション
}
.box:hover{
box-shadow: 0 0 10px #a1f6f9; // マウスオーバーしたときのボックスシャドー
}

65. 購入 購入 購入 購入
カートは空です
購入
.box{
background: #715886 // 背景色
background: linear-gradient(top, #715886 0%,#2f2539 100%); // グラデ
border-radius: 20px; // 角丸
box-shadow: 0 0 5px #000000; // ボックスシャドー

66. Progressive Enhancement
= 体験のレイヤー

67. HTML
人にも機械にもやさしくなれる
CSS
視覚的な理解を加味していく
Javascript
より使いやすくするための機能

68. ‣ 環境に合わせて適応する
‣ 見た目を同じにすることではない
‣ 最低限の体験を保証する
photo by Eustaquio Santimano

75. 理論なしで実践するのは、コンパスや舵をもたずに、
闇雲に航海にでる船乗りと同じである。

79. photo by Mark Chapman

80. photo by Robert Scoble

82. ‣ 情報へアクセスできるか
‣ 壁を取り払うためのデザイン
‣ パフォーマンス
photo by Johanna H

83. ‣ すべてをコントロールできない
‣ レイアウトではなく雰囲気
‣ Progressive Enhancement

85. 長谷川恭久
mail@yasuhisa.com
@yhassy
yasuhisa.com/could