2020年2月1日ツイートシェアB!はてブポケットPhotoshopのコーディングは、テキストのコピーからCSSの確認など大変な部分が多いですよね。そもそもPhotoshopの操作に慣れていないから、あまり触りたくないという...「Zeplin」というサービスを使えば、Photoshopからの大変だったコーディング作業をめちゃくちゃ効率化することが可能です!ぜひ、Photoshopからのコーディングに消耗している方は使ってみてください。おわりZeplinへユーザー登録Zeplinの公式サイトは以下になります。free」から登録画面へ遷移できます。ZeplinGoogle認証か、メールアドレスとパスワード入力から新規登録します。登録したメールアドレスに認証用のリンクが届くと思うので、クリックして認証してあげましょう。Zeplinアプリをインストール以下からZeplinのアプリをインストールします。CenterMac、Windowsそれぞれ用意されているので、ご自身の環境に応じてダウンロードしてください。ZeplinアプリにログインZeplinアプリを開くとログイン画面が表示されるので、先ほど登録したアカウントでログインしてあげてください。Zeplinにプロジェクトを作成プロジェクトを作成してあげてください。Project」から追加が可能です。ホームページ制作であれば「Web」を選択します。プロジェクト名を決めます。リンクZeplinとPhotoshopを連動する方法それでは、ZeplinとPhotoshopを連動していきましょう。ちなみに、Zeplinは「Sketch」「XD」「Figma」「Photoshop」に対応しています。Zeplinアプリを入れた次点で連動されている実は、Zeplinアプリを入れた時点でPhotoshopとの連動はできてるはずです。Automatically」にチェックが付いているはずです。付いていない場合は、付けてあげてください)Photoshop側を見ていただき、エクステンションからZeplinが入っていればOKです!連動されていない場合...連動されていない場合は手動でプラグインを追加してあげればOKです。Macの場合の画面です...以下のZeplin公式にダンロード素材は揃っています。Support/Adobe/CEP/extensionsへ移動します。ダウンロードしたフォルダを解凍してio.zeplin.photoshop-panelを格納してあげてください。アプリケーションフォルダ内のPhotoshopのフォルダがあります。この中の「Plug-ins」→「Generator」に移動していただき、io.zeplin.photoshop-pluginを格納してあげます。表示されるようになります。PhotoshopからZeplinへの書き出しそれでは実際にPhotoshopのデザインカンプからZeplinへ書き出してみます。驚くほどコーディングが簡単になりますよ!アートボードを作成するPhotoshopからZeplinへの書き出すためには、Photoshopに「アートボード」が必要です。アートボードがない場合は作ってあげる必要があります。Zeplinにチェックを入れると、Zeplinのパネルが開きます。Zeplin」とZeplinパネルにボタンが表示されるので、クリックすると書き出す処理が開始されます。書き出し先のプロジェクトを選択して、「Import」します。読み込まれたアートボードをダブルクリックすると詳細が表示されます。あとはポチポチしていけば直感的に分かるはずです。実際にポチポチしている様子は以下です。画面上に余白の数字が出て、右側のパネルにはCSSの値がコピペできる形で表示されます。サイズの調整Zeplinの真骨頂(だと自分が思っている)なのが、画面全体の倍率を変更できるところですね。2分の1倍か1倍かの2種類ですが、、、スマホ用のデザインカンプってデザイナーさんによってはRetina対応で幅を2倍のサイズで作成されていたりします。コーディングする際にはこの値を半分に計算しつつ行う必要があったのですが、Zeplinを使えば画面全体を半分にしてくれるので、コーダーが計算する必要はなくります。設定する場所はZeplinのダッシュボード画面です。1x」の部分にある鉛筆アイコンを選択すれば、値を半分にするかどうかを選択できます。@haniwa008PhotoshopのデザインカンプをZeplinに書き出してコーディングしやすくする方法でした。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。【まずはここから】Webアクセスビリティを意識したコーディングの基本はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。