それなりに綺麗に見えるホームページの作り方

お金を出すからには得したい！…損はしたくないインドア派商人です。

関西人のサガとかそんな事とは関係なく、何処の地域の人間であろうと損はしたくないだろうと思います。

「いきなりタイトルと剥離した話を切り出して一体どうしたんだ？」と思われそうですが、実はそうでもないんです。

例えば、お金をかけてホームページを作成したのに見た目の良くないモノが出来上がってきたら、損した気分になりませんか？安かろう悪かろうと言う考え方もありますが、それでもお金を払って頼むんだから、素人目にもよく見える様に作ってよ…と、モヤモヤしませんか？むしろ「このレベルなら自分で作った方がお金かからない分マシだ！」と思ったりしませんか？

…プロのWebデザイナーで素人のお客様にそこまで言われる様な人はあんまり聞きませんが、ホームページに高度な要求もなく掛けるお金もあまりない方なら、自分で作ってしまうのもアリだと思います。

ホームページはHTML・CSSと言った言語で作成しますが、性質上動きの無い言語の為、他の動的プログラムよりも扱いは容易です。そして、コツさえ押さえればそれなりに綺麗に見えるホームページを作る事が可能です。

お金がないけど損したくない人は、それなりに綺麗に見えるホームページの作り方のコツを押さえて得しましょう！

※厳密には、ホームページを作るにはWebサーバーやドメイン・FTP等必要なモノや知識は必要になってきますが、学校の試験勉強よりは覚える量は遥かに少ないので大丈夫です。

それなりに綺麗に見えるホームページの法則

1.色数は3つまで！

例えば、白地にコーポレートカラーの紺・テキストは黒のみ…等、この様に如何にもプロが作った綺麗なホームページを見てみると、使う色は大体絞られています。無数の色が使われているコンテンツはカラー写真のみ。色数を限定する事でページ全体に統一感が生まれます。

2.面を合わせる！

簡単に言うと、要素の並びを合わせる事です。どんなモノだって、ぴったり並んで揃っていると、美しく整理されて見えます。間違ってもガタガタに並べてはいけません。それなりに綺麗に見えるホームページの鉄則です！

3.padding・marginを使って要素内にゆとりを持たせる！

要素内にぎちぎちに詰め込まれたテキストは、見苦しく読みづらいです。CSSのmargin(外側の隙間)やpadding(内側の隙間)を使って隙間を作り、スッキリさせましょう。

4.CSSでテキストを読みやすく調節する！

それなりに綺麗に見えるホームページは、テキストが読みやすい場合が多い。行間がぎちぎちにくっついたテキストは非常に読みにくいです。CSSのline-heightを使って、テキストの行間を調整しましょう。また、文字の大きさも重要です。デフォルトの文字サイズのままではなく、全体のバランスを考えて修正する必要があります。CSSのfont-sizeを利用して、文字の大きさを調節しましょう。

↓試しに作ってみたサンプルがこちらになります（あんまり変わってない…！）

※内容は適当です…

いかがでしょうか？

今までホームページを作ってきて「なんだか素人っぽさが抜けない…」と悩んでいる方の中にも、これらの事が守れていない方がいるのではないでしょうか？それなりに綺麗に見えるホームページの法則は、インターネット上に散見されます。自分がいいと思うホームページのレイアウトや配色等を観察し、自分のホームページに取り入れていけば、センスに自信のない方でもそれなりに綺麗に見えるホームページを作る事が可能です。

Webデザインは、とにかく観察と実践の積み重ねです。いいモノはどんどん研究して、自分のモノにして行って下さいね。

それでは！