構築講座.ネット通販の構築と運営に役立つ初心者支援講座 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| HTML基礎 | 字体基礎 | 動画基礎 | 画像基礎 | 文章基礎 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ブログ基礎 | メルマガ基礎 | 2次元コード | HTML小技 | 携帯版制作 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
大別すると字体の形式はTrueTypeとOpenType、そしてPostscriptの3つのタイプがありますが、詳しくはABOUT FONTや和文フォント大図鑑などをご参照ください。日本語の表示は等幅フォント、欧文はプロポーショナルフォントが基本です。 ビットマップフォント主に画面表示に使われるフォントで、画面の点を塗り潰して文字を表示します。携帯電話や電子辞書の文字を拡大表示した場合や印刷したときにジャギーの目立つ欠点がありますが、印刷は200dpi程度以上であれば、目立たないと言われます。 アウトラインフォント文字の輪郭を図形データとして保存するので、拡大や印刷もジャギーのない滑らかな字が表現できます。 PostscriptフォントMacユーザーのデザイナーや商業印刷物、DTPなどに使われます。Wimdowsのフォントタイプ表示可能なフォントはマイコンピューター\ローカルディスク(C)\WINDOWS\Fontsに格納されていますが、格納されていないと文字指定しても表示されません。
プロポーショナルフォントアルファベットの「i」や「l」は幅が狭く「m」や「w」は幅が広くなっています。これらの文字を同じ間隔で表示したり、印刷すると不自然に見える場合があるため、自動的に幅の狭い文字は文字間隔を狭く、幅の広い文字は文字間隔を広くします。 フォント名にPが付くこのフォントは横書きした場合、縦方向は文字が揃わず1行の文字数が変わります。一般にこの方が自然で読みやすくなりますが、縦方向に文字を揃えることはできません。 等幅フォント等幅フォントは文字幅と無関係に同じ文字間隔で表示するので、横書であっても縦方向に文字が揃えられる利点があります。 文字と記号でイラストを描くアスキーアート(AA)の場合は文字幅が一定でないとズレが生じ、何を描いているのか判別できない場合があるので、メールは等幅フォントで作成するのが原則です。
パソコン表示にデザインされたフォントは2バイトの和文フォントと1バイトの欧文フォントがあります。基本的に和文が全角サイズで表示され、欧文アルファベットや数字は半角サイズで表示されます。 これらは次のようなカテゴリーに大別され、環境に応じて近似のフォントが自動的に表示されますが、次のような場合は意図したフォントが表示されないことがあります。
数字の「1」、英小文字のエル「l」、英大文字のアイ「I」などは判別に迷うことがあります。このような文字を正確に伝える必要がある場合は飾りのある明朝系のフォントを使用します。【例】1,l,I
Win環境の表示例
文字のサイズ指定は画面解像度に対して相対的な単位と絶対的な単位とがあります。前者はpxやem、exなどがあり、後者はinやcm、mm、pt、pcなどがあります。 例えば、文字サイズをpt単位で指定した場合は絶対値指定になるので、OSやブラウザの環境に関係なく、同一サイズで表示できます。 通常はブラウザメニューの「文字のサイズ」で変更できませんが、ブラウザのIE7以降は絶対値指定のフォントサイズや画像の拡大レベル変更機能があります。
IE7以降は画面右下の「拡大レベルの変更」ボタンで選択、又はCtrlキーに＋(-)マークキーを押すことで、文字サイズの指定は無視され、25%単位で拡縮できます。 文字サイズの可変はアクセシビリティの一つとして閲覧者にやさしいサイトだと言われますが、通常は本サイトが適用するサイズ指定をしない12pt又は16pxに相当する規定値サイズが最も読みやすいとされます。 絶対単位の指定例
相対単位の指定例
絶対単位のページをブラウザで表示した場合は閲覧者の環境によって文字が小さ過ぎたり、大き過ぎてサイトデザインが崩れるなどの弊害があります。ブラウザの種類を問わず、指定しないフォントサイズが閲覧者にとって最も読みやすくなっています。 そのため、文字サイズの違いが閲覧者にどのように表示されるかを事前にチェックする必要があります。お店の方針でレイアウト優先で作成する場合があるかと思いますが、小さいサイズは極力避け、既定値での作成をお奨めします。
フォントを使って文章を表現する場合、その内容や用途によって使うフォントが決まるので、優しさや柔らかさのを表現には明朝体、力強さや確かさを表現するならゴシック体と言うように使用する字体のイメージを考える必要があります。 また、見やすさと読みやすさは違うことを認識しておく必要があります。視認性の高いフォントは太く、正方形に近いポップ系が代表的ですが、通読性の高いフォントは筆字に近く、文字ごとの幅が異なる明朝系のタイプが多いようです。
ただし、多用は統一感が失われ読みにくいページになるので注意が必要です。フリーフォントの情報サイトであるフリーフォント最前線は多くの配布サイトを紹介してます。 イメージに似合うフリーフォントは画像化や印刷物での活用をお奨めします。例えば、女性が運営するお店は女性の手書き風文字を印刷物で利用するのが効果的です。(作成例) オリジナルフリーフォント
特殊文字はIMEパッドの文字一覧から検索できます。絵文字の種類はFonTableに掲載されていますが、この文字は拡大しても画像でない軽量テキストなので、変更が簡単で表示も速い性質があります。 絵文字を使用する場合にサイズを小さくし過ぎると潰れてしまうため、ワンポイントでの使用が効果的です。 特殊文字
Wingdings属性3種類のWingdingsがあり数多くの絵文字が表現できます。
Webdings属性
Symbol属性
カラーはデザインの中でも重要な要素を占めますが、ここでは色に関する基礎的な知識をご紹介します。人は網膜細胞で光を感じると、その信号が脳に伝えられ、脳がその信号を処理して色を認識します。 一般に人の五感の内、視覚が87%を占めると言われ、更にこの視覚は色が55%、形状は45%の割合で印象が決まるとも言われます。人の識別能力が特に高く、敏感とされる緑系色でさえ、網膜の感度に個人差があり、見え方に差があります。 例えば、高齢者の水晶体が白濁し、黄変化が進んだ場合、黄色と白などの明度差が少ない色の組合わせは明るさが不十分だと高齢者は判別が困難になります。 また、ダークグレーと黒との見分けがつきにくい場合は青紫系の色が判別できるよう背景色と文字色とのコントラストを大きくし、明度差を大きくするのが効果的です。 人の網膜は周囲の明るさにより、色の感度に差があり、薄暗い部屋では同じ照度に調整した赤色や黄色、白色などに対し、青色はより明るく見えます。この現象をプルキンエ効果と言い、商品の見え方にも影響します。 ただし、これがより暗い部屋になると赤色や黄色、白色などの方がよく見えることは言うまでもありません。このように色の感じ方は多種多様な要素が複雑に絡みあって一様ではありませんが、色の属性を理解することで基本的な配色がイメージできます。
色相白から灰・黒までの色を無彩色、それ以外を有彩色と言い、その有彩色の色合いを色相と言い、右回りの環状に赤・橙・黄・黄緑・緑・青緑・青紫・紫・赤紫の順で並べたものを色相環と言います。 このうち、赤から黄の範囲を暖色系、緑から青の範囲を寒色系と呼び、その特性面から前者を膨張色、後者を収縮色と呼ぶこともあります。 色相環で180度に相対する色同士を補色関係にあると言いますが、この配色は強い対比が生じ、どぎつい感があるので、配色面や位置関係の均衡に配慮が必要です。
色相環の120度前後に位置する色は準補色と呼び、この関係の配色は軟らかい対比が生成されます。なお、色相環上の30度前後に位置する色は類似色と呼ばれ、この場合は溶け込むような配色になります。 明度白から黒までのグレースケールを基準とした色の明るさを明度と言いますが、この度合いは白に近づくほど明度が高くなり、逆に黒へ近づくほど明度が低くなります。 例えば、赤に白を混ぜたピンクは元の赤より明るく、赤に黒を混ぜた茶系色は元の赤より暗く、赤の純色と黄色をグレースケールで対比すると赤より黄の方がより明るいグレーに見えます。このように、同一彩度でも色相によって明度が違う場合があります。 彩度色の鮮やかさの度合いを示し、彩度が最高の色を純色と言います。従って、無彩色の彩度はゼロになります。つまり、純色に無彩色を混ぜると鮮やかさが徐々に消えて無彩色に近づき、彩度が低下します。
8ビットカラーの内、WinとMacのシステムパレットに共通する216色は全てのブラウザでも同じ色彩で表現されるため、WEBセーフカラーと呼びます。この色を16進数で表すと赤・緑・青の各指定値が00・33・66・99・cc・ffの6種類の組合せになるので、これらの216色は容易に区別できます。 セーフカラー以外を使用した場合は自動的に近似色に置換され、意図した色にならない場合もあるので、サイトの基本色はセーフカラーの使用が望まれます。通常の背景や文字の色指定はスタイルシートで指定しますが、次の方法でも指定できます。 色名指定<font color="red">指定可能な色は原則16色ですが、それ以外の色でもブラウザによって対応している場合があり、色名は140種類で大文字・小文字の区別なく指定できます。RGB値指定<font color="#ff0000">「#」に続きRed・Green・Blueの順に混色割合を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、和名色や配色の情報量が豊富な原色大辞典もお奨めです。  |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
