BLOG

  • Facebook
  • Twitter

Illustrator、Photoshopのデザインデータからコーディングする方法

角田翼

角田翼
Illustrator、Photoshopのデザインデータからコーディングする方法

こんにちは!福岡のホームページ制作会社「シンス株式会社」の角田です。

webサイトをコーディングする際にデザイナーから受け取るデザインデータですが、XDやFigmaなどが主流になっていく中、まだまだIllustratorやPhotoshopのデザインデータを受け取ることもあると思います。

そこで今回はIllustratorとPhotoshopのデザインデータからコーディングする際に必要な基本操作と見方についてご紹介します。

普段IllustratorやPhotoshopを触らない方にも分かりやすく説明していますので、是非参考にして頂ければと思います。

Illustratorのデザインデータの場合

まず、Illustratorのデザインデータからコーディングする際の操作方法や見方について説明していきます。

右側に固定で配置しているツールの見方

右端に固定されている情報の見方について説明します。主に扱うのは「プロパティ」と「レイヤー」の部分になります。

「プロパティ」・・・選択した要素の高さや幅、色、文字情報などを見ることができます。

右側に固定で配置しているツールの見方

「レイヤー」・・・透明なシートに画像、文字などの要素を重ね合わせることで1枚のデザインを作成しています。特定のレイヤーを選択したい場合はここから操作します。

右側に固定で配置しているツールの見方

測定する数値の単位を「px」に変更する

まずは、測定する数値の単位を「px」に変更しましょう。

画面左上の「Illustrator」→ 「環境設定」 → 「単位」を選択します。

測定する数値の単位を「px」に変更する

表示されている全ての単位を「ピクセル」に変更してOKボタンをクリックします。

測定する数値の単位を「px」に変更する

元の画面に戻り、プロパティでそれぞれ数値の単位が「px」になっていればOKです。これで測定した数値の単位が全てピクセルになります。

測定する数値の単位を「px」に変更する

要素幅・高さの計測

幅や高さを計測したい画像をクリックし、「変形」の欄から幅と高さを確認できます。

要素幅・高さの計測

余白の計測

左側のツールから「長方形ツール」を選択します。次に測りたい部分をドラッグし、右側ツール内の「プロパティ」→「変形」から幅と高さの数値を確認できます。

余白の計測
余白の計測

使われている色の確認

確認したい要素を選択し、左側ツールの「塗りと線」をダブルクリックします。

使われている色の確認

するとカラーピッカーが表示され、右下に6桁のカラーコードが確認できます。

使われている色の確認

文字の大きさ、太さ、フォントの種類などの確認

要素を選択し、右側ツールの「プロパティ」から文字の大きさ、太さ、フォントの種類等の文字に関する必要な情報を確認できます。

文字の大きさ、太さ、フォントの種類などの確認

画像を書き出す

左上のメニューから「ウィンドウ」→「アセットの書き出し」を選択します。

画像を書き出す

表示されたパネル内に、書き出したい画像をドラッグ&ドロップします。その後、画像の拡大サイズと拡張子をそれぞれ選択し、「書き出し」ボタンをクリックすると画像を書き出せます。

画像を書き出す

Photoshopのデザインデータの場合

次に、Photoshopのデザインデータからコーディングする際の扱い方について説明していきます。(ほとんどIllustratorと同様ですが多少違う点がありますのでご注意下さい)

右側に固定で配置しているツールの見方

右端に固定されている情報の見方について説明します。主に扱うのは「プロパティ」と「レイヤー」の部分になります。

「プロパティ」・・・選択した要素の高さや幅、色、文字情報などを見ることができます。

右側に固定で配置しているツールの見方

「レイヤー」・・・透明なシートに画像、文字などの要素を重ね合わせることで1枚のデザインを作成しています。特定のレイヤーを選択したい場合はここから操作します。

右側に固定で配置しているツールの見方

測定する数値の単位を「px」に変更する

まずは、測定する数値の単位を「px」に変更しましょう。

画面左上の「Photoshop」→ 「環境設定」 → 「単位・定規」を選択します。

測定する数値の単位を「px」に変更する

表示されている全ての単位を「pixel」に変更してOKボタンをクリックします。

測定する数値の単位を「px」に変更する

元の画面に戻り、プロパティでそれぞれ数値の単位が「px」になっていればOKです。これで測定した数値の単位が全てピクセルになります。

測定する数値の単位を「px」に変更する

要素幅・高さの計測

幅や高さを計測したい画像をクリックし、「変形」の欄から幅と高さを確認できます。

要素幅・高さの計測

余白の計測

左側のツールから「長方形ツール」を選択し、測りたい部分をドラッグします。ドラッグしたら、右側ツール内の「プロパティ」→「変形」から幅と高さを確認できます。

余白の計測

使われている色の確認

確認したい要素を選択し、右側ツールの「塗り」をクリックします。その後カラーピッカーをダブルクリックし、表示されたパネル内の6桁のカラーコードにて確認できます。

使われている色の確認
使われている色の確認

文字の大きさ、太さ、フォントの種類などの確認

確認したい要素を選択し、右側ツールの「プロパティ」から確認できます。

文字の大きさ、太さ、フォントの種類などの確認

画像を書き出す

右側ツールの「アートボード」から書き出したい画像、フォルダの上でダブルクリック→「書き出し形式」を選択します。その後、画像の拡大サイズと拡張子をそれぞれ選択し、「書き出し」ボタンをクリックする事で、画像を書き出せます。

画像を書き出す
画像を書き出す

まとめ

今回はIllustratorとPhotoshopからコーディングする方法についてご紹介しました。

XDやFigmaに比べるとIllustratorとPhotoshopからのコーディングは少し大変ですが、基本的な使い方さえ覚えておけばスムーズに操作出来るようになると思います。

まだIllustratorやPhotoshopの操作に慣れていない方は、是非今回紹介した事を参考にしてコーディングに役立てて頂ければ幸いです。

私たち「シンス株式会社」は福岡でホームページ制作を行なっております。ホームページを作成したい方やコーディングのみ・デザインのみでもご依頼可能です。

過去の制作実績、サービス内容、料金体制については、下記リンクよりご覧ください。

https://since-inc.jp

ここまで読んでくださってありがとうございました!

〈 この記事を書いた人 〉

角田翼

角田翼

社内では、Webサイトのコーディングを主に担当しています。

ユーザー目線で使いやすく、ターゲットにしっかり検索して見てもらえるWebサイトの構築を目指してます。

その他のオススメの記事

ホームページ制作のことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!