--- title: 2015年のWebサイト制作界隈 その傾向と対策 tags: author: [burnworks](https://image.docswell.com/user/burnworks) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/GEWGW1Y1J2.jpg?width=480 description: クライアント企業で実施したWebクリエイター向け社内勉強会用スライド。対象はWebサイト制作会社の営業、ディレクタ－、デザイナー、コーダー / フロントエンドエンジニアの方々。Webサイト制作業界に関係する近年から今年注目の傾向とその対策について。 ※2015年2月に slideshare にアップロードしていたものを再アップロードしたもので、資料の内容は2015年当時のままです published: February 06, 15 canonical: https://image.docswell.com/s/burnworks/ZWRYQR-2015-02-06-105950 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/GEWGW1Y1J2.jpg) 2015年のWebサイト制作界隈 その傾向と対策 2015-02-06 burnworks Inc yoshiki kato # Page. 2 ![Page Image](https://bcdn.docswell.com/page/47ZL5PXXJ3.jpg) 変わらないもの 変わっていくもの # Page. 3 ![Page Image](https://bcdn.docswell.com/page/YJ6W9M4PJV.jpg) 変わらないもの Photo by gcworld # Page. 4 ![Page Image](https://bcdn.docswell.com/page/GJ5MNZQPJ4.jpg) • 情報にアクセスできること • 正確な情報が取得できること • 使いやすいこと • ビジネスゴールを達成できること # Page. 5 ![Page Image](https://bcdn.docswell.com/page/9E295RPZ7R.jpg) 変わっていくもの Photo by Marc Meynadier # Page. 6 ![Page Image](https://bcdn.docswell.com/page/D7Y4KD5NEM.jpg) • 開発環境や使用言語 • フレームワークやライブラリ • デザインのトレンド • ブラウザやソフトウェア • デバイス・閲覧環境 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/VENYR6NVJ8.jpg) # Page. 8 ![Page Image](https://bcdn.docswell.com/page/Y79PMLRVE3.jpg) アクセシビリティ…… みんなの公共サイト運用モデル改定版（2010年度） 障害を理由とする差別の解消の推進に関する法律 JIS X 8341 見直しの年（JIS規格のルール上） # Page. 9 ![Page Image](https://bcdn.docswell.com/page/G78DLXW47D.jpg) アクセシビリティは 障がい者や高齢者のためだけの 特別な対策ではない # Page. 10 ![Page Image](https://bcdn.docswell.com/page/L7LML8NVJR.jpg) Siri 「バーンワークス株式会社で検索して、 サービス案内のページを読み上げて」 なんて操作を普通にするようになるかも ※ テキスト読み上げ（VoiceOver）機能はすでに搭載されている # Page. 11 ![Page Image](https://bcdn.docswell.com/page/4EMYM6XNEW.jpg) Photo by randychiu # Page. 12 ![Page Image](https://bcdn.docswell.com/page/PER9VPN4J9.jpg) マシンリーダブルなコンテンツ # Page. 13 ![Page Image](https://bcdn.docswell.com/page/P7XQZ3NZEX.jpg) SEO 的にも…… 構造化データ セマンティクス # Page. 14 ![Page Image](https://bcdn.docswell.com/page/37K98YNV7D.jpg) Photo by Luke Wroblewski # Page. 15 ![Page Image](https://bcdn.docswell.com/page/LJ3W29ZQJ5.jpg) • 増え続けるデバイス • 複数のデバイスを使い分ける人々 • 様々な画面サイズ • マウス・タッチ・音声操作？ # Page. 16 ![Page Image](https://bcdn.docswell.com/page/8JDKZGRWEG.jpg) # Page. 17 ![Page Image](https://bcdn.docswell.com/page/VEPKD3WX78.jpg) 使いやすいこと…… “使いやすい”の中身は変化 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/27VV14837Q.jpg) # Page. 19 ![Page Image](https://bcdn.docswell.com/page/5JGL215Y7L.jpg) # Page. 20 ![Page Image](https://bcdn.docswell.com/page/47QYPDZ6EP.jpg) Kevin Ashton proposed the term "Internet of Things" in 1999 Survey Analytics Blog - Top 5 Infographics of the Week - Internet of Things http://blog.surveyanalytics.com/2014/09/top-5-infographics-of-week-internet-of.html # Page. 21 ![Page Image](https://bcdn.docswell.com/page/KE4WYZ3MJ1.jpg) 既成概念に捕らわれすぎないこと フレキシブルなデザイン・実装 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/L71Y6R1YJG.jpg) # Page. 23 ![Page Image](https://bcdn.docswell.com/page/G7WGW181E2.jpg) セキュリティ # Page. 24 ![Page Image](https://bcdn.docswell.com/page/4JZL5P8XE3.jpg) # Page. 25 ![Page Image](https://bcdn.docswell.com/page/YE6W9MPPEV.jpg) 去年も色々ありました # Page. 26 ![Page Image](https://bcdn.docswell.com/page/GE5MNZKPE4.jpg) 一昨年のデータではありますが 2013年データ 漏洩人数 931万2543人 漏洩件数 1333件 想定損害賠償総額 2020億6575万円 一件あたりの漏洩人数 7385人 平均想定損害賠償額 / 件 1億6024万円 平均想定損害賠償額 / 人 2万7675円 NPO 日本ネットワークセキュリティ協会 2013年 情報セキュリティインシデントに関する調査報告 ～個人情報漏えい編～ http://www.jnsa.org/seminar/2014/0610/data/A4_incident.pdf # Page. 27 ![Page Image](https://bcdn.docswell.com/page/97295RWZJR.jpg) パスワードリスト型攻撃による 不正アクセスの増加 # Page. 28 ![Page Image](https://bcdn.docswell.com/page/DJY4KDLN7M.jpg) パスワードの最適変更間隔とその定量的効果の評価 https://docs.google.com/document/d/1RWDerFjLc24nr_lDhF8s0vEOJ8DPKhEnEAYG9qr_oBY/pub # Page. 29 ![Page Image](https://bcdn.docswell.com/page/V7NYR64VE8.jpg) # Page. 30 ![Page Image](https://bcdn.docswell.com/page/YJ9PMLQV73.jpg) TLS/SSL # Page. 31 ![Page Image](https://bcdn.docswell.com/page/GJ8DLXG4JD.jpg) # Page. 32 ![Page Image](https://bcdn.docswell.com/page/LJLML8GVER.jpg) サイト全体の SSL 化 # Page. 33 ![Page Image](https://bcdn.docswell.com/page/47MYM6QN7W.jpg) • サーバ証明書とは？ • メリットは？ • サーバサイドの知識 • 導入時の注意点など # Page. 34 ![Page Image](https://bcdn.docswell.com/page/P7R9VP84E9.jpg) # Page. 35 ![Page Image](https://bcdn.docswell.com/page/PJXQZ38Z7X.jpg) EV証明書による なりすましやブランド乗っ取りの防止 # Page. 36 ![Page Image](https://bcdn.docswell.com/page/3JK98YKVJD.jpg) ブラウザでのEV SSL証明書表示例 - Symantec http://www.symantec.com/ja/jp/pop.jsp?popupid=see-how-ev-appears-in-your-browser # Page. 37 ![Page Image](https://bcdn.docswell.com/page/LE3W293QE5.jpg) Photo by Eric Ward # Page. 38 ![Page Image](https://bcdn.docswell.com/page/8EDKZG4W7G.jpg) Speed Speed Speed # Page. 39 ![Page Image](https://bcdn.docswell.com/page/V7PKD3MXJ8.jpg) # Page. 40 ![Page Image](https://bcdn.docswell.com/page/2JVV1493JQ.jpg) この辺はもう当たり前 # Page. 41 ![Page Image](https://bcdn.docswell.com/page/5EGL21ZYJL.jpg) Lean Start-up User- and Customer Experience (UX) - Zen Ex Machina http://www.zenexmachina.com/what-we-do/user-experience/ # Page. 42 ![Page Image](https://bcdn.docswell.com/page/4JQYPDL67P.jpg) Design Sprints User- and Customer Experience (UX) - Zen Ex Machina http://www.zenexmachina.com/what-we-do/user-experience/ # Page. 43 ![Page Image](https://bcdn.docswell.com/page/K74WYZDME1.jpg) # Page. 44 ![Page Image](https://bcdn.docswell.com/page/LJ1Y6RZYEG.jpg) • 再利用 • 汎用性 • コンポーネント化 # Page. 45 ![Page Image](https://bcdn.docswell.com/page/GJWGW19172.jpg) # Page. 46 ![Page Image](https://bcdn.docswell.com/page/4EZL5P9X73.jpg) • Custom Elements • Templates • HTMLImports • Shadow DOM # Page. 47 ![Page Image](https://bcdn.docswell.com/page/Y76W9MKP7V.jpg) # Page. 48 ![Page Image](https://bcdn.docswell.com/page/G75MNZPP74.jpg) # Page. 49 ![Page Image](https://bcdn.docswell.com/page/9J295R6ZER.jpg) Is ServiceWorker ready? https://jakearchibald.github.io/isserviceworkerready/ # Page. 50 ![Page Image](https://bcdn.docswell.com/page/DEY4KD9NJM.jpg) Speed… サイトパフォーマンスの方 # Page. 51 ![Page Image](https://bcdn.docswell.com/page/VJNYR6LV78.jpg) # Page. 52 ![Page Image](https://bcdn.docswell.com/page/YE9PML4VJ3.jpg) HTTP/2 SPDY # Page. 53 ![Page Image](https://bcdn.docswell.com/page/GE8DLXQ4ED.jpg) # Page. 54 ![Page Image](https://bcdn.docswell.com/page/LELML8XV7R.jpg) # Page. 55 ![Page Image](https://bcdn.docswell.com/page/4JMYM6LNJW.jpg) HTTPリクエスト削減 ↓ 断片化・細分化 # Page. 56 ![Page Image](https://bcdn.docswell.com/page/PJR9VPK479.jpg) 「技術の活用で競争力を高める」 より顕著に # Page. 57 ![Page Image](https://bcdn.docswell.com/page/PEXQZ3LZJX.jpg) 写真素材ぱくたそ model by 大川竜弥 & Lala* # Page. 58 ![Page Image](https://bcdn.docswell.com/page/3EK98YLVED.jpg) 「覚えることたくさんありすぎて死……」 # Page. 59 ![Page Image](https://bcdn.docswell.com/page/L73W296Q75.jpg) 各種ライブラリ # Page. 60 ![Page Image](https://bcdn.docswell.com/page/87DKZGVWJG.jpg) • PaaS • IaaS • BaaS (MBaaS) # Page. 61 ![Page Image](https://bcdn.docswell.com/page/VJPKD3VXE8.jpg) うまく使えば色々捗る仕組みがたくさん # Page. 62 ![Page Image](https://bcdn.docswell.com/page/2EVV14Z3EQ.jpg) JavaScript は書けないと ※ 毎年言ってる…… # Page. 63 ![Page Image](https://bcdn.docswell.com/page/57GL214YEL.jpg) Photo by Sam Azgor # Page. 64 ![Page Image](https://bcdn.docswell.com/page/4EQYPDG6JP.jpg) メッセージング # Page. 65 ![Page Image](https://bcdn.docswell.com/page/KJ4WYZ5M71.jpg) エンタープライズ分野での活用 Slack, WhatsApp, LINE, ChatWork, Skype … # Page. 66 ![Page Image](https://bcdn.docswell.com/page/LE1Y6RWY7G.jpg) 「メールは死んだ」 何回目？ # Page. 67 ![Page Image](https://bcdn.docswell.com/page/GEWGW161J2.jpg) 少なくとも チームコミュニケーションの手段 としては終わってる # Page. 68 ![Page Image](https://bcdn.docswell.com/page/47ZL5PYXJ3.jpg) Photo by George Redgrave # Page. 69 ![Page Image](https://bcdn.docswell.com/page/YJ6W9MDPJV.jpg) 顧客からのコンタクト手段…… チャットが電話を置き換えるかも ※ 手段としては特に目新しくはないけれど # Page. 70 ![Page Image](https://bcdn.docswell.com/page/GJ5MNZ3PJ4.jpg) まとめ • 本質を見失わないように • もうパソコンだけの Web じゃない • セキュリティは大事だよ • サイトパフォーマンス周りの変化 • より早く、より小さく始める傾向 • スピード = 競争力 • エコシステムの構築 • 使えるものは使って楽をする # Page. 71 ![Page Image](https://bcdn.docswell.com/page/LE3W2966E5.jpg) バーンワークス株式会社 BURNWORKS.COM サービスの詳細・実績など詳しくはWEBサイトをご覧ください。