Your SlideShare is downloading. ×
モダン・タイムス 〜 コンテンツと作り手を自由にする 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 デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする 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 デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

5,347

Published on

サイトの基本構造や、作るためのワークフローが確立されたかのように見えた Web …

サイトの基本構造や、作るためのワークフローが確立されたかのように見えた 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,347
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
33
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×