お久しぶりです。Keitaです。コーダーはデザインをもとにコーディングしていく訳ですが、
そのデザインにはどういったものがあるのかを、今回の記事で書いていきたいと思います。
ポエムとして読んでいただければと思います。
デザインデータとは？
デザイナーさんが、デザインソフトで作ったデータの事で、コーダーは、そのデザインデータ通りにコーディングをしていくというのが基本となっております。デザインカンプと呼ばれる場合もあります。
どういったデザインデータがあるの？
- Photoshopで作られたデータ
- Illustratorで作られたデータ
- Adobe XDで作られたデータ
- sketchで作られたデータ
- Figmaで作られたデータ
- Fireworksで作られたデータ
いっぱいありますね。ただ、コーダー初心者の方は太字のソフトの操作方法を覚えれば大体は対応できると思います。
何をするの？
デザインデータから一部分のパーツを抜き出し、画像化する作業があります。これを「書き出し」
といいます。
書き出しだけを覚えればいいの？
基本的にはNOです。デザインデータの中にはたまに雑にデザインされたものもあり、その画像の調整のためにPhotoshopで調整をするといった作業も発生することもあります。そのため、簡単な
Photoshopの操作もコーダーには必須になってきます。
それでは、各ソフトの紹介をしていきます。
Photoshop
Adobe社が開発した、画像加工ソフトです。ファイル形式は「.psd」で提供されることが多いです。他のデザインデータでいびつな書き出しになった場合、このソフトで調整することもあります。
Illustrator
こちらもAdobe社が開発した、画像作成ソフトです。ファイル形式は「.ai」で提供されることが多いです。Photoshopとの違いは、Photoshopが実際に撮影などをした画像を加工するものを中心である機能が多いものに対し、Illustratorはイラストや画像データそのものを作成する機能が中心になっています。
Adobe XD
こちらは最近出てきたソフトウェアで、上記2つとは違い、デザインの前段階のワイヤーフレームという設計図を作成することを主眼としたソフトウェアですが、機能の拡充に伴い、デザインデータとして、提供されることが多く、私も最近はこのデータで提供されたデザインからコーディングすることが多いです。
その他
FireWorks以外は使ったことはありませんが、こういうツールもあることでご紹介しておきます。
Figma
ブラウザ上でデザインができるツールで、共同作業で向いているツールです。
参考記事
https://ferret-plus.com/13195
Sketch
UIデザインに特化したソフトウェアですが、Macしか使えないので、Windows中心に使っている方はあまりなじみがないかもしれません。
参考記事
https://fastcoding.jp/blog/all/webdesign/2019sketch-1/#no0
FireWorks
Adobeが開発していた、Webデザインソフトで、すでに開発が停止していますが、
デザイナーによってはこちらを使ってる方もいるので、頭の片隅に置いておいてください。
ただ、次の章で説明するスライス書き出ししか使えないので、非常に面倒です。
書き出しの種類
書き出しの作業には大きく分けて2種類あり、アセット書き出しとスライス書き出しがあります。
アセット書き出し
レイヤーと呼ばれる部品単位で、書き出しを行うことができる機能です。部品ごとに名前を付けて書き出しすることができるので、ずれがなく書きだすことができます。
スライス書き出し
従来使われてきた書き出し方法で、選択範囲を設定し、その範囲を書きだす手法です。
部品が重なった状態だと一旦書き出したくないレイヤーを非表示にしなければいけない、
1ピクセルのずれも許容できないといった非常にめんどくさい書き出し方法ですが、
アセット書き出しが出る前はこれが主流でした。
スライス書き出しを使うケース
アセット書き出しで、うまく部品が書きだせないときに使います。表示そのままを書きだすので、確実に思い通りの画像が書きだせます。
書き出しの注意点
例えば四角形になっていない画像などは、jpeg形式で保存すると空白の部分が白で表示されます。
白じゃない背景の時、四角になってしまいいびつな形になります。
四角形になっていない人物の画像やイラストなどは、PNG形式で、透過保存をすると、
空白の部分が、背景に溶け込む感じになります。
画像を書きだしたら？
基本デザインデータから書き出した画像はサイズが大きくスマホだと、データ量を多くなると表示も遅くなるので、圧縮を行います。
1番目のサイトは、PNGデータ、2番目のサイトはjpegデータを圧縮するサイトです。
参考になるサイト
Photoshop
https://www.asobou.co.jp/blog/web/photoshop-assets
https://liginc.co.jp/web/design/photoshop/111213
Illstrator
https://blogs.adobe.com/japan/web-start-illustrator-web-design-06-export-images/
Adobe XD
https://helpx.adobe.com/jp/xd/help/export-design-assets.html
まとめ
文章ばっかりで申し訳ありませんでしたが、コーダーはコーディングだけでなく、デザインソフトの簡単な操作も必須です。デザイナーとうまく調整、仲良くしていくのも、一歩進んだWeb制作者としてのスキルになってくるのではないかと感じています。
コメント