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

図形を使ってレイアウトする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは主に長方形ツールと段組設定という機能を使って、正確なサイズのレイアウトを作成する方法を解説していきます。
講師:
10:15

字幕

このレッスンでは 主に長方形ツールと 段組設定という機能を使って 正確なサイズのレイアウトを 作成する方法を解説していきます 使うファイルは一つ前のレッスンで 作成した 定規を使ってガイドを設定した ファイルです まずアートボードのサイズが 1280x2000 縦のガイドラインの この間の幅が960 pixel アートボードの一番上から 1本目のガイドラインが100 pixel その下に30 pixel 空けて2本目のガイドライン フッターの部分が下から300 pixel その上に30 pixel のマージン用の ガイドラインが用意されています それでは さっそく作業を始めます まずは 塗りを黒 線を「なし」の 状態にしてください 長方形ツールを選んで クリックした後 1280 x 100の高さに指定します OKをクリックします これをアートボードの ちょうど左上に揃えたいと思います コントロールパネルの 「整列」もしくは メニューバーの「ウィンドウ」から 「整列」を選んで 整列パネルを出してください 右下のドロップダウンメニューから 「アートボードに整列」こちらに チェックが付いていることを確認して アートボードの水平方向左と 垂直方向上に それぞれクリックをして揃えます 何もないところをクリックして 一度選択を解除します 整列パネルが邪魔ですので ここにドッキングしておきたいと思います パスファインダーは今使いませんので 閉じておきます 次はフッターを作りましょう また長方形ツールを選択して クリック 幅は1280ですけれども 高さを300にします OKを押します こんどは左と下に揃えたいと思います 選択ツールに持ち替えて 先ほど閉じておいた整列パネル これを左と下に揃えましょう 何もないところをクリックして 選択を解除します この次に 中央のコンテンツの領域を 作っていきたいと思います 先ほどもお話ししたように 2本の縦のガイドラインの間が ちょうど960 pixelで指定してあります そしてこのマージンとマージンの ガイドラインの間が 高さちょうど1540 pixel になっています 長方形ツールを選択してからクリックして 幅960 高さ1540 と指定して OKを押します ズームツールで左上あたりを拡大します 選択ツールを持って ガイドラインにちょうど吸着するところまで 移動した後 手のひらツールをダブルクリックして 全体表示に戻します それではこの次に この中央のコンテンツ部分の長方形を 段組設定という機能を使って 分割していきます 選択ツールに持ち替えて メニューバーの「オブジェクト」から 「パス」 パスの中の「段組設定」を選択してください 段組設定は行と列を指定した数に 分割してくれるための機能です ここでは行数を5 間隔を20 pixel としてみましょう そしてプレビューにチェックを入れます 指定した通り5段の行ができて ちょうど間隔が20 pixel ずつ空いた状態を 簡単に作ることができました まずはこれでOKをクリックします この5つに分かれた領域のうち 一番上はメインの画像を入れるために このまま置いておきたいと思います 2番目から4番目の この3つの長方形を さらに縦に3分割したいと思います 選択ツールで2番目から4番目の 3つの長方形を選んだ後 もう一度メニューバーの「オブジェクト」から 「パス」 「段組設定」を選びます いま3段の長方形を選びましたので 段数の所にはすでに3という数字が 入っています ここで列も 3に増やしましょう そして間隔を こちらも20に指定をします 20に指定すると幅に中途半端な数字が 付いてしまいました 数字を変えて ちょうど良いサイズのところを 探したいと思います 間隔を15 pixel にすると 幅が310 かける3つ という ちょうど良い数字になりましたので まずこれを採用してみましょう プレビューをチェックすると 指定した数字に段組が分かれます OKをクリックします 何もないところをクリックして 選択を解除してください 最後に一番下の この長方形を 2分割してみましょう もう一度選択ツールで選んで メニューバーの「オブジェクト」から 「パス」「段組設定」 列数を2にします 間隔を20にします プレビューをチェックすると ちょうど2つに分割されます OKをクリックします 整列パネルを使わないので 閉じておきます では 一番下の この2つに分割した長方形のうち 左側に文字を流し込んでみましょう まずは文字パネルを開きます ちょうどこの部分 「A」というアイコンが文字パネルです もし文字パネルが表示されていない方は メニューバーの「ウィンドウ」から 「書式」 そしてその下にある「文字」を 選択してください 文字パネルを開いて よく Web サイトで使われるフォント 「ヒラギノ角ゴシックPro」を 指定します ウェイトはW3のままで結構です サイズを14ポイントにしておきます Web 上でよく使われる単位は pixelですけれども 1 pixel は1ポイント (pt) ですので 今はこのポイント (pt) という単位のままで 構いません 次に行送りの数値を 21にします 21は 文字サイズの14ポイントの ちょうど1.5倍に当たります これはCSSでラインハイト (line-height) を 指定するとき 1.5と指定したのと同じ行送りになります ここまで指定をしたら ツールパネルの文字ツールを長押しして エリア内文字ツールを選択してください そしてこの一番下の2つの長方形のうち 左側の長方形の 左上の角のちょっと内側を クリックします クリックをすると 黒い色がなくなって パスだけが残りました 今この長方形のエリアの中に 文字を流し込める状態になっています ここで仮の文章を入れてみましょう 文字が小さすぎるので ズームツールでこのエリアを 拡大しておきます 文字ツールに持ち替えて 1つ入れたダミーのフレーズを コピー&ペーストして増やしていきます このエリアには 文字のサイズを14 pixel 1ポイントは1 pixel ですので 単位は今 pt になっていても構いません 14 pixel そして行送りが21 pixel = ポイント で指定されています この長方形に流し込まれた文字の指定を 実際に Web サイト上で使うのと 同じ指定にしておくと ここから文字サイズですとか 行送りの数値を読み取って CSSを書いていくことができます では 手のひらツールをダブルクリックして 全体表示に戻りましょう そのあと選択ツールを選択して 何もないところをクリック 選択を解除します ここまで 正確なサイズの長方形を 描くことによって あとでHTMLの中で指定するために使える 正確なレイアウトを作成してきました 長方形ツールと段組設定 エリア内文字ツールの機能を使って 作業を進めました 必要な画面数のアートボードで レイアウトを準備しておくと 良いでしょう

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

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

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

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

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

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