ECサイトのfont-familyを調べた in 2017

概要

EC サイトに触れる機会が多くなり、フォントの指定について気になり始めた。業種やターゲットによって、フォントの指定は変わってくるのだろうか。以下の”EC サイトランキング”を指標に各サイトのfont-familyを確認してみた。

サイトによって、font-familyの指定がhtmlだったりbodyだったりするが、有効になっているセレクタを記載する。

業種別

カテゴライズできないサイトもあるが、大まかに業種別に分けている。

総合・日用品

ASKUL

font-family: Verdana, "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;

ベルメゾンネット

(通販（通信販売）｜ベルメゾンネット

font-family: "メイリオ", Meiryo, Arial, "ＭＳ Ｐゴシック", sans-serif;

LOHACO

LOHACO by ASKUL - 個人向け通販【最短当日お届け】

font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
  "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "MS PGothic",
  sans-serif;

衣料品

ZOZOTOWN

ファッション通販 ZOZOTOWN

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
  "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif;

ユニクロ

UNIQLO ｜ユニクロ公式サイト

font: 13px "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic",
  "游ゴシック体", "YuGothic", メイリオ, Meiryo, sans-serif;

BEAMS

BEAMS（ビームス）公式サイト

font-family: "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック",
  sans-serif;

ユナイテッドアローズ

ユナイテッドアローズ公式通販 -UNITED ARROWS LTD.-

font-family: Avenir, "Helvetica Neue", Verdana, Helvetica, Arial, Roboto,
  YuGothic, "Meiryo UI", メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

マルイウェブチャネル

マルイのネット通販マルイウェブチャネル

font-family: “ＭＳ Ｐゴシック”, Osaka, sans-serif;

ドットエスティ

.st（ドットエスティ）| 18 ブランドの公式 WEB ストア

font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”,
  Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;

セシール

カタログ通販のセシール(cecile)

font-family: “ＭＳ Ｐゴシック”, “MS PGothic”, ”メイリオ”, Meiryo,
  “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Osaka, sans-serif;

ニッセン

font-family: “メイリオ”, Meiryo, ”ヒラギノ角ゴ Pro W3”, ”Hiragino Kaku Gothic
    Pro”, Osaka, ”ＭＳ Ｐゴシック”, ”MS PGothic”, sans-serif;

fifth

ファッション通販 fifth(フィフス)

font-family: ‘メイリオ’, Meiryo, ‘ＭＳ Ｐゴシック’, Osaka, ‘ヒラギノ角ゴ Pro W3’,
  Sans-serif;

GAP

GAP Japan Official Online Store ｜公式ギャップ通販サイト | Gap

font-family: Helvetica, Arial, sans-serif;

オンワード・クローゼット

ONWARD CROSSET

font-family: “Noto Sans Japanese”, “ヒラギノ角ゴ Pro W6”,
  “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, MS PGothic,
  sans-serif;

SHEL’TTER

SHEL’TTER WEB STORE

font-family: “ＭＳ Ｐゴシック”, Osaka, “ヒラギノ角ゴ Pro W3”;

GILT

ギルト

font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

Zoff

メガネ通販の Zoff ゾフオンラインストア【眼鏡・めがねブランド】

font-family: Helvetica, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro W3”,
  “メイリオ”, Meiryo, sans-serif;

フォーエバー 21

フォーエバー 21 オンラインショップ

font-family: “メイリオ”, Meiryo, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic
    Pro”, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, Arial, sans-serif;

PLST

PLST オンラインストア | プラステ公式ファッション通販サイト

font-family: AXIS Std R, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”,
  Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;

ELLE

【ELLE SHOP】雑誌『エル(ELLE)』公式ファッション通販｜エル・ショップ

font-family: ‘ゴシックMB101’, ’游ゴシック’, “Yu Gothic”, YuGothic, ’ヒラギノ角ゴ
    Pro W3’, ’Hiragino Kaku Gothic Pro’, ’メイリオ’, Meiryo, ’ＭＳ Ｐゴシック’,
  sans-serif;

ロコンド

靴とファッションの通販サイトロコンド

font-family: Lato, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, メイリオ,
  Meiryo, “ＭＳ Ｐゴシック”, arial, helvetica, sans-serif, clean;

COACH

【COACH】コーチ公式オンラインストア

font-family: “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro”, Osaka, “メイリオ”,
  Meiryo, “ＭＳ Ｐゴシック”, “MS PGothic”, ‘Lato’, Verdana, Arial, Helvetica,
  sans-serif;

ラコステ

ラコステ - 公式通販サイト - - LACOSTE（ラコステ) オンラインショップ

font-family: “LacosteSans”, ’ヒラギノ角ゴ Pro W3’, ’Hiragino Kaku Gothic Pro’,
  ’メイリオ’, Helvetica, Arial, sans-serif;

アメリカンイーグル

アメリカンイーグルオンラインストア | American Eagle Outfitters

font-family: “Gotham Book”, ”Helvetica Neue”, Helvetica, Arial,
  ”Hiragino Kaku Gothic ProN”, ”Hiragino Kaku Gothic Pro”, ”Meiryo”, ”メイリオ”,
  ”ＭＳ ゴシック”, sans-serif;

クロックス

クロックス公式オンラインショップ

font-family: Arial, sans-serif;

化粧品

オルビス

オルビスのスキンケア・化粧品、ダイエット、美容サプリメント・健康食品、ボディウェア

font-family: "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif;

家電量販

ヨドバシ.com

ヨドバシ.com - ヨドバシカメラの公式通販サイト【全品無料配達】

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
  Meiryo, "ＭＳ Ｐゴシック", Osaka, sans-serif, arial, verdana, Helvetica,
  Verdana, "Droid Sans", Arial;

ビックカメラ

ビックカメラ：全品日本全国送料無料！

font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;

食品

アイワイネット

イトーヨーカドーのネットスーパー　アイワイネット

font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ",
  Meiryo, "ＭＳ Ｐゴシック", sans-serif;

健康食品

ファンケル

無添加化粧品、健康食品/サプリメントの通販 │ ファンケルオンライン

font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ",
  "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Arial ", sans-serif;

書籍・DVD

Amazon

Amazon | 本, ファッション, 家電から食品まで | アマゾン

font-family: "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic ProN", Meiryo,
  sans-serif;

honto

honto：書店、通販、電子書籍のハイブリッド総合書店【共通 honto ポイント貯まる】

font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo UI",
  "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "游ゴシック体", "YuGothic",
  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

その他

楽天市場

【楽天市場】Shopping is Entertainment! ：インターネット最大級の通信販売、通販オンラインショッピングコミュニティ

font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;

Yahoo!ショッピング

Yahoo!ショッピング - Ｔポイントが貯まる！使える！ネット通販

font-family: “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;

伊勢丹

伊勢丹オンラインストアトップ

font-family: “メイリオ”, ”ヒラギノ角ゴ Pro W3”, “HiraKakuProN-W3”, ”ＭＳ
    Ｐゴシック”, Osaka, sans-serif;

三越

三越オンラインストアトップ

font-family: “メイリオ”, ”ヒラギノ角ゴ Pro W3”, “HiraKakuProN-W3”, ”ＭＳ
    Ｐゴシック”, Osaka, sans-serif;

ディノス

通販のディノスオンラインショップ

font-family: “ヒラギノ角ゴ Pro”, “Hiragino Kaku Gothic Pro”, “メイリオ”,
  “Meiryo”, sans-serif;

ショップジャパン

http://www.shopjapan.co.jp/

font-family: “ヒラギノ角ゴ Pro W3”, ”Hiragino Kaku Gothic Pro”, ”メイリオ”,
  ”ＭＳ Ｐゴシック”, Arial, sans-serif;

おわりに

やはり、Windows ユーザー向けのサイトだとメイリオやMS ゴシックが優先していされているし、Mac ユーザーもターゲットなサイトはヒラギノ優先指定だったりしていた。

同じ「ASKUL」でも、LOHACO と ASKUL でフォントの指定が違うのは面白かった。制作会社やデザイナーが違うのはあるかもしれないが、一般企業向けの ASKUL は Windows ユーザーが多そうなのでメイリオ優先指定なのかもしれない。

海外ブランドはArial, sans-serif指定だけとか、日本企業はMSゴシック, Osaka指定だけ、とか特色がでて面白い。
海外ブランドは、GAP やクロックスがそうだったのだが、あくまで日本向けのサイト。本家のサイトを見てもフォント指定は同じだったので、単純に移植しただけかもしれない。

調べた結果では、明朝体の指定がなかった。

違和感

*, html, bodyへのfont-family指定があった。*指定はやり過ぎだと思うが、すべての要素にフォントを指定したかったのだろう…。

また、「プロポーショナルフォント」「等幅フォント」が混ざっている指定のサイトがあり、個人的には違和感がある。単一環境だけで見ればレイアウト上問題ないかもしれないが、他の環境と比べた時に明らかにレイアウトに差がでるだろう。
経験上、「フォント」は顧客やデザイナーが指定してくる事が主だ。極端な例だが、いくら希望だと言っても、EC サイトに「創英角ポップ体」や「Comic Sans」は指定しないだろう。デザイナーなら尚の事、適切なフォント選択を出来るような知識を身に着けていく必要がある。エンジニアとしても、デザイナーと密に連携を取って謎のフォント指定を未然に防止していかねばならないと思った。

内容は別にしても各 EC サイトを今後また調べる時に”リンク集”としても役に立ちそう。