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

フォームと入力欄を作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、一般的なWebサイトにはほぼ必ず設置されていると言っても過言ではない「フォームと入力欄」について、AdobeIllustratorを利用したデザイン手法をご紹介していきます。
講師:
12:14

字幕

このレッスンでは 一般的な Web サイトには ほぼ必ず設置されていると言っても 過言ではない フォームと入力欄について Adobe Illustrator を利用した デザイン手法をご紹介していきます フォームの入力欄は お問い合わせページや 検索ワードの入力欄など サイトの色々な場所で見られます 最終的には HTML と CSSで作成されるのですが Illustrator では それらのスタイリングを 指定していきましょう 今 ご覧いただいているのは お問い合わせのページの 大まかな枠です 全体表示から100 %の表示に 切り替えてみます お問い合わせというタイトルの下に 説明文が入っています この下に入力欄を作っていきましょう 今 このコンテンツを入れる ベージュの枠の横幅は 960px あります そこから 40px ずつ 左右に余白を取っていますので 960 - 40 - 40=880の横幅が 入力欄の幅になります では早速 作業を始めていきましょう まず長方形ツールを選択して 塗りと線を白と黒に指定します 簡単に白と黒にするには 「塗り」と「線」のアイコンの左下 「初期設定の塗りと線」 このアイコンをクリックしてください そして長方形ツールをクリックします 幅と高さを指定します 幅は先程 ご説明したとおり 880px です 高さの指定ですけれども ここでは 36px にしておきます その根拠ですけれども 中に入力される文字のサイズを 14px そして上下にパディングを 10px ずつ付けるとして 10+14+10=34px そしてボーダーを 1px ずつ付けるので +2 合計 36px の高さにします OK をクリックすると 指定したサイズの四角形が現れます 選択ツールに持ち替えて ガイドに吸着させます ここで拡大をして見てみましょう ズームツールを使って拡大をします このパスをガイドに吸着させたときに 今 線が中央になっていますので 少し はみ出てしまっています これを修正したいので 線パネルを開いて オプションを表示 そして線の位置を内側にします これで入力欄の左側が ガイドにぴったり そろいました 次に線の色を変更します 「線」のアイコンをダブルクリックして “CCCCCC” を指定します 線の色がグレーに変わりました 100%表示に戻します 入力欄がひとつできましたので 次にこの入力欄に対する ラベルを作りたいと思います 文字ツールを使って… クリックをします 今 Mac を使って作業をしていますので Mac の一般的なフォントの指定である 「ヒラギノ角ゴシックPro」 そして太くしたいので スタイルを「W6」 サイズを 18px にしておきます そして名前を入力していただく欄を 作りますけれども 苗字と下の名前で分けたいので ここは苗字 つまり姓を入力する ということで “姓” という名前の ラベルを作ります そしてガイドのところに左側をそろえて 文字の一番下を 入力欄のところにそろえます そして正確に 10px 空けてみたいと思います Mac の方は「Illustrator」から 「環境設定」 Windows の方は「編集」から 「環境設定」 そして「一般」を選択してください キー入力を 10px に指定します “10” と入力すれば単位は 自動で補完してくれますので OK を押します この姓という文字を選択したまま 矢印キーを一度上方向に押すと ちょうど 10px 上に移動します もう一度 100%表示に戻します これでひとつ入力欄ができましたので 3つに増やしたいと思います 増やす前にグループ化をして 先程せっかく正確に10px の 間隔を空けたものがずれないように グループ化しておきましょう ではこのグループを増やします 選択ツールで選択してメニューバーの 「オプション」または Alt キーを押しながら 下にドラッグします その時キーボードの shift キーを足しながら作業をすると 正確に垂直に複製することができます 適当なところでマウスとキーを離して メニューバーの 「オブジェクト」の「変形」から 「変形の繰り返し」を選択します 同じ動作がもう一度 繰り返されて 3つに増えました 次にこの「姓」の部分を 作業していきましょう 「姓」と「名」名前の方の入力欄を 横に並べたいと思います 今グループになっていますけれども このグループをダブルクリックすると グループ編集モードに入ります 長方形だけを選択することが できますので選択をしたら メニューバーの「オブジェクト」から 「パス」そして 「段組設定」を選択してください 列のところを“2”に増やして 「プレビュー」にチェックを付けます 長方形が左右に 二分割されていることがわかります 間隔を 20px にしたいと思います そして合計の値が ずれてしまっていますので 880にして もう一度 間隔を 20 にします 確認をすると段数が2つ そして間隔 20px 合計が 880 になるようにします 幅が自動的に 430px になりました OK をクリックします そうしますと2つの入力欄が 横並びになったことがわかります あとはこの「名」のところの ラベルを作りたいので 「姓」の文字を選択をして キーボードの option または Alt キーを押しながら ドラッグします この時も shift キーを足しながら 移動をすると 正確に水平方向に 複製することができます そしてこの「姓」の字を 「名」と打ち替えます 編集が終わったら 選択ツールに持ち替えて 何もないところをダブルクリックすると グループ編集モードから ぬけることができます 次はこの二番目の部分です 同じようにダブルクリックをしたら グループ編集モードに入りますので 今 「姓」になっているところを 「タイトル」にしましょう 編集が終わったら グループ編集モードからぬけます 3つ目です 3つ目もグループ編集モードに入ったら 「本文」と入力します 入力欄をテキストエリアにして 高さをもう少し付けたいので 変形のパネルを使います 「基準点」が左上に なっていることを確認して 高さを 150px にしておきましょう 一行ではなく複数行入力できる テキストエリアを想定しています 何もないところを ダブルクリックして グループ編集モードからぬけます これで「姓」「名」「タイトル」 「本文」の入力欄ができました この3つの要素の間隔を そろえたいと思います 数値指定で間隔をそろえましょう 3つとも shift キーを押しながら 同時に選択をして メニューバーの「ウィンドウ」から 「整列」を表示します 整列パネルが出てきたら 右上の「オプションを表示」を 選択してください この3つの要素を数値指定で 等間隔に分布させるためには どれかひとつキーオブジェクトを 指定する必要があります ここでは真ん中のオブジェクトを もう一度クリックして 濃い表示に変わりました これがキーオブジェクトになります そして間隔を… 30px にしておきましょう 指定をしたあとで 「垂直方向等間隔に分布」の アイコンをクリックすると 30px に数値指定で並び替えられます あとはこのフォームの 送信ボタンを追加しましょう 2つ前のレッスンを受けた方は ライブラリにボタンが 入っているかと思います もし入っていない方は ご自分で好きなデザインのボタンを 作成していただいて結構です ライブラリに入っている方は ボタンを右クリックして 「ドキュメントで使用」を 選択すると配置されますので フォームの真ん中に 合わせましょう 真ん中に合わせるためには まず「お問い合わせ」の このボタンをグループ化して 次にこの本文の要素と 同時に選択をします そして本文の方の要素を もう一度クリックすることで キーオブジェクトにしたあとに 「水平方向中央に整列」にします キーオブジェクトの中央に もうひとつの要素がそろってきます 手のひらツールをダブルクリックして 全体表示にしてみます これで基本的なフォームの 入力欄が整いました このフォームとボタンのセットを ひとつ前のレッスンでご説明したように ライブラリやシンボルとして 登録をしておくと 他のサイトをデザインするときにも 流用することができますので ぜひ行ってみてください 以上 Web サイトのデザインには 欠かせないフォームと入力欄の デザイン手法について お話ししてきました

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

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

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

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

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

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