2017.04.04 ZeplinとSlackで、ディレクターの方とのデザインに関するやりとりがスピードアップした 私はデザイナー兼フロントエンジニアです。 ZeplinとSlackを使って、ディレクターの方とのデザインに関するやりとりのスピードがとても上がったので、 どのようにやり取りをしているか紹介したいと思います。 Zeplinとは Sketch3やPhotoshopのアートボードから、レイアウト指示書を作成してデザインを確認できるツールです。 公式サイト https://zeplin.io/ Sketch3やPhotoshopから、プラグインでZeplinにデザインをアップロードして利用できます。 アップロードすると、Zeplinでは次のような画面にSketch3やPhotoshopのデザイン(アートボード)が表示されます。 オブジェクト間の距離やCSSなどが表示されます。テキスト

フロントエンドエンジニアの岡田です。 LCLでは、デザイナーとエンジニアの連携をスムーズにするために、Zeplinを導入しました。 今回は、導入にあたって行ったことをまとめました。 デザイン＆コーディング体制 Zeplin導入前に使っていたツール Zeplinとは Zeplin導入の流れ インストール チームへの普及 最初はモブプロ方式の勉強会 みんなで触ってみる Chatworkにグループを作成 有料プラン契約 STARTERプランでできること その他のプランとの比較 Adobe Creative Cloud Extractと比べて良いところ テキスト情報・CSS情報がコピーできる デザインカンプへのコメントが簡単 透明にしてブラウザに重ねられる その他 課題 Photoshopのアートボードが必要 Zeplin内で表示の切り替えができない まとめ デザイン＆コーディング体制 LCLでは

Webサイトやスマホアプリのデザインの指示書やスタイルガイドをわざわざ作成するのは時間がかかり、なかなか面倒です。Adobe XDやPhotoshopなどで作成したファイルから、Zeplinでこれらを自動生成する方法を紹介します。 Zeplinは1プロジェクトまで無料で利用できます。Adobe XDにもデザインスペックという機能でデザイン指示書を自動生成できますが、Zeplinの方が一枚上手だと思います。 ZeplinはAdobe XD, Photoshop, Sketch, Figmaに対応しており、ここではAdobe XDを使用して解説します。基本的な使い方は同じです。 準備: Adobe XDとZeplinのインストール Adobe XDでデザインを開く Adobe XDからZeplinにファイルをインポート Zeplinでデザインの指示書・スタイルガイドを作成 準備: Adobe

どうも、ヒガです。今年の3月にフロントエンドエンジニアとして入社しました。 それまでは、沖縄で10年ほどWebサイト制作を中心として働いていました。こういった会社としては8社目になります。マークアップエンジニアや Webデザイナーなど、微妙に職種を変えながら、いろいろな会社で仕事をしてきてました。 正直なところできないことばかりですが、30歳を過ぎて「まあ東京でも行ってみるか」くらいのノリで転職したのは、今までの経験と培ってきた実力に多少の自信はあるからだと思います。まあ、これからも今までどおり、好きだと思えることへ緩やかにシフトチェンジしながら生きていこうと考えています。 さて、あれは高校生のころです。先生に3階から1階に机を運ぶように頼まれました。面倒だと思った僕は閃いたのです。机を逆さにして階段を滑らせると、いい感じで運べるのでは……と。結局、現実は思うようにはいかないものでしたが、

ホームWebデザインZeplin + Adobe XDを導入して、社外のエンジニアさんにデザイン共有したら、めちゃくちゃ連携がスムーズになった話【制作フローの改善】 Zeplin + Adobe XDを導入して、社外のエンジニアさんにデザイン共有したら、めちゃくちゃ連携がスムーズになった話【制作フローの改善】 2018 12/20 Zeplin と Adobe XD はデザイナーとエンジニアを幸せにする！？ デザイナーの関川です。 デザインをしながら?釣りをするのが夢です。 先日とある案件を通して、Adobe XDでデザインをして社外のエンジニアさんにZeplin（フリープラン）で共有してみたら、連携が劇的にスムーズになったので、その時の感動と使用感についてまとめてみました。 目次 これまでのデザイン共有について ? Zeplinってなに? ? Adobe XDってなに? ? Zeplin

こんにちは！ 初めまして。 営業本部デザイン室、ひよっこデザイナーのミヤザワと申します。 「デザイナー」というと、少しかっちょいい雰囲気になってしまいますが デザイナーはデザイナーでも「ひよっこ駆け出しデザイナー」として所属しております。 このブログでは、 同じような「駆け出しデザイナー」の方が読んだ時に 「頭の片隅にでも入れておこう」と思えるようなお話ができたらいいなと思っています。 （デザインについて考える機会も増やしたい） 記念すべき第1本目は「XD」と「Zeplin」についてです。 デザイナーと開発との連携の問題 入社した当初からずっと デザイナーと開発との連携について課題でした。 今までの開発との連携はこのような流れでした。 という流れで連携しており、見ての通り ものすっっっっごく効率が悪い！ 一番 面倒な 大変なことが、カラーコードをメモ帳にまとめること！ ↑こんな感じでメモを

デザイナーの西田です。 弊社では目的に応じて、複数のデザインツールを使い分けてUIデザインを作成しています。 昔は各々好きなデザインツールを使っていたのですが、事業がどんどん拡大し、メンバーが増えていくと、チームで統一されたワークフローがないと回らない状況になっていきました。各ツールの長所＆短所を何度も議論した結果、現在はSketch + InVision + Zeplin + Abstractの組み合わせで進めています（2018年9月時点） 今回の記事では、現状のデザインツール＆フローに至った経緯を紹介していきます。 目次 1. プロダクト＆チーム プロダクト チーム 2. ワイヤーフレーム：自由 3. モックアップ：Sketch vs AdobeXD vs Photoshop Zeplin連携 Sketch Librariesによるコンポーネント化 4. プロトタイプ：InVision