Web制作実務役立ち

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】
本ページにはプロモーションが含まれています。
まさひろくん

Photoshopからのコーディング方法を知りたいけど、Figmaとかより難しいって聞くなぁ。どうやるんだろ。

実はPhotoshopからのコーディングは「Zeplin」で行うと神的に楽になります。

そこで今回は「PhotoshopとZeplinを連携して爆速コーディングする方法」を紹介します。

Photoshopは実はWeb制作案件ではまだまだいっちょ前に活躍中なので、是非操作方法をマスターしておいてくださいね!

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

前提:Photoshopが必要

Adobe CCを最安で準備する

Photoshopを利用するには当然購入している必要があるわけですが、「デジハリオンライン」で申し込むのが最安になるので、ここで準備しておきましょう!!

Zeplinとは?

Zeplinはデザイナーが作成したデザインカンプをコーダーに共有するためのツールです。

Figmaが便利になったので、最近はあまり聞かないですが、PhotoshopのPSDデータを入稿するとFigmaやXDのように直感的で軽快にデザインデータが操作できるので、導入します。

しょーご

Photoshopデザインでそのままコーディングしようとすると、重くて直感的じゃないし、嫌になりますね。

そもそもPhotoshopってFigmaと違って、WebのUI作る専用ソフトじゃないので、仕方ないのですけどね…

ZeplinとPhotoshopの連携方法

本記事はMacbook(intell)環境で動作確認をしています。

❶Zeplinのセットアップ

まずは公式サイトにアクセスして、アカウント登録を行います。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】
Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

その後、create a projectを選択。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

Web→Create」を選択。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

Adobe Photoshop」を選択。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】
M1,M2Macの場合

拡張機能が動かない可能性があるので、Learn Moreの手順に沿って下さい。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

「download the Zeplin desktop app」を選択し、アプリをダウンロードします。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】
Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

その後、ログイン。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

すると以下の画面になります。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

ここからZeplinにPhotoshop関連のプラグインを入れます。実はデフォルトでも入ってるらしいですが、念のため。

Zeplin→Adobe Photoshop Integration→Install Plugin

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

❷Photoshop側の準備

Photoshopを開いて、「設定→一般」をクリック。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

Generatorを有効にする」がチェックされていることを確認します。

❸PSDデータをZeplinで開く

まもなくZeplinの世界へ行けます。

Photoshopで「ウィンドウ→エクステンション→Zeplin」をクリック。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

取り込みたいアートボードを選択してから、「Export」をクリック。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

確認して「Import」します。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

これにてZeplinにPhotoshopデザインがインストールされました。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

確認してみてください。とても軽いし、余白が自動で取れるのが感動的!!

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

ZeplinでのPhotoshopデザインのコーディング方法

画像の書き出しはPhotoshopの画像アセットを利用

画像の書き出しはPhotoshopから行ったほうが楽です。

まずPhotoshopファイルを開き、「生成→画像アセット」をクリック。

その後、ダウンロードしたい素材に「jpg,png.svg」など拡張子がついてなければ、つけます。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

すると、PSDデータと同階層にアセットフォルダが生成されます。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

この中に拡張子を追加した素材が自動で入っています。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

弊コーディング課題のPhotoshopデザインカンプからのコーディングでは最初から拡張子がついています。

テキスト情報の確認

  • font-family
  • font-weight
  • font-size
  • line-height
  • color
  • テキスト内容

これらを確認できます。テキストはクリックすればコピーできるのがPhotoshopとの大きな違いです。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

borderやshadowの確認

太さや色を確認できます。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

shadow系は、出力されているCSSのほうが見やすいので、こちらを見れば良いと思います。

Photoshopデザインからのコーディングのやり方【Zeplin導入で爆速に】

ZeplinでPhotoshopデザインカンプも爆速コーディング!!

今回は「PhotoshopとZeplinを連携して爆速コーディングする方法」を紹介しました。

PhotoshopデザインのままコーディングするよりZeplinと連携させたほうが楽なので、ぜひ今回の記事を参考に練習してみてください。

私が出しているPhotoshopデザインカンプからのコーディングは、コーディング後にオリジナルポートフォリオ化してもらい、レビューを受けることでポートフォリオ利用できますので、そちらもぜひご活用ください。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!