Adobe MAX 2013で行った「Architecting a PhoneGap Application」セッションをベースにADC MEETUP 07イベント用に再構成したした内容になります。
※スライドに使われたサンプルは以下のURLからダウンロードできます。
http://www.mitsue.co.jp/knowledge/resources/2013/adc_retweet07_architecting.zip
Presentation about ontology of User Experience held at the July Tech Festa 2013 in Tokyo ( #techfesta ) 2013年7月14日に開催された JTF 2013: July Tech Festa で発表した「ユーザエクスペリエンス・デザイン・ガイド」のプレゼンテーション資料です。
Adobe MAX 2013で行った「Architecting a PhoneGap Application」セッションをベースにADC MEETUP 07イベント用に再構成したした内容になります。
※スライドに使われたサンプルは以下のURLからダウンロードできます。
http://www.mitsue.co.jp/knowledge/resources/2013/adc_retweet07_architecting.zip
Presentation about ontology of User Experience held at the July Tech Festa 2013 in Tokyo ( #techfesta ) 2013年7月14日に開催された JTF 2013: July Tech Festa で発表した「ユーザエクスペリエンス・デザイン・ガイド」のプレゼンテーション資料です。
8. 1. 基本知識
HTML バージョン1/2
1991年にティム・バーナーズ・リーが世界で初めての Web サイトを公開。また、WWW
Client と呼ばれる所謂「ブラウザ」も同時に公開したが、それを Open Source として公
開した点が Web の発展に大きく寄与したと考えられる。
1994年にかけて、Mozaic、Netscape Communicator、Internet Explorer といったブラ
ウザが公開されたが、独自仕様の乱立により、Web サイト制作者側は大きな混乱状態に。
そこで、1994年に Web のルールを制定する W3C が発足。
W3C では以下のように HTML の仕様を策定し、バージョニングする形で勧告。
HTML 3.2 = 1997-01-14 / HTML 4.01 = 1999-12-24
XHML 1.0 = 2000-01-26 / HTML5 = 2014-10-28
XHTML1.0 準拠のdoctype宣言は以下の通り。
宣言によりレンダリングモードが適宜変わる。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr" lang="ja">
9. 1. 基本知識
HTML バージョン2/2
そんな最中、 W3C の方針に異論を持った有志により 2002年頃に WHATWG が発足。
WHATWG はバージョニングは行わず、Living Standard と呼ばれる絶えずアップデートを
続ける形で仕様を策定。
W3C は定期的に HTML のバージョンアップを続けているが、自信で仕様を策定する体力
はなく、WHATWG からフォークを繰り返しバージョニング作業を進めるというのが実情
のようだ。明確なバージョンとして定義してもらえるのはわかり易くはあるが…
現在では、Google、Mozilla、Apple は WHATWG、Microsoft は W3C に準拠をしている
様子。
また、HTML5 準拠の HTML 宣言は以下のようになる。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
HTML Living Standard
HTML5.2
10. 1. 基本知識
ブラウザシェア、サポートブラウザとその選定
昨今のブラウザのアップデートは
Windows IE = Windows Update
Mac Safari = ソフトウェア・アップデート
モダンブラウザ(Chrome、Firefox) = 自動アップデート
iOS = ソフトウェア・アップデート
Android = …
というように実施されるが、数年前まではブラウザアップデートは大ごとで、ユーザによ
る手動アップデートはほぼされない状態。結果、10 年近く前に作られたブラウザを Web
サイトはサポートしなくてはならないなど、業務リソースの多くがレガシーブラウザ対応
に割かれるような状況が続いた。
企業・Web サイトがサポートするブラウザの判断基準としては概ね二つで、以下の通り。
実際にはデバイス毎のアクセス状況も加味されたりする。
OS がバンドルするブラウザが、メーカーのサポート期間中かどうか
ブラウザの、最新メジャーバージョンと一つ前のメジャーバージョン
11. 1. 基本知識
PC 版/ SP 版/ Responsive Web Design 1/2
以前、フィーチャーフォンと呼ばれる、PC と比較すると低端末スペック、低回線速度、
低解像度の所謂「ガラケー」でも Web サイトが閲覧できるよう、各大手携帯キャリアが
独自の HTML 仕様を提唱し、実装されたことがあった。
これらはよくガラケーサイトないしガラケー版と呼ばれる。
後期のガラケーでは、フルブラウザを搭載したものもあったが、小さい画面と上下左右矢
印で PC 版を操作する仕様は最低の UX だった。
2007 年に登場した iPhone を皮切りに、スマートフォンと呼ばれる高端末スペック、高回
線速度、高解像度の所謂「スマホ」が登場した。独自仕様が多かったガラケー版と違い、
小さいモニタでも操作性が担保される所謂「スマートフォン版 Web サイト(以降 SP
版)」が確立され、それらはこれまでの PC 版と同じ仕様のもと、Viewport の指定のみで
制作できるということもあり、広く浸透することになる。
12. 1. 基本知識
PC 版/ SP 版/ Responsive Web Design 2/2
Web サイト制作者は、これまでの PC 版に加え SP 版も追加で制作し、閲覧端末をサーバ
サイドないし JavaScript で振り分け、それぞれ PC / SP 版 専用の HTML を返却するのが
セオリーだった。しばらくして、レチナディスプレイの登場、端末スペックの向上などの
要因をもとに、単一の HTML を CSS3 Media Queries を用いて PC / SP それぞれに最適な
表示を提供しようという『Responsive Web Design(以降 RWD)』が提唱された。
一見メリットしかないように思えるが、実装に際してはメリットのみでなく、デメリット
も伴う。
◎ HTML テンプレートは一つで済む
◎ ランニングコストは低く済む
◎ SEO 面で Google が推奨している
◎ タブレットも最適化できる
✕ Initial の開発コストは高い
✕ 構成要素の出現順序は基本的に変更不可、SP / PC で最適な UI を突き詰めにくい
✕ CSS / JS / HTML いずれの記述量も増える
19. 2. SEO
クローラビリティ
検索エンジンの存在を無視して成り立つ Web サービスは稀だろう。
名指しで Web サービスを利用する際も Google や Yahoo と言った検索エンジンでサービ
ス名称を入力して遷移することも多く、PC / スマートフォン、いずれの UI も、まずフリ
ーワードを入力し結果的に検索エンジンへ遷移する流れが当たり前になっている。
ユーザが入力したフリーワードに対して表示される結果のアルゴリズムは非公開で、ラン
ク付けの為の指標は 200 を超えるとも言われているが、各サービス担当者は、上位に表示
される為に SEO を意識したサイト作りは避けられないだろう。
検索エンジン側としては、Web サイトの評価のために Web サイトの内容を知る必要があ
るわけだが、それにはクローラと呼ばれる専用の UA を持ったプログラムを用いて Web
サイトを巡回しページ内容を取得していく。専用の画面から巡回を促すことも可能だが、
基本的には検索エンジン側の任意のタイミングでサイトを巡回していく。
サイト運営側としては、クローラの特性を把握した上で、クローラビリティを担保した形
で Web サイトを作成する必要がある。日本の検索エンジン2大巨頭は Yahoo! Japan と
Google だが、Yahoo! Japan の検索エンジンは Google 製である。
20. 2. SEO
SEO 1/7
SEO = Search Engine Optimization。
検索エンジン上での最適な表示、検索結果で上位表示させる為の取り組み全般の事。
SEO と聞くと、なんとなくストイックで定量的なアプローチと感じるかもしれず、実際に
実施する施策は定量数値の改善だったりするかもしれないが、結局『ユーザにとって価値
あるコンテンツを提供できているかどうか』が最良の SEO だと考える。
検索結果のランク付けの為の数百のアルゴリズムも AI の活用も、全てはユーザにとって
価値ある体験を提供できているかどうかの判断の為ではないか。さもなくば Google がこ
こまでユーザに受け入れられはしないだろう。
21. 2. SEO
SEO 2/7
Google: 検索エンジン最適化(SEO)スターター ガイド
https://support.google.com/webmasters/answer/7451184?hl=ja
Best なコンテンツ作りの為に、Google 視点でどうすべきかが概ねここに書いてある。
22. 2. SEO
SEO 3/7
Google Search Console
Google 検索結果上でのサイトパフォーマンスを監視するツール。
https://www.google.com/webmasters/tools/home?hl=ja
ページが持つ課題や、実装面のエラーの通達
新たに作成した Web サイトのクローリング促進
Web サイトがクローラからどのように見えているか確認
などを評価し、通達してくれるツール。
23. 2. SEO
SEO 4/7
SEO 対策の推移: 構成要素→ 被リンク→ ユーザ行動
技術の発達、特に AI やビッグデータの活用によりクローラや Web サイトの評価アルゴリ
ズムが日々改善され、それに伴い SEO の評価観点が変化し続けている。
Internet 黎明期は、検索ワードがページ内に多いほど検索結果上位に表示するような状況
で、不可視のテキストを html に大量に書き込むような Web サイトが台頭。
しばらくして、他ページからのリンク数が評価観点に組み込まれ、これまた意味のない
SEO 用の専用のサイトからサイトにリンクを貼る行為が業者ぐるみで横行。
最近では、Twitter、Facebook と言った Social サービスでの言及やそこからの被リンク、
キュレーションメディアの価値向上、長文記事最強説など、様々な要因がランキング形成
に引き続き寄与している。
それら様々な要因を前提としつつも、昨今重視されているのが『ユーザ行動』。
スマホ用 OS Android を自社開発、巨大アプリプラットフォーム Play Store を保持、
Google を誰もが使うようになり、サイト改善の為の計測ツールでさえ Google 製、ありと
あらゆる側面からユーザの行動を把握できる Google が、ユーザが満足のいく体験ができ
たかどうかを判断できていると想像するのは容易い。
24. 2. SEO
SEO 5/7
Google Analytics
Web サイトで規定の JavaScript を読み込むことで、Web サイトに訪れたユーザの行動を
細かく収集し、専用の管理画面から様々な定量データを取得できるツール。
25. 2. SEO
SEO 6/7
クローラによるJS の解釈
数百あると言われている検索結果のランク付けの要因の中でも、頻繁に取り沙汰されるの
が JavaScript で生成した HTML の解釈。
数年前に bot と言われて発想するのは、巡回するプログラムが html を取得しそこに書か
れている情報を評価するというようなものだった。
ところが、現代ではユーザの操作や非同期通信を含めたデータの取得によって JavaScript
が生成する html の評価は、一般のエンジニアであっても実現可能な状況になっている。
AJAX 黎明期には AJAX crawling scheme と称して、独自の Scheme を介することでクロ
ーラビリティを担保するような仕組みが検討されていたが(2015年に中止)、上の通り技
術の発達に伴い、曖昧だった JS で生成する HTML の解釈に関しても、『Google bot は
JS で生成する HTML を評価できている』と明言するに至った。当然ランキングにも影響
があると見做して良いだろう。
また、Search Console › fetch as gogle では、具体的なページのレンダリング状況が確認
できる。
26. 2. SEO
SEO 7/7
robots.txt
robots.txt は、専用のフォーマットに従って記述することで、クローラの行動を制御でき
るファイル、各ページの meta タグで、ページ個別の制御も可能。以下は、対象ページを
Google にインデックスさせず、ページ内のリンクを一切回遊させたくない際の記述(よく
被リンクを渡さないなどという言い方をするが、自社サービスにとって SEO 面でメリット
はなくても微塵でもデメリットが考えられるケースで、敢えて関わりをもたない為に利用
する)。
<meta name=”robots” content=”noindex,nofollow”>
sitemap.xml
sitemap.xml は、Web サービスの index を通達・促す為にファイルのパスと補足情報を規
定のフォーマットに従って記載したもの。Search Console から sitemap.xml の存在を報
告することで、基本的には sitemap.xml に記載した URL をインデックスさせることができ
る。
27. 2. SEO
MFI 1/2
Mobile First Index の略。
主だった検索エンジンのランク付け要因に活用するのは、基本的には PC 版 Web サイト。
つまり SEO は PC 版で実施するものだった。これは以前は PC 版しか存在していなかった
為、検索エンジンもランク付けに利用するのは PC サイトという前提を持ち続け、またア
ルゴリズムも煩雑になるだろうといった点が考えられる。
一方で、現在では PC サイトよりも SP サイトの閲覧が増え、ランク付けに関しても PC 版
のみを参照するのは無理があると考えだした。検索エンジンが仕様変更を実施する際は、
事前にその内容とマイルストーンを公開した上で実施することが多いが、クローラが巡
回・解析するサイトを PC 版から SP 版変更する変更を MFI と呼び、着々と仕様変更を進
めている。
28. 2. SEO
MFI 2/2
因みに、以下のような要因を解決するために URL の正規化が必要だが、
PC 版と SP 版を別 HTML として配信している
サブドメイン、末尾の / の有無
類似するページの一元化
以下のようなタグを入れることで対応できる。
<!-- PC側記述 -->
<link rel="alternate"
media="only screen and (max-width: 640px)" href="[SP・FP URI]">
<!-- SP・FP側記述 -->
<link rel="canonical" href="[PC URI]">
PC 版が起点となる為、SP URL を alternate(代替 URL)で指定。PC 版は起点であるか
ら SP 版から見ると canonical(規準の URL)としての PC URL を指定。… というように
現在は PC 中心の指定方法だが、MFI 対応では意味合いが逆となる。ところが、混乱を避
ける為にこれらの記述の変更の必要はナシというアナウンスもされている。
38. 3. タグの基本とセオリー
タグに関するセオリー 2/3
W3C HTML5 による Content Model
Metadata content
base, command, link, meta, noscript, script, style, title
ow content
a, abbr, address, area (if it is a descendant of a map element) article, aside, audio, b,
bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn,
div, dl, em, embed, eldset, gure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav,
noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select,
small, span, strong, style (if the scoped attribute is present) sub, sup, svg, table,
textarea, time, u, ul, var, video, wbr, text
39. 3. タグの基本とセオリー
タグに関するセオリー 3/3
Sectioning content
article, aside, nav, section
Heading content
h1, h2, h3, h4, h5, h6
Phrasing content
a (if it contains only phrasing content) abbr, area (if it is a descendant of a map
element) audio, b, bdi, bdo, br, button, canvas, cite code, command, datalist, del (if it
contains only phrasing content) dfn, em, embed, i, iframe, img, input, ins (if it contains
only phrasing content) kbd, keygen, label, map (if it contains only phrasing content)
mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select,
small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text