Web制作ラボ

無料でPhotoshopのファイル(PSD)を開く方法。ソフトご紹介。

無料でPhotoshopのファイル(PSD)を開く方法。ソフトご紹介。Web制作ラボ

webサイトのコーディング案件では、Adobe社の画像編集ソフト「Photoshop」が大活躍します。

しかしご存知の通り、Photoshopは有料ソフト。これからコーディングを始めようという初心者の方が、ここに投資するべきか悩むのも無理は無いと思います。

コーディング案件ではPhotoshopが必要って聞くけど、そもそもなんで必要なの?

代わりになるフリーソフトは無いかな?

今回はそんな疑問にお答えするべく、そもそも何故Photoshopが必要なのかと、Photoshopが無いときに代わりに使えるフリーソフトのご紹介の2部構成で進めていきます。

Photoshopの必要性

webサイトのコーディング案件は、クライアントからデザインデータを頂き、それをHTML、CSS、JavaScriptでwebサイトに反映させるお仕事です。

で、このデザインデータですが、一般的なpng、jpeg、gifといった画像形式で渡される事はまずありません。最も多いのは「psd」というファイル形式のデータです。

PSD・・・Photo Shop Data

そうです。「psd」とはPhotoshopで作成したデータに付く拡張子です。

通常の画像形式との違いは、1つのpsdファイルの中に「テキストデータ」、「画像データ」、「構成する全要素のサイズ」、「画像の表示・非表示」といったデータが詰め込まれていること。

「画像の表示・非表示」情報の例として、マウスカーソルを乗せた時に色が変わるボタンをwebサイトに設置したいとします。しかし、「マウスを乗せる前のボタン」「マウスを乗せたときのボタン」。この2つをパーツを、デザインの中に並べて入れ込んでしまうと、コーダー側が「ボタンを2つ並べてwebサイトに表示するんだな」と勘違いをしてしまう可能性が有ります。

そういったトラブルを避けるために、Photoshopのレイヤー機能というもので、「マウスを乗せる前のボタン」の位置に「マウスを乗せたときのボタン」のデザインを重ね、一時的に非表示にしておきます。そして隠した方のボタンのレイヤーに「マウスオン時のデザイン」といった様な情報を書き残しておくことで、コーダーへの情報伝達をスムーズに行うことが出来ます。

他にも「テキストデータ」が入っていることでフォントのサイズや太さを数値で確認することが出来ますし、画像データも個別に用意されたパーツを配置している事が多いので、欲しい部分を画の中から範囲指定して「切り取る」という作業を行わずとも、事前に用意された画像を「取り出す」イメージで扱うことが出来ます。

psd形式でデザインデータを受け渡しすることのメリットがおわかりいただけたでしょうか。

psdファイルの内容を見ることが出来れば案件対応は可能

最低限、psdファイルを開くことが出来れば、お客様のデザインデータを見ることが可能です。
以下にpsdファイルを開くことが出来るフリーソフトをご紹介させていただきます。

ただし、使用するにあたっての注意点も有りますので、よく確認したうえでご使用下さい。

1.Adobe XD

Adobe XDのサイト

Photoshopと同じ、Adobe社が開発を行う無料ソフトです。

webデザインのワイヤーフレームやデザインカンプ作成に便利な機能を多く持っています。

まだ新しいソフトなので普及率は圧倒的にPhotoshopの方が高いです。

しかし、その使い勝手の良さから非常に高い評価を得ており、数年後はこちらのソフトでデザインデータを作成するのが主流になっている可能性もあります。

そしてこのAdobe XD。psdファイルを開くことが出来るのです。

ただし私の経験上、XDでpsdファイルを開くと、元ファイルと配置がズレて出力されることが頻繁にあります。(物によっては「ズレる」ってレベルじゃ収まらない物も・・・。)

私が以前、クライアントから受け取ったpsdデータをXDで開封した際に、変な位置にトップ画像が移動していた物が有りました。明らかに不自然だったため、初見のデータではありましたが「さすがにこれはおかしい」と思い、他のソフトで確認したところ、予感的中。

これが気づきにくい位置の配置ズレだったら・・・そのまま間違ったデザインで制作を進め、クライアントへ納品してしまっていました。自分が見たデザイン通りにバッチリ制作したにも関わらず、「デザインが違う」と修正作業が入ってしまっては辛いですからね。

画像の取り出し機能(アセット)については快適に行えるので、アセット目的で割り切って使用されるのが無難かと思います。

個人的にはpsdの開封用としてではなく、デザイン作成用途として触れておきたいソフト。

2.GIMP

GIMP公式サイト

フリーでありながら多機能で有名なソフト。
読み方は「ギンプ」「ジンプ」どちらも正解ですが「ギンプ」派が多数の様です。

実際にいくつかpsdファイルを読み込んでみましたが、元データと配置の異なるパーツは見当たりませんでした。

フォトショ以外でpsdファイルを見るなら、これがいちばん無難かな~と思います。

動作も軽くおすすめですが、多機能であるがゆえに使い方がわかりづらいという欠点もありますが、かなり昔からあるソフトなので、ネット上に使い方の情報が沢山あるので安心。

3.Photopea

Photopeaのサイト

ブラウザ上で使用するタイプの画像編集ソフトです。

編集画面がPhotoshopそっくり!
Photoshopの雰囲気が味わいたい方は一度触ってみると良いかと思います。

ただ、Photoshopと比べて使える機能は非常に少ないです。

こちらもpsdファイルに対応していますが、Adobe XD同様デザインが崩れて表示されるパターン有り。ご使用の際には要注意です。

おわりに ~結局、Photoshopを使うのが一番だと思う~

以上、今回はpsdファイルを開くことの出来る無料ソフトをご紹介させていただきました。

ただ、先ほども申し上げた通り、psdファイルを開くソフトがPhotoshopで無い以上、絶対にその情報が正しいという保証が出来ないのは厳しいです。

コーディング案件では特に、デザインデータに可能な限り再現したサイトが良品と判断されます。

Photoshop以外のソフトで開いたデザインデータを信じ、「完全に一致するサイトを作ったはずなのに訂正依頼をうけた」とあっては、クライアントをお待たせすることになりますし、何よりあなた自身が辛い想いをするハメになります。

そういった部分をよ~く考えてたうえで、使用するソフトを選定すべきだと私は思います。

ただ案件によっては、デザインデータと雰囲気が近ければOKというものも有りますし、個人利用の場合は多少のズレなんて気にする事もありません。

今回ご紹介したソフトについては、目的と用途を充分に考慮したうえで、使用するか判断して頂ければと思います。

ちなみにAdobeソフトを検討している方にお得な情報として、ヒューマンアカデミー通信講座『たのまな』でAdobeCC(12ヶ月契約)が約半額で買えます。

AdobeCC+通信講座購入で学割適用!「たのまな」を買ってみた
「たのまな」でAdobeCCと通信講座をセットで購入すると学割が効くので、他の方法で購入するのと比べて半額近い値段で買う事が出来ます。「在宅ワークや副業でAdobeソフト(Adobe Creative Cloud )が必要になりそう!」「でも値段が高すぎて購入する勇気が出ない!」こんな方にオススメです!

2020年4月8日~2020年6月30日の期間限定キャンペーンなので、お悩みの方はこのチャンスを逃さないように!

トップページへ戻る