制作講座.初心者のためのネットショップ開業総合支援講座 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ＨＴＭＬ基礎 | フォント基礎 | カラー基礎 | 画像基礎 | 文章基礎 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ブログ制作 | メルマガ制作 | 2次元コード | リンク制作 | 携帯版制作 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
大別するとフォントの形式はTrueTypeとOpenType、そしてPostscriptの3つのタイプがありますが、詳しくはABOUT FONTや和文フォント大図鑑などをご参照ください。日本語の表示は等幅フォント、欧文はプロポーショナルフォントが基本です。 文字サイズをピクセル単位で指定した場合は絶対値指定になりますので、OSやブラウザの環境に関係なく、同一サイズで表示できます。通常はブラウザメニューの「文字のサイズ」で変更できませんが、ブラウザのIE7は絶対値指定のフォントサイズや画像を拡大縮小するズーム機能があります。 ビットマップフォント主に画面表示に使われるフォントで、画面の点(ドット)を塗り潰して文字を表示します。携帯電話や電子辞書の文字を拡大表示した場合や印刷したときにジャギーの目立つ欠点がありますが、印刷は200dpi程度以上であれば、目立たないと言われます。 アウトラインフォント文字の輪郭を図形データとして保存するので、拡大や印刷もジャギーのない滑らかな字が表現できます。 PostscriptフォントMacユーザーのデザイナーや商業印刷物、DTPなどに使われます。Wimdowsのフォントタイプ表示可能なフォントはマイコンピューター\ローカルディスク(C)\WINDOWS\Fontsに格納されています。
プロポーショナルフォントアルファベットの「i」や「l」は幅が狭く「m」や「w」は幅が広くなっています。これらの文字を同じ間隔で表示したり、印刷すると不自然に見える場合があるため、自動的に幅の狭い文字は文字間隔を狭く、幅の広い文字は文字間隔を広くします。 フォント名にPが付くこのフォントは横書きした場合、縦方向は文字が揃わず1行の文字数が変わります。一般にこの方が自然で読みやすくなりますが、縦方向に文字を揃えることはできません。 等幅フォント等幅フォントは文字幅と無関係に同じ文字間隔で表示するので、横書であっても縦方向に文字が揃えられる利点があります。 文字と記号でイラストを描くアスキーアート(AA)の場合は文字幅が一定でないとズレが生じ、何を描いているのか判別できない場合があるので、メールは等幅フォントで作成するのが原則です。
パソコン表示にデザインされたフォントは2バイトの和文フォントと1バイトの欧文フォントがあります。基本的に和文が全角サイズで表示され、欧文アルファベットや数字は半角サイズで表示されます。 これらは次のようなカテゴリーに大別され、環境に応じて近似のフォントが自動的に表示されますが、次のような場合は意図したフォントが表示されないことがあります。
数字の「1」、英小文字のエル「l」、英大文字のアイ「I」などは判別に迷うことがあります。このような文字を正確に伝える必要がある場合は飾りのある明朝系のフォントを使用します。【例】1,l,I
Win環境の表示例
IEの表示文字は固定的な絶対値や可変的な相対値でサイズ指定する方法があります。相対値指定の場合は閲覧者がブラウザとマウスの操作で文字のサイズ変更が可能ですが、IE以外のブラウザは一般的に絶対値指定の効果がありません。
IE7の場合は画面右下の「拡大レベルの変更」ボタンで選択、又はCtrlキーに＋(-)マークキーを押すことで、文字サイズの指定は無視され、10%単位の拡大縮小ができます。 文字サイズの可変はアクセシビリティの一つとして閲覧者にやさしいサイトだと言われますが、一般的に規定値のフォントサイズが最も読みやすいとされます。 絶対値指定例
以上の他、絶対値指定にはcm、mm、pc指定などがありますが、一般的ではありません。 相対値指定例
以上の他に相対値指定にex指定などがありますが、一般的ではありません。絶対値指定のページをブラウザ操作でサイズ変更した場合は閲覧者の環境によって文字が小さ過ぎたり、大き過ぎてサイトデザインが崩れるなどの弊害があります。 そのため、文字サイズの違いが閲覧者にどのように表示されるかを事前にチェックする必要があります。お店の方針でデザイン優先で作成する場合があるかと思いますが、小さいサイズは極力避け、既定値サイズの作成をお奨めします。
フォントを使って文章を表現する場合、その内容や用途によって使うフォントが決まるので、優しさや柔らかさのを表現には明朝体、力強さや確かさを表現するならゴシック体と言うように使用する字体のイメージを考える必要があります。 また、見やすさと読みやすさは違うことを認識しておく必要があります。視認性の高いフォントは太く、正方形に近いポップ系が代表的ですが、通読性の高いフォントは筆字に近く、文字ごとの幅が異なる明朝系のタイプが多いようです。
ただし、多用は統一感が失われて読みにくいページになるので注意が必要です。フリーフォントの情報サイトであるフリーフォント最前線は多くの配布サイトを紹介してます。 イメージに似合うフリーフォントは画像化や印刷物での活用をお奨めします。例えば、女性が運営するお店は女性の手書き風文字を印刷物で利用するのが効果的です。(作成例) オリジナルフリーフォント
一般の特殊文字はIMEパッドの文字一覧から検索できますが、絵文字の種類はFonTableにも掲載されています。この文字は拡大しても画像でない軽量テキストなので、変更が簡単で表示も速い性質がありますが、絵文字の使用に余りサイズを小さくすると潰れてしまうため、ワンポイントでの使用が効果的です。 特殊文字
Wingdings属性3種類のWingdingsがあり数多くの絵文字が表現できます。
Webdings属性
Symbol属性
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
