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

ボタンを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、AdobeIllustratorを使って、タッチデバイスにも適したボタンのバリエーションを、別のファイルでも再利用可能な形で作成する方法について、学んでいきます。
講師:
10:55

字幕

このレッスンでは Adobe Illustrator を使って タッチデバイスにも適した ボタンのバリエーションを 別のファイルでも再利用可能な 形で作成する方法 について学んでいきたいと思います まずは 最初に新規 ファイルを作成しましょう 「メニューバー」の 「ファイル」から「新規」 「プロファイル」の部分を 「Web 」にしてください 「サイズ」を一番大きくしておきます これからするのはパーツの作成ですので アートボードのサイズには 特にこだわりませんけれども 少し広めの方が見やすいので このサイズにして「OK 」にしておきます 次に「長方形ツール」を使います 「長方形ツール」を選択してクリックします ボタンの幅と高さの指定です 横幅はお好きな幅で構いません それほど小さすぎず 大きすぎず 丁度良いサイズにしておいてください ここでは300 ピクセルにしておきます 高さの方については注意が必要です iPhone などのタッチデバイスで 小さすぎるボタンですと 指で押せなくなってしまいます 最低でも40~50 ピクセル位の 高さにしておくと 使いやすいと思います ここでは50 ピクセルに指定します 「OK 」をクリックすると 指定したサイズの長方形が描かれます 画面の拡大倍率が今 70% になっていますので 100% に変更します これで原寸のボタンサイズを 確認することが出来ます 次は色の変更です 「選択ツール」でこの四角形をクリックして 「塗り」を変更します 落ち着いた青にしたいので 「#0033CC 」を選択しておきます お好きな色で作って頂いて構いませんが 文字を白で載せたいので 濃い目の色にして ある程度のコントラストを 確保しておくことが必要です 「OK 」をクリックします 「線」は無しにします 次に「アピアランスパネル」を使って この四角形にグラデーションを 少しつけたいと思います 「アピアランスパネル」を開きます 「アピアランスパネル」の一番下にある 「新規塗りを追加」 こちらをクリックします 新しい「塗り」が追加されましたので 「ドロップダウンメニュー」から こちらの白から黒へのグラデーションを 追加してみます その後 この「塗り」の中の 「不透明度」をクリックして 「ソフトライト」にします そうしますと元の青い色の上に 重なるようなかたちで グラデーションが付きました この後 グラデーションの方向を変更します 「アピアランスパネル」の中で このグラデーションの「塗り」を 選択した状態で 「グラデーションパネル」を開きます 「角度」を-90 ° にすると 上が白 下が黒 の状態で グラデーションがかかります 次に 少し角丸を指定しましょう 「選択ツール」でこの角の内側にある 「ライブコーナーウィジェット」を ダブルクリックします 「変形パネル」が開きますので 下の方にある「角丸の半径」 こちらを2ピクセルにします 真ん中の「鎖」が凹んでいますので 4つの角が連携して同じ数値に変わります この様に少しだけ角が丸くなりました では次にテキストを追加しましょう 「文字ツール」を選んで クリックします 「お問い合せ」 と 入力をしておきましょう このテキストは後で打ち変えて 自分の好きな文字にすることが出来ます このボタンのベースとなる四角形と テキストの中央をそろえたいので テキストの方を「中央揃え」にしておきます テキストを中央揃えにしておきますと 後で言葉を打ち変えて 文字数が変わった時にも 中央は必ず揃ったままになります この文字を中央に重ねて サイズを変更しましょう 「文字パネル」を開いて 「フォント」はWeb サイトで 一般的に指定されることが多い ヒラギノ角ゴシックPro 「太さ」をW6 そして「サイズ」を 18 ピクセルにしておきましょう 四角形と文字を両方選択して 「水平方向中央に整列」 真ん中をそろえます 天地の高さですけれども 少し上の方に上がって見えますので 修正をしましょう キーボードの矢印キーを使って 変更したいのですけれども 矢印キーを一度押したときに移動する距離 そちらをチェックしておきます Mac の方は 「メニューバー」の「Illustrator 」 Windows の方は「編集」の 「環境設定」から 「一般」を選択します 「キー入力」のところが1ピクセルに なっていればOK です 矢印キーを一度押した時に 1ピクセル動く と言う指定になっています 「OK 」を押して 「お問い合せ」の文字を選択した後 1ピクセルか2ピクセル下げて 見た目が天地の中央に来るように揃えます この後 文字の色を変更します 「選択ツール」で「文字」を選択して 色を白にしておきましょう これで通常の状態のボタンの見栄えを 作成することが出来ました ボタンのデザインで重要なのは 普通の状態だけではなく マウスカーソルが重なった時の ホバーの状態 そして クリックしたり タッチしたりした時のアクティブの状態 その2つの状態をデザインしておく というのも重要なことです では 今 作成したこのボタンを あと2つ分複製をして ホバーとアクティブの状態も デザインしていきましょう 「選択ツール」で選択をします 両方の要素を囲むように選択します キーボードの option キー またはAlt キーを押しながら Shift キーをたして 下の方に 垂直に持っていきます マウスを放して キーボードを放すと この様に複製されます もう一度この操作を繰り返したい場合には 「メニューバー」の「オブジェクト」から 「変形」「変形の繰り返し」 こちらを選ぶことで もう一度 同じ操作が繰り返されます 3つに増えましたので 2つ目をホバー状態のデザインに変更します ここではボタンに マウスカーソルが重なった時に 半透明になる指定にしてみたいと思います 2つ目の長方形を選択して 「アピアランスパネル」を使います 「アピアランスパネル」の一番下にある 「全体の不透明度」を 50% に下げましょう これでマウスカーソルが重なった時には 50% の不透明度になると言う指定を することが出来ました では クリックをした時の状態 もしくはタッチデバイスで タッチをした時の状態 つまりアクティブな状態をデザインします IPhone などのタッチデバイスでは ホバーの状態を使えないので アクティブのデザインで ボタンが押し込まれている感じを 出すのが重要です 3つ目の長方形を選択して グラデーションの方向を変えましょう 「アピアランスパネル」の この「グラデーション」の「塗り」の 項目を選択します この後 「グラデーションパネル」を開きます 「線形グラデーション」の方向が 今 -90° になっていますけれども こちらを普通の90°  つまり 丁度ひっくり返します そうしますと上が濃い色 下が薄い色になりますので 凹んだ感じが少し出てきます さらにここに少しくぼんだ感じの 影の指定を シミュレーションしてみましょう こちらの四角形を選択して 「メニューバー」の「効果」から 「スタイライズ」 「光彩(内側)」を選択します 「描画モード」を「乗算」にして 「不透明度」100% 「ぼかし」は少しだけ 2ピクセル そして「境界線」という指定にしておきます このように少し内側に影が付いたのが お分かり頂けますでしょうか? この内側方向の影を CSS で再現する時には 「ボックスシャドウのインセット」 という指定を追加すると 内側に影をつけることが出来ますので 詳しくは検索などをして確認してみてください ということでここまでの作業で 普通の状態 ホバーの状態 アクティブの状態 3種類のボタンの状態のデザインを 作成することが出来ました タッチデバイスにも適した サイズと状態でデザインすることを 意識してご説明しましたので 是非 覚えておいてください

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

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

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

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

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

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