Photoshopからのコーディング方法を知りたいけど、Figmaとかより難しいって聞くなぁ。どうやるんだろ。
実はPhotoshopからのコーディングは「Zeplin」で行うと神的に楽になります。
そこで今回は「PhotoshopとZeplinを連携して爆速コーディングする方法」を紹介します。
Photoshopは実はWeb制作案件ではまだまだいっちょ前に活躍中なので、是非操作方法をマスターしておいてくださいね！
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
前提：Photoshopが必要
Adobe CCを最安で準備する
Photoshopを利用するには当然購入している必要があるわけですが、「デジハリオンライン
」で申し込むのが最安になるので、ここで準備しておきましょう！！
Zeplinとは？
Zeplinはデザイナーが作成したデザインカンプをコーダーに共有するためのツールです。
Figmaが便利になったので、最近はあまり聞かないですが、PhotoshopのPSDデータを入稿するとFigmaやXDのように直感的で軽快にデザインデータが操作できるので、導入します。
Photoshopデザインでそのままコーディングしようとすると、重くて直感的じゃないし、嫌になりますね。
そもそもPhotoshopってFigmaと違って、WebのUI作る専用ソフトじゃないので、仕方ないのですけどね…
ZeplinとPhotoshopの連携方法
本記事はMacbook（intell）環境で動作確認をしているため、記事と違う部分もあります。以下参考になります。
補足(MacBook Air(M2)使用時)
- Rosetta2を入れて「Rosettaを使用して開く」にチェック
- Photoshopのversionを25.〜にする
❶Zeplinのセットアップ
まずは公式サイトにアクセスして、アカウント登録を行います。
その後、create a projectを選択。
「Web→Create」を選択。
「Adobe Photoshop」を選択。
拡張機能が動かない可能性があるので、Learn Moreの手順に沿って下さい。
「download the Zeplin desktop app」を選択し、アプリをダウンロードします。
その後、ログイン。
すると以下の画面になります。
ここからZeplinにPhotoshop関連のプラグインを入れます。実はデフォルトでも入ってるらしいですが、念のため。
「Zeplin→Adobe Photoshop Integration→Install Plugin」
❷Photoshop側の準備
Photoshopを開いて、「設定→一般」をクリック。
「Generatorを有効にする」がチェックされていることを確認します。
❸PSDデータをZeplinで開く
まもなくZeplinの世界へ行けます。
Photoshopで「ウィンドウ→エクステンション→Zeplin」をクリック。
取り込みたいアートボードを選択してから、「Export」をクリック。
確認して「Import」します。
これにてZeplinにPhotoshopデザインがインストールされました。
確認してみてください。とても軽いし、余白が自動で取れるのが感動的！！
ZeplinでのPhotoshopデザインのコーディング方法
画像の書き出しはPhotoshopの画像アセットを利用
画像の書き出しはPhotoshopから行ったほうが楽です。
まずPhotoshopファイルを開き、「生成→画像アセット」をクリック。
その後、ダウンロードしたい素材に「jpg,png.svg」など拡張子がついてなければ、つけます。
すると、PSDデータと同階層にアセットフォルダが生成されます。
この中に拡張子を追加した素材が自動で入っています。
弊コーディング課題のPhotoshopデザインカンプからのコーディングでは最初から拡張子がついています。
テキスト情報の確認
- font-family
- font-weight
- font-size
- line-height
- color
- テキスト内容
これらを確認できます。テキストはクリックすればコピーできるのがPhotoshopとの大きな違いです。
borderやshadowの確認
太さや色を確認できます。
shadow系は、出力されているCSSのほうが見やすいので、こちらを見れば良いと思います。
ZeplinでPhotoshopデザインカンプも爆速コーディング!!
今回は「PhotoshopとZeplinを連携して爆速コーディングする方法」を紹介しました。
PhotoshopデザインのままコーディングするよりZeplinと連携させたほうが楽なので、ぜひ今回の記事を参考に練習してみてください。
私が出しているPhotoshopデザインカンプからのコーディングは、コーディング後にオリジナルポートフォリオ化してもらい、レビューを受けることでポートフォリオ利用できますので、そちらもぜひご活用ください。
このサイトでは他にもFigmaやXDからのコーディング方法も解説しているのでそちらも覚えておくといいかと思います。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
