HOME>ウェブデザインの基本

kon`s produce webdesign lecture!
<<|ウェブデザインの基本|カラー使い分けフォントをロゴに!>>
   Lレイアウトの基本
   L文章の基本
ウェブデザインの基本



ウェブサイトが良く見えるためにはまず、文字やコンテンツが整然としてまとまっていることが重要です。
これを守っていればまずぐちゃぐちゃになることはないだろうと思えるものを基本として紹介します。


基本@左寄せ!
文章の基本とも言える左寄せ。
HTMLでは左、中央、右寄せがあるが、HTMLを覚えたての時は
中央寄せを多用しがちですよね。
しかし中央寄せは文章の長さに関わらず、各文の真ん中の文字が中央に行くため、非常に見にくい文章になるという欠点があります。
非常に使い方が難しく、慣れるまでは避けたい技術です。

キレイなウェブサイトの文章を見ればわかりますが8割がた左寄せです。
文章の頭が揃い、かつ余分なスペースができにくいので読みやすいのです。

<center></center> 
中央寄せ
同じ文章でも見せ方次第で
読みやすさが違う
<left></left> 左寄せ
同じ文章でも見せ方次第で
読みやすさが違う
<right></right> 右寄せ
同じ文章でも見せ方次第で
読みやすさが違う


基本A段落
これも文章の基本。
作文とかでは段落の変わり目は改行して一マスあけるなどするが、ウェブではこれに加えて
一行空白をいれるなどすると、より見やすくまとまって見えます。

また、ホームページの文章は本などとは違い、読むと大変目が疲れます。
このため、長い行に渡って文章が続いていると読みにくく感じます。
文章中心のサイトでは一文ごとに改行するなどの工夫をすると良いでしょう。
<br> 改行


基本B文字の大きさ
HTMLでの基本の文字の大きさは私達が普段目にする文字(雑誌や新聞)よりジツは
ちょっとだけ大きいんです。
文字の大きさを一段小さくしてみましょう。
サイトデザインがしやすくなり、文章も読みやすくなるはずです

<font size="-1"></font> 文字を一段階小さく


基本C文章の字体
長い文章ではフォントをできるだけ統一しよう。
強調するために重要語句などを斜体や太字にしたいかもしれないが、文章のまとまりがなくなり、見栄えも悪くなることがある。
例えば見出しに使うフォント、文章に使うフォントなどを分けてあらかじめ決めておくと良いでしょう。

<font face="字体"></font> 字体を決定


右は極端な例→(topics)
読みにくい上、スペースがいる。見た目も悪くなりがち。


 さらに文章で使っておいた方がいいテクニックは、
重要な語句に赤色をいれるなどして強調することです。
ユーザーの中には時間がなくて、長い文章を読んでいられない人もいるかもしれない。
強調をつければ重要なところをかいつまんで理解できるので、はるかに使いやすいページになります。
→次へ
プロの技!ウェブデザインの資料集
コンテンツの繋がりはアドレス帳で
全国の求人情報『infoseek キャリア』


分野ごとにコンテンツを分け、アドレス帳風にリンクさせている。
配色はホワイトベースで「インフォシーク」感が出ている。
ただ、大小バナーが多すぎるのか目にちらつく。
画面中央の大バナーはページの可視面積が小さくなるなど損をしている感アリ。
チュートリアルー第11回
ホームページをデザインする!

HTMLもアップロードもやりました。
これであなたはホームページを作って、人々に見せることができるはずです。

今回からはいよいよ「ウェブデザイン」へと入っていきます!

さて、まずは基本的なホームページとして上のようなページを用意しました。(tutorial1)
クリックすると大きく表示されます。

どうでしょう?
このままでも良いのですが、なんだか字が読みにくいし、全体的にまとまりのない感じがします。

そこで左記の「ウェブデザインの基本」をもとに、このページを編集してみることにします。

@まず、このページは全体的に中央に文字が集まる「中央寄せ」になっています。
このため文頭がばらばらで読みにくいんですね、これを「左寄せ」にしましょう。

A次は段落です。
このページでは文章の間がつまっていて、窮屈な印象を与えています。
なので、適度に空白の行を入れる・文ごとに改行するなどして読みやすく見せます。

B文字の大きさを変えます。
読みやすい文字の基本は-1です。全体的に文字をちょっと小さくしましょう。

C字体(フォント)を調整します。
ここで強調すべきは、ページの題名とメニュー文字でしょう。これらの字体を変えてみます。
文章を英数字にすると日本語より豊富なフォントがつかえます。

これらの要素を変えるだけで下のようになります。

前よりおしゃれなデザインになったはずです。
これ以外にも文字の工夫次第でデザインが変わってくる場合があります。
いろいろ試してみましょう。

topics
よくある間違い。
ウェブサイトが良く見えるためにはまず、文字やコンテンツが整然としてまとまっていることが第一だ。これを守っていればまずぐちゃぐちゃになることはないだろうと思えるものを基本として紹介します。
基本@左寄せ
文章の基本とも言える左寄せ。HTMLでは左、中央、右寄せがあるが、HTMLを覚えたての時は中央寄せを多用しがちだ。しかし中央寄せはとりあえず中央に全部固めてしまえという結果になってしまう事が多い、慣れるまでは避けたい技術だ。また中央寄せだと文章の格段が揃わず見た目も悪いし読みにくくなる。基本は左寄せだ。文章の頭が揃い、かつ余分なスペースができにくいので読みやすい
基本A段落
これも文章の基本。作文とかでは段落の変わり目は開業して一マスあけるなどするが、ウェブではこれに加えて一行空白をいれるなどすると、より見やすくまとまって見える
基本B文字の大きさ
HTMLでの基本の文字の大きさは少し大きくなっている。文字の大きさを一段小さくしてみよう。サイトデザインがしやすくなり、文章も読みやすくなる
基本C文章の字体
長い文章ではフォントをできるだけ統一しよう。強調するために重要語句などを斜体や太字、赤字にしたいかもしれないが、文章のまとまりがなくなり、見栄えも悪くなることがある。

HOME>ウェブデザインの基本

kon`sproduce All rights reserved
お問い合わせ





100MB無料ホームページ可愛いサーバロリポップClick Here!