タブか半角スペースか。今どきのインデント事情を調べました(計51サイト)

Published:2015.07.24Last updated:2016.10.29

一昔前のSEO全盛期時代にはやれh1はbody直下だの、インデントはタブが至高だの、ボタンは緑色がコンバージョン率トップだの、一歩間違えばオカルトみたいな話題で賑わっていたような気がするんですが、最近はトンとみなくなりました。

この「インデントはタブかスペース、どちらがベストか」問題、たしかその一昔前は、

  • スペースだと2~4つ必要となり、タブ1つの方が容量的に少ない
  • タブは任意でサイズ(長さ)を変えられるのでユーザーフレンドリー
  • つまりタブこそが最前線のWebデザイナーの証!

みたいな世論があったような気がして、個人の自由の許す限りタブインデントを貫いてきたのですが、先日たまたまこの「タブスペース問題」が話題に上がり、気になったので5年振りくらいに調べてみました。
基本的にトップページのソースをざっくりみて、「タブ」「半角スペース2つ」「半角スペース4つ」「インデントなし」「圧縮」「混在(笑)」に分類しています。

検索エンジン

サイト名 インデント形式
Google 圧縮
Yahoo! 半角スペース4つ
Yahoo! JAPAN インデントなし
Bing 圧縮
Baidu 百度 圧縮

Googleは日米どちらも圧縮されたものでした。
よくよく考えてみれば、今のご時世だと圧縮一択な気がします。
そしてこの時点で「エンジニア主体の企業は圧縮orスペース、デザイナー主体の企業はタブなのでは」という気がしてきました。

SNS

サイト名 インデント形式
Facebook 圧縮
Twitter 半角スペース4つ
Google+ 半角スペース2つ
mixi インデントなし
LinkedIn 圧縮
Pinterest 半角スペース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の話題でも最近は「いいものを作るしかない」で終わりですもんね。
まとめが雑ですが、以上です。

ではでは。

最新の記事

お知らせ