ruzyu.com_PC_In_main_top_468_60

ruzyu.com_SP_In_head_320_100

ホームページの横幅や文字の大きさ、テキストリンクの色で困ったらYahoo! JAPANを参考にしよう!

投稿日:2015/10/26 更新日:

ホームページを作成する際に、横幅を何ピクセルにしようかと困ったら、Yahoo! JAPAN のホームページを参考にするのが無難です。

文字の大きさ(フォントサイズ)や色、テキストリンクの色でも同様ですね。

本記事では私がそのように考える理由と、Yahoo! JAPAN の各種表示に関するデータをまとめます。

ホームページの表示について、Yahoo! JAPAN を参考にする理由

Yahoo! JAPAN は、日本のホームページの中でも最も多くのユーザーが訪れるWebサイトの一つです。

Yahoo! JAPAN としてもユーザーにストレスを与えない表示を研究しつくして結論付けた表示の在り方だと容易に考えられます。

また逆に、多くのユーザーにとっても Yahoo! JAPAN は見慣れているため、無意識にWebサイトの見やすさ、読みやすさの判断基準になっていると思われます。

ですので、もちろん、Yahoo! JAPAN のデザインをそのままパクるのはダメですが、ホームページを作成する際は、サイトの横幅や文字の大きさ、文字の色、テキストリンクの色などの表示に関する部分は Yahoo! JAPAN を参考にして作成すれば、違和感なくユーザーに受け入れていただけるのではないか、というのがその理由です。

Yahoo! JAPANの各種表示に関するデータ(PC)

2015年10月26日現在の Yahoo! JAPANの表示に関するデータ(PC)を以下にまとめます。

画面の横幅(PC)

  • トップページ、中ページ:950ピクセル

文字の大きさ(PC)

  • トップページ中央のメニュー(記事タイトル):12ピクセル
  • Yahoo! ニュース トップページ メニュー:15ピクセル
  • Yahoo! ニュース 記事 タイトルと抜粋のタイトル:22ピクセル
  • Yahoo! ニュース 記事 タイトルと抜粋の抜粋:15ピクセル
  • Yahoo! ニュース 記事ページ タイトル:22ピクセル
  • Yahoo! ニュース 記事ページ 本文:16ピクセル

文字の行間 / line-height(PC)

  • Yahoo! ニュース 記事 タイトルと抜粋の抜粋:24ピクセル( 1.6倍 / 1.6em )
  • Yahoo! ニュース 記事ページ 本文:28.8ピクセル( 1.8倍 / 1.8em )

文字の色(PC)

  • Yahoo! ニュース 記事 タイトルと抜粋の抜粋:#333
  • Yahoo! ニュース 記事ページ 本文:#333

リンクの色とリンクの装飾(PC)

  • トップページ中央のメニュー(記事タイトル):#1d3994
    ※hover時 下線のみ
  • Yahoo! ニュース トップページ メニュー:#03c
    ※hover時 #cc3434 下線
  • Yahoo! ニュース 記事 タイトルと抜粋のタイトル:#03c
    ※hover時 #cc3434 下線

本文の段落の表現(PC)

本文全体を<p>タグで囲み、段落は「<br><br>」で表現

Yahoo! JAPANの各種表示に関するデータ(スマホ)

2015年10月26日現在の Yahoo! JAPANの表示に関するデータ(スマホ)を以下にまとめます。

文字の大きさ(スマホ)

  • トップページ ニュース記事タイトル:16ピクセル
  • Yahoo! ニュース トップページ メニュー:14ピクセル
  • Yahoo! ニュース 記事 タイトルと抜粋のタイトル:18ピクセル
  • Yahoo! ニュース 記事 タイトルと抜粋の抜粋:16ピクセル
  • Yahoo! ニュース 記事ページ タイトル:18ピクセル
  • Yahoo! ニュース 記事ページ 本文:16ピクセル

文字の行間 / line-height(スマホ)

  • Yahoo! ニュース 記事 タイトルと抜粋のタイトル:23.4ピクセル( 1.3倍 / 1.3em )
  • Yahoo! ニュース 記事 タイトルと抜粋の抜粋:24ピクセル( 1.5倍 / 1.5em )
  • Yahoo! ニュース 記事ページ タイトル:23.4ピクセル( 1.3倍 / 1.3em )
  • Yahoo! ニュース 記事ページ 本文:24ピクセル( 1.5倍 / 1.5em )

文字の色(スマホ)

  • Yahoo! ニュース 記事 タイトルと抜粋の抜粋:#333
  • Yahoo! ニュース 記事ページ タイトル:#333
  • Yahoo! ニュース 記事ページ 本文:#333

本文の段落の表現(スマホ)

本文全体を<p>タグで囲み、段落は「<br><br>」で表現

ruzyu.com_PC_In_main_bottom_336_280

ruzyu.com_PC_In_main_bottom_336_280

-Webサイト運営

© 2014-2017 Webサイト運営