2015年のWebサイト制作界隈 その傾向と対策

2015年のWebサイト制作界隈 その傾向と対策 2015-02-06 burnworks Inc yoshiki kato

変わらないもの 変わっていくもの

変わらないもの Photo by gcworld

• 情報にアクセスできること • 正確な情報が取得できること • 使いやすいこと • ビジネスゴールを達成できること

変わっていくもの Photo by Marc Meynadier

• 開発環境や使用言語 • フレームワークやライブラリ • デザインのトレンド • ブラウザやソフトウェア • デバイス・閲覧環境

アクセシビリティ…… みんなの公共サイト運用モデル改定版（2010年度） 障害を理由とする差別の解消の推進に関する法律 JIS X 8341 見直しの年（JIS規格のルール上）

アクセシビリティは 障がい者や高齢者のためだけの 特別な対策ではない

Siri 「バーンワークス株式会社で検索して、 サービス案内のページを読み上げて」 なんて操作を普通にするようになるかも ※ テキスト読み上げ（VoiceOver）機能はすでに搭載されている

Photo by randychiu

マシンリーダブルなコンテンツ

SEO 的にも…… 構造化データ セマンティクス

Photo by Luke Wroblewski

• 増え続けるデバイス • 複数のデバイスを使い分ける人々 • 様々な画面サイズ • マウス・タッチ・音声操作？

使いやすいこと…… “使いやすい”の中身は変化

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

• http://blog.surveyanalytics.com/2014/09/top-5-infographics-of-week-internet-of.html

既成概念に捕らわれすぎないこと フレキシブルなデザイン・実装

セキュリティ

去年も色々ありました

一昨年のデータではありますが 2013年データ 漏洩人数 931万2543人 漏洩件数 1333件 想定損害賠償総額 2020億6575万円 一件あたりの漏洩人数 7385人 平均想定損害賠償額 / 件 1億6024万円 平均想定損害賠償額 / 人 2万7675円 NPO 日本ネットワークセキュリティ協会 2013年 情報セキュリティインシデントに関する調査報告 ～個人情報漏えい編～ http://www.jnsa.org/seminar/2014/0610/data/A4_incident.pdf

• http://www.jnsa.org/seminar/2014/0610/data/A4_incident.pdf

パスワードリスト型攻撃による 不正アクセスの増加

パスワードの最適変更間隔とその定量的効果の評価 https://docs.google.com/document/d/1RWDerFjLc24nr_lDhF8s0vEOJ8DPKhEnEAYG9qr_oBY/pub

• https://docs.google.com/document/d/1RWDerFjLc24nr_lDhF8s0vEOJ8DPKhEnEAYG9qr_oBY/pub

TLS/SSL

サイト全体の SSL 化

• サーバ証明書とは？ • メリットは？ • サーバサイドの知識 • 導入時の注意点など

EV証明書による なりすましやブランド乗っ取りの防止

ブラウザでのEV SSL証明書表示例 - Symantec http://www.symantec.com/ja/jp/pop.jsp?popupid=see-how-ev-appears-in-your-browser

• http://www.symantec.com/ja/jp/pop.jsp?popupid=see-how-ev-appears-in-your-browser

Photo by Eric Ward

Speed Speed Speed

この辺はもう当たり前

Lean Start-up User- and Customer Experience (UX) - Zen Ex Machina http://www.zenexmachina.com/what-we-do/user-experience/

• http://www.zenexmachina.com/what-we-do/user-experience/

Design Sprints User- and Customer Experience (UX) - Zen Ex Machina http://www.zenexmachina.com/what-we-do/user-experience/

• http://www.zenexmachina.com/what-we-do/user-experience/

• 再利用 • 汎用性 • コンポーネント化

• Custom Elements • Templates • HTMLImports • Shadow DOM

Is ServiceWorker ready? https://jakearchibald.github.io/isserviceworkerready/

• https://jakearchibald.github.io/isserviceworkerready/

Speed… サイトパフォーマンスの方

HTTP/2 SPDY

HTTPリクエスト削減 ↓ 断片化・細分化

「技術の活用で競争力を高める」 より顕著に

写真素材ぱくたそ model by 大川竜弥 & Lala*

「覚えることたくさんありすぎて死……」

各種ライブラリ

• PaaS • IaaS • BaaS (MBaaS)

うまく使えば色々捗る仕組みがたくさん

JavaScript は書けないと ※ 毎年言ってる……

Photo by Sam Azgor

メッセージング

エンタープライズ分野での活用 Slack, WhatsApp, LINE, ChatWork, Skype …

「メールは死んだ」 何回目？

少なくとも チームコミュニケーションの手段 としては終わってる

Photo by George Redgrave

顧客からのコンタクト手段…… チャットが電話を置き換えるかも ※ 手段としては特に目新しくはないけれど

まとめ • 本質を見失わないように • もうパソコンだけの Web じゃない • セキュリティは大事だよ • サイトパフォーマンス周りの変化 • より早く、より小さく始める傾向 • スピード = 競争力 • エコシステムの構築 • 使えるものは使って楽をする

バーンワークス株式会社 BURNWORKS.COM サービスの詳細・実績など詳しくはWEBサイトをご覧ください。