• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

サイトから学ぶ、hタグ(見出し)の使い方とデザイン #2

投稿者アイコン
2021/06/06
書いた人:
futappa_staff
カテゴリ:
デザイン
2,552 views

実例サイトを例に、各見出しの使い方とデザインを学びましょう!

サイトから学ぶ、hタグ(見出し)の使い方とデザイン #2

目次

はじめに

実在するサイトを例に、見出しの使い方とデザインを学びましょう♪

今回もキュレーションサイトで見つけた1サイトを参考例として紹介させていただきます★
部分的にスクショして載せており、全て掲載してる訳ではありません。細かい部分は実際のサイトも見て確認してみてくださいね。

参考サイトのご紹介

「BabySong」という、お子様の声を使って音楽をオーダーメイドする、新しいギフトサービスだそうです。ロゴは子供らしい可愛いロゴですが、サイト内の見出しはゴシックで見やすくデザインされていました。では早速、見出しデザインを見ていきましょう。

h1タグ

heading_h1_01
トップページのロゴ部分

heading_h1_02
下層ページのメインタイトルの部分

h2タグ

heading_h2_01
トップページのメインビジュアルのすぐ下の部分

heading_h2_02

heading_h2_05

heading_h2_03
「SAMPLE MUSIC」のセクションは、複数のページにありました。

heading_h2_04

h3タグ

heading_h3_01

heading_h3_02

まとめ

いかがでしたか? 全体的にシンプルな見出しを使っているサイトでしたが、文字サイズなどで上手く調整されていると思います。色んなパターンのサイトの見出しに着目するのも勉強になりますね(^^)

参考サイト


この記事を読んだ人はこんな記事も読んでいます