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

タブインターフェイスを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Webサイトの限られた面積の中で複数の情報を切り替えるのに有効な「タブインターフェイス」のスタイリングを、AdobeIllustratorを使って作成する方法をご紹介していきます。
講師:
13:36

字幕

このレッスンではWeb サイトの 限られた面積の中で 複数の情報を切り替えるのに有効な 「タブインターフェイス」のスタイリングを Adobe Illustrator を使って作成する方法を ご紹介していきます あらかじめ完成したサンプルを ご覧いただいているわけですけれども タブで切り替えるこのボックスの中には 以前のレッスンでお話をしたー Illustrator でCSS ボックスモデルの シミュレーションをする方法を 取り入れています そして中にテキストを流し込んでいます それから この周りに見えているグリッド こちらを活用して正確な数値で デザインをしていきたいと思います では早速 作業を始めていきましょう まずは新規ファイルを作成します 「メニューバー」の「ファイル」から「新規」 「プロファイル」を「Web 」 そして「サイズ」を1280 ×800 にします 「OK 」をクリックします 次にグリッドの設定をしていきましょう 「メニューバー」の「Illustrator 」から 「環境設定」 Windows の方は「編集」から「環境設定」 そして「ガイド・グリッド」の項目を選択します 「グリッド」を 1つのグリッドの幅を10 ピクセル その中を「分割数」10 に指定します こうすると1ピクセルずつの 細かな網目のグリッドが作られます 色は薄めのグレーが作業を邪魔しなくて よろしいかと思います 「スタイル」は「実線」にしておきましょう 「OK 」をクリックします 次に「メニューバー」の「表示」から 「グリッドを表示」 そしてもう1つ 「グリッドにスナップ」を選択しておきます こうすると グリッドにオブジェクトが 吸着しますので作業がしやすくなります 100% 表示にして次に進みましょう 次はオブジェクトの色を指定します 「塗り」をダブルクリックして #666666を選びます 「線」を無しにします 「長方形ツール」を選択して クリックします 「幅」300 ピクセルの 「高さ」400 ピクセル これをおおもとの枠とします 「ズームツール」で左上を拡大してみると この10 ピクセルおきの太い所から 1ピクセルずれてしまいましたので 気分的な問題ですけれども この角に揃えておきたいと思います 100% 表示に戻して作業を続けます ではこの300 ×400 ピクセルの枠の 10 ピクセル丁度内側に もう1つ長方形を描きます 一番簡単な方法はこちらの長方形を 「選択ツール」で選択して 「メニューバー」の 「オブジェクト」から「パス」 「パスのオフセット」を使う方法です 「パスのオフセット」は今選択しているパスの 丁度 何ピクセル外側 丁度 何ピクセル内側に 平行するパスを生成してくれる機能です -10 マイナスの数値を指定すると 内側にパスを生成してくれます 10 ピクセル内側のパスが「プレビュー」を チェックすることで見えてきましたので 「OK 」をクリックします では この内側の小さな長方形を選択して 色を白にします 次に この白い長方形を2つに分けて タブの部分と本文の部分に 分けていきましょう そのために こちらを選択して 「編集」から「コピー」 「編集」から「同じ位置にペースト」します 今 2つの同じ大きさの長方形が 重なった状態になっています 1つ手順を戻して 上側の長方形の色を #CCCCCC 薄いグレーにしておきます 大きさを変えます 上のこの薄いグレーの長方形を選択して 「コントロールパネル」の「変形」の リンクをクリックします 「基準点」を左上 「高さ」を40 ピクセルにします 次に この下の方の白い長方形を選択して 「変形パネル」で「基準点」を 今度は左下にして 「高さ」340 ピクセルにします 40 ピクセルと340 ピクセル 2つの領域に分けられました 次にタブの部分を3つに分割していきます 「段組設定」という機能を使います 「メニューバー」の 「オブジェクト」から「パス」 「段組設定」です 「段組設定」は選択した長方形を 好きな数の「行」と「列」に分割して 「間隔」の値も決めることが出来ます ここでは「間隔」を5ピクセル そして「列」の数を3つにすることで 3つのタブを作ることが出来ました ではこのタブに文字を入れていきましょう 「文字ツール」で一度クリックをして 「フォント」を ヒラギノ角ゴシックPro にしておきます Windows の方はご自分の環境に インストールされているー フォントにしてください 「太さ」をW6 にして フォントのサイズを18 ピクセルにします この3つのタブですけれども 「日別」「週別」「月別」 というタブにしたいので まず最初に 「日別」 と入力します そしてタブの中央に このテキストを揃えるために 「中央揃え」にしておくと作業がしやすいので 「中央揃え」に変更します 「選択ツール」でタブの四角形と 「日別」の文字を 両方Shift キーを押しながら選択して もう一度この四角形をクリックすると この四角形がキーオブジェクトに変わります キーオブジェクトに変わったところで 「コントロールパネル」の 「水平方向中央に整列」をクリックすると キーオブジェクトの中央に対して 文字が揃います この「日別」の文字を複製しましょう キーボードのオプション または Alt キーを押しながら 右にドラッグします その時Shift キーをたすと 完全に水平方向に対して コピーすることができます 「オブジェクト」「変形」 「変形の繰り返し」を選択して もう一度 複製します では それぞれのタグと文字の 中央を揃えましょう 四角形と文字を両方選択してから 四角形を再度クリックすると キーオブジェクトに変わりますので 「水平方向中央に整列」 こちらも同じです 四角形と文字を両方選択してから 四角形をもう一度クリックして 濃い状態 キーオブジェクトにしてから 「水平方向中央に整列」します 文字を打ち変えます 「日別」の後は「週別」ですね 「週別」 「月別」というタブにします 100% 表示に戻しましょう では次に この白い四角形の中に テキストを流し込みたいと思います 先ほども冒頭でちらっと触れましたけれども CSS ボックスモデルの シミュレーションをしながら 作業をしていきたいと思います まずは この四角形を選択して 「エリア内文字ツール」を選択します 左の角の少し内側でクリックをすると 文字入力が開始します 「文字パネル」を出して ヒラギノ角ゴシックPro のW3 14 ピクセル そして 「行間」を21 ピクセルにします これは文字サイズに対してラインハイト 行と行の間を1.5 に指定しているのと 同じことになります そして先ほど中央揃えに変えてしまったのが 残っていますので これを左揃えにします テキストを入力します エリアに対してテキストを流し込みます ではここからCSS ボックスモデルの シミュレーションをやっていきましょう まずはパディングの シミュレーションをするために 「メニューバー」の「書式」から 「エリア内文字オプション」を選びます 「エリア内文字オプション」の「オフセット」 「外側からの間隔」 こちらを増やすことによって CSS ボックスモデルのパディングを シミュレートします この縁から20 ピクセル 空いた状態になります 「OK 」をクリックします 次に背景色を付けていきます 「アピアランス」のパネルを使って 「塗りを追加」しましょう 「新規の塗りを追加」します 白にします 今 文字が白になってしまいましたけれども この白い色を四角形に変換します 「選択ツール」でもう一度 このテキストを選んで 「メニューバー」の「効果」から 「形状に変換」「長方形」を選択します この時 幅と高さのこの追加の数値を 両方0(ゼロ)にしておきましょう こうしますと 元々の四角形のとおりに 白く色が付きます そして「OK 」をクリックします 今 「文字」より「塗り」の方が 上に来てしまっていますので この「塗り」を「文字」の下に来るように 重なり順を変えましょう こうしますとCSS ボックスモデルを シミュレートした状態 縁から20 ピクセルパディングが付いて 背景色が白という状態を作ることができます ここでサンプルをもう一度見てみましょう サンプルはこの「日別」 今 選択しているところの背景色が赤 そして このボーダーが付いていますので こちらを変更していきたいと思います 「日別」のタブの四角形を選択して お好きな色に変えていただいて 構いませんけれども 少し暗めの赤にしておきましょう 文字を白に変更します そしてボーダーの指定ですけれども ここでは仮に この赤い四角形を 細長く作って入れておきます 幅を280 ピクセル 高さ 6ピクセルで ボーダーを作って これを この「日別」の 四角形のタブと揃えます 左側と下側を揃えます ここまでWeb サイトの限られた面積の中で 複数の情報を切り替えるのに有効な タブインターフェイス こちらのデザインを Illustrator を使って作成してきました CSS ボックスモデルの シミュレーションについても おさらいしました テキストの入っているボックスをこの様に 伸び縮みさせても大丈夫 という手法です 是非 おさらいして 思い出しておいてください

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

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

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

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

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

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