ECサイトのfont-familyを調べた in 2017
概要
EC サイトに触れる機会が多くなり、フォントの指定について気になり始めた。業種やターゲットによって、フォントの指定は変わってくるのだろうか。以下の”EC サイトランキング”を指標に各サイトのfont-familyを確認してみた。
- 【最新】EC 売上ランキングまとめ 2016 年版~300 社の合計売上は約 3.2 兆円 | 通販新聞ダイジェスト | ネットショップ担当者フォーラム
- ネット通販 TOP200 社で国内 EC 市場の約 42%を占める。合計 EC 売上高は約 3 兆円 | ネットショップ担当者フォーラム
- LINE ポイント - ショッピング
サイトによって、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
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
"Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif;
ユニクロ
font: 13px "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic",
"游ゴシック体", "YuGothic", メイリオ, Meiryo, sans-serif;
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;
セシール
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
font-family: ‘メイリオ’, Meiryo, ‘ＭＳ Ｐゴシック’, Osaka, ‘ヒラギノ角ゴ Pro W3’,
Sans-serif;
GAP
GAP Japan Official Online Store ｜公式ギャップ通販サイト | Gap
font-family: Helvetica, Arial, sans-serif;
オンワード・クローゼット
font-family: “Noto Sans Japanese”, “ヒラギノ角ゴ Pro W6”,
“Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, MS PGothic,
sans-serif;
SHEL’TTER
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
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
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;
ショップジャパン
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 サイトを今後また調べる時に”リンク集”としても役に立ちそう。