ウェブサイト作りに見た目は重要！
ウェブサイトを作るのだったら、見た目って大事ですよね。
まあ、ウェブサイトの内容にもよりますが、
訪問者がどんな風に見ているのかをわかった方が
いいですよね。
ウェブサイトの内容によって、訪問者のターゲット
が当然変わります。
男性向けだったり、女性向けなどや
年代も10代から60代以降まで様々です。
そのターゲットにウェブサイトのデザインを合わせたほうが
最後まで読んでいただけます。
そのウェブサイトを訪れたときのぱっと見、わずか数秒で
判断するんですよ。
たった数秒ですよ！
もし関心を持てなかったら、
すぐ閉じたり、他のサイトを探したりしてしまいます。
実際にこのサイトでここまで読んでみてどうですか。
デザインだけでなく内容も関係しますが、
興味のある内容だと続けて読んでいただいているだろうし、
そうでなければ当然この文章は読んでないでしょうね。
だからこそデザイン、読みやすさも
訪問者に読んでもらうためには重要です。
デザインが良くて読みやすかったら、
たとえ文章が上手くなくても、もしかしたら
読み進めていくかもしれません。
読みやすさのポイントとして、
文字の大きさや文字修飾なども関係します。
また、訪問者が読みやすくするためには
読みやすいレイアウトや画像・動画などを入れたり
いろいろな工夫が必要だと思います。
読みやすくするための工夫
ウェブサイトの記事を書くとき、
同じ色の文字をただ単に羅列していくだけでは、
なかなか読みにくいというか、
読んでいて何が重要かわからなくなりますよね。
たとえ、文字数や改行の工夫をしても、
何を強調したいのか、どこにポイントがあるのか、
分かりにくくなる恐れがあります。
メルマガは色を付けることができないので
どうしようもありませんが・・・。
そこで、いろいろ工夫をしてみます。
文字の色を変えるだけでなく、
区切りを入れたり、段落分けしたり。
あとは文字修飾やフォントの大きさ変更などが
やりたいですが、簡単に出来たらいいですよね。
そのちょっとした工夫次第で、更に読みやすくなり、
何を言いたいのかが分かりやすくなります。
そこで、これから簡単なHTMLを紹介します。
例としては、
一部の文字を赤にしたり、
赤文字
<span style="color:red">赤文字</span>文字のバックの色を黄色にしたり、
背景色黄色
<span style="background-color: yellow;">背景色黄色</span>文字を太くしたり
太文字
<strong>太文字</strong>などの簡単でより効果的な文字修飾ができます。
HTMLタグ とは
すぐにでも紹介したいのですが、
その前に、HTMLの書式について。
HTMLの入力は半角英数字で、
大文字と小文字の区別はありません。
基本のHTMLタグ「<>」の括弧でくくり、
開始タグと終了タグを使用します。
例：開始タグ<div>、終了タグ</div>
HTMLタグの開始タグと終了タグ
まず、HTMLタグとは「<>」の括弧でくくったものです。
HTMLタグを使うことで色々な機能や意味付けを付けています。
HTMLタグには大きく2種類あります。
1つは「開始タグ」と「終了タグ」があるHTMLタグです。
もう1つは、開始タグのみで終了タグがないものです。
上記例にある通り、
開始タグは <div> のように、
「<」と「>」とで囲みます。
終了タグは、</div> のように、 タグ名の前にスラッシュ(/)をつけた「</」と「>」とで囲みます。
複数のタグを使用する場合、
開始タグと終了タグを入れ子にします。
例：<div>と<span>を使用
○正解<div><span></span></div>
×間違い<div><span></div></span>
開始タグしかなく、終了タグがないものは、
<br>や<hr>などです。
例として、前回例示したソースで調べると
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>ウェブページタイトル</title>
</head>
<body>
<header>ヘッダー</header>
<main>
メイン内容
<section>
セクション
</section>
</main>
<footer>フッター</footer>
</body>
</html>終了タグがあるHTMLタグは、
html,head,title,body,header,main,section,footer
があります。
終了タグがないHTMLタグは、
meta,link
がありますね。
と書いてもわけ分からなくなりそうでしょうから
終了タグなしもあると覚えておいて下さい。
次回からは具体的なHTMLタグの説明をします。
コメント