字体の種類

大別すると字体の形式はTrueTypeとOpenType、そしてPostscriptの3つのタイプがありますが、詳しくはABOUT FONT和文フォント大図鑑などをご参照ください。日本語の表示は等幅フォント、欧文はプロポーショナルフォントが基本です。

ビットマップフォント

主に画面表示に使われるフォントで、画面のを塗り潰して文字を表示します。携帯電話や電子辞書の文字を拡大表示した場合や印刷したときにジャギーの目立つ欠点がありますが、印刷は200dpi程度以上であれば、目立たないと言われます。

アウトラインフォント

文字の輪郭を図形データとして保存するので、拡大や印刷もジャギーのない滑らかな字が表現できます。

Postscriptフォント

Macユーザーのデザイナーや商業印刷物、DTPなどに使われます。

Wimdowsのフォントタイプ

表示可能なフォントはマイコンピューター\ローカルディスク(C)\WINDOWS\Fontsに格納されていますが、格納されていないと文字指定しても表示されません。

タイプ アイコン 拡張子 特 徴
TrueType True Type Font .ttf Winで一般的に使われるフォント
True Type Font .ttc 複数のTrue Typeを含むフォント
OpenType Open Type Font .ttf/.otf MSとMacの共通フォントで、相互間の文字化けや文字ズレなどがなく、Win2000以降とMacOSX以降の標準環境で利用できる
SystemFont System Font .fon Winの画面表示に使用されるフォントで、これを削除すると表示できなくなるので注意が必要です

プロポーショナルフォント

アルファベットの「i」や「l」は幅が狭く「m」や「w」は幅が広くなっています。これらの文字を同じ間隔で表示したり、印刷すると不自然に見える場合があるため、自動的に幅の狭い文字は文字間隔を狭く、幅の広い文字は文字間隔を広くします。
フォント名にPが付くこのフォントは横書きした場合、縦方向は文字が揃わず1行の文字数が変わります。一般にこの方が自然で読みやすくなりますが、縦方向に文字を揃えることはできません。

等幅フォント

等幅フォントは文字幅と無関係に同じ文字間隔で表示するので、横書であっても縦方向に文字が揃えられる利点があります。
文字と記号でイラストを描くアスキーアート(AA)の場合は文字幅が一定でないとズレが生じ、何を描いているのか判別できない場合があるので、メールは等幅フォントで作成するのが原則です。

フォントのデザイン

パソコン表示にデザインされたフォントは2バイトの和文フォントと1バイトの欧文フォントがあります。基本的に和文が全角サイズで表示され、欧文アルファベットや数字は半角サイズで表示されます。
これらは次のようなカテゴリーに大別され、環境に応じて近似のフォントが自動的に表示されますが、次のような場合は意図したフォントが表示されないことがあります。

  • ユーザーのOS環境による場合
    欧文系やMac系、装飾体系のFantasyなどはfont faceタグで定義すると表示する。
  • フォントがない場合
    フォントを新規にインストールするか、又は文字の画像化が必要です。

数字の「1」、英小文字のエル「l」、英大文字のアイ「I」などは判別に迷うことがあります。このような文字を正確に伝える必要がある場合は飾りのある明朝系のフォントを使用します。【例】1,l,I

和文体系 欧文体系 Win体系 Mac体系 共通フォント
等幅明朝系 Serif MS 明朝 リュウミンライト-KL・ヒラギノ明朝 Times New Roman
等幅ゴシック系 Sans-Serif MS ゴシック Osaka・ヒラギノ角ゴ・中ゴシック Arial
プロポーショナル系 Monospace MS Pゴシック
MS P明朝
Osaka-等幅・中ゴシック等幅・リュウミンライト-KL等幅 Courier
筆記系 Cursive Comic Sans MS

Win環境の表示例

<div style="font-family:MS 明朝;">AB12をMS明朝で表示</div>
AB12をMS明朝で表示
  • 指定テキストを変更する<div style="font-family:フォント名;">
    Windowsの標準はゴシック体なので指定は不要です。
  • 「,」で区切って複数フォントを指定する<div style="font-family:フォント名,フォント名;">
    この場合は並べた順で優先表示されます。

フォントのサイズ

文字のサイズ指定は画面解像度に対して相対的な単位と絶対的な単位とがあります。前者はpxemexなどがあり、後者はincmmmptpcなどがあります。
例えば、文字サイズをpt単位で指定した場合は絶対値指定になるので、OSやブラウザの環境に関係なく、同一サイズで表示できます。
通常はブラウザメニューの「文字のサイズ」で変更できませんが、ブラウザのIE7以降は絶対値指定のフォントサイズや画像の拡大レベル変更機能があります。

  • ページ(P)→文字のサイズ(X)を選択する
  • Ctrlキー+マウスのスクロールボタンを前(後)に回転する

IE7以降は画面右下の「拡大レベルの変更」ボタンで選択、又はCtrlキーに+(-)マークキーを押すことで、文字サイズの指定は無視され、25%単位で拡縮できます。

文字サイズの可変はアクセシビリティの一つとして閲覧者にやさしいサイトだと言われますが、通常は本サイトが適用するサイズ指定をしない12pt又は16pxに相当する規定値サイズが最も読みやすいとされます。

絶対単位の指定例

font-size:0.2in CSSで文字サイズを0.5インチに指定する
font-size:12pt CSSで文字サイズを12ポイントに指定する
font-size:1pc CSSで文字サイズを1パイカに指定する
font-size:small CSSでxx-small~xx-largeの7段階とlarger、smallerの相対指定

相対単位の指定例

font-size:16px CSSで表示画面の16ピクセルに指定する
font-size:2ex CSSで表示画面の2エックスに指定する
font-size:120% CSSで直前フォントサイズの120%に指定する
font-size:1.5em CSSで表示画面の1.5emに指定する

絶対単位のページをブラウザで表示した場合は閲覧者の環境によって文字が小さ過ぎたり、大き過ぎてサイトデザインが崩れるなどの弊害があります。ブラウザの種類を問わず、指定しないフォントサイズが閲覧者にとって最も読みやすくなっています。
そのため、文字サイズの違いが閲覧者にどのように表示されるかを事前にチェックする必要があります。お店の方針でレイアウト優先で作成する場合があるかと思いますが、小さいサイズは極力避け、既定値での作成をお奨めします。

フォントのイメージ

フォントを使って文章を表現する場合、その内容や用途によって使うフォントが決まるので、優しさや柔らかさのを表現には明朝体、力強さや確かさを表現するならゴシック体と言うように使用する字体のイメージを考える必要があります。
また、見やすさと読みやすさは違うことを認識しておく必要があります。視認性の高いフォントは太く、正方形に近いポップ系が代表的ですが、通読性の高いフォントは筆字に近く、文字ごとの幅が異なる明朝系のタイプが多いようです。

太さ・形状 種類 イメージ 用途
文字の太さ 細い 繊細・上品 本文
太い 信頼・力強い 見出し・強調
文字の形状 明朝体 優しい・軽い 一般書籍・雑誌
ゴシック体 安定・明確 パンフレット・カタログ
丸ゴシック体 柔らかい 雑誌・児童用書籍
楷書体 伝統・格式・厳格 挨拶文・名刺

ただし、多用は統一感が失われ読みにくいページになるので注意が必要です。フリーフォントの情報サイトであるフリーフォント最前線は多くの配布サイトを紹介してます。
イメージに似合うフリーフォントは画像化や印刷物での活用をお奨めします。例えば、女性が運営するお店は女性の手書き風文字を印刷物で利用するのが効果的です。(作成例)

オリジナルフリーフォント

フォント名 特徴フォントタイプ
みかちゃんフォント 女性の手書き風文字
あくあフォント かわいい手書き風文字
春夏秋冬 細めの水性ボールペン風文字
ふい字 普通の手書き風文字
モトヤフォント プロのフォントデザイナーが作成

特殊文字・絵文字の表示

特殊文字はIMEパッドの文字一覧から検索できます。絵文字の種類はFonTableに掲載されていますが、この文字は拡大しても画像でない軽量テキストなので、変更が簡単で表示も速い性質があります。
絵文字を使用する場合にサイズを小さくし過ぎると潰れてしまうため、ワンポイントでの使用が効果的です。

特殊文字

「&#***;」のように数字を入れる方法もあります。

絵文字 フォント表示タグ
©
<div style="color:#ff0000;font-size:150%;">&copy;</div>

Wingdings属性

Wingdings、Wingdings 2、Wingdings 3など3種類の絵文字がありますが、Windows標準のこれらのフォントがインストールされていなければ、表示できません。

絵文字 フォント表示タグ
ü
<div style="color:#ff0000;font-size:150%;font-family:Wingdings;">ü</div>

Webdings属性

絵文字 フォント表示タグ
Y
<div style="color:#ff0000;font-size:150%;font-family:Webdings;">Y</div>

Symbol属性

絵文字 フォント表示タグ
<div style="color:#ff0000;font-size:150%;font-family:Symbol;"></div>

カラーの基礎知識

カラーはデザインの中でも重要な要素を占めますが、ここでは色に関する基礎的な知識をご紹介します。人は網膜細胞でを感じると、その信号が脳に伝えられ、脳がその信号を処理して色を認識します。
一般に人の五感の内、視覚が87%を占めると言われ、更にこの視覚は色が55%、形状は45%の割合で印象が決まるとも言われます。人の識別能力が特に高く、敏感とされる緑系色でさえ、網膜の感度に個人差があり、見え方に差があります。
例えば、高齢者の水晶体が白濁し、黄変化が進んだ場合、黄色と白などの明度差が少ない色の組合わせは明るさが不十分だと高齢者は判別が困難になります。
また、ダークグレーと黒との見分けがつきにくい場合は青紫系の色が判別できるよう背景色と文字色とのコントラストを大きくし、明度差を大きくするのが効果的です。
人の網膜は周囲の明るさにより、色の感度に差があり、薄暗い部屋では同じ照度に調整した赤色や黄色、白色などに対し、青色はより明るく見えます。この現象をプルキンエ効果と言い、商品の見え方にも影響します。
ただし、これがより暗い部屋になると赤色や黄色、白色などの方がよく見えることは言うまでもありません。このように色の感じ方は多種多様な要素が複雑に絡みあって一様ではありませんが、色の属性を理解することで基本的な配色がイメージできます。

カラー属性

色相

白から灰・黒までの色を無彩色、それ以外を有彩色と言い、その有彩色の色合いを色相と言い、右回りの環状に赤・橙・黄・黄緑・緑・青緑・青紫・紫・赤紫の順で並べたものを色相環と言います。
このうち、赤から黄の範囲を暖色系、緑から青の範囲を寒色系と呼び、その特性面から前者を膨張色、後者を収縮色と呼ぶこともあります。
色相環で180度に相対する色同士を補色関係にあると言いますが、この配色は強い対比が生じ、どぎつい感があるので、配色面や位置関係の均衡に配慮が必要です。

このような配色は文字列を浮かせたようにみせかける効果があります!

色相環の120度前後に位置する色は準補色と呼び、この関係の配色は軟らかい対比が生成されます。なお、色相環上の30度前後に位置する色は類似色と呼ばれ、この場合は溶け込むような配色になります。

明度

白から黒までのグレースケールを基準とした色の明るさを明度と言いますが、この度合いは白に近づくほど明度が高くなり、逆に黒へ近づくほど明度が低くなります。
例えば、赤に白を混ぜたピンクは元の赤より明るく、赤に黒を混ぜた茶系色は元の赤より暗く、赤の純色と黄色をグレースケールで対比すると赤より黄の方がより明るいグレーに見えます。このように、同一彩度でも色相によって明度が違う場合があります。

彩度

色の鮮やかさの度合いを示し、彩度が最高の色を純色と言います。従って、無彩色の彩度はゼロになります。つまり、純色に無彩色を混ぜると鮮やかさが徐々に消えて無彩色に近づき、彩度が低下します。

WEBセーフカラー

8ビットカラーの内、WinとMacのシステムパレットに共通する216色は全てのブラウザでも同じ色彩で表現されるため、WEBセーフカラーと呼びます。この色を16進数で表すと赤・緑・青の各指定値が00・33・66・99・cc・ffの6種類の組合せになるので、これらの216色は容易に区別できます。
セーフカラー以外を使用した場合は自動的に近似色に置換され、意図した色にならない場合もあるので、サイトの基本色はセーフカラーの使用が望まれます。通常の背景や文字の色指定はスタイルシートで指定しますが、次の方法でも指定できます。

色名指定

指定可能な色は原則16色ですが、それ以外の色でもブラウザによって対応している場合があり、色名は140種類で大文字・小文字の区別なく指定できます。

RGB値指定

「#」に続きRedGreenBlueの順に混色割合を00~ffまでの16進数2桁づつ計6桁のRGB値を順に指定します。赤・緑・青の度合いを10進数で示すと各色0~255までの256階調で表現できます。
RGB値を最大値の255で表す#ffffffが純白色、最小値の0で表す#000000は純黒色、#ff0000は赤のffが最大値、緑及び青が00の最小値なので純赤色になります。

配色イメージ

トップページの配色によっては、コンテンツを閲覧することなく離脱されることがあります。このように第一印象に強い影響力を及ぼす配色はサイトイメージを左右する重要な要素で、自然界の色として人に影響すると考えられる基本色には、次のようなイメージがあります。
特に企業ロゴには、光の三原色である赤(情熱)、青(誠実)、緑(安心)から連想されるイメージと目立ちやすい色としての性格からよく利用される配色として知られています。

  • 火や血をイメージする赤は「活動」と「怒り」を表現します。
  • 海や空をイメージする青は「冷静」と「悲しみ」を表現します。
  • 木や森をイメージする緑は「調和」と「安らぎ」を表現します。
  • 大地や豊穣をイメージする黄色は「躍動」と「幸福感」を表現します。

イメージの統一には、商品や客層に適合する配色の他、各ページとの配色にも調和する必要がありますが、無難な配色は色調や同系色で揃えるのが基本です。
同系色の場合は薄色を背景色、濃色をアイキャッチーやテキストカラーに使用するのが基本です。テレビCMの色使いはサイトの配色に役立ちますので、参考になります。

配色系統 カラーイメージ
暖色 外交的、生命、情熱、行動的などを象徴する。時間の流れを早く感じさせる。
寒色 内向的、理知的、抑制などを象徴する。時間の流れを遅く感じさせる。
濃暗色 彩度や明度が比較的高く、ややくすむ色は自然界に多い色のためアースカラーと言い、重厚、渋み、沈着などを象徴して年齢層の高い男性的なイメージがある。
淡明色 軽薄、優しさ、柔軟、上品さなどを象徴し、安心感があって女性に好まれるが、コントラストの低い配色は弱々しいイメージになって印象度が低下する。なお、純色の明度を高めた淡い色調はパステルカラーと呼ばれる。
モノトーン 無彩色でどんな色とも相性がよく、配色によって印象を変えやすい性質がある。グレー系は銀色のイメージもあって金属、調和、ハイテク、知的などを象徴する。

配色の効果

  • 同化
  • オクラやみかんを詰めるネットの色は中身の色に同化する錯覚が生じることで、より鮮やかに、美味しそうに見せることができます。

  • 補色残像
  • 単色を凝視すると補色が視界にチラつくことがあります。この効果を利用した青色の牛乳パックは補色残像の黄色から濃い牛乳のイメージを連想します。

  • 補色
  • 補色関係の二色は彩度を強調しあい、より鮮やかに見せる効果があります。代表的な例にマグロの赤身に大葉を添えると新鮮さが協調されます。

配色の専門サイトにMariのいろえんぴつやホームページ作成に役立つカラー配色事典Coloring Roomなどがあります。また、WinとMacの共通パレットや指定色から背景と文字の配色が簡単に比較できるSuper Color Chart、和名色や配色の情報量が豊富な原色大辞典もお奨めです。


■平成30年版カレンダー

2018年10月
     
1234567
891011121314
15161718192021
22232425262728
293031  

■サイト内検索

■記事講読ランキング

■統計情報サイト

都道府県別統計
世界経済のネタ帳
■地方情報
地方公共団体情報システム機構
中国地域の中小企業支援施策
■ビジネス支援情報
exBuzzwords
ネット通販の構築支援別館
無料ビジネス相談会
1.対象者
☆起業をお考えの方
☆起業後間もない方
2.場所
広島市立中央図書館
3.開催日
☆毎月第2土曜12:00~17:00
4.1時間以内の予約制
☆先着順5名
5.申込先
中央図書館事業課
☆Tel:082-222-5542

■中小企業ビジネス支援サイト


Copy Protected by Chetan's WP-Copyprotect.