
一昔前のSEO全盛期時代にはやれh1はbody直下だの、インデントはタブが至高だの、ボタンは緑色がコンバージョン率トップだの、一歩間違えばオカルトみたいな話題で賑わっていたような気がするんですが、最近はトンとみなくなりました。
この「インデントはタブかスペース、どちらがベストか」問題、たしかその一昔前は、
- スペースだと2~4つ必要となり、タブ1つの方が容量的に少ない
- タブは任意でサイズ(長さ)を変えられるのでユーザーフレンドリー
- つまりタブこそが最前線のWebデザイナーの証!
みたいな世論があったような気がして、個人の自由の許す限りタブインデントを貫いてきたのですが、先日たまたまこの「タブスペース問題」が話題に上がり、気になったので5年振りくらいに調べてみました。
基本的にトップページのソースをざっくりみて、「タブ」「半角スペース2つ」「半角スペース4つ」「インデントなし」「圧縮」「混在(笑)」に分類しています。
検索エンジン
| サイト名 | インデント形式 |
|---|---|
| 圧縮 | |
| Yahoo! | 半角スペース4つ |
| Yahoo! JAPAN | インデントなし |
| Bing | 圧縮 |
| Baidu 百度 | 圧縮 |
Googleは日米どちらも圧縮されたものでした。
よくよく考えてみれば、今のご時世だと圧縮一択な気がします。
そしてこの時点で「エンジニア主体の企業は圧縮orスペース、デザイナー主体の企業はタブなのでは」という気がしてきました。
SNS
| サイト名 | インデント形式 |
|---|---|
| 圧縮 | |
| 半角スペース4つ | |
| Google+ | 半角スペース2つ |
| mixi | インデントなし |
| 圧縮 | |
| 半角スペース4つ | |
| クックパッド | 半角スペース2つ |
ここまでタブなし……。
エンジニア向け?
| サイト名 | インデント形式 |
|---|---|
| Github | 半角スペース4つ |
| Qiita | 圧縮 |
タブ……。
CtoC
| サイト名 | インデント形式 |
|---|---|
| Gumroad | インデントなし |
| BASE | タブ |
| STORES.jp | 半角スペース2つ |
ここでようやくタブがでました。
しかし全然デザイナー主体なイメージの企業ではないですね……。
ECサイト
| サイト名 | インデント形式 |
|---|---|
| Amazon | 半角スペース2つ |
| ebay | 圧縮 |
| 楽天市場 | 混在(笑) |
でました。はじめての「混在(笑)」です。 ちなみにタブと半角スペース2つの混在でした。
動画配信
| サイト名 | インデント形式 |
|---|---|
| YouTube | 半角スペース2つ |
| ニコニコ動画 | タブ |
| Vimeo | 半角スペース4つ |
三すくみ感。
リアルタイム配信
| サイト名 | インデント形式 |
|---|---|
| USTREAM | タブ |
| Twitch | インデントなし |
キュレーション
| サイト名 | インデント形式 |
|---|---|
| ネイバーまとめ | インデントなし |
| Togetterまとめ | タブ |
| Wikipedia | インデントなし |
「Wikipedia」は多分キュレーションサービスではありません。
意気揚々とカテゴリー分けなんてしたせいで分類が難しくなってきました。
そして、多分エンジニアさんが個人ではじめたサービスのはずのTogetterがタブですね。
Webチャットツール
| サイト名 | インデント形式 |
|---|---|
| slack | タブ |
| ChatWork | 半角スペース2つ |
国内大手?
| サイト名 | インデント形式 |
|---|---|
| サイバーエージェント | 半角スペース4つ |
| Ameba | 半角スペース2つ |
| GREE | 圧縮 |
| DeNA | 混在(笑) |
| 面白法人カヤック | 半角スペース2つ |
混在(笑) タブと半角スペース2つの混在でした。
仕事系
| サイト名 | インデント形式 |
|---|---|
| クラウドワークス | 半角スペース2つ |
| ランサーズ | 半角スペース4つ |
| Wantedly | インデントなし |
メディア
| サイト名 | インデント形式 |
|---|---|
| LIG | タブ |
| cakes | インデントなし |
| オモコロ | 圧縮 |
果たしてLIGがメディアで良かったのかどうか微妙ですが、ここがタブだとなんとなく心強いですね……!
OS
| サイト名 | インデント形式 |
|---|---|
| Microsoft | 圧縮 |
| Apple | タブ |
わかりやすい対比。
エディタ
| サイト名 | インデント形式 |
|---|---|
| Sublime text | タブ |
| Atom | 半角スペース2つ |
| Brackets | 半角スペース4つ |
デザインポートフォリオ
| サイト名 | インデント形式 |
|---|---|
| Dribbble | 半角スペース2つ |
| Behance | 半角スペース2つ |
| JAYPEG | 圧縮 |
ソーシャルゲーム
| サイト名 | インデント形式 |
|---|---|
| モンスターストライク(モンスト) | タブ |
| パズル&ドラゴンズ(パズドラ) | 混在(笑) |
| 白猫プロジェクト | インデントなし |
この辺は、メインはアプリだし違うかなと思ったんですが一応。
結果
| インデント形式 | 数 |
|---|---|
| タブ | 9サイト |
| 半角スペース2つ | 12サイト |
| 半角スペース4つ | 7サイト |
| インデントなし | 9サイト |
| 圧縮 | 11サイト |
| 混在(笑) | 3サイト |
| 合計 | 51サイト |
まとめ
- タブを使うと混在(笑)しやすくなる
- 共通パーツのinclude等も混在(笑)のもとになりやすそう
- 国内外問わずスタンダードと呼べるほどのマジョリティは存在しない
- 圧縮が最強
SEOの話題でも最近は「いいものを作るしかない」で終わりですもんね。 まとめが雑ですが、以上です。
ではでは。






