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

レスポンシブレイアウト用のアートボードを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
多様な画面サイズの端末に1つのHTMLファイルで対応する「レスポンシブレイアウト」向けのアートボードを作成する方法を解説していきます。
講師:
11:26

字幕

このレッスンでは 多様な画面サイズの端末に 1つのHTMLファイルで対応する 「レスポンシブレイアウト」向けの アートボードを作成する方法を 解説していきます もしあなたが経験豊かな プロのWebデザイナーであろうが 最近 勉強を始めたばかりの方であろうが Webデザインに ご興味をお持ちであれば きっと「レスポンシブレイアウト」 という言葉を お聞きになったことがあるかと思います しかし 念のため この言葉をご存じない方のために 解説をしておきましょう 世の中にある端末を おおまかに分類すると 手の中に収まるスマートフォン 書籍と似たような サイズぐらいのタブレット もしくはデスクや 膝の上で使うPCというように 大体 3種類に分けることができます それぞれの端末に 最適なレイアウトを用意するためには 次のような方法が考えられます ひとつは それぞれの端末に向けた 別々の HTML ファイルを作成して 端末ごとに違うページを見せる方法 もうひとつは 1つの HTML ファイルのレイアウトが CSS メディアクエリという機構によって 端末の画面サイズによって変化する 「レスポンシブレイアウト」という手法です このレッスンでは レスポンシブレイアウト向けに Illustrator の新規ドキュメントを 作成する方法をご説明していきます 1つのドキュメントの中に 3種類のレイアウトを することができる方法です まず最初に メニューバーの 「ファイル」から「新規」を選択します キーボードショートカットで command+N もしくは Ctrl +N で作っても結構です プロファイルの ドロップダウンメニューのところから 「デバイス」を選択します そしてサイズ こちらを 「iPhone 5s」にしておいてください 「モバイルファースト」という言葉を お聞きになったことがあるかもしれませんが まず最初にモバイル用のサイトに 重要な情報をレイアウトして その後 大きな画面サイズ向けに 要素をアレンジしていくことに したいと思います そして「新規オブジェクトを ピクセルグリッドに整合」 こちらにチェックを付けて 新しく描くオブジェクトが ピクセルグリッドにスナップするようにします そして 「OK」 これでまず iPhone 5s のサイズの アートボードができあがりました ここでキーボードのスペースキーを 押してみてください スペースキーを押すと マウスカーソルが手のひらの形に変わって 一時的にスペースキーを押している間だけ 手のひらツールに変化します 手のひらツールは このように ずいずいっと動かすと 画面を移動させることができます 今作った iPhone 5s のアートボードを 左側に寄せて 次にアートボードのパネルを 開いてください アートボードパネルの下に アイコンがいくつか並んでいますけれども 右から2番目 この「新規アートボード」 こちらのアイコンをクリックして もうひとつ新たにアートボードを作ります ここで作られるアートボードは 先程作ったアートボードの大きさを 複製して作られます では次に 今新しくできた このアートボードに このサイズを 変更していきたいと思います アートボードパネルの 一番右側の このアイコン アートボード2の右側のアイコンを ダブルクリックしてください アートボードオプションの ダイアログボックスが出てきます 大きさを変更する前に 基準点を変更しておきたいと思います この9個 点がついているアイコンの 左下をクリックして 塗りつぶされている状態にしてください この左下を基準にアートボードの サイズを変更するように設定をしました 次に幅です 幅を“1536”にしましょう これはレティナディスプレイの iPad の画面サイズです そして高さ これを“2048”にしておきます このあたりの数字は ご自分のプロジェクトに応じて 適切な数値を設定してください そこで「OK」をクリックします ちょっとアートボードが大きくなりすぎて はみ出てしまいましたので ズームツールを使って 引いていってみましょう ズームツールを選んだ後 キーボードのオプション もしくは Alt を押しながら クリックすることで どんどんズームアウトして 全体が見えてくるようになります 今 左側に iPhone 5s 用の アートボード そして二番目に iPad レティナディスプレイの iPad 用の アートボードが できあがった状態になりました ではもうひとつ PC 向けのアートボードを 作りたいと思います 先程と同じように アートボードのパネルの下のアイコン 「新規アートボードを作成」 こちらをクリックして 今度はアートボード3が できあがりました キーボードのスペースキーを押して 一時的に手のひらツールに持ち替えて 右側の方に移動します アートボードパネルの 今度新しくできた アートボード3の右側のアイコンを ダブルクリックします アートボードオプションが開いたら 基準点が左下になっていることを確認して 幅を PC 向けのサイズに 変更していきましょう 今回は“1280”の 高さ“2000”にしておきます 単位のピクセルは自分で付けなくても Illustrator が 勝手に付けてくれますので 数字だけ入れれば大丈夫です 入れたところで 右下の「OK」をクリックします また全体が見づらくなってしまいましたので ズームツールを選んで キーボードのオプション または Alt キーを押してクリック 全体が見えるようにしておきましょう ここまでの作業で 3つのアートボードを 作ることができました 一番左側が iPhone 5s 用 真ん中が レティナディスプレイの iPad 用 解像度が高いので ちょっと大きめに見えますけれども 真ん中が iPad 用ですね そして一番右側が PC 向けの アートボードです アートボードの大きさを変更する際に 基準点を左下にしていますので 下の線がきれいに揃った状態で 並んでいます では ここまで作業しましたら 3つのアートボードの名前を わかりやすいように 変更しておきたいと思います アートボードのパネルを開いて アートボード1と書いてある ちょうど文字の真上を ダブルクリックしてください 編集が可能な状態になりましたら ここに“iPhone 5s”と入れておきます 次にアートボード2を ダブルクリックして “iPad ― レティナ” と入れておきましょう 3つ目のアートボード3を ダブルクリックして “PC”と入れておきます これでそれぞれのアートボードが 何に向けて作られたかということが 明確になりました 名前を入れ終わった後は アートボードパネルで この名前のちょっとはずれたところを ダブルクリックしてみてください ダブルクリックしたアートボードが 画面の中央に表示されます 移動が簡単にできますので 是非やってみてください ここまでできましたら メニューバーの「ファイル」から 「テンプレートとして保存」を 選択します 自動的にテンプレートフォルダが 選ばれていますので 名前のところに“レスポンシブ” と入れておきましょう 拡張子「.ait」は Adobe Illustrator Template と言う意味です そして テンプレートのフォルダの中にある 「Webデザイン」のフォルダ こちらがない方は ご自分で作っていただいて 右下の「保存」をクリックします この後 このファイルは 閉じていただいて大丈夫です タブのところの 小さいバッテンを クリックして閉じます 次回からこの レスポンシブレイアウト向けの テンプレートをすぐに使いたい場合は メニューバーの「ファイル」から「新規」 キーボードショートカットの command+N か Ctrl+N で新規ドキュメントの ダイアログボックスを開いて 左下の「テンプレート」ボタンをクリック 先程作った「レスポンシブ.ait」を 選んでから 「新規」のボタンをクリックすることで いつでも同じセットの アートボードが作られた状態の ドキュメントを準備することができます 全体が 今 見えませんので ズームツールでオプションまたは Alt キーを押して 全体を見てみましょう このように先程と同じ状態の アートボードが3つ 入っていることがわかります さて今回は レスポンシブレイアウトで 「ブレイクポイント」と呼ばれる レイアウトを切り替える 画面サイズの区切りを 2つ作りまして 合計3つのレイアウトを 1つのドキュメントの中で作るという サンプルを作成しました しかしプロジェクトの内容に応じては 特にこの真ん中のタブレット用の デザインを作らずに スマートフォンか PC か という2種類の レイアウトをする場合もあると思います ご自分のプロジェクトの内容に応じて そういった場合は スマートフォンと PC のみの アートボードをお作りになって テンプレートとして 保存しておいてもよいと思います 以上 レスポンシブレイアウトに 最適化された Illustrator のアートボードを 作成する方法を ご説明してきました 早速ご自分のプロジェクトに 取り入れてみてください

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

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

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

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

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

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