Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法

29,056 views

Published on

6月25日(水)、竹橋マイナビルームにてマイナビ様が主催する「Creator’s Career Lounge(以下、CCL) vol.6」が開催され、FICCから戸塚、福岡、冨田、STANDARD社から鈴木 健一氏が登壇しました。「Webデザイントレンドの潮流」をテーマに、これまでのWebデザインが歩んだ歴史と背景、そして現在Webの現場で活躍するWebデザイン技法についての講演のスライドです。

・FICCは一緒に働きたい人を募集しています。
 【詳しくは】 http://www.ficc.jp/recruit/

・STANDARDは、スマートフォンアプリやWebサイト
 Webサービス等のUIデザインに特化したプロダクションです。
 人の役に立つアプリやサービス制作に携わりたい人を募集します。
 【詳しくは】 http://www.standardinc.jp

・Web業界で活躍したい人のための求人サイト「MOREWORKS」
 希望の職場がすぐ見つかる!! 登録無料!!
 http://bit.ly/UdyX5m

Published in: Design

[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法

  1. 1. 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法 CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 2014.06.25 at Mynavi Room 2F-S
  2. 2. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CREATOR’S CAREER LOUNGE 登壇者紹介
  3. 3. 登壇者紹介 CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - F U K U O K A A K I R A 福岡 陽 クリエイティブディレクター
  4. 4. 登壇者紹介 CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - T O T S U K A S H O TA 戸 塚 省 太 執行役員 / シニアクリエイティブディレクター
  5. 5. 登壇者紹介 CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - T O M I TA K A Z U K I 冨 田 一 樹 フロントエンドデザイナー
  6. 6. 登壇者紹介 CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - S U Z U K I K E N I C H I 鈴 木 健 一 UIデザイナー
  7. 7. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 「目的を達成するための」デザインとは? はじめに
  8. 8. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 デザインには「目的」がある
  9. 9. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 知ってほしい 買ってほしい シェアしてほしい 🎓 👜 信じてほしい 仲良くしてほしい 待ってほしい ⏳👥
  10. 10. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 状況によって変化する「目的」 目的によって変化する「デザイン」
  11. 11. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 Webデザイントレンドにも「目的」がある つまり
  12. 12. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 環境の変化、要求の変化、 デザインの変化を振り返る Webデザイントレンドの変遷
  13. 13. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2004 - Web広告時代
  14. 14. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 2004年のヒット商品 トレンドの変遷 Web広告=Flash全盛期 2004年のWebトレンド 「エコトノハ」広告賞を受賞 携帯はFlash Lite1.1が標準 PCへのインストール率:98% iPod mini Nintendo DS PSP ヨン様 「共通環境」+「HTMLを超えた表現力」がFlashサイトを支持
  15. 15. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2005 - Webサービスの萌芽
  16. 16. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 Webサービスの隆盛 2005年のWebトレンド mixiの誕生 ブログとSEO 2005年のヒット商品 HTML・CSS・JavaScriptの重要度の増加 iTunes Music Store ライブドア 電車男 ちょいワル親父 Google MapsとAJAX 「IT」が一般層にさらに浸透
  17. 17. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2006 - Web動画の登場
  18. 18. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 高度化するWeb表現 2006年のWebトレンド YouTube誕生 PIPコンテンツ 2006年のヒット商品 「動画」という表現の新たな選択肢 Wii イナバウアー MNP 脳トレ FlashPlayerで動画再生が可能に UNICLOCK
  19. 19. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2007 - ソーシャルメディア勃興
  20. 20. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 “シェアする”という選択肢 2007年のWebトレンド Twitter「○○なう」 Facebook「いいね」 2007年のヒット商品 iPod touch ビリーズブートキャンプ そんなの関係ねぇ どんだけ∼ 追従するWebサービス Webサイトに対するユーザーの関わり方の多様化
  21. 21. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2008 - iPhoneショック
  22. 22. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 PC、ガラケー、スマホの対応三極化 2008年のWebトレンド Flashの後退 「スマホビュー」登場 2008年のヒット商品 HTML5・CSS3・JSの新たなスタンダード iPhone 3G ホームレス中学生 Eee PC Wii Fit モダンブラウザ
  23. 23. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2009 - スマホアプリの時代
  24. 24. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 スマホアプリの急伸はWebへの影響も 2009年のWebトレンド スキューモーフィックな デザイン スマホ固有の機能 を利用したアプリ 2009年のヒット商品 アプリ・サービスから新たなUIが生まれる ドラゴンクエスト9 ポメラ 事業仕分け 草食系男子 Gree・Mobage 携帯ゲームの成長
  25. 25. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2010 - タブレット誕生
  26. 26. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 PC、スマホ、タブレットへの三極化 2010年のWebトレンド iPad誕生 Retina解像度の登場 2010年のヒット商品 異なるスクリーンサイズ、解像度の乱立 アバター もしドラ Kinect 増加するスマホ 食べるラー油
  27. 27. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2014 - そして、現在
  28. 28. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CHAPTER 1 ただの流行ではない フラットデザインの意義 トレンドから学ぶ「目的を達成するための」デザイン手法 1
  29. 29. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 「フラットデザイン」とは? WHAT IS “FLAT DESIGN”
  30. 30. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン ・機能と実物感の融合 ・立体的。本物のような見た目 ・グラデ、光沢、ドロップシャドウの多用 スキューモーフィックデザイン フラットデザイン ・機能と実物感を切り離す ・平面的。抽象的で密度が低い ・彩度の高い色、大きい塗りと余白
  31. 31. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン フラットデザインサイトの例 タイルレイアウトとフラットデザイン Organizing for Action http://www.barackobama.com 特徴的な色使い Sitedrop http://sitedrop.com
  32. 32. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン なんでみんな「フラット」になった? POINT 1
  33. 33. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 制作者はスキューモーフィックに疲れた? なんでみんな「フラット」になった?[1]
  34. 34. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン スキューモーフィックは本当に ユーザーフレンドリーだったのか? なんでみんな「フラット」になった?[2]
  35. 35. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン ユーザーが困らなければ、 何でもよかったんじゃね? つまり
  36. 36. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン フラットデザインは「解像度からの解放」 POINT 2
  37. 37. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン ブラウザの 拡大・縮小 機能 ディスプレイの Retina化 デバイス で変化する画面解像度 激変するブラウズ解像度
  38. 38. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 「ピクセルパーフェクト」デザインの崩壊 解像度に囚われないデザイン手法が必要 ⬇
  39. 39. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン CSSで再現できるデザイン SVG・Webフォント 拡大・縮小、画面解像度の変化に耐えるには 高解像度画像
  40. 40. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 解像度にとらわれないデザインに フラットデザインが適していた つまり
  41. 41. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン コンテンツの魅力を引き出すデザイン POINT 3
  42. 42. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 情報量は少なく 多ければ細かく分割 フラットデザインを成立させるには? 操作性は明確に 写真を大きく使う 余白は大きく大胆にボタンは「ボタン」になっているか?
  43. 43. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン せせこましくなく、わかりやすいデザイン 結果的に
  44. 44. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 逆にフラットデザインが苦手なケースは? フラットテイストで作ると スキューモーフィックテイストで作ると フラットデザインは盛り上がり感のある演出が難しいかも
  45. 45. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン フラットデザインは「器」 コンテンツをどう伝えるかが第一 結論
  46. 46. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CHAPTER 2 レスポンシブデザインは 自由のために自由を捨てている? トレンドから学ぶ「目的を達成するための」デザイン手法 2
  47. 47. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン 「レスポンシブデザイン」とは? WHAT IS “RESPONSIVE DESIGN”
  48. 48. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン SMART PHONE TABLET PC ARCPHILIA Inc. http://www.arcphilia.co.jp ウィンドウ幅の変動でビューが変わる
  49. 49. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン スマホではメニューが全面に押し出される Organizing for Action http://www.barackobama.com レスポンシブデザインの例 レイアウトやマージンの調整 Big Spaceship http://www.bigspaceship.com
  50. 50. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン 縦方向のレスポンシブデザインもある Vertical Media Queries http://css-tricks.com/examples/VerticalMediaQueries/bootstrap.html レスポンシブデザインの例 ウィンドウの高さを変更
  51. 51. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン ・振り分け必要 ・個別に必要なHTML・CSS ・URLがバラバラになる可能性 通常のマルチデバイス対応 レスポンシブデザイン ・振り分け不要 ・HTMLがワンソースに ・CSSはブレイクポイントにわけて記述 HTML HTML SP TABLET PC HTML CSS CSS CSS + + + 📱 💻📰 ⬇⬇⬇ 🌎URL/UAなどで振り分け ⬇⬇⬇ HTML SP TABLET PC CSS + + + 📱 💻📰 ⬇⬇⬇ width 0-480 width 480-1024 width 1024- 🌎同一URLにアクセス ⬇
  52. 52. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン レスポンシブデザインは「お得」ですか? POINT 1
  53. 53. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン レスポンシブデザインは本当に低コスト?
  54. 54. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン ・ワンソースなので管理がラク ・事前振り分けを考えなくていい コストダウン要因 コストアップ要因 ・デバイスによってコンテンツを  大幅に変えることができない ・結局CSSを書く総量はさほど変わらない  むしろ保守が難しくなる可能性あり ・JSの対応に注意 ・IE8対応…😭 ⬇ ⬆ コストを減らすつもりが増えていく可能性も
  55. 55. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン マルチデバイスの対応が求められている どんなときにレスポンシブデザインが向いている? コンテンツ内容が各デバイスで同一 URLを統一したい コストを抑えたい…?
  56. 56. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン レスポンシブデザイン以外の選択肢 POINT 2
  57. 57. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン [1] VIEWPORTを固定させて対応 iPhoneのサイトなのにiPhone対応してない Apple - iPhone 5s - 内蔵アプリケーション http://www.apple.com/jp/iphone-5s/built-in-apps/ SMART PHONE PC
  58. 58. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン [1] VIEWPORTを固定させて対応 適宜、拡大・縮小すればいいという発想 むしろレスポンシブデザインは 拡大・縮小機能を殺してしまう
  59. 59. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン [2] スマートフォンサイトしか用意しない 一番小さいサイズに合わせればどのデバイスでも見られる 歴代リプトン復活総選挙 | Lipton https://lp500.liptonchilled.com/flavor_voting/ SMART PHONE PC
  60. 60. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン ユーザーの目線から レスポンシブデザイン対応が必要かを考えよう 結論
  61. 61. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CHAPTER 3 楽しい?苦しい? 「パララックスサイト」の使いどころ トレンドから学ぶ「目的を達成するための」デザイン手法 3
  62. 62. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 「パララックスサイト」とは? WHAT IS “PARALLAX DESIGN”
  63. 63. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト parallax / pǽrəl ks / <名詞> (観察者の位置の移動による) 変位。視差。 ̶ 小学館「プログレッシブ英和・和英中辞典」より ⬇ スクロールによる変位。視差。 “パララックス”ってそもそも何?
  64. 64. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト Nizo for iPhone http://nizoapp.com スクロールと演出を連動させたサイト キリン 澄みきり http://sumikiri.jp ※あくまでWEB DESIGN FES 2014の定義です
  65. 65. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト スクロールに対して変化を起こす イベント型 ページ分割型 コンテンツを1画面ずつ分割 Nikon 1 AW1 shop.nikon-image.com/nikon1/nikon1aw1/ Ben the Bodyguard http://benthebodyguard.com/ Apple - Mac Pro http://www.apple.com/macpro/ LAMDASH DNA http://panasonic.jp/shaver/lamdash/dna/
  66. 66. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト なんでこんなことになっちゃった? POINT 1
  67. 67. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 今やみんなスクロール大好き人間 スクロールさせるコストの減少 ⬇ スクロールを支える技術
  68. 68. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 1ページ完結型サイトの増加 ページ遷移よりスクロールのほうがハードルが低い ⬇ 楽天メソッド/高級ペライチなど
  69. 69. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト スクロールなら情報を逃さない 三木谷社長が旨いと言った特大タラバ蟹 http://item.rakuten.co.jp/sfd-ymt/869808/ 購入導線へ一直線 アプリ紹介ページも POP - Prototyping on Paper https://popapp.in
  70. 70. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト クリックすることすら面倒になった私たち 別ページに別れていたコンテンツが 1ページ内に収められてしまう shop.nikon-image.com/nikon1/nikon1aw1/http://www.nikon-image.com/products/camera/acil/body/nikon1_aw1/ クリックが発生しないのなら 演出のフックになるのはスクロールしかない ⬇パララックスサイトの登場へ
  71. 71. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト スクロールの自由を奪うことは是か非か? POINT 2
  72. 72. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 重い 色んな意味で パララックスサイトあるある [1] ローディング、挙動、気分…
  73. 73. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 見るペースを強要する パララックスサイトあるある [2] 勝手に出てくる演出 気を使ってスクロールしたりして…
  74. 74. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト いつものスクロールの感覚と違う パララックスサイトあるある [3] スクロールする方向が逆になったり、 ちょっと動かしただけですごいスクロールしちゃったり…
  75. 75. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 気持ちよいことを邪魔される 気持ち悪さ パララックスサイトの危険性
  76. 76. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト UIとしてのパララックス POINT 3
  77. 77. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト ページ分割という考え方 新しいUI ⬇
  78. 78. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト UIと演出の融合 ユーザーに操作を学習させる Blueprint - Issue 2 | Lexus International http://www.lexus-int.com/magazine/issue2/blueprint/ ページめくりと標準ページを組み合わせ Huge. Digital agency. http://www.hugeinc.com
  79. 79. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト UIと演出の融合 窓の外だけを変える演出 Jet Edge http://www.flyjetedge.com わかりやすいナビゲーション AQUATILIS EXPEDITION http://aquatilis.tv
  80. 80. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 表現の手法の一つとしてよりも、 UIの一種として考える。 結論
  81. 81. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CHAPTER 4 Flash以後のリッチコンテンツ復権 トレンドから学ぶ「目的を達成するための」デザイン手法 4
  82. 82. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 2周目の「リッチコンテンツ」 “RICH CONTENS” IS BACK AGAIN
  83. 83. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ iPhone以降のFlash後退 Flashは総合オーサリングツールへ ⬇ Adobe Air, CreateJS Flashは、今
  84. 84. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ Flash Unity Canvas WebGL SVG iOS Safari ✓❌❌ ✓ ✓iOS8∼ PC ✓ ✓ ✓✓✓ Android Browser ✓❌❌ ✓ ✓ 各リッチコンテンツ技術の対応状況
  85. 85. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 何故今リッチコンテンツが復権するのか? POINT 1
  86. 86. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ そもそもリッチコンテンツって何だっけ? 静的なテキストや静止画像だけなく、動的な 映像やアニメーション、CG、音声を利用した 表現豊かなコンテンツのこと。 − @IT リッチクライアント用語事典より ⬇ それ、HTMLでできるよ。
  87. 87. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ ブラウザの高度化、スマホの高性能化 今起きているブラウズ・制作環境の変化 HTML・CSS・JSの 表現力の向上 HTMLの 部品になるリッチコンテンツ
  88. 88. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 普遍化するリッチコンテンツ 株式会社ココノヱ - coconoe inc. http://9ye.jp canvasをボタンとして使う Dream Car of the Day http://www.toyota-insidedreams.com/dreamcar-of-the-day/ 音楽も使ったフルスクリーンコンテンツ
  89. 89. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 普遍化するリッチコンテンツ Kickstarter https://www.kickstarter.com/team 映像を含んだHTMLコンテンツ Orangina http://www.orangina.eu/products HTMLで滑らかなアニメーション
  90. 90. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 若者よ、同じ過ちを繰り返すな POINT 2
  91. 91. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ コンバーション(結果) と結びついてた? Flash全盛期のリッチコンテンツの問題点 「ブランディング」だけが目的 でいいんですか? ⬇
  92. 92. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ リッチコンテンツが果たす 目的は何ですか?
  93. 93. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ リッチコンテンツだからこそ伝わるイメージ 清水へ参る道 http://feel.kiyomizudera.or.jp イメージサイトを別途用意する COEDO http://www.coedobrewery.com/jp/ FlashサイトをそのままHTMLで再現
  94. 94. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 目的と手段を見誤るべからず。 結論
  95. 95. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CHAPTER 5 トレンドから学ぶ「目的を達成するための」デザイン手法 5 Webなのに?今求められる 「エディトリアルデザイン」
  96. 96. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - エディトリアルデザイン Webの「エディトリアルデザイン」とは? WHAT IS “EDITORIAL DESIGN in the WEB”
  97. 97. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 情報発信の変遷 Flash期 SEO期 現在 ユーザー無視 情報置いときました 読み手を意識した情報 エディトリアルデザイン
  98. 98. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - Webの「媒体」としての地位の向上 メディアとしてのWeb 「需要」も「供給」も増えた ⬇ 「Web人」ではなかった人の参入 エディトリアルデザイン
  99. 99. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - メディアとしてのWebの今 コンテンツを魅力的に見せる必要性 Webコンテンツのカンブリア紀に突入 ⬇ エディトリアルデザイン
  100. 100. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - エディトリアルデザイン Webで蘇る誌面 POINT 1
  101. 101. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - エディトリアルデザイン マイ・フェイバリット関西 http://www.my-fav.jp/feature/72/ NET-A-PORTER.COM http://www.net-a-porter.com/magazine/250/1 Webに輸入される誌面デザイン
  102. 102. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - エディトリアルデザイン 誌面も超えた表現 POINT 2
  103. 103. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - エディトリアルデザイン IWC Schaffhausen http://www.iwc.com/en/collection/aquatimer/ Apple - iPad http://www.apple.com/your-verse/bollywood-vision/ インタラクションが誌面表現を豊かにする
  104. 104. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 結論 コンテンツは 誌面とWebの技術で進化する。 エディトリアルデザイン
  105. 105. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 最後に 最後に ENDING
  106. 106. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 最後に 制約と要求の中で最善を尽くした結果が Webデザイントレンドとは 「Webトレンド」
  107. 107. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 最後に ご清聴ありがとうございました
  108. 108. FICCから大切なお知らせ
  109. 109. FICCは、クライアントへの確実な ビジネス貢献にフォーカスした デジタルマーケティングエージェンシーです。
  110. 110. RECRUITMENT 一緒に働きたい人、募集中。 デジタルマーケティングに関わりたい方を広く募集しています。
 共に成長し、挑戦したい方は是非ご応募ください。
  111. 111. TOKYO プロデューサー ディレクター テクニカルディレクター Webデザイナー マークアップエンジニア リードデザイナー Webサービスディレクター 【アルバイト】Webデザイナー KYOTO ディレクター Webデザイナー (2014年7月現在の情報です)
  112. 112. 続きはWebで www.ficc.jp/recruit/
  113. 113. STANDARDからも大切なお知らせ
  114. 114. STANDARDは、スマートフォンアプリや
 Webサイト・Webサービス等のUIデザインに 特化したプロダクションです。 人の役に立つアプリやWebのUI設計、デザイン制作をしています。 なにをやっているのか
  115. 115. 広告や販売促進のような「モノを売る」ためのデザインではなく、 困っている人の役に立ち、生活を支えたり、変えたりできる「モノ」自体を デザインすることで、もっと多くの課題を解決できるんじゃないか? デザインはもっと多くの課題を解決できるはず。 なぜやるのか
  116. 116. UIデザインやエンジニアリングでユーザーとビジネス双方の課題を
 解決したいデザイナー・エンジニアを募集しています。 人の役に立つアプリや サービス制作に携わりたい人を募集します。 探している人 http://www.standardinc.jp @suk アプリやサービスのUIが好きなデザイナー・エンジニア
  117. 117. MOREWORKSから大切なお知らせ
  118. 118. MOREWORKS www.moreworks.jp WEB業界で活躍したい人のための求人サイト 希望の職場がすぐ見つかる!! 登録無料!!

×