PAGE TITLE

固定ページ参考タイトル

ページの説明を入れられます(推奨100文字以内)ページの説明を入れられます(推奨100文字以内)ページの説明を入れられます(推奨100文字以内)ページの説明を入れられます(推奨100文字以内)
固定ページ参考タイトル

タグの文章は、Noto Suns JP の16px~20px とする。リッチでハイブランドなデザインの場合16~18px、親しみやすい印象を与えるなら18~20pxがよい。文字間もXD上では「40」とし、実際のCSSは文字間「letter-spacing:0.04em」となります。行間も「文字の2倍サイズ」を目安にしていますので「line-height:2.0」取ります。

セクションが変わるときは、上部とのマージンを30~40px(2.0em)ほどあけること。段落が変わったこととをパッと見でわかりやすく伝える事ができるように。

PCではセンター配置、SPでは左揃い。

見出しは改行箇所の調整はできないため一行で収まる長さが望ましい。

  • h2タグ(大見出し)はPC 36px/SP 24px
  • h3タグ(大見出し)はPC 26px/SP 20px
  • h4タグ(大見出し)はPC 22px/SP 18px

として、デザインすること。
見出しのデザインに関しては、フォントサイズを大きくするだけでなく、記事の区切りが解るように大見出しはしっかり存在感を出しましょう。色や装飾等は、Webデザインの一般常識を踏襲して「文章が読みやすくなるように」考えています。そのため、大きくは変更しないことを推奨します。

中見出しは左寄せでもセンターでも。

中見出しはサイトデザインによっては、センター揃いや左揃えなど、変わる場合があります。なのでどちらにも対応しやすい見出しがベストです。スマートフォンでは基本左寄せになります。デザイン、フォントサイズなどはH2レベルよりも抑えるようにしてください。

  • インデント60px目安。
  • 行間1.6~2.0。リストタグ
  • リスト表記に万が一長い文章が入ってくる場合は、改行をします。リスト表記に万が一長い文章が入ってくる場合は、改行をします。
  1. 箇条書きのマーカーが番号になっても、スタイルは同じです。
  2. 文字間「0.04em」も変わらずです。

その他のブログパーツ

文章を強調したいとき、その時のために太字×色と言うかたちで実装しています。これによって文章を強くアピールできます。またリンクで飛ばしたいときには、このようなデザインで表現します。

引用文を記載。周囲に余白多めに取ること。18pxで行間は2.0。引用文を記載。周囲に余白多めに取ること。18pxで行間は2.0。引用文を記載。周囲に余白多めに取ること。18pxで行間は2.0。引用文を記載。周囲に余白多めに取ること。18pxで行間は2.0。引用文を記載。周囲に余白多めに取ること。18pxで行間は2.0。引用文を記載。周囲に余白多めに取ること。18pxで行間は2.0。

[ 出典 ]https://aaaaaaaaaaaaaaaaaa.com
テキストテキストテキストテキステキストテキストテキストテキストテキストテキストテキストトテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト