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

タイポグラフィーのルールについて研究する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webサイト上で情報を伝えるために最も重要な手段であるタイポグラフィー、すなわち文字について、考えます。
講師:
04:50

字幕

ここではウェブサイト上で 情報を伝えるために 最も重要な手段である タイポグラフィ すなわち 文字について 考えていきたいと思います 読みやすく情報が伝わりやすい デザインをするためには いくつかの文字に関する ルールを知っておくと 非常に作業が進みやすいでしょう では 1つずつ見て行ってみましょう ルールその1は 読みやすさは創造性よりも重要 ということです 最近は和文書体でも ウェブフォントを活用できる 環境が整ってきましたので 他のサイトとは違う 個性的なフォントを 試したい方も いらっしゃることと思います 細部まで凝ったデザインを作りたい場合 ベーシックな書体よりも 奇抜で面白い書体を 使いたくなるお気持ちも よく分かります とはいえ ウェブサイトの目的の中で 最も重要なことは 情報を分かりやすく正確に 伝えるということです そのためには可読性 つまり文字の読みやすさに 気を配る必要があります 必ずしもヒラギノ角ゴシック もしくはメイリオなどに 固執する必要はありませんが 特に本文の書体は 読みやすさという観点から セレクトした方が良いでしょう では ルール2に移りましょう 文字のサイズも重要です どんな画面サイズの端末であっても きちんと読める文字サイズに 設定しておくことは 必要最低限のルールです しかし 画面の中から外に向かって 叫んでいる様に感じるほど 大きな文字サイズにする 必要はありません 一般的に本文の文字サイズは 12~16ピクセルに 設定することが多いでしょう 最近は少し大きめの本文 16ピクセルぐらいのサイズに 設定するサイトが 増えているように思えます では ルールその3です 本文と見出しのジャンプ率を 考慮しましょう 本文に対して見出しの文字サイズが どれくらいの比率で 大きく設定されているかということを 「ジャンプ率」という言葉で 表すことがあります ジャンプ率が高いほど 見出しは目立ち ページ全体が 活気のある雰囲気になります 逆にジャンプ率が低い場合は 落ち着いた印象になります 1つのページの中で 大見出し 中見出し 小見出し そして本文 それらの階層構造が 視覚的に明確になる 文字サイズの違いがあった方が 情報が整理された印象になります 1番大きな見出しと 本文の文字サイズを先に決めて 中間の見出しの文字サイズは その間の適切なサイズにしていくと 上手く作業を 進めることができるでしょう では ルールその4です 重要な部分に 強調をすることが必要です ページの中で 非常に重要な単語や情報に ユーザーの注意をひくために 太字や斜体などを使って 強調することがよくあります また マーカーの様な 背景色を設定するサイトも よく見られます 文字の下に下線を 使う方もいらっしゃいますが 下線の付いたテキストは リンクと混同される場合が ありますので あまり使用しない方が良いでしょう 強調のためのスタイルは サイト全体で統一しておいて CSS を使うことで 繰り返し簡単に利用できるように しておくと便利です では 最後の ルール5です 余白の利用について ページ内の要素を強調したい時 赤色にしたり 光らせたり といった方法ではなく もっとエレガントに美しく 強調することが出来ます それは 余白を活用することです 強調したいフレーズの周りに 充分な余白を取ることで ユーザーの視線を 読ませたい情報に対して 自然と集めることが出来ます また 最近のデザインのトレンドは よりシンプルでクリーンなものに なってきています シンプル&クリーンな デザインをしたい場合 こういった余白の利用は とても重要な手段です 以上 ウェブサイトのデザインで 文字を利用する際の 最も基本的なポイントについて お伝えしてきました ウェブサイトの目的は ユーザーに情報を伝えることである ということを常に念頭に置いて 書体の選択 サイズの設定を 進めていってください

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

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

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

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

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

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