コーダー向けデザインツール解説

コーダーがデザインツールを触るとき

　コーダーがデザインツールを触るときって、デザイナーさんからもらったデータから、以下の作業がしたいときと"ほぼ"同義ですよね。

• 画像を書き出すとき

• margin / paddingを測るとき

• 文字サイズ等を調べるとき

　くらいでしょうか。

　データの形式によってやりたいことがしづらいとかがあると思うので、
・大手4つ：Adobe Photoshop(.psd)/Illustrator(.ai)/XD(.xd)・Figma(.fig)
で、上記の3つのやり方を書いていきたいと思います。

Photoshop

画像を書き出すとき

・書き出したい画像に「書き出したくない文字」などがある場合
　レイヤーパネル（表示されていなかったら「表示」から「レイヤー」を選択）の表示切り替えアイコン（👁）をクリックして非表示にする

レイヤー パネルと表示切り替えアイコン（👁）

・書き出したい画像が大きすぎるから分割したい場合。
　長方形選択ツールで任意のサイズを囲んで「編集＞カット(Ctrl+X / ⌘+X）」「編集＞特殊＞同じところにペースト(Shift+Ctrl+V / Shift+⌘+V)」

長方形選択ツール

・書き出し
　「ファイル＞書き出し＞書き出し形式 / Web用の保存(従来)」

margin/paddingを測るとき

長方形選択ツールで任意の空間を囲んで

長方形選択ツール

「プロパティパネル＞変形」のW / Hをコピーする（入力や変更はしない）

プロパティパネル

文字サイズ等を調べるとき

レイヤーパネルから任意の「テキストレイヤー（Tのアイコン）」を選択

テキストレイヤー

「プロパティパネル＞文字」から文字情報を得る

プロパティパネル

Illustrator

画像を書き出すとき

書き出したい画像のレイヤーパネルの右端をクリック（複数ある場合はShift+クリックで複数選択できる）

レイヤーパネル(選択中は■が表示される)

「レイヤーパネル＞書き出し用に追加」

この例だと「2レイヤー」の右隣のアイコンで「書き出し用に追加」が可能

「アセットの書き出しパネル＞書き出し」

アセットの書き出しパネル

margin/paddingを測るとき

長方形ツールで任意の空間を囲んで

長方形ツール

「プロパティパネル＞長方形」のW / Hをコピーする

プロパティパネル

文字サイズ等を調べるとき

レイヤーパネルから任意の「オブジェクト/グループ」を選択

レイヤーパネル

「プロパティパネル＞文字」から文字情報を得る

プロパティパネル＞文字

XD

画像を書き出すとき

書き出したいオブジェクトを選択＞書き出し対象にする

デザインパネルから「書き出し対象にする」場合（右から3番目のアイコンをクリック）

右のパネルから「書き出し対象にする」場合

右のパネルから「書き出し対象にする」場合（1番下の□をクリック）

・書き出し
　「ファイル＞書き出し＞書き出し形式 / Web用の保存(従来)」

margin/paddingを測るとき

長方形ツールで任意の空間を囲んで

長方形ツール

「パネル(右)＞変形」のW / Hをコピーする（入力や変更はしない）

変形

文字サイズ等を調べるとき

オブジェクトパネルから任意の「テキスト（Tのアイコン）」を選択

テキスト

「パネル(右)＞テキスト」から文字情報を得る

テキスト

figma

画像を書き出すとき

レイヤーパネルから任意の「レイヤー」を選択

レイヤーパネルからレイヤー(Rectangle 1)を選択

「デザインパネル(右)＞エクスポート」から「レイヤー名(Rectangle 1)をエクスポート」

デザインパネル(右)

margin/paddingを測るとき

長方形ツールで任意の空間を囲んで

長方形ツール

「デザインパネル(右)」のW / Hをコピーする（入力や変更はしない）

デザインパネル(右)

文字サイズ等を調べるとき

レイヤーパネルから任意の「テキストレイヤー（Tのアイコン）」を選択

レイヤーパネル

「パネル(右)＞テキスト」から文字情報を得る

テキスト

まとめ

　デザインツールの大手のものは、コーダーにとって「やたらツールが多いもの」と感じられることが多いので、見た目でわかる範囲でのご紹介となりました。

　これ以上の加工などが必要になった際は、自社のデザイナーかその加工をしたいwebデザインをした方に聞くのが1番です。どうしても聞けない！という場合は、お手持ちの「検索スキル」で解決されることを祈っております。

　楽しいホリデーを☆彡