ホームページを作る際にスタイル設定しておきたい基本パーツ〜初心者向け〜

皆様こんにちは！澤田です。もう年末ですね。12月は師走というだけあって、あっという間に過ぎ去っていこうとしています…。今回は、Webデザインをするにあたって最初にスタイル設定しておくべき基本的なパーツをご紹介しようと思います。

スタイル設定しておきたい基本パーツ一覧

h1,h2,h3…　見出し

「h」は、「heading」の頭文字で、「見出し」という意味を持ちます。htmlタグでは、<h1>大見出しにする文言</h1>といった記述をします。
上からh1が大見出し、h2が中見出し、h3が小見出しで、以下h4、h5、h6...と小見出しが続きます。見出しにキーワードを挿入するのも、SEOに効果があると言われています。
h1,h2,h3まではWebサイト内で特によく使われます。Webサイトデザインを行う際は最低でもh1〜h3くらいまでは予めスタイルを設定しておくことを忘れないようにしましょう。大見出しから順に段階的にフォントが小さくなっていくよう設定したり、キーカラーや 線などを上手く利用して注視性の高いデザインにするとユーザーにとって見やすいサイトになるでしょう。また、見出しを目に入りやすく、かつ見出し以下の文書を読みやすくするためには、適度なマージン設定も重要です。余白を含めて見出しをデザインするよう心がけたいですね。

p　段落

段落は、pタグで表現します。「p」は「paragraph」の略で、節・段落といった意味です。htmlでは<p>文書</p>といった記述をし、このpタグに囲まれた文書が段落となります。
一般的なWebサイトでは、pタグで囲んだ段落の前後が改行されたり、空行が入ることが多いです。テキストがぎちぎちに詰まっていると見にくくなってしまいますが、このpタグに適切なマージン設定をしていると文章全体の見やすさにつながります。

li　リスト

リストは、htmlタグでは<li>と表記されます。「li」は 「list item」の略です。箇条書き項目など、リスト表示させたい項目に使用します。 リストにしたい項目を<li>~</li>で囲み、更に順不同のリストの場合は<ul>、数字やアルファベットなどの順序をつける場合は<ol>で囲みます。リストは様々なページで多様されるタグの一つだと思いますので、最初に指定しておけばリストを使用する時にいちいちリストスタイルを指定する必要もありません。リストスタイルの設定で、リストマーカーをWebサイトのコンセプトカラーに合わせた色にしたり、指定した画像にするとサイト全体の統一感が増します。

table　表

表です。htmlでは、<table>タグで囲んだ文書が表になります。<th>,<td>,<tr>などのタグを使用し表を作成していきます。
表というと数値を入力するイメージがありますが、コーポレートサイトでは企業情報や採用募集要項、サロンや病院のサイトでは営業時間・診察時間などを表記する時にも使用されます。組織化した情報をまとめて記述するのに便利なので、スタイル設定をしておくと情報量の多いページでも、わかりやすい情報発信に繋がります。

a　リンク

リンクは、他ページへジャンプするよう設定したい時に使用します。htmlでは<a>タグを使用します。
リンクの文字色を他とは違う色に設定したり、マウスオン時の画像透過の設定をしていると、テキストやバナーが他ページにリンクしているということがユーザーにとってわかりやすくなります。トップページからブログ記事へのリンク、詳細へのリンク、事業案内ページから他サービスへのリンクなど、リンクはユーザーをWebサイトの深くへ誘導していくポイントとなります。リンクをクリックしやすいデザインに設定しておくと、スムーズな誘導が期待できます。

おまけ

title　タイトル

こちらは特にCSSによるスタイル設定は必要ではないのですが、ホームページを制作される際にはぜひぜひ忘れず設定していただきたいhtmlタグのひとつなのでご紹介させてください。
タイトルとは、その名のとおり、ホームページのタイトルのことを指します。htmlでは``と記述されます。headタグの中に、１つしか使用することができません。設定したタイトルは、ブラウザのウィンドウ上部にあるタイトルバー、タブバーに表示されます。ブックマークや履歴にもタイトルタグで設定した文言が表示されます。
またタイトルタグは、SEOにも力を発揮すると言われています。タイトルタグの中に検索上位に上がりたいキーワードを入れることで、検索エンジンの検索結果に反映されやすくなるのです。キーワードを上手く含めながら、検索者にもわかりやすくSEOも期待できるホームページの説明となる一文を書くようにしましょう。ただし、キーワードや説明を入れこみすぎてタイトルが長くなりすぎると、何のホームページなのか逆にわかりづらくならなってしまいますので注意しましょう。

＜例＞英会話教室のホームページの場合（検索上位に上がりたいキーワード : 英語, 滋賀, 英会話） 上記よりも下記の方がベターです。
△　サトウ英会話教室
○　滋賀で英語を学ぶならサトウ英会話教室

まとめ

Webデザインで使用する基本的なパーツの中でも、特に最初に設定しておきたいものを挙げてみましたがいかがでしたでしょうか？
これら基本パーツのタグのスタイルがしっかり設定できていれば、Drupal（CMS）でサイトを制作した時も大変便利なんです！…というのも、基本パーツさえしっかり設定できていれば、あまりWebに詳しくない方がページを編集する場合も自動的に予め設定されたデザインが反映されますので、プロが作ったページと変わらないような見栄えのするページを作成することができます。 これまでに弊社が制作させていただいたホームページの中にも、予め弊社で基本パーツのデザイン・設定を行いお客様に納品し、その後のページ制作はすべてお客様側で行われているという例もたくさんあります。 また、こういった基本パーツのデザインをする際に気をつけたいのがWebサイト全体としてのバランスです。パーツ単体では美しく見えていても、実際にページに反映させて、他のパーツと並べた時に美しくまとまりがあるか、役割をきちんと果たせているかという確認を忘れないようにしましょう。