コンテンツと作り手を自由にする Web デザインWCAN Winter 2012            長谷川恭久             2012年12月22日
ハ セ   ガ   ワ   ヤ   ス   ヒ   サ長谷川恭久@yhassy
1,648 WordPress.org のみ
1,648 WordPress.org のみ
1,648 WordPress.org のみ
1,648 WordPress.org のみ
AGE of MOBILE既にモバイル機器中心の時代
iPhone                                         Android       Apple                      Windows1980           1990        ...
パソコン   デスクトップWeb   モバイルWeb100M   1B          10B                     ITU, Mark Lipacis, Morgan Stanley Research.
フィーチャーフォン                                 51%スマートフォン                           パソコン 2011.05     2012.01             2012.0...
181.3 Gbps +2.21倍82.2 Gbps2010年12月    2011年12月
情報交換                          ショッピングメール              AGE of MOBILE              既にモバイル機器中心の時代      Web観覧                  ...
ソーシャルメディアや検索エンジン対策  多彩なインタラクションの設計    各デバイスのテスト     サーバーサイド    パフォーマンス検証     タブレット対応      スマホ対応     見た目の同一化    PC向けブラウザ対応
‣ 作り方を変える‣ 役割を変える
コンセプト調査           制作・開発   公開   維持・管理       設計
C CCC
Content  コンテンツ
利用者が必要と            しているものは?利用者のタスクの達成を補助するために必要とされる要素。
Cafe Wcan    ニュース            カフェダブキャン             コンセプト       メニュー           イベント          お問い合わせシェフのメッセージ              今月...
メイン画像                      予約       (アニメーション付)          コンセプト            おすすめ           お問い合わせニュース                      店名...
26%
<META name="description" content="[ケープカナベラル(米フロリダ州) 20日 ロイター] 古代マヤ文明の暦で「滅亡の日」とされる12月21日を前に、米航空宇宙局(NASA)が、ユーチューブに公開したビデオ(ht...
‣ 自分にとっての「好き」‣ 自分にとっての「便利‣ 自分にとっての「楽」
‣ 実は壊れているコンテンツ‣ 自動化だけではできない配信設計‣ 利用者にもう一度向き合うコンテンツ‣ 長期的なお客様・利用者への満足
Code コード
コンセプト調査                   制作・開発         公開         維持・管理              設計     仕様定義     ワイヤーフレーム       カンプ    プログラミング       ...
コンセプト調査                   制作・開発         公開         維持・管理              設計     仕様定義     ワイヤーフレーム       カンプ    プログラミング       ...
‣ 予測がしやすい利用者環境                   ‣ 共有しているノウハウが多い                   ‣ スクリーンが大きい                   ‣ キーボードとマウスによるインプットby Mar...
‣ 利用環境が大幅に異なる‣ まだ新しい分野‣ スクリーンが小さい‣ 指を使ったインタラクション                  by Ed Yourdon
‣ 見て触れることができる‣ 全体を見渡して考慮できる‣ デザインプロセスのオープン化
SassLess
$primary-color: #0099cc;#navbar { Sass  background-color: {           Less    color: $primary-color;  }}
$primary-color: #cc3300;#navbar { Sass  background-color: {           Less    color: $primary-color;  }}
SassLess
$primary-color: #cc3300;lighten($primary-color, 20%);darken($primary-color, 20%);adjust-hue($primary-color, 20%);
‣ コードが注目されている理由‣ 触ることができるプロトタイプ‣ 早期からの技術検証へのニーズ
Communication    コミュニケーション
コンセプト調査           制作・開発   公開   維持・管理       設計
このカンプ良いね!
タイポグラフィインタラクションアニメーションソフトウェア’ ハードウェア
なんか違う!          タイポグラフィ         インタラクション         アニメーション         ソフトウェア’          ハードウェア
カンプ完成   リリース
‣ 書体が正確ではない‣ 可変した状態が分からない‣ インタラクションが分からない‣ 間違った印象を与える‣ 変更のコストが高い
技術検証アイデア               テスト        ルック       フィール
技術検証アイデア               テスト        ルック       フィール
Atmosphere
‣ ボタン    ‣ アイコン‣ ヘッダー   ‣ 本文‣ ボックス   ‣ 画像・写真‣ リスト    ‣ テーブル
尋ねる   解釈   定義   改善
パーソナルコンピューターとは「パーソナルコンピューター」という言葉を耳にすると、デスクトップやノートパソコンを連想するかもしれないが、これらは消費者にとってパーソナルなデバイスというよりかは高価な製品であり、毎日の生活からかけ離れた存在だ。それ...
パーソナルコンピューターとは「パーソナルコンピューター」という言葉を耳にすると、デスクトップやノートパソコンを連想するかもしれないが、これらは消費者にとってパーソナルなデバイスというよりかは高価な製品であり、毎日の生活からかけ離れた存在だ。それ...
パーソナルコンピューターとは「パーソナルコンピューター」という言葉を耳にすると、デスクトップやノートパソコンを連想するかもしれないが、これらは消費者にとってパーソナルなデバイスというよりかは高価な製品であり、毎日の生活からかけ離れた存在だ。それ...
‣ サイトにふさわしい『コトバ』とは?‣ 模索するためのシステム作り
‣ カンプは過去の手法‣ 雰囲気をつくる『コトバ』つくり‣ ツールの使い方を再検証
Creativity   クリエイティビティ
by Curious Expeditions
‣ アイデアは機械化できない‣ シンプルに美しく‣ 何がどうシンプルであるのか?
C
‣ 今にふさわしいコンテンツ‣ コードが変えるデザイン‣ 再考ワークフロー‣ クリエイティブは人のもの
Thank You!             長谷川恭久             mail@yasuhisa.com             @yhassy             yasuhisa.com/could
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
Upcoming SlideShare
Loading in...5
×

モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン

5,433

Published on

サイトの基本構造や、作るためのワークフローが確立されたかのように見えた Web デザイン。それがマルチデバイス化の波が訪れたことで、大きく変化し始めています。今までのようにただ作り続けているだけでは、自動化したサービスと同じような存在になりかねません。機械の部品の一部のような仕事では、必要とされなくなるのは時間の問題ですし、良いモノを作りたいと思うデザイナーやプログラマーにとっても面白くない世界になってしまいます。

今回は 4 つの「C」をキーワードに今後の Web デザインワークフローのヒント紹介します。機械化の波に飲まれないモダンな Web 制作者への道はひとつだけではありません。サイトからアプリまで関わり方は様々なので、このセッションを機会に Web とデザインの関わり方を再考してみましょう。

Published in: Design
0 Comments
33 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,433
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
33
Embeds 0
No embeds

No notes for slide

Transcript of "モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン"

  1. 1. コンテンツと作り手を自由にする Web デザインWCAN Winter 2012 長谷川恭久 2012年12月22日
  2. 2. ハ セ ガ ワ ヤ ス ヒ サ長谷川恭久@yhassy
  3. 3. 1,648 WordPress.org のみ
  4. 4. 1,648 WordPress.org のみ
  5. 5. 1,648 WordPress.org のみ
  6. 6. 1,648 WordPress.org のみ
  7. 7. AGE of MOBILE既にモバイル機器中心の時代
  8. 8. iPhone Android Apple Windows1980 1990 2000 2011
  9. 9. パソコン デスクトップWeb モバイルWeb100M 1B 10B ITU, Mark Lipacis, Morgan Stanley Research.
  10. 10. フィーチャーフォン 51%スマートフォン パソコン 2011.05 2012.01 2012.05 aiship(アイシップ)の利用動向
  11. 11. 181.3 Gbps +2.21倍82.2 Gbps2010年12月 2011年12月
  12. 12. 情報交換 ショッピングメール AGE of MOBILE 既にモバイル機器中心の時代 Web観覧 読書 ブログビデオ
  13. 13. ソーシャルメディアや検索エンジン対策 多彩なインタラクションの設計 各デバイスのテスト サーバーサイド パフォーマンス検証 タブレット対応 スマホ対応 見た目の同一化 PC向けブラウザ対応
  14. 14. ‣ 作り方を変える‣ 役割を変える
  15. 15. コンセプト調査 制作・開発 公開 維持・管理 設計
  16. 16. C CCC
  17. 17. Content コンテンツ
  18. 18. 利用者が必要と しているものは?利用者のタスクの達成を補助するために必要とされる要素。
  19. 19. Cafe Wcan ニュース カフェダブキャン コンセプト メニュー イベント お問い合わせシェフのメッセージ 今月のおすすめ ニュース 愛知県名古屋市東区徳川町1-14-6  052-0197-6365
  20. 20. メイン画像 予約 (アニメーション付) コンセプト おすすめ お問い合わせニュース 店名 (読み方含む) 本日のランチ シェフからのメッセージ (又はディナー) プロモーション 駐車場情報
  21. 21. 26%
  22. 22. <META name="description" content="[ケープカナベラル(米フロリダ州) 20日 ロイター] 古代マヤ文明の暦で「滅亡の日」とされる12月21日を前に、米航空宇宙局(NASA)が、ユーチューブに公開したビデオ(http://link.reuters.com/nex74t)で予言をきっぱりと否定した。映像ではNASAの専門家が、マヤ暦への誤解によってこうしたうわさが生まれたと指摘。「マヤ暦の12月21日はサイクルの終わりであり、新たな">
  23. 23. ‣ 自分にとっての「好き」‣ 自分にとっての「便利‣ 自分にとっての「楽」
  24. 24. ‣ 実は壊れているコンテンツ‣ 自動化だけではできない配信設計‣ 利用者にもう一度向き合うコンテンツ‣ 長期的なお客様・利用者への満足
  25. 25. Code コード
  26. 26. コンセプト調査 制作・開発 公開 維持・管理 設計 仕様定義 ワイヤーフレーム カンプ プログラミング コーディング
  27. 27. コンセプト調査 制作・開発 公開 維持・管理 設計 仕様定義 ワイヤーフレーム カンプ プログラミング コーディング
  28. 28. ‣ 予測がしやすい利用者環境 ‣ 共有しているノウハウが多い ‣ スクリーンが大きい ‣ キーボードとマウスによるインプットby Martino Sabia
  29. 29. ‣ 利用環境が大幅に異なる‣ まだ新しい分野‣ スクリーンが小さい‣ 指を使ったインタラクション by Ed Yourdon
  30. 30. ‣ 見て触れることができる‣ 全体を見渡して考慮できる‣ デザインプロセスのオープン化
  31. 31. SassLess
  32. 32. $primary-color: #0099cc;#navbar { Sass background-color: { Less color: $primary-color; }}
  33. 33. $primary-color: #cc3300;#navbar { Sass background-color: { Less color: $primary-color; }}
  34. 34. SassLess
  35. 35. $primary-color: #cc3300;lighten($primary-color, 20%);darken($primary-color, 20%);adjust-hue($primary-color, 20%);
  36. 36. ‣ コードが注目されている理由‣ 触ることができるプロトタイプ‣ 早期からの技術検証へのニーズ
  37. 37. Communication コミュニケーション
  38. 38. コンセプト調査 制作・開発 公開 維持・管理 設計
  39. 39. このカンプ良いね!
  40. 40. タイポグラフィインタラクションアニメーションソフトウェア’ ハードウェア
  41. 41. なんか違う! タイポグラフィ インタラクション アニメーション ソフトウェア’ ハードウェア
  42. 42. カンプ完成 リリース
  43. 43. ‣ 書体が正確ではない‣ 可変した状態が分からない‣ インタラクションが分からない‣ 間違った印象を与える‣ 変更のコストが高い
  44. 44. 技術検証アイデア テスト ルック フィール
  45. 45. 技術検証アイデア テスト ルック フィール
  46. 46. Atmosphere
  47. 47. ‣ ボタン ‣ アイコン‣ ヘッダー ‣ 本文‣ ボックス ‣ 画像・写真‣ リスト ‣ テーブル
  48. 48. 尋ねる 解釈 定義 改善
  49. 49. パーソナルコンピューターとは「パーソナルコンピューター」という言葉を耳にすると、デスクトップやノートパソコンを連想するかもしれないが、これらは消費者にとってパーソナルなデバイスというよりかは高価な製品であり、毎日の生活からかけ離れた存在だ。それに比べ、スマートフォンやタブレットは気軽に持ち歩くことができる、文字通りパーソナルな存在といえるだろう。実際近年話題になデバイスは, iPhone, iPad, Nexus, Galaxy, Kindle Fire,Microsoft Surface といったタッチデバイスが中心だ。消費者の興味もデスクトップやノートパソコンからスマートフォンやタブレットに移行しているのが分かる。小さなデバイスになったからといって、スペックが貧弱とはいえない。インタラクティブ性の高いゲームを楽しむことが出来るだけでなく、今までデスクトップが必要とされていたクリエイティブな行為もタッチデバイスだけで済ますことができる。
  50. 50. パーソナルコンピューターとは「パーソナルコンピューター」という言葉を耳にすると、デスクトップやノートパソコンを連想するかもしれないが、これらは消費者にとってパーソナルなデバイスというよりかは高価な製品であり、毎日の生活からかけ離れた存在だ。それに比べ、スマートフォンやタブレットは気軽に持ち歩くことができる、文字通りパーソナルな存在といえるだろう。実際近年話題になデバイスは, iPhone, iPad, Nexus, Galaxy, Kindle Fire,Microsoft Surface といったタッチデバイスが中心だ。消費者の興味もデスクトップやノートパソコンからスマートフォンやタブレットに移行しているのが分かる。小さなデバイスになったからといって、スペックが貧弱とはいえない。インタラクティブ性の高いゲームを楽しむことが出来るだけでなく、今までデスクトップが必要とされていたクリエイティブな行為もタッチデバイスだけで済ますことができる。
  51. 51. パーソナルコンピューターとは「パーソナルコンピューター」という言葉を耳にすると、デスクトップやノートパソコンを連想するかもしれないが、これらは消費者にとってパーソナルなデバイスというよりかは高価な製品であり、毎日の生活からかけ離れた存在だ。それに比べ、スマートフォンやタブレットは気軽に持ち歩くことができる、文字通りパーソナルな存在といえるだろう。実際近年話題になデバイスは, iPhone, iPad, Nexus, Galaxy, Kindle Fire, Microsoft Surface といったタッチデバイスが中心だ。消費者の興味もデスクトップやノートパソコンからスマートフォンやタブレットに移行しているのが分かる。小さなデバイスになったからといって、スペックが貧弱とはいえない。インタラクティブ性の高いゲームを楽しむことが出来るだけでなく、今までデスクトップが必要とされていたクリエイティブな行為もタッチデバイスだけで済ますことができる。
  52. 52. ‣ サイトにふさわしい『コトバ』とは?‣ 模索するためのシステム作り
  53. 53. ‣ カンプは過去の手法‣ 雰囲気をつくる『コトバ』つくり‣ ツールの使い方を再検証
  54. 54. Creativity クリエイティビティ
  55. 55. by Curious Expeditions
  56. 56. ‣ アイデアは機械化できない‣ シンプルに美しく‣ 何がどうシンプルであるのか?
  57. 57. C
  58. 58. ‣ 今にふさわしいコンテンツ‣ コードが変えるデザイン‣ 再考ワークフロー‣ クリエイティブは人のもの
  59. 59. Thank You! 長谷川恭久 mail@yasuhisa.com @yhassy yasuhisa.com/could

×