インフィード記事ページのコーディングのコツ




ガラケー時代からモバイルのコーディングに携わっているデザイナーさんコーダーさんには関係ないかもですが、改めて記事ページのコーディングってコーディングの勉強にはちょうどいいなぁと思ったので記事にします。

まず何が良かったかというと、記事ページのコーディングがカラムがほとんど存在しないので(広告的に意味無しと思うので)図のようにタグを直列で組んでしまえばいいという事になります。

h1からh6までのデザインの規則性を組んでおけば、初めてコーディングしてもそこそこの記事ページのテンプレが出来上がってしまうのです。

タグの規則性とコーディング

記事ページのコーディングのコツはSEOライティングの概念をデザイン化する事でそれっぽいテンプレになります。
検索エンジンが理解しやすい構成と見出しの打ち出し方をリンクさせる方法です。私はLIGの記事が参考になったのでリンクを残しておきます。
あなたの記事の検索順位を上昇させるSEOライティングの基礎知識
※全10回の記事なので全部読んでみるだけでも力がつきそうです。

以下は、私なりに記事で使用するタグをそれぽくする為にまとめたものなので好きなように使ってください。

フォントサイズは%で管理する

各タグのフォントサイズはデバイス毎で比率を統一させる為に%で管理しておきます。
また、レスポンシブの調整もしやすい為でもあります。

h1タグは記事タイトルとして扱う

タイトルとして扱うので文字の大きさ、太さを基準にして装飾は無しでCSSを組みます。
文字だけにするのは出稿媒体によっては装飾NGもあるからです。

h1 {
font-size:200%;
}

h2は大見出しh3は小見出にして違うデザインにする

文字の大きさは同じ(h1よりは小さく)にして装飾で重要性を区別します。
たとえば、この記事デザインのようにh2はべた塗りにして、h3はborder-bottomで装飾する形です。

h2 {
font-size:200%;
margin:4%;
background-color:#1bb4d3;
}

h3 {
font-size:200%;
margin:4%;
border-bottom:4px solied #1bb4d3;
}

h4はユーザーボイスの見出しや強調したいテキストに用いる

基本的な見出しはh3までにしてここからは、記事ページで強調したい部分や補足しておきたい情報をまとめる為にタグを扱っていきます。
h4はボールドの大きいバージョンです。

h4 {
font-size:150%;
font-weight:bold;
}

h5は注釈文として使う

補足情報はこのタグでまとめましょう。記事広告は薬事の補足を追記するために注釈が多くなります。
もとめれるならこのタグないでまとめましょう。
※h6はそれ以外で必要性があるものとして使いましょう。

h5 {
font-size:80%;
margin:4%;
background-color:#daf2f7;
}

マージンは上下左右それぞれ専用のタグを数値ごとに用意する

コーディングしながら、間隔をあとで調整していく為にマージンはh1からh6に必要以上に組み込まず
別で10px,15pxごとに区切って上下左右で用意していきます。

例えばこのような形です。

p_t10 {
padding-top:10px;
}

使い方はこんな感じ

さいごに

世間の記事広告媒体のほとんどはwordpressで構成されていて、そもそも記事制作に適した環境です。
その為、コーディングの基礎部分でもある見出し管理の組み立て方をおろそかにしてしまう可能性もあります。
これから、デザイナーやコーダーとして活躍していく方はおさらいのつもりで見出しを管理してみてはいかがでしょうか。

この記事はここまで!

ここからはよく読まれる記事をまとめてご紹介します。
ひとあじ違うデザインノウハウに出会えるかもしれません。

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選

2018.09.23

【たった1問】遷移型アンケートページの構成とデザインを調べてみる

2018.09.01

【男性編】薄毛・育毛・増毛商材向けランディングページ(LP)デザインについてまとめてみた

2018.08.05

ランディングページ(LP)にエディトリアルデザインを取り入れる。ふきだし装飾編

2018.07.08

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

CVエリアデザインのポイント。改善できればランディンページ(LP)は強くなる。

2018.05.27

電通グループが開発したAIのバナー自動生成ツールADVANCED CREATIVE MAKER β版のプレスで感じた事

2018.05.20

ランディングページ(LP)にエディトリアルデザインを取り入れる。マーカー編

2018.05.04

デザイナーとしてひと味違うランディングページ(LP)構成案の制作方法

2018.04.01

いつのまにか「Font Awesome」が新しくなってたので調べてみた

2018.03.11

動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

2018.01.14


お気に入りの情報
が無かったでしょうか?
この記事の最後には、今までのデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google