どんなサイトでも簡単にかっこよくできるWebデザインの基礎まとめ

キーボードの画像

  1. ホーム >
  2. その他 >
  3. どんなサイトでも簡単にかっこよくできるWebデザインの基礎まとめ

このサイトは、私がテキストエディタにHTMLとCSSのタグをコピペしたり、手打ちしたりして作っている。現在、簡単にサイト(ブログ)を作れるサービスが色々あるので、「わざわざ何やってるんだ」と思われるかもしれないが、これが意外に面白い。一から自分だけのサイトを作ったという満足感があるし、そして、何よりWebデザインである。

Webデザインの醍醐味は、膨大な数の色や線、フォントなどの中から指定したものがパッと表示されることだ。自分が指定したロゴや画像、アイコンなども見事に表示されるのである。CSSがわかってくると、デザインを簡単に変えられるようになるのでますます楽しくなる。

しかし、Webデザインは奥が深くてわかりにくいのもまた事実である。技術的なことはインターネットの情報で何とかなったとしても、どうすればデザインをかっこよくできるのかがなかなかわからない。

このサイトももちろん例外ではなく、作り始めた頃は左の画像のようなデザインだった。だが、変更を繰り返すうちに右の画像(現在)のようなデザインになった。そして、そうしているうちに私は、簡単にそこそこかっこよくできる、Webデザインの基礎のようなものがわかるようになったのである。

※Webデザインはやり出すと切りがないともいえるので、簡単にそこそこかっこよくできるというのは重要なポイントだ。私も、もうこれ以上Webデザインにこだわるのは止めておこうと思っている。

よって、このサイトの主旨とは外れるが、それらのWebデザインの基礎を、どんなサイトでも簡単にかっこよくできるWebデザインの基礎まとめという形で、このページにまとめておくことにする。手作りのこのサイトでも、簡単にそこそこかっこよくできたので、これ以上の説得力はないのではないか。サイト(ブログ)をやっている人には、少しは役に立つと思う。

※以下に記載することは、あくまでWebデザインがメインである。技術的なことは書き出すと切りがないので、インターネットの情報に任せることにする。

ノートパソコンなどの画像

サイトはセンターに表示させる

これは、現在ほとんどのサイト(ブログ)で実現されているので、記載する必要はないかもしれないが、サイトは、センターに表示させた方が左右の余白のバランスが取れてかっこよく見える。このサイトは自作なので、ここから問題になった。タグ的には俗に言うmargin autoである。

背景の色は薄くする

背景の色は薄くしよう。薄い色が文字が見やすくてしゃれている。基本的には白で良いが、白の場合はもう一色薄い色を入れると、一気に凝って見える。黒などの濃い色にすると、シックでかっこ良いかもしれないが、目がチカチカしたり、文字が見えにくくなったりするので注意が必要。

境界線は1pxの薄い線を引く

境界線は1px(ピクセル)の薄い線を引かないと、境界が強調されすぎてださくなる。

リンクは縦方向に整然と並べる

リンクはできればulタグを使って縦方向に整然と並べよう。横方向に並べると体裁が悪い。

フォントはメイリオかヒラギノ角ゴ

フォントはWindowsの場合はメイリオ(Meiryo)、iOSの場合はヒラギノ角ゴが良い。Windows Vista以降は標準フォントがメイリオである。Windows XP以前は標準フォントがMS Pゴシックだったが、これは野暮ったい。

文字のサイズは16px以上

文字のサイズは、16px以上が見やすくてかっこ良い。以前は12~14pxぐらいが精細さがあって良いと思っていたが、現在はそれだと、見にくくて良くないと思うようになった。

文章は見出しで分ける

文章は見出し(サブタイトル)で分けるだけで、Webデザイン的にもそれなりにかっこよく見える。見出しで分けていないと、読みにくい上にかっこ悪い。

山盛りの英語クッキーの画像

サイトのヘッダーにはロゴを入れる

サイト(ブログ)のヘッダーにはできればロゴを入れよう。これを入れると、サイトのテーマが伝わりやすい上にしゃれて見える。インターネット上には、無料でロゴを作れるサイトがいくつもあるので、作らせてもらうと良い。

ページのヘッダーには画像を入れる

ページ(記事)のヘッダーには是非とも画像を入れよう。画像を入れるだけなら簡単だし、これを入れるだけで一気にかっこよくなる。というか、画像を入れているページが当たり前になっている現状、入れていないと、かっこ悪い以上に手抜きに見える。

グラデーションを使う

グラデーションは、このサイトで使っている一番高度な技術である(笑)。サイトやページのトップのパーツなんかがそう。CSSでやろうとすると、かなり複雑だが、それに見合ったおしゃれ感がある。

フリーのアイコンやリストボタンを使う

フリーのアイコンやリストボタンも、できれば使わせてもらおう。こういう細かいパーツも積み重ねると、しゃれて見えてくるのである。

SNSボタンを使う

SNSボタンも細かいパーツだが、フリーのアイコンやリストボタン同様、使うとしゃれて見えてくる。まあ、これはWordPress(ワードプレス)や無料ブログなどでは、標準で設置されているだろう。このサイトでは、忍者ツールズの忍者おまとめボタンを使わせてもらっている。デザインと設置のしやすさはなかなか良い。

関連するページ


PCで快適!音楽生活 - PCオーディオ・ヘッドホンのレビュー