簡単！ホームページ作成ランクアップ日曜塾

簡単！ホームページ作成ランクアップ日曜塾

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

　「簡単！ホームページ作成ランクアップ日曜塾」　2004/06/26

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

　初級者から中級者の方に、ホームページ作成のテクニックや
　ノウハウを交えながら、ホームページ作成に関する幅広い情報を
　お伝えします。

――――――――――――――――――――――――――――――――


　【今日のコンテンツ内容】


　＜初級者向けコンテンツ＞

　●画像には、代替テキストを必ず入れよう！


　＜中級者向けコンテンツ＞

　●ページに統一感を出すテクニック（1）　〜文字・装飾篇〜


――――――――――――――――――――――――――――――――
　＜初級者向けコンテンツ＞


　●画像には、代替テキストを必ず入れよう！


　ブロードバンド化が進み、ほとんどのホームページで、写真や画像が多く
　使われるようになりました。


　代替テキストとは、画像の代わりになる語句、文章のことです。
　何かの理由で画像が表示されない場合、予め指定しておいたテキストが
　表示されるようになります。

　また、目の不自由な人の中には、音声変換ソフトを利用している人もいます。
　この音声変換ソフトを利用する場合、画像だけでは、情報を得ることが
　できません。
　そこで、代替テキストを設定していると、その代替テキストを音声として
　読み上げてくれるため、写真や画像の内容が把握することができるのです。

　リンク画像に代替テキストがない場合、音声変換ソフトでは、リンク先の
　アドレスを読んでしまいます。リンクボタンなどのリンク画像にも、必ず代替
　テキストを使用しましょう。

　意味のない画像の代替テキストには、空白を入力し、音声変換ソフトで
　読み飛ばすようにするのも、ちょっとした気配りのひとつです。


　IBMのホームページビルダーでの代替テキストの設定は、
　代替テキストを設定する画像を右クリックし、[属性]−[代替テキスト]で
　設定できます。

　この際、ホームページの画像にすべて代替テキストを入れてみましょう。

　
　◆ポイント！

　→ 写真や画像には、必ず「代替テキスト」を設定する。
　→ SEOの対策のひとつとしても有効です。

　※SEOとは、検索エンジンによる検索結果で、自分のWebサイトをできるだけ
　上位に表示させるために行う、ホームページ最適化の手法です。


――――――――――――――――――――――――――――――――
　＜中級者向けコンテンツ＞


　●ページに統一感を出すテクニック（1）　〜文字・装飾篇〜

　ホームページ全体に統一感を出すテクニックは色々あります。
　今日は、簡単にできる「文字・装飾」の方法をご紹介したいと思います。

　ホームページを作成する際に、基本となるものがテキストと呼ばれる、
　文字です。

　文字装飾は、大きさ、アンダーライン、太文字、取り消し線、斜体、色など
　多彩な演出方法があります。

　しかし、文字装飾を同一ページ内で多く使った場合、
　どれが一番重要なのか？何を伝えたいのかがよく分からなくなり、
　ページ全体がまとまりの無いページになりがちです。

　また、文字装飾を必要以上に使った場合、文字が読みづらくなる場合も
　あります。


　そのため、統一感を出したり、ページを読みやすくするためには、
　この文字の種類や装飾を、気を配る必要があります。

　それでは、どのように気をつければいいのかを簡単にまとめてみました。


　（1）　文字のサイズは、最大3種類までを使用する！

　文字のサイズも色々あります。基本的に、最大3種類のみ使用します。

　ホームページビルダーの場合は、
　テキストを範囲指定して[書式]→[サイズ]で、[+0] [-1] [-2]の3つのサイズを
　お薦めします。通常は、[+0]のサイズを使用し、必要に応じて[-1] [-2]の
　サイズを使用するようにします。


　（2）　文字装飾に、アンダーライン、斜体は使用しない！

　文字装飾とは、文字を目立たせるために使う演出のひとつです。
　文字装飾を使用する場合は、[太文字（B）]を使用するようにしましょう。


　アンダーライン、斜体は、あまりお薦めできません。
　なぜなら、アンダーラインというものは、ホームページの場合リンクを意味す
　るため、リンク以外の不用意なアンダーライン装飾は、見る側にとって、
　操作しにくいホームページになってしまいます。

　斜体は、一見文字がカッコ演出できますが、文字によっては、読みづらくなる
　ため、あまり使わないほうがいいです。


　（3）　（1）・（2）で対応できない文字は、文字画像（ロゴ）にする！

　（1）（2）で紹介したサイズ、装飾で対応でき無い場合は、文字画像にします。
　
　ホームページビルダーの場合は、「ウェブアートデザイナー」というソフトが
　付属しているので、このソフトを使うといいと思います。

　その他に、「イラストレーター」や「フォトショップ」、「Fireworks」などといった
　専用のソフトを利用してもいいでしょう。


　◆ポイント！
　→ 文字のサイズは、最大3種類まで。
　→ 文字装飾に、アンダーライン、斜体の使用は控える。
　→ 上記で対応できない場合は、文字画像（ロゴ）にする。


――――――――――――――――――――――――――――――――

　ホームページ作成にかんする色々な疑問・質問を受け付けています。
　お気軽にドシドシお寄せください！
　お寄せいただいた疑問・質問については、メールマガジンでご紹介させて
　いただきます。

　疑問・質問の宛先>> web@a-agent.com

　※件名には、「メルマガ疑問・質問係」と必ず明記してください。


　次回発行は、【7月10日（土）】を予定しています。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　発行者：　荒木真吾　　　E-Mail：　web@a-agent.com　
　Website：　http://www.a-agent.com/web/
――――――――――――――――――――――――――――――――
　◆本メールマガジンの取扱い
　本メールマガジンの内容は、発行者の主観に基づくものです。
　予めご了承ください。　
　なお、本メールマガジンの著作権は、発行者に帰属します。これらの著作物
　を、発行者の承諾を得ずに複製（コピー）、引用、改ざんなどをすると著作権
　法で処罰されます。
　Copyright(C) 2004 Shingo Araki. All rights reserved.
　◆本メールマガジンの購読解除は、下記のページから手続きをお願いします。
　※購読解除　>>　http://www.a-agent.com/web/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Internet/Web Design magazine : Design Wedge

創刊１０年目を迎えるウェブデザインの専門メールマガジン。海外のウェブサイトレビューをはじめ、モバイルからウェブアプリケーションのデザインまで幅広く扱...

ショップブランド・コム通信

パソコンを買って後悔する前にお読みください。シンプル・高性能・格安なＰＣショップのオリジナルブランドＰＣに関する最新ニュースの一覧。

GNB NEWS

フリーCGI配布サイト『GNB』の更新ニュースメルマガです。

しんたさんのメルマガ

ホームページ作りとホームページを楽しむ事をテーマに、初心者向けタグの説明やパソコン関連の情報、お勧めホームページの紹介など、いろいろな話題をお届しま...

デイリーWebテク

Webデザイン／Webサイト構築に役立つサイト情報やWeb関連のニュースを（ほぼ）デイリーでお届け。CSS、Web2.0、Ajax、Google、F...

おすすめカードローン！

オリックスＶＩＰローンカードなら

<<年率5.9％〜15.0％、利用可能枠最高500万円>>
ゆとりのカードローンです。
お申込みはこちら⇒

melma!協賛企業