Illustratorを使ったWebデザインのテクニック

和文の書体指定について知る

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、様々な閲覧環境でもなるべく破綻がおきないような、Webサイトでの和文書体指定について、考えていきたいと思います。
講師:
05:50

字幕

このレッスンでは 様々な閲覧環境でも なるべく破たんが起きないような Web サイトでの和文書体指定について 考えていきたいと思います 英語などの欧文の書体指定と違って 日本語の書体の指定は少し厄介です ウェブサイトの閲覧に 想定される端末のOSは デスクトップマシンであれば Windows とMac OS モバイルであれば Android と iOS が メインになってくるかと思いますが それらすべての環境に 共通されてインストールされた 和文書体 日本語用の書体 というのは 今のところありません そこで 異なるOSで閲覧されても 出来るだけ印象が近くなるようにしよう という考え方で 書体を指定していく必要があります また 書体に関する知識で 知っておきたいのが 明朝体 ゴシック体 等幅書体 という種類分けです 明朝体は毛筆で書いた 筆のウロコや払いなど こういった部分をデザイン化した 伝統な書体で いかにも和風な雰囲気ですとか 改まって公的な印象を与える書体です ゴシック体は文字を構成する線が ほとんど等幅で飾りがあまりなく モダンですっきりした印象を与えます そして 等幅書体 monospace とも 言われますけれども 文字と文字の横幅が 全て同じ幅で作られていますので プログラムのソースコードなどを 表示する際に 読みやすいということで よく使われています そして もう1つ 和文書体の選択の常識 として知っておきたいのが 半角英数字だけには 欧文の書体を指定する方が良い と言うことです 和文書体の半角英数字には 無理に日本語の文字に合わせた 独特のクセがあることがあるので デザインに精通した方々は あまり利用しない傾向にあります では どうするのかと言うと CSS の指定の中で 先に欧文書体を指定して 後から和文書体を指定する という方法を使います CSS の中で先に指定された書体が システムの中にあれば それが利用され 無ければ 次に指定された書体が適用される というルールを応用するからです 今 見ていただいている文章の例で言うと こういった外来語に使うような 欧文の文字 もしくは 英数字の部分に 欧文専用書体を指定して それ以外の部分 日本語の ところには和文書体が適用される という考え方になります この辺りになると Illustrator の 操作方法の範囲を超えて コーディングや CSS の知識が 必要になってくるお話ですけれども 是非 基礎知識として知っておいてください では実際に 日本語のWeb サイト向けに 書体を指定する時の 例をご紹介していきましょう まずはゴシック体の例です これは CSS の記述を抜き出して 書いてありますけれども 先ほどもお話ししたように 一番最初に 欧文書体を指定してしまいます ゴシック体であれば Verdana ですとか Arial といった書体を お好みで一番最初に記述します 次にMac OS Xの Mavericks ですとか Windows 8.1 に 搭載されている 游ゴシック と言う書体を指定します その次に Mac OS でよく使われている Hiragino Kaku Gothic Pro そして最後に Windows によく搭載されている Meiryo を指定します 一番最後の sans-serif というのは 今までのどの書体もなかった場合 serif の無い 飾りのない書体を 使ってくださいね、という指定です 明朝体の場合ですと まず 一番最初に Times New Roman などの serif が付いている 欧文書体を指定します その後 やはり Mac OS X Mavericks や Windows 8.1 などに 搭載されている 游明朝 そしてその後 Mac OS で 一般的に利用されているー Hiragino Mincho Pro 最後に Meiryo そのどれも指定されていなかったら serif 飾りのついた書体を使ってくださいね という指定になります 一番最後に 等幅書体についても 見ていきましょう かつてMac OS でよく使われていた Osaka-mono Osaka という書体の 等幅の書体がありますけれども これがもし使える場合は 指定をしておきたいと思います そしてMS Gothic 最後にその2つに 当てはまらない場合は monospace 等幅の書体を使ってください という指定になります この等幅の書体は 繰り返しになりますけれども よくプログラムのソースコードなどを Web ページに掲載する時に 使われることが多いと思います さて このレッスンでお話しした知識は Illustrator 内部での作業ではなく コーディングする際の CSS の指定に 関わることではありますが Web デザイナーとしては 必ず知っておくべきことです 出来ればご自分でテストの html と CSS を作成して 様々な端末でどのように見えるのか 体験しておくと とても参考になるでしょう

Illustratorを使ったWebデザインのテクニック

このコースではIllustratorを使ったWebデザインの方法を学びます。IllustratorをWebデザイン用の設定に変更するところから始め、各種端末向けのドキュメントやユーザーインターフェイスの作成ができるようになるまで順を追って説明します。このコースを見れば、整理されてエレガントなIllustratorドキュメントが制作できるようになるでしょう。

7時間03分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。