webサイトのコーディング案件では、Adobe社の画像編集ソフト「Photoshop」が大活躍します。
しかしご存知の通り、Photoshopは有料ソフト。これからコーディングを始めようという初心者の方が、ここに投資するべきか悩むのも無理は無いと思います。
コーディング案件ではPhotoshopが必要って聞くけど、そもそもなんで必要なの？
代わりになるフリーソフトは無いかな？
今回はそんな疑問にお答えするべく、そもそも何故Photoshopが必要なのかと、Photoshopが無いときに代わりに使えるフリーソフトのご紹介の2部構成で進めていきます。
Photoshopの必要性
webサイトのコーディング案件は、クライアントからデザインデータを頂き、それをHTML、CSS、JavaScriptでwebサイトに反映させるお仕事です。
で、このデザインデータですが、一般的なpng、jpeg、gifといった画像形式で渡される事はまずありません。最も多いのは「psd」というファイル形式のデータです。
そうです。「psd」とはPhotoshopで作成したデータに付く拡張子です。
通常の画像形式との違いは、１つのpsdファイルの中に「テキストデータ」、「画像データ」、「構成する全要素のサイズ」、「画像の表示・非表示」といったデータが詰め込まれていること。
「画像の表示・非表示」情報の例として、マウスカーソルを乗せた時に色が変わるボタンをwebサイトに設置したいとします。しかし、「マウスを乗せる前のボタン」「マウスを乗せたときのボタン」。この２つをパーツを、デザインの中に並べて入れ込んでしまうと、コーダー側が「ボタンを2つ並べてwebサイトに表示するんだな」と勘違いをしてしまう可能性が有ります。
そういったトラブルを避けるために、Photoshopのレイヤー機能というもので、「マウスを乗せる前のボタン」の位置に「マウスを乗せたときのボタン」のデザインを重ね、一時的に非表示にしておきます。そして隠した方のボタンのレイヤーに「マウスオン時のデザイン」といった様な情報を書き残しておくことで、コーダーへの情報伝達をスムーズに行うことが出来ます。
他にも「テキストデータ」が入っていることでフォントのサイズや太さを数値で確認することが出来ますし、画像データも個別に用意されたパーツを配置している事が多いので、欲しい部分を画の中から範囲指定して「切り取る」という作業を行わずとも、事前に用意された画像を「取り出す」イメージで扱うことが出来ます。
psd形式でデザインデータを受け渡しすることのメリットがおわかりいただけたでしょうか。
psdファイルの内容を見ることが出来れば案件対応は可能
最低限、psdファイルを開くことが出来れば、お客様のデザインデータを見ることが可能です。
以下にpsdファイルを開くことが出来るフリーソフトをご紹介させていただきます。
ただし、使用するにあたっての注意点も有りますので、よく確認したうえでご使用下さい。
1.Adobe XD（スタータープラン）
Photoshopと同じ、Adobe社が開発を行う無料ソフトです。
webデザインのワイヤーフレームやデザインカンプ作成に便利な機能を多く持っています。
まだ新しいソフトなので普及率は圧倒的にPhotoshopの方が高いです。
しかし、その使い勝手の良さから非常に高い評価を得ており、数年後はこちらのソフトでデザインデータを作成するのが主流になっている可能性もあります。
そしてこのAdobe XD。psdファイルを開くことが出来るのです。
ただし私の経験上、XDでpsdファイルを開くと、元ファイルと配置がズレて出力されることが頻繁にあります。（物によっては「ズレる」ってレベルじゃ収まらない物も・・・。）
私が以前、クライアントから受け取ったpsdデータをXDで開封した際に、変な位置にトップ画像が移動していた物が有りました。明らかに不自然だったため、初見のデータではありましたが「さすがにこれはおかしい」と思い、他のソフトで確認したところ、予感的中。
これが気づきにくい位置の配置ズレだったら・・・そのまま間違ったデザインで制作を進め、クライアントへ納品してしまっていました。自分が見たデザイン通りにバッチリ制作したにも関わらず、「デザインが違う」と修正作業が入ってしまっては辛いですからね。
画像の取り出し機能（アセット）については快適に行えるので、アセット目的で割り切って使用されるのが無難かと思います。
個人的にはpsdの開封用としてではなく、デザイン作成用途として触れておきたいソフト。
2.GIMP
フリーでありながら多機能で有名なソフト。
読み方は「ギンプ」「ジンプ」どちらも正解ですが「ギンプ」派が多数の様です。
実際にいくつかpsdファイルを読み込んでみましたが、元データと配置の異なるパーツは見当たりませんでした。
フォトショ以外でpsdファイルを見るなら、これがいちばん無難かな～と思います。
動作も軽くおすすめですが、多機能であるがゆえに使い方がわかりづらいという欠点もありますが、かなり昔からあるソフトなので、ネット上に使い方の情報が沢山あるので安心。
3.Photopea
ブラウザ上で使用するタイプの画像編集ソフトです。
編集画面がPhotoshopそっくり！
Photoshopの雰囲気が味わいたい方は一度触ってみると良いかと思います。
ただ、Photoshopと比べて使える機能は非常に少ないです。
こちらもpsdファイルに対応していますが、Adobe XD同様デザインが崩れて表示されるパターン有り。ご使用の際には要注意です。
おわりに ～結局、Photoshopを使うのが一番だと思う～
今回はpsdファイルを開くことの出来る無料ソフトをご紹介しました。
ただ先ほども記述した通り、psdファイルをPhotoshop以外のソフトで開けたとして、元データを100%再現できている保証はありませんし、自分では確認のしようが無いんですよね。
個人利用の場合は誤差程度で済むかもしれませんが、仕事でpsdファイルを扱う方にはPhotoshopを導入することを強くオススメします。
「Adobeソフトが高すぎて買えないからこの記事を見に来たんじゃい！」と言われてしまいそうなので、Photoshopを安く購入する方法について記事を書きましたので参考にどうぞ。
今回ご紹介したソフトについては、目的と用途を充分に考慮したうえで、使用するか判断して頂ければと思います。
それでは今回はこのへんで失礼します！