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

#概要

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

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

#業種別

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

#総合・日用品

#ASKUL

【ASKUL】オフィス用品/現場用品の通販 アスクル

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

#ベルメゾンネット

(通販(通信販売)|ベルメゾンネット

font-family: 'メイリオ', Meiryo, Arial, "MS Pゴシック", 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, "MS Pゴシック", 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', 'メイリオ', 'MS Pゴシック', 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 Pゴシック", "MS PGothic", sans-serif;

#マルイウェブチャネル

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

font-family: “MS Pゴシック”,Osaka,sans-serif;

#ドットエスティ

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

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

#セシール

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

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

#ニッセン

ニッセン

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

#fifth

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

font-family: ‘メイリオ’, Meiryo, ‘MS Pゴシック’, 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 Pゴシック”, MS PGothic, sans-serif;

#SHEL’TTER

SHEL’TTER WEB STORE

font-family: “MS Pゴシック”, 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 Pゴシック”, “MS PGothic”, Arial, sans-serif;

#PLST

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

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

#ELLE

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

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

#ロコンド

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

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

#COACH

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

font-family: “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro”, Osaka, “メイリオ”, Meiryo, “MS Pゴシック”, “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”,”メイリオ”,”MS ゴシック”,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, 'MS Pゴシック', 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, "MS Pゴシック", sans-serif;

#健康食品

#ファンケル

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

font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "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 Pゴシック" , "MS PGothic" , sans-serif;

#その他

#楽天市場

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

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

#Yahoo!ショッピング

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

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

#伊勢丹

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

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

#三越

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

font-family: “メイリオ”,”ヒラギノ角ゴ Pro W3”, “HiraKakuProN-W3”,”MS Pゴシック”, 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”,”メイリオ”,”MS Pゴシック”,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サイトを今後また調べる時に”リンク集”としても役に立ちそう。

twitterfacebookhatenafacebook