1. コンテンツと作り手を自由にする Web デザイン
WCAN Winter 2012 長谷川恭久 2012年12月22日

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

9. 1,648
WordPress.org のみ

10. 1,648
WordPress.org のみ

11. 1,648
WordPress.org のみ

12. 1,648
WordPress.org のみ

13. AGE of MOBILE
既にモバイル機器中心の時代

14. iPhone
Android
Apple
Windows
1980 1990 2000 2011

15. パソコン デスクトップWeb モバイルWeb
100M 1B 10B
ITU, Mark Lipacis, Morgan Stanley Research.

16. フィーチャーフォン
51%
スマートフォン パソコン
2011.05 2012.01 2012.05
aiship（アイシップ）の利用動向

17. 181.3 Gbps
+2.21倍
82.2 Gbps
2010年12月 2011年12月

18. 情報交換
ショッピング
メール
AGE of MOBILE
既にモバイル機器中心の時代
Web観覧
読書
ブログ
ビデオ

19. ソーシャルメディアや検索エンジン対策
多彩なインタラクションの設計
各デバイスのテスト
サーバーサイド
パフォーマンス検証
タブレット対応
スマホ対応
見た目の同一化
PC向けブラウザ対応

21. ‣ 作り方を変える
‣ 役割を変える

22. コンセプト
調査 制作・開発 公開 維持・管理
設計

23. C CCC

24. Content
コンテンツ

26. 利用者が必要と
しているものは？
利用者のタスクの達成を補助するために
必要とされる要素。

27. Cafe Wcan
ニュース
カフェダブキャン
コンセプト メニュー イベント お問い合わせ
シェフのメッセージ 今月のおすすめ ニュース
愛知県名古屋市東区徳川町1-14-6 052-0197-6365

28. メイン画像 予約
（アニメーション付）
コンセプト おすすめ お問い合わせ
ニュース
店名
（読み方含む） 本日のランチ
シェフからのメッセージ （又はディナー）
プロモーション
駐車場情報

29. 26%

31. <META name="description" content="［ケープカナベラル（米フロ
リダ州） ２０日 ロイター］ 古代マヤ文明の暦で「滅亡の日」とさ
れる１２月２１日を前に、米航空宇宙局（ＮＡＳＡ）が、ユーチューブ
に公開したビデオ（http://link.reuters.com/nex74t）で予言をきっ
ぱりと否定した。映像ではＮＡＳＡの専門家が、マヤ暦への誤解によっ
てこうしたうわさが生まれたと指摘。「マヤ暦の１２月２１日はサイク
ルの終わりであり、新たな">

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

35. ‣ 実は壊れているコンテンツ
‣ 自動化だけではできない配信設計
‣ 利用者にもう一度向き合うコンテンツ
‣ 長期的なお客様・利用者への満足

36. Code
コード

37. コンセプト
調査 制作・開発 公開 維持・管理
設計
仕様定義 ワイヤーフレーム カンプ プログラミング
コーディング

38. コンセプト
調査 制作・開発 公開 維持・管理
設計
仕様定義 ワイヤーフレーム カンプ プログラミング
コーディング

40. ‣ 予測がしやすい利用者環境
‣ 共有しているノウハウが多い
‣ スクリーンが大きい
‣ キーボードとマウスによるインプット
by Martino Sabia

41. ‣ 利用環境が大幅に異なる
‣ まだ新しい分野
‣ スクリーンが小さい
‣ 指を使ったインタラクション
by Ed Yourdon

43. ‣ 見て触れることができる
‣ 全体を見渡して考慮できる
‣ デザインプロセスのオープン化

55. Sass
Less

56. $primary-color: #0099cc;
#navbar { Sass
background-color: {
Less
color: $primary-color;
}
}

57. $primary-color: #cc3300;
#navbar { Sass
background-color: {
Less
color: $primary-color;
}
}

58. Sass
Less

59. $primary-color: #cc3300;
lighten($primary-color, 20%);
darken($primary-color, 20%);
adjust-hue($primary-color, 20%);

60. ‣ コードが注目されている理由
‣ 触ることができるプロトタイプ
‣ 早期からの技術検証へのニーズ

61. Communication
コミュニケーション

62. コンセプト
調査 制作・開発 公開 維持・管理
設計

64. このカンプ良いね！

65. タイポグラフィ
インタラクション
アニメーション
ソフトウェア’
ハードウェア

66. なんか違う！
タイポグラフィ
インタラクション
アニメーション
ソフトウェア’
ハードウェア

67. カンプ完成 リリース

68. ‣ 書体が正確ではない
‣ 可変した状態が分からない
‣ インタラクションが分からない
‣ 間違った印象を与える
‣ 変更のコストが高い

71. 技術検証
アイデア
テスト
ルック
フィール

72. 技術検証
アイデア
テスト
ルック
フィール

78. Atmosphere

82. ‣ ボタン ‣ アイコン
‣ ヘッダー ‣ 本文
‣ ボックス ‣ 画像・写真
‣ リスト ‣ テーブル

84. 尋ねる 解釈 定義 改善

86. パーソナルコンピューターとは
「パーソナルコンピューター」という言葉を耳にすると、デスクトップやノートパ
ソコンを連想するかもしれないが、これらは消費者にとってパーソナルなデバイス
というよりかは高価な製品であり、毎日の生活からかけ離れた存在だ。それに比
べ、スマートフォンやタブレットは気軽に持ち歩くことができる、文字通りパーソ
ナルな存在といえるだろう。
実際近年話題になデバイスは, iPhone, iPad, Nexus, Galaxy, Kindle Fire,
Microsoft Surface といったタッチデバイスが中心だ。消費者の興味もデスクト
ップやノートパソコンからスマートフォンやタブレットに移行しているのが分か
る。小さなデバイスになったからといって、スペックが貧弱とはいえない。インタ
ラクティブ性の高いゲームを楽しむことが出来るだけでなく、今までデスクトップ
が必要とされていたクリエイティブな行為もタッチデバイスだけで済ますことがで
きる。

87. パーソナルコンピューターとは
「パーソナルコンピューター」という言葉を耳にすると、デスクトップやノ
ートパソコンを連想するかもしれないが、これらは消費者にとってパーソナ
ルなデバイスというよりかは高価な製品であり、毎日の生活からかけ離れた
存在だ。それに比べ、スマートフォンやタブレットは気軽に持ち歩くことが
できる、文字通りパーソナルな存在といえるだろう。
実際近年話題になデバイスは, iPhone, iPad, Nexus, Galaxy, Kindle Fire,
Microsoft Surface といったタッチデバイスが中心だ。消費者の興味もデス
クトップやノートパソコンからスマートフォンやタブレットに移行している
のが分かる。小さなデバイスになったからといって、スペックが貧弱とはい
えない。インタラクティブ性の高いゲームを楽しむことが出来るだけでな
く、今までデスクトップが必要とされていたクリエイティブな行為もタッチ
デバイスだけで済ますことができる。

88. パーソナルコンピューターとは
「パーソナルコンピューター」という言葉を耳にすると、デスクトップやノートパソコンを連想する
かもしれないが、これらは消費者にとってパーソナルなデバイスというよりかは高価な製品であり、
毎日の生活からかけ離れた存在だ。それに比べ、スマートフォンやタブレットは気軽に持ち歩くこと
ができる、文字通りパーソナルな存在といえるだろう。
実際近年話題になデバイスは, iPhone, iPad, Nexus, Galaxy, Kindle Fire, Microsoft Surface とい
ったタッチデバイスが中心だ。消費者の興味もデスクトップやノートパソコンからスマートフォンや
タブレットに移行しているのが分かる。小さなデバイスになったからといって、スペックが貧弱とは
いえない。インタラクティブ性の高いゲームを楽しむことが出来るだけでなく、今までデスクトップ
が必要とされていたクリエイティブな行為もタッチデバイスだけで済ますことができる。

89. ‣ サイトにふさわしい『コトバ』とは？
‣ 模索するためのシステム作り

91. ‣ カンプは過去の手法
‣ 雰囲気をつくる『コトバ』つくり
‣ ツールの使い方を再検証

92. Creativity
クリエイティビティ

95. by Curious Expeditions

96. ‣ アイデアは機械化できない
‣ シンプルに美しく
‣ 何がどうシンプルであるのか？

97. C

100. ‣ 今にふさわしいコンテンツ
‣ コードが変えるデザイン
‣ 再考ワークフロー
‣ クリエイティブは人のもの

101. Thank You!
長谷川恭久
mail@yasuhisa.com
@yhassy
yasuhisa.com/could