【Illustrator】CSSプロパティの使い方forイラレ初心者

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator（イラストレーター）のCSSプロパティを活用し、面倒なCSSの設定をイラレで簡単に書き出す方法を詳しく解説します。

Webサイトのデザインを行う際に作成するCSSの設定には慣れが必要です。
イラレやCSSに不慣れな初心者の方も簡単にCSSの書き出しとサイトへの組み込みができます。

Illustratorを使ったサイトデザインと自作サイトの構築を始められる方にオススメのコンテンツです。

この記事の目次

何ができるの？

Illustratorでデザインを作成
（左図はデザインした画像）

BUTTON

CSSを書き出してWebに適用
（左図は実際にサイトへCSSで装飾したボタン）

Illustratorには作成したオブジェクトをCSSに書き出してくれる機能が備わっています。
例えばボタンデザインをイラレで行い、CSSプロパティでCSSを書き出すと手軽にCSSの設定が可能。
CSSに不慣れな方には便利な機能ですよ。

CSSプロパティの使い方

それではIllustratorのCSSプロパティの使い方を解説します。
イラレ初心者の方にも再現できるように詳しく解説いたします！

Illustratorを導入しましょう

当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。（7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

CSSプロパティでCSSを生成する

STEP.1

イラレでデザイン作成

IllustratorでWebサイト用のオブジェクトを作成します。
サンプルは虹色グラデーションのボタンを作成しました。

※作成後は [ 選択ツール ] で選択しておきましょう。

STEP.2

CSSプロパティパネルを表示

CSSプロパティのパネルを表示します。
※非表示の場合は [ ウィンドウ ] → [ CSSプロパティ ] で表示可。

STEP.3

書き出しオプションを設定

CSSプロパティ下部の [ 書き出しオプション ] をクリックします。

[ オプション ] → [ 名称未設定オブジェクト用にCSSを作成 ] にチェックを入れます。

STEP.4

CSSを生成

CSSプロパティ右下の [ CSSを生成 ] をクリックします。

対象オブジェクトのCSSが生成できました。

[ 選択スタイルをコピー ] をクリック、またはコピーしたいCSSプロパティをドラッグで選択し、[ Ctrl + C ] (Mac：⌘ + C) でコピーできますよ。

STEP.5

選択したCSSを書き出し

[ 選択したCSSを書き出し ] をクリックした例です。

するとCSSファイルが書き出せます。
ファイル名と保存場所は自由に設定できますよ。

CSSを記述する

STEP.1

HTMLを記述

HTML



<a class="st0 st">BUTTON</a>

HTMLにボタンのコードを記述します。

STEP.2

CSSを適用

CSS


.st0
{
	background : -moz-linear-gradient(10.16% 1.72% -21.84deg,rgba(0, 255, 255, 1) 11.28%,rgba(255, 255, 0, 1) 45.5%,rgba(219, 24, 21, 1) 100%);
	background : -webkit-linear-gradient(-21.84deg, rgba(0, 255, 255, 1) 11.28%, rgba(255, 255, 0, 1) 45.5%, rgba(219, 24, 21, 1) 100%);
	background : -webkit-gradient(linear,10.16% 1.72% ,90.54% 99.13% ,color-stop(0.1128,rgba(0, 255, 255, 1) ),color-stop(0.455,rgba(255, 255, 0, 1) ),color-stop(1,rgba(219, 24, 21, 1) ));
	background : -o-linear-gradient(-21.84deg, rgba(0, 255, 255, 1) 11.28%, rgba(255, 255, 0, 1) 45.5%, rgba(219, 24, 21, 1) 100%);
	background : -ms-linear-gradient(-21.84deg, rgba(0, 255, 255, 1) 11.28%, rgba(255, 255, 0, 1) 45.5%, rgba(219, 24, 21, 1) 100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#DB1815' ,GradientType=0)";
	background : linear-gradient(111.84deg, rgba(0, 255, 255, 1) 11.28%, rgba(255, 255, 0, 1) 45.5%, rgba(219, 24, 21, 1) 100%);
	width : 176px;
	height : 58px;
	border-radius : 10px;
	-moz-border-radius : 10px;
	-webkit-border-radius : 10px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF',endColorstr='#DB1815' , GradientType=1);
}
.st
{
	font-family : AB-j_gu;
	font-size : 24px;
	color : #FFFFFF;
	color : rgb(255, 255, 255);
	text-outline : #757575;
	text-outline : rgb(117, 117, 117);
}

書き出したCSSを適用します。
そのままだと文字のレイアウトが崩れるので

text-align:center;
text-stroke: 1px #00000082;

等を追記して調整しました。

STEP.3

調整したら完成

BUTTON

完成です。

面倒なグラデーションの設定や角丸、フォント等のCSSプロパティをサクッが適用できます。ただしマージンやパディングといったレイアウト周りや動作時の設定はアテになりません。

CSSに不慣れな方がゼロからCSSを記述する際に使えますが、無駄なプロパティが入りがちなので、フルスクラッチコーディングができる方には正直必要の無い機能かもしれませんね。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選！
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign（インデザイン）を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽！
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ！
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ！
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか？そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材

上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています！

ポートフォリオ用の高品質なテンプレート42選【InDesign,Illustrator,Photoshop】

【InDesign】ポートフォリオ用のテンプレートを編集する方法forインデザ初心者

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ！

AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能！
様々なフライヤーのテンプレート50選

デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

ロゴ作成とIllustratorの相性は抜群！
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選

単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり！
商用利用が可能で高品質なテキストエフェクト50選

継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK！作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Illustrator（イラストレーター）のCSSプロパティの使い方と機能についてでした。

Webサイトのボタンパーツなどをイラレで作成し、サクッとCSSに書き出したい時に使える機能です。
CSSに不慣れな方にとって便利な機能ですが、フルスクラッチコーディングができる方には正直不要。

しかし面倒なグラデーションのプロパティなどを生成する際に割と便利。
使用箇所を限定するとCSSの記述を高速化できます。
Webデザイン制作の効率化に繋がる機能なので是非活用してください。

ではまた！

InDesignは活用されていますか？

Illustratorだけでなく、InDesign（インデザイン）も活用されているでしょうか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート42選はコチラ！

Illustratorの操作方法

イラレ基本操作