ホームページ

  • Twitter
  • Facebook
  • HATENA
  • POCKET

世の中のサイトから学びを得よう

目次

  1. 趣旨説明
  2. 小売業のサイト
  3. 1位 イオン
  4. 2位 セブン&アイ
  5. 3位 ファーストリテイリング
  6. 不動産業のサイト
  7. 1位 三井不動産
  8. 2位 飯田グループホールディングス
  9. 3位 三菱地所
  10. 自動車業のサイト
  11. 1位 トヨタ
  12. 2位 ホンダ
  13. 3位 日産自動車
  14. まとめ
好きな夏野菜はズッキーニです。とらりんです。
さてさて、今回は世の中のWebサイトを探ってみようという企画。
日進月歩のWeb業界で最近の流行や傾向はどんな感じなんだろう。
主にcssの設定に注目して調べてみようと思います。

趣旨説明

皆さんご存じようにWebサイトの制作方法は常に変化しています。
私が始めた頃はtableレイアウトが終焉を迎えた頃で、ブラウザも今ほど大きくなくサイトのデザイン幅も1000px無いのが普通だったように記憶しています。
フォントサイズも12pxが普通で、今見るとビックリするぐらいの小ささです。
それから進化は続き、昔は画像で対応していた事がcssでできるようになったり、テキストはWebフォントが登場したり。
色々なやり方があり、どうするのが一番いいのか疑問に思う事が今でもあります。
そこで、果たして今は何が主流なのか、どうするのがいい感じなのか、他のサイトを見て勉強しようと思いたったのです。
具体的に見ていくといくらでも掘り下げられ、時間がいくらあっても足りなくなります。
そこで今回は一番気になっているcssの基本的な設定、フォントやサイズ、レスポンシブ対応などについて調べてみます。
で、いったいどのサイトを調べるのか。
ある程度のクオリティは見込めないといけません。
大企業ならある程度Webサイトにも力をいれているのではないかという勝手な推測で、売上高の高い企業のサイトはどうだろうか。
日本経済新聞社の発表しているこちらのランキングを参考に。
2020年度の売上高が高い各業種の上位3社を見ていきます。
全業種だとスクロールするのがしんどくなっちゃうので今回は任意の3業種です。

小売業のサイト

1位 イオン

https://www.aeon.info/

font-familyapple-system, blinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, 游ゴシック体, Meiryo, sans-serif
基本のfont-sizehtml:62.5% → 1.8rem(18px)
基本のテキストカラーrgb(51, 51, 51)
SP対応フルレスポンシブ
メイン最大幅1400px
ロールオーバ、タイトルのあしらい等コーポレートカラー一色でスッキリしています。
フルレスポンシブですがvwではなく%、emが使われているようです。

2位 セブン&アイ

https://www.7andi.com/

font-familyPC:游ゴシック体, YuGothic, 游ゴシック, Yu Gothic, ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, Arial, MS Pゴシック, MS PGothic, sans-serif
SP:ヒラギノ角ゴ Pro, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, Arial, MS Pゴシック, MS PGothic, sans-serif
基本のfont-sizePC:html:calc(1em * .625) → 1.6rem(16px)
SP:html:calc(1em * .625) → 1.4rem(14px)
基本のテキストカラー#333
SP対応フルレスポンシブ
メイン最大幅1680px
テキストのサイズが大きめで見やすいです。
グローバルナビゲーションはボリュームがあるので横幅狭くなるとメインに比べて早めにスマホ表示になります。
PCとスマホでfont-familyを変えたりデバイスで最適化しています。

3位 ファーストリテイリング

https://www.fastretailing.com/jp/

font-family"MS Pゴシック", Osaka
基本のfont-sizebody 100% → body 75%(13px程度)
基本のテキストカラー#231916
SP対応無し
メイン最大幅772px
。。。目を疑いましたよね。私何か間違えちゃったかな?と思いましたよね。
どうやらそうではなさそうです。ニュースの日付はバリバリ最近です。
トップメッセージも今年の5月に更新されてます。
いやこれ本当になぜリニューアルしないのか気になる。
コーポレートサイトではなくブランドサイトに力入れる方針とか?
スマホもPCのままって久々に見た気がします。

不動産業のサイト

1位 三井不動産

https://www.mitsuifudosan.co.jp/

font-family"FOT-ロダン Pro M" , RodinPro-M, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif
基本のfont-sizehtml 100%
基本のテキストカラー#333
SP対応PC、SP
メイン最大幅910px

ヘッダーが追従ではなかったり最大幅があまり広くなかったりするので、作ってからそれなりに経つのかなあという印象です。

2位 飯田グループホールディングス

https://www.ighd.co.jp/

font-family"Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", "游ゴシック体", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "MS ゴシック", "MS Gothic", HiraKakuProN-W3, "TakaoExゴシック", TakaoExGothic, "MotoyaLCedar", "Droid Sans Japanese", sans-serif
基本のfont-size14px
基本のテキストカラー#111
SP対応フルレスポンシブ(一瞬横スクロール出る時有)
メイン最大幅1200px

オーソドックスな感じですね。
ヘッダーが追従するんですけど、グロナビは追従しないのが珍しいなと思いました。実は全く知らなかった会社。

3位 三菱地所

https://www.mec.co.jp/

font-family"MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
基本のfont-size13px
基本のテキストカラー#333
SP対応PC、SP
メイン最大幅980px
ヘッダーは追従で文字サイズの調整ができたりと親切設計です。
でも今では絶対デバイスフォントにするであろうタイトルや明朝体フォントが画像になっているので、作られてからそれなりに経過していそうです。

自動車業のサイト

1位 トヨタ

https://global.toyota/jp/

font-familyYuGothic,"Yu Gothic","游ゴシック体","游ゴシック","Hiragino Kaku Gothic ProN","HiraKakuPro-W3","メイリオ",Meiryo,Verdana,sans-serif
基本のfont-size16px
基本のテキストカラー#212121
デバイス対応フルレスポンシブ
メイン最大幅1206px
フルレスポンシブ、検索ボックスを全画面で表示等最近の要素が垣間見える企業サイト。
ほとんどのページにSNSボタンを設置してるのも今ならではですね。

2位 ホンダ

https://www.honda.co.jp/

font-familyYuGothic,"Yu Gothic","游ゴシック体","游ゴシック","Hiragino Kaku Gothic ProN","HiraKakuPro-W3","メイリオ",Meiryo,Verdana,sans-serif
基本のfont-sizehtml:62.5% → html:80%
基本のテキストカラー#000
デバイス対応PC、SP
メイン最大幅カテゴリにより100%、980pxなど各種
企業情報サイトが独立していないので全体として膨大なページ数です。
各ナビゲーションページ毎に設定が色々あるので、基本設定はあまり参考にならないかもしれません。

3位 日産自動車

https://www.nissan-global.com/JP/

font-familyNissanPro,Helvetica,Arial,sans-serif
基本のfont-sizehtml:10px → 1.4rem(14px)
基本のテキストカラー#000
デバイス対応フルレスポンシブ(一部横スクロールが出る時有)
メイン最大幅1366px(1280pxも有り)

ヘッダーは追従無し。
下層ページにいくと一昔前感があるので、トップや各コンテンツの扉ページだけリニューアルしているのかもしれないです。

まとめ

いかがでしたか。
大企業は昔からサイトを作っていた、しかもページ数が多い、という理由で一度作るとそうそう大規模リニューアルはしづらいですね。
したがって必ずしも最新技術を駆使したサイトではないという事が分かりました。
採用サイトとかキャンペーンサイト等の方が新しさを感じられるかもしれません。
次回はその辺踏まえて研究してみようと思います。
  • Twitter
  • Facebook
  • HATENA
  • POCKET
  •