[toc]
ランディングページの主なスキーム
例えば、ランディングページを作るために、見出しの言葉と訴求コンテンツ：トップコピー、ボディコピー、クロージングコピー
があり、画像と文章を盛り込んで製作する訳です。
それらのタイトルは、h1かh2タグで書くのが一般的です。なぜならその為のtagなのですから。
h1~h6タグが出来た時に、webページの読みやすさ→検索エンジン最適化対策も一緒に仕組まれているという訳ですね！
見出しタグとSEOの関係性
後述しますが、
見出しタグを適切に設定することは、検索エンジンにコンテンツの構成を正しく伝えることに大きく影響を与える!ということをご存知でしょうか？
私たちWebデザイナーが、ユーザービリティに関しては、いつも意識する必要があるという事は分かっていますが、それだけでなく
SEO対策も同時に理解しておく事が必要なのですね。
そのためにはページの内容が伝わるわかりやすい見出しを付けることが大切という訳です。
Webページの設計
重要なポイントを頭の隅に置いて、早速。
大きい１枚ページのコーディングを丸投げされた場合、フリーランスWebデザイナーはどうするのか？実験台になった気分で、方法をお伝えして参ります。
文書にして１４ページほどある場合
1. 紙に書き出す
2. Cacooなどの無料サービスを使う
今回は予算が少ないので、紙に書き出す方法にします。
大まかなレイアウトを頭の中でまとめて、小さなレイアウトを分けていきます。
正直なところ、最初のフレームワークの設計は簡単そうで難しいです。
でもひとつずつ計画を立てて製作しないと、後で困るのはコーダーなので、難しい場合は外注してしまうのも手ですね！
見出しのデザイン１２箇所のデザインは
今回の課題は、１２ヶ所ある大きな見出しであります。
何ヶ所かは同じものを使って、ごちゃごちゃした印象にならない様にしようと思います。
ちなみに目指す仕上がりのイメージは ： https://www.theport.jp/
CSSなら軽量でお洒落な今風のデザインに仕上がるので、取り入れたい所です。
以前ご紹介した、押したくなるボタンデザインを知って以来、お気に入りとなった saruwakakun から拝借。
H1~H6 タグの装飾
この度、初めてH1〜H6に見出しをデザインすることに、SEO対策も含まれるということを知った訳ですが
h1~h6は、HTMLの学習の最初の方で出て来ました。別称「見出し」です。
デザインもさる事ながら、H１タグはSEO（Search Engine Optimazation）と大きくて関わりがあるのです。
今回は、見本があるのでクライアント任せで進めましたが、自分で作る際には、１から骨組みを作ることになるでしょうから
この知識があるのとないのでは、大違いですね！
見本が決まってからCSSでコーディング
デザインはというと
全体のバランスと文章のバランスを整えて、頭に全体像を叩き込みます。
具体的には、Cacooなどで設計図（レイアウト）とどこに何をリンク（アンカーも同じ）するかを作ったのち、全体のバランスを整えます。全て完成したら、コーディングに入ります。
見出し文字は目立たせるデザインが必要なので、どんなデザインにすると全体のバランスが整うか？を考えた上で、コーディングに入ります。
この時の注意点は、まず始めにH1にクラス設定をする。
そしてその大きさは、H1〜H6までであり、
順番を守ってコーディングしなければいけないということ。
それさえ守れば、幅や高さも自由に変更できます。
色や形も背景も全部、クラス設定して、作れます。
ひとつ、気になる点がありました。
基本的には1ページ（1記事）につき一度だけ使うようにしましょう。
推奨は、LPでもh1はひとつ。
h2~h6は、幾つでもOK!
ただ、h1〜h6→大〜小とそれぞれ文字の大きさはルールがあるので
「デザインの趣向で見出しタグを決めない、使わない」
ことが大切！
参考： https://saruwakakun.com/html-css/basic/h1-h2-h3
ULタグのスタイル指定
リストタグも今後たくさん使います。基本中の基本なので書くまでもないですね。
Wordなどでもよく使います。
- リストタグ =
li(listの li） - ol と ul
olとul の親要素が li
意味は ol : Order List
ul : Unordered List
Unordered List は 「・」 でリスト表示されます。
この 「・」 を消したい時のスタイルシートの書き方は、なんとカンタン。
以下のソースを１行追加すれば消すことができます。
ul li {
list-style-type: none;
}
【PR】在宅ワークをお探しなら
最近はテンプレートが豊富にありますので、リメイクする方法もありますね。
おすすめの無料テンプレート はこちら
最後までお読みいただき有難うございました。
