PSD2Webを公開しました。

WEBサービス

PSD2Webとは、PSDファイルをコーディングする際の初期作業としての画像ファイルの書き出しと雛形のHTML作成を効率化するためのコーダー向けのサービスです。

PSD2Web

PSD2Web.net



10年以上、HTMLコーディングに携わっていますが、かねてから無駄の多いコーディング業務を効率化したいと思っており、その一環として制作いたしました。

 

私の場合、基本的にコーディングは下記の手順で行いますが、おそらく多くの方はほぼ同じような手順なのではないかと思います。

 

  • イラレ、フォトショなどのデザインソフトでファイルを開き、必要な画像をスライスするなどして書き出す。
  • デザインを見ながら先にHTMLをすべて書き出す。
  • デザインに合わせて調整を加えながらCSSを書いていく。

 

基本的に単純作業なため、私自身はあまりコーディング作業が好きではないのですが、この中でも特に画像の書き出しとHTMLをひたすら書いていく作業はひたすら面倒で苦痛です。

 

さらに言えば近年はフロントエンドの技術が発達したことで、レスポンシブ対応やPage Speed Insights対応は当たり前、複雑なCSSアニメーションなど何度も修正を求められたりなど、手間がかかるわりには工数や費用についてクライアントからの理解を得にくい分野でもあり、経営者目線で見てもあまり費用対効果のよい業務ではないのが率直なところです。コーディング自体は（もちろん質や速さに違いはありますが）最低限のレベルであれば比較的、誰でもできる分野なので、下っ端のエンジニアや下請けに安い単価でかなりの無理をさせて成り立っている場合も少なくないのが実情ではないかと思います。

 

このようなコーディング業務への個人的な恨みつらみ（笑）が本サービスを開発するモチベーションとなっています。

PSD2Webでできること

PSDファイルを読み込み、画像ファイルと合わせてimgタグの埋め込まれたHTMLを出力する、というのが基本的な機能となりますが、その他に下記のようなことができます。

 

  • pugファイルでの出力（htmlと選べます）
  • webpファイルの生成（picture + source + imgタグとして出力）
  • 出力する画像ファイルのフォーマット（pngとjpegから選択）
  • テキストレイヤーをテキストとしてHTMLに出力

 

個人的にはSlackなどで受け取ったpsdファイルをアップロードし、スマホのみでちょちょいとコーディングの下準備まで行うことを想定しています。（Photoshopを立ち上げることなくすべての作業が完結するのが理想ですが、レイヤースタイルが存在するとスマートオブジェクトに変換しないと正常に表示されないため、結局はPhotoshopを立ち上げなければならない・・・）

PSD2Webでできないこと

  • レイヤーエフェクト、ブレンドモードには対応していません。
  • AdobeRGBやCMYKなどの色情報は正確に反映されない場合があります。
  • 画像そのものの編集
  • 基本的にJS処理なので、重たいファイルは微妙かも知れません。（300M程度のpsdでは問題ないことを確認済み）

 

基本的には余計な機能は省いてHTMLに書き出すための機能に絞っています。

また、レイヤーエフェクトについては非常に残念なところではありますが、技術的な問題があり対応ができていないため、レイヤーエフェクトが反映された状態で画像を書き出す場合には一旦、Photoshopでpsdファイルを開いて該当のレイヤーを右クリックして「スマートオブジェクトに変換」か「レイヤースタイルをラスタライズ」して保存していただければと思います。

AdobeRGB、CMYKなどのカラー設定については、そもそもPhotoshopでpsdファイルを開いて作業をした場合でもWeb用に画像を書き出した時点で色味が変わってしまう可能性が高いため、デザイナーさんがデザインを行う段階でカラー設定をsRGBに設定してもらうようにするのがよいかと思います。

これからの予定

今後、下記について対応予定です。

 

  • AVIFへの対応
  • CSS/SCSSの出力
  • （Retina対応など）画像の複数サイズの出力
  • AWS S3、DropBoxなどストレージサービスとの連携
  • XD、スケッチ、イラレなどへの対応（可能かどうか要調査）

 

実装についての技術的なことはまた別の記事でまとめたいと思います。

まだ実験段階ではありますが、興味がある方はぜひ使ってみて頂ければ幸いですm(_ _)m