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

グリッドシステムを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Webデザインをする際に非常にポピュラーな考え方の1つである、グリッドシステムを活用した手法についてお話します。
講師:
11:36

字幕

このレッスンでは web デザインをする際に 非常にポピュラーな考え方の1つである グリッドシステムを活用した手法について お話をして行きたいと思います 世の中に数あるグリッドシステムのうち 最も有名な物の1つが960グリッドシステムです ブラウザで960.gs にアクセスすると その概要を見ることができます これは web サイトの横幅を960ピクセルとして それを12個もしくは16個 または24個のグリッドで区切って システマティックにデザインする考え方です しかし最近ではスクリーンの解像度が どんどん上がる傾向にありますので 横幅960ピクセルではすこし小さめに 感じられる場合もあります 実際のこの960グリッドシステムのサイトの 一番上の所に告知版が出ています もしあなたがレスポンシブな グリッドフレームワークが必要であれば Unsemantic.com という後継の レスポンシブなフレームワークを 配布しているサイトにアクセスしてください という告知です このUnsemantic.com を使っても もちろんかまいませんけれども ここでは私がよく使っている非常に有名な フレームワークの1つである Twitter Bootstrap このフレームワークから 最近の web サイトの横幅のトレンドを チェックしてみたいと思います Twitter Bootstrap のサイトでは このボタンからソースを ダウンロードすることができます ソースコードのこの真ん中の部分ですね ソースコードの所からダウンロードすると lessファイルと呼ばれるCSSのメタ言語の ファイルを落としてくることができます そのlessファイルの中身をのぞいてみましょう 今見ていただいているのはTwitter Bootstrap の CSSを生成するための元ファイル メタ言語の less というファイルの中で Variables といういろいろな数値を 指定しているファイルをご覧いただいています この中でサイトの横幅について いくつか指定がしてあります このコンテナーサイズという項目なのですが タブレット用の横幅は720ピクセル+余白 ミディアムサイズのスクリーン デスクトップのスクリーンには 横幅940ピクセル+余白 そして大きなサイズのデスクトップ用の スクリーンでは 横幅1140ピクセル+余白という 指定になっていることが見て取れます 960グリッドシステムよりも やはり この大きなデスクトップのスクリーン用の 横幅が大きくなっているということが お分かりいただけるかと思います では余白がどれくらいの数値で 指定されているかというと すこし上の所に書いてあります この辺りです カラムとカラムの間は 30ピクセルで指定しましょうね ということが書かれています では今回のレッスンでは この Twitter Bootstrap の デフォルトの指定に合わせて 1140の横幅 そして 余白が30ピクセル という指定でデザインをしてみたいと思います Illustrator に移動してみましょう 今ご覧いただいているのは 私がこのレッスンのために作った Twitter Bootstrap のラージスクリーン用の グリッドのテンプレートです 手のひらツールをダブルクリックして 全体表示にしてみます アートボードのサイズは ここまでの他のレッスンでも 何回か触れたサイズですね 1280x2000ピクセルで作ってあります その中に薄い色の赤い帯が 12本入っています Twitter Bootstrap ではデフォルトでは 12個のカラムに区切って デザインする方法を採用していますので それに合わせてみました すこし拡大してみます ガイドがたくさん引かれていますけれども 一番左のガイドから一番右のガイドは さきほどあの less ファイルに書いてあったように 1140ピクセルという横幅にしてあります そしてこの赤い筋と赤い筋 カラム同士の間が 30ピクセルのなるように指定してあります これも先ほど見た数値と同じですね 余白が30ピクセル そして 一番左と一番右だけは 余白の半分の数値が指定されています 15ピクセルずつ左右に余白がついています ここでちょっと計算をしてみましょう 1140から余白が30ピクセルx12個分 とられています 間に11本の余白があって 左右に半分ずつの余白がありますので 30x12 余白の合計は 30x12で360ピクセルです ではそれに対して この赤い色が 付いているカラムの横幅の合計は 1140 ー 360 ということで 答えは780ピクセルになります 赤い部分の合計が780ピクセル さらにそれを12分割していますので 1本のこの赤いカラムの横幅は 65ピクセル という数値です このような考え方でこのテンプレートを 作っておきました ではこのテンプレートを使って どのように カラムをあけてデザインして行くかを すこし試してみたいと思います スペースキーを押しながら 手の平ツールで画面を移動させます 次に塗りを黒で 線は「なし」に しておくのが作業しやすいので そのように設定してください レイヤーパネルを見てみると ガイドと12カラムと書いてあるレイヤーに 動かないようにロックが’かかっています この上のレイヤー3に対して 自分のデザインを作っていきたいと思います 長方形ツールを選んで まずはこの12カラムすべてを使うー デザインを作ってみましょう メニューバーの「表示」から 「ポイントにスナップ」が 指定されていますので 今から描く長方形は このガイドラインに吸着します この様に描くと 外側の15ピクセルの 余白以外の すべての横幅を使ったー 長方形を描くことができます 選択ツールに持ち替えて変形パネルで すこし数値を見て行きましょう 横幅は1140ー30ですので 1110になっています 高さが中途半端な数字に なってしまいましたので ここを100にしておきましょう そして位置も整えておきたいと思います この x と y はアートボードの左上から どのくらいの場所にこの長方形があるか ということを表しています x が横方向 y は縦方向です x この左側からの空きが 85ピクセルであるのは正しいのですけれども y の方 この上の余白が 中途半端な数値になっています ではここを仮に50にしておきましょう ちょうど上から50ピクセルの所に 長方形が移動してきました これで 位置 高さ 横幅ともに きっちりした数字に指定することができました では次に2カラムのデザインを作る場合 もう一度長方形ツールを選んで 今度は6個分のカラムを使って 合計が 2カラムになるような横幅に指定をします この左右はガイドラインに吸着していますので 正確な数値になっています 変形パネルで見てみると 幅が540ピクセルです 高さがまた中途半端な数字になっていますので 仮に150ピクセルにしておきます そして縦方向の位置も 中途半端な数字になっていますので 200にしておきましょう これで正確な位置に この長方形を動かすことができました ではこの長方形を複製してみます 選択ツールを持った状態で キーボードのオプションキー またはAltキーを押しながら右に移動します さらにShift キーを足すことによって 移動方向が水平に制限されます 一番右から2番目のガイドラインに 吸着するところがありますので さきにマウスを放してから キーボードを放します これで2カラムを作ることができました では3カラムです 3カラムは12個のこの赤いカラムを 3分の1に分割すると 4本分の横幅を使うことになります 長方形ツールで4つ分吸着するようにします 横幅を確認すると350ピクセル 高さが また中途半端に なっていますので 150 それから上からの位置 y が また中途半端になっていますので 400にしてみましょう 後はこの長方形を2つ分複製するだけです 選択ツールでキーボートのオプションキー もしくはAltキーを押しながらドラッグ さらにShift キーを足すことで 移動方向を水平方向に制限 一度手を放します もう一度同じことを繰り返します 先にマウスを放してから 後からキーボードを放します この作業で 正確な1カラム 2カラム 3カラムの レイアウトを作成することができました 一度ガイドを非表示にしてみましょう メニューバーの「表示」から「ガイド」 「ガイドを隠す」を選びます このようなレイアウトになっています ここまで Adobe Illustrator を使って グリッドシステムを活用し 正確な数値でレイアウトする方法について お話ししてきました お見せしたサンプルファイルは ダウンロード可能ですので 是非試してみてください

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

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

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

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

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

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