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

テキストをテキストのままで使う場合と画像にする場合

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ここではWebサイトの中でテキストを使う場合に、画像化してしまうことの弊害について解説します。
講師:
04:28

字幕

ここではウェブサイトの中で テキストを使う場合に 画像化してしまうことの 弊害について お話ししてみたいと思います 最近では Adobeの タイプキットに 和文書体が追加されたことが 話題になりましたし モリサワの TypeSquare など 和文のウェブフォントは かなり充実してきました しかし つい最近まで 特に見出し等の部分で 個性的な書体を使いたい場合 書体を一度 画像化してから ウェブページに掲載するという 手法がよくとられていました 確かにその手法でも 一見 問題が無いように 美しく見えていた場合もありますが 実はテキストを画像化してしまうことに いくつか弊害があります 今 画面に映っているテキストは どちらも同じように 見えることと思います しかし 上のテキストは テキストのまま置いてあるのに対し 下のテキストは一度 PNG データに描き出したものを 配置してある状態です 1つ目の問題は テキストのサイズを 変更したい時の問題です この1行目のテキスト テキストのままのテキストは サイズを変更したい時に このように大きくしても エッジの部分の美しさは変わりません それに対して下の画像化したテキスト こちらを拡大していきますと この様にエッジの部分に ピクセルの荒れた ギザギザになってしまった部分が 見えてきます この様にテキストを ビットマップのデータにしてしまうと 拡大縮小したい時に きちんと対応が出来なくなります 2つ目の問題は 内容を変更したい時です ウェブページの中で文章を テキストのままで扱っている場合は 変更点があった時に html の中で その文字を書き換えるだけで 対応が出来ます 例えば この様に打ち変えることが出来ます しかし 下の画像化したテキスト これを例えばダブルクリックしても 変更することはできませんし もう画像として 固定されてしまっているので 内容を書き換えることが出来ません もし ウェブサイトに掲載している この画像化したテキストを 内容変更したい場合は 手元のグラフィックソフトで書き換えて 更にそれをサーバーに アップロードする必要があります 特に頻繁に更新するようなサイトでは この様な作業は非常に面倒くさくて 手間がかかるものです 3つ目の問題は 画像化したテキストを 選択してコピーすることが出来ない ということです 特に重要なフレーズや住所など ウェブサイトからテキストを コピー&ペーストして利用したい というケースもよくあるかと思います この1行目のテキストは この様に選択をして コピーをして ペーストすることが出来ます しかしこの下の方の画像化したテキストは 文章としてコピー&ペースト することはできません さらに SEO の観点からも 問題があります テキストを画像化してしまった後に フォルトテキストなどを 入れていない場合は 検索エンジンから評価される内容が ゼロになってしまいます どんな文字が入っているか 検索エンジンには伝わりませんので SEO の効果が無くなってしまいます 以上のような観点から テキストを画像にすることは できる限り避けて テキストはテキストのままで 使うように心がけましょう また ユーザーの PC にない フォントでも 表示ができるウェブフォントの利用も ぜひ検討してみてください 和文書体では ひらがなカタカナ漢字を合わせた 文字の数がとても多いので 読み込まれるフォントデータが 重くなってしまう という欠点もあります その面も考慮して どのようなフォントを利用するかを 検討してみて下さい 以上 ウェブサイトで テキストをテキストとして扱うこと もしくはテキストを画像として 変換してしまうことについて 解説してきました

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

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

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

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

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

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