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

HTMLメール向けの新規ドキュメントを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLメールをデザインするための新規ドキュメントを作成し、ガイドラインをあらかじめ準備しておく方法について、解説します。ガイドラインの作成は、他のケースでも正確にデザインしたいときに役立ちます。
講師:
08:40

字幕

このレッスンでは マーケティングのツールとして よく使われる HTML メールを デザインするための 新規ドキュメントを 作っていってみましょう HTML メールはマーケティングの 重要なツールとして 根強く残っています 私自身 HTML メールのデザインを 依頼されることが かなりあります ということで このレッスンでは HTML メール向けの 新規ドキュメント作成について見ていきます まず メニューバーの「ファイル」から 「新規」を選択します キーボードショートカットの コマンド+N か Ctrl+N でも結構です プロファイルの部分を 「Web」にしてください HTML メールの横幅は ターゲットとするメーラーによって 多少変わってくると思いますが ここでは あまり幅を広くしすぎないで 600ピクセルの 横幅にしておきたいと思います この数値は ご自分のプロジェクトに応じて 適切なものに変更してください 次に高さですけれども 入る情報の分量によって 後で自由に変更可能です とりあえずは 「1000」 1000ピクセルにして デザインした後に 変更することにしましょう そして「OK」をクリックします できあがった新規ドキュメントで キーボードショートカットを使って コマンド+1 もしくはCtrl+1 を押すと 原寸大 100% の表示になります これが100% のサイズの表示です ではここに レイアウト上の余白を 明確にするために ガイドラインを引いてみたいと思います 今回この 600x1000 ピクセルの アートボードの中に 四方に 20 ピクセルずつの 余白を作って その中にデザインしたいと思います ですので このフチの部分から 20 ピクセル内側に入ったガイドライン というのを作りましょう ガイドラインを作る方法は いくつかありますけれども 今回は長方形を描いてから それをガイドに変換する という方法でやってみたいと思います まず ツールパネルから 長方形ツールを選択します 塗りを「黒」で 線を「なし」 の状態にしておきましょう 線の色が設定されていると 正確なサイズで 合わせられない場合がありますので 必ず塗りに何か色を 付けておくようにして 線を「なし」にしておくと 作業がやりやすいと思います そしてこの長方形ツールを使って クリックをしてください ドラッグではなくて クリックをすると 正確なサイズの長方形を 描くことができます ここでまずは 先程作成した アートボードと同じサイズ 600x1000 ピクセルという 数値を入れます 「OK」をクリックすると 600x1000 ピクセルの 長方形が作成されます 次に選択ツールに持ち替えてください コントロールパネルのところの 「整列」というテキストリンクを クリックして 整列パネルを開きます 右下のプルダウンメニューから 「アートボードに整列」を選んでください こうすることによって アートボードとオブジェクトを 揃えることができます 先程描いた この黒い長方形を選択した後で 整列のパネルから 「水平方向左に整列」と 「垂直方向上に整列」 を押してください そうしますとアートボードと 黒い長方形が ぴったり重なった状態を 作ることができます 次にこの長方形を使って ぴったり内側に 20 ピクセル 小さい長方形というのを 作りたいと思います 長方形が選択された状態のまま メニューバーの 「オブジェクト」から「パス」 そして「パスのオフセット」を 選んでください 「パスのオフセット」は 今選んでいるオブジェクトのパスの ちょうど何ピクセル外側 ちょうど何ピクセル内側というように 並行したパスを描いてくれる機能です このオフセットの数値を マイナスにすると 内側にパスが描かれます ここでは「-20」と入れてみましょう 左下のプレビューに チェックを入れると もともとあった長方形より ちょうど 20 ピクセル内側の 新しいパスが 描かれていることが見えます 「OK」をクリックします これで元々の 600x1000 ピクセルの長方形と 20 ピクセルずつ小さな 560x960 ピクセルという長方形が 2つ作られました ではこの2つの長方形を ガイドラインに変換したいと思います 選択ツールで囲むように 2つの長方形を選んで メニューバーの「表示」から「ガイド」 そして「ガイドを作成」を選んでください 長方形についていた 塗りの色がなくなって 鮮やかなブルーのガイドラインに 変換されました このガイドラインの色ですけれども 環境設定によって 色を変更することができます Mac の方は「Illustrator」から 「環境設定」 Windows の方は「編集」から 「環境設定」で 「ガイドグリッド」を選んでください このガイドの「カラー」で 選ばれている色が 今ガイドに使われている色になります そして スタイル「実線」 これを「点線」に変えると 点線で表示させることもできます 今試しに カラー「ライトブルー」の スタイルは「点線」に変更してみますと このように見え方が変わりました 設定によっては このガイドラインを 触って動かしてしまうことができる 設定になっている方も いらっしゃるかと思います チェックポイントをご説明しますと メニューバーの 「表示」から「ガイド」 「ガイドをロック」 ここにチェックがついている場合は 今せっかく作ったガイドを 動かさずに使うことができます このチェックが外れている場合は 試しにやってみますと このようにガイドを 動かすことができてしまうので 正確さがなくなってしまいます ですので 必ず 「ガイドをロック」 これにチェックをつけておくことを 忘れないようにしてください ここまでできましたら このドキュメントを テンプレートとして 保存したいと思います メニューバーの「ファイル」から 「テンプレートとして保存」 テンプレートフォルダの中に 「新規フォルダ」を作って 入れておきましょう 「HTML メール」 という名前のフォルダを作って この中に「HTML メール」 という名前を付けます 拡張子は「.ait」 Adobe Illustartor Template のままにしておきます 右下の「保存」をクリックしますと テンプレートファイルとして 保存されました ここまで HTML メールを デザインするための 新規ドキュメントを作成して ガイドラインを作る方法について 解説しました ガイドラインの作成は 他のお仕事の場合でも 正確にデザインしたいときに 役立ちますので 是非覚えておいてください

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

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

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

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

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

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