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

ラジオボタンとチェックボックスを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Webサイトの中で非常によく使われる要素である「ラジオボタン」と「チェックボックス」を、AdobeIllustratorを使ってスタイリングしていきましょう。
講師:
13:37

字幕

このレッスンでは Web サイトの中で 非常によく使われる要素である 「ラジオボタン」と「チェックボックス」を Adobe Illustrator を使って スタイリングしていきましょう ラジオボタンとチェックボックスは ブラウザによってレンダリングが かなり異なる要素です これをできるだけ揃えるために JavaScript のライブラリなどを 利用する場合も よく見受けられます しかし ここではシンプルに CSS と背景画像を利用して 実装することを想定したいと思います ですので デザインに着手する前に どのくらいのデザインであれば 実装が可能なのか あらかじめ調べておくと良いでしょう また 全てのブラウザで 完全に再現できないケースもあり得ますので そのあたりはあらかじめご了承ください 今 ご覧いただいているのは サンプルとして作成した ラジオボタンと チェックボックスのデザインです 「男性」か「女性」かを選んでもらう ラジオボタンと 「メールマガジンの購読希望」かどうか 「当店の既存のお客様」かどうかを チェックボックスでつけていただく この合計4つの要素をデザインしていきます そして 出来上がったものを 前のレッスンで作成したお問い合せフォームの 下に入れていきたいと思います では早速 新規ファイルを作って 作業を始めましょう 「メニューバー」の「ファイル」から 「新規」を選びます 「プロファイル」で「Web 」を選択して 「サイズ」を一番大きいサイズ 1280 × 800にします 「OK 」をクリックします 新規ファイルが出来ましたので ここに作業をしていきます サンプルのファイルを見ますと この様に ラジオボタンのわきに言葉が書いてあります この言葉のことを「ラベル」と呼びます このラベルの文字を 最初に入力をしていきましょう 「文字ツール」を選択して 「コントロールパネル」の「文字」の部分を クリックして「文字パネル」を開きます Mac の方は「フォント」を ヒラギノ角ゴシックPro 「weight =太さ」 をW6 「フォントサイズ」を 14 ピクセルにしておきます Windows の方はメイリオ もしくは MS ゴシックにしておいてかまいません ここまで指定が出来ましたら [ズームツール」で少し画面を拡大して クリックします まず 「男性」と入力します 「選択ツール」に持ち替えて キーボードの option  または Alt キーを押しながら この「男性」の文字を複製します そして 「男」の字を選択して 「女」に変えておきましょう 「男性」と「女性」 2つのラベル用の テキストを入力しました では次に ラジオボタンのためのこちらのテキストも 複製して準備しておきたいと思います 「選択ツール」で「男性」の文字を選択 キーボードの option または Alt キーを押しながら ドラッグをします 「メールマガジンの購読希望」と入力します そしてこれをさらに 「選択ツール」で複製します キーボードの option または Alt キーを押しながら ドラッグして複製します 次は「当店の既存のお客様」 と入力しましょう これで必要なラベルが全て揃いましたので もう少し「ズームツール」で拡大をして 作業を続けます 次はラジオボタンの この円の部分を作りましょう 「楕円形ツール」を選択して 「塗り」を#999999 のグレーにします 「線」は「なし」の状態にしておきます Shift キーを押しながらドラッグして 文字よりわずかに大きいサイズの 正円を描きましょう 「選択ツール」に持ち替えて 位置を調整します 出来ましたら 「男性」のところの この 丸を「女性」の方にも複製します option または Alt キーを押しながら ドラッグをして 「女性」の方にも丸を付けます 位置を調節しましょう 次に「男性」の方はデフォルトで選ばれた状態 「女性」は選ばれてない状態に デザインをしておきたいと思います そのためにはこの「男性」の丸の中に もう1つ黒い丸を入れたいと思います 「ズームツール」で拡大して作業を進めます この正円を複製しましょう 「選択ツール」でこちらの正円を選択したら 「メニューバー」の「編集」から 「コピー」をします そして「同じ位置にペースト」を選びます そうしますと全く同じ場所に 同じサイズの正円が複製されていますので 1つ手順 戻りまして これを使って中の黒い丸を作っていきます 上に重なった正円を選択しましたら 「塗り」アイコンをダブルクリックして #000000 一番下のこの濃い色のところを選択します 「Web セーフカラーのみに制限」 にチェックが付いていると この #000000 を選びやすいので ご利用ください 「OK 」をクリックします 今 グレーの正円の上に黒い正円が 重なった状態になっています では黒い正円を縮小しましょう 「選択ツール」でバウンディングボックスを 使って縮小しますけれども この時 キーボードの option または Alt キーと Shift キーを同時に押しながら ドラッグすることで 中央に向かって円を縮小することができます これは円以外のオブジェクトでも一緒です バウンディングボックスを使う時に option Alt キー そしてShift キーを押しながら ドラッグすることで 中央に向かって縦横比率をキープしたまま 縮小ということが出来ます 「ズームツール」を使って option または Alt キーを押しながら クリックして 少しズームアウトします これで「男性」と「女性」の ラジオボタンとラベル この組み合わせができました できたものをそれぞれ グループ化しておきましょう 「選択ツール」で「男性」と 「ラジオボタン」を選択しましたら 「メニューバー」の「オブジェクト」から 「グループ」にしておきます 「女性」の方も同様に選択をして 「オブジェクト」から「グループ」 これでセットが出来上がりました 次にチェックボックスを作っていきましょう 作業中に「当店の既存のお客様」の 文字の色が変わってしまいましたので 元の黒に戻します 「選択ツール」でこのテキストを選択して 「塗り」を#000000 にしておきます おそらく 先ほどこの丸の色を変更する時に テキストも選択したまま 色を変更してしまったようです オブジェクトの色を変更する時は この様なことが無いように 必ず 目的のオブジェクトだけを選択して 色変更するようにしましょう ではチェックボックスの四角形を作ります 「長方形ツールを選択」して Shift キーを押しながらドラッグします 文字よりわずかに大きいくらいの 正方形を描きます 「選択ツール」に持ち替えたら色を変更します 「塗り」アイコンをダブルクリックして また#999999 にしておきます 「ズームツール」で少し拡大して作業を続けます 位置を調節したら 下の方に複製します option またはAlt キーを押しながら このコーナーヴィジェットを いじらないようにして この様に複製をしましょう ではラジオボタンの方も チェックが付いた状態のデザインを 付けていきたいと思います 「ペンツール」を選択したら 「塗り」を「無し」 「線」を「黒」の指定にします そしてクリック クリック クリック 3回クリックをしたら command もしくはCtrl キーを 押しながらクリックすることで 選択を解除します 「選択ツール」に持ち替えて 今 描いた線を選択 「線パネル」を開いて 線幅を3ピクセルにします 形を少し整えます 「ダイレクト選択ツール」を使って アンカーポイントをずらしましょう バランスの良い形に仕上げます このチェックボックスからはみ出した デザインにしてしまって構いません というのはチェックボックスの方は 今 ここで作ったデザインを 画像にして 背景として差し替える という手法で実装したいからです ラジオボタンの方はCSS だけで 色と見た目の指定をします では今作ったチェックボックスも グループ化しておきましょう 「選択ツール」を使って ひと塊 選択をしたら 「オブジェクト」から「グループ」 下の方も同様に 両方 四角形とラベル用のテキスト 両方を選んで 「オブジェクト」から「グループ」 これで4つのグループが出来上がりました 次に「ズームツール」を使って option または Alt キーを押しながら 少しズームアウトします 「選択ツール」に持ち替えます この4つのグループを 「ライブラリ」に登録しましょう 「ライブラリ」パネルを開いて それぞれをドラッグ&ドロップして 「ライブラリパネル」に中に 登録していきます 4つ登録できましたので 名前を変更しておきましょう 「男性」が「アートワーク1」などの 名前に代わっていますので こちらを半角英数で 「 radio-checked 」としておきましょう ラジオボタンが選択された状態です 「女性」の方がただの「 radio 」 選択されてない状態です 次は「メールマガジン」こちらを ダブルクリックして名前を変更します チェック ボタンのハイフン チェックト 「 check-checked 」という名前にします 残りの1つを 単なる「 check 」にしておきます これで 種類と状態を4種類 登録することが出来ました では 最後にこちらの お問い合せフォームのデザインの中に 今 作った4つの要素を入れてみましょう ボタンを「選択ツール」を使って 少し下に下げます そして必要な要素を この様に「ライブラリ」から ドラッグ&ドロップして 出してきます 「ズームツール」を使って拡大します 「選択ツール」を使って 位置を整えましょう 天地の位置を揃えるには 2つの要素を選択して 「コントロールパネル」の 「垂直方向下に整列」 失礼しました まず先に「選択範囲に整列」を選んでから 「垂直方向下に整列」 チェックボックスの方も 同様に整列をして 位置を整えておきます さて ここまでWeb サイトの中で 非常によく使われる ラジオボタンとチェックボックスの スタイリング そして 再利用の方法について ご説明してきました この様に頻繁に利用するパーツは 「ライブラリ」や「シンボル」として 登録しておくと生産性が上がりますので おすすめです

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

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

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

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

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

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