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

スクリーンサイズと解像度について理解する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このムービーでは、スクリーンサイズすなわち画面のサイズと、解像度について学んでいきましょう。最新のWebの世界では、デザイナーは「PPI」を意識してデザインするのではなく、実際の表示されるサイズに意識を合わせていく必要があるのです。
講師:
04:55

字幕

このレッスンではスクリーンサイズ すなわち画面のサイズと解像度について 学んでいきましょう Web 用のグラフィック 作成方法を学ぶ前に まずはピクセルと解像度について 知る必要があります 長年 Web デザインをするときには 1インチの中に 72 ピクセルある 「72PPI」という単位で作成するように と言われてきました この「72PPI」という数字が スクリーン向けのデザインをする上での 基本になります しかし 最近発売されている端末には この「72PPI」を超える性能の画面を 搭載しているものも増えています iPhone や iPad に採用されている レティナディスプレイが有名ですし 1インチの中に 300 ピクセルを超える 密度の画面なども存在しています 最新の Web の世界では デザイナーは「PPI」を意識して デザインするのではなく 実際の表示されるサイズに 意識を合わせていく必要があるのです では 今から目の前にある 端末のスクリーンに グラフィックが映った状態の 物理的な大きさについて お話していきましょう このスクリーンを見てください この赤い枠は 1024x768 ピクセルの 画面サイズを表しています その中の白い四角形は 468x60 ピクセルの 広告バナーのサイズを表しています この画面サイズの中では バナーがかなり大きな面積を 占めているように見えます そこでレイヤーの表示を変更して 今度は 1440x900 ピクセルの 画面サイズを表示してみましょう この画面サイズの中では 468x60 ピクセルの広告バナーは 少し小さめに見えます この広告バナー自体のピクセル数は 変わらないのですが 異なる解像度とサイズの画面で 表示すると サイズが少し違って 見えることがわかります さらにもう1種類 見てみましょう レイヤーを切り替えて 今度は 1600x1200 ピクセルの画面内で 先程と同じ広告バナーを見てみます 先程より かなり小さく見えます しかし このバナーも最初から変わらず 実際には 468x60 ピクセルのサイズです どんなに異なる解像度と サイズの画面で表示されても その中に表示される要素の ピクセル数は変化しません 468x60 ピクセルの広告バナーは 常に 468x60 ピクセルの面積を使います ただ 先程から見ているように 画面の解像度に応じて そこに表示される要素が 相対的に大きく見えたり 小さく見えたりするということは おわかりいただけたかと思います では次に リアルな世界の例を ご紹介しましょう 画面を切り替えて ここに2台の同じような ノートパソコンがあります 左側にあるノートパソコンの 画面解像度は 1024x768 に設定されています 右側のノートパソコンの解像度は 1680x1050 に設定されています この2台のマシンの画面には どちらも lynda.com のトップページが 表示されています 右側のマシンの方が 高解像度に設定されているので 画面に表示されているグラフィックは 相対的に小さく見えます そして 左側のマシンの画面よりも より多くの情報を 一度に見ることができます 左側のマシンでは グラフィックが大きく 表示されているように見えますけれども 一度に表示される情報の量は 右側より少ないですよね ここまでスクリーンサイズと 解像度について ご説明をしてきました バナーなどのグラフィックの 見かけ上の大きさは 画面の解像度に大きく左右されます そのグラフィックが どんな解像度の画面でも 文字を判読できるようなサイズで 作成するように心がけてください 作成したデザインを様々な解像度と サイズの画面でチェックして どんな画面でも最高のユーザー体験を してもらえるように心がけてください

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

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

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

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

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

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