こんにちは。デザイナーのKです。
最近アプリのUIデザインを手がけることが多いのですが、その際にエンジニアと「デザインのもろもろのやりとり」問題が生じることが多々あります。

 

完成したアプリを確認すると、

・画像の比率が違う
・余白がバラバラ
・フォントサイズがバラバラ
・思っていた画面遷移じゃなかった

などなど…

 

デザイナーが思っていたものと少し違ったデザインで、アプリが出来上がることがありました。
アプリにとってUIは非常に重要な要素であり、出来る限りアプリの完成形はデザイン通りに完成することが求められます。
何かアプリ側のデザインに間違いやズレなどがあったときに、その都度エンジニアにデザインの画像を送って見ながら調整するのは、とても手間がかかり工数も圧迫します。
そこで今回、私が担当しているアプリのUIデザインで導入しているツール「Zeplin」をご紹介します。

 

『Zeplin』とは？

『Zeplin』
https://zeplin.io/

『Zeplin』は一言で言うと、「デザイナーとエンジニアのUIコミュニケーションツール」です。
「UIコミュニケーション？」と思われる方もいるかと思いますが、要は『Zeplin』を使うことによって、デザイナーとエンジニアのUIの認識を共通化させることが可能になります。

『Zeplin』のインストールや使い方は、調べるとすぐに見つかりますのでここでは書きませんが、以下の画面のようなイメージで、

 

・オブジェクト間のマージン情報
・オブジェクトのサイズ、角丸のサイズ

などがクリック一つでわかるようになります。

 

特にエンジニアの方に役立つのは、「マージン情報」や「フォント情報、カラー情報」などではないでしょうか？
それらも『Zeplin』ならひと目で情報を瞬時に知ることができます。
また、Swift3のコードもクリック一つで自動生成され、使用することもできます。

 

 

他にも便利な機能として、「コメント機能」があります。
以下の画面のように、デザイン画像にコメントを残すことができ、さらにそのコメントに返信することができます。

各イメージ画像は弊社サービスの『Sportare』のデザインになります。

 

『Zeplin』を導入してみてわかったこと

現在進行中の弊社の案件でも、私とエンジニアとの間で『Zeplin』を導入してプロジェクトを進めています。

 

導入してみてデザイナー側から思ったことは、

・デザインの細かい数値がひと目で見えるのでエンジニアに伝えやすい
・コメントを付けて返信も見ることができるので、確認漏れが減った
・Sketchとの相性が良いので、最新のデザインをすぐにアップロードできて共有しやすい

など、非常にメリットが多いです。

 

コメントや履歴の検索ができないことがデメリットとしてありますが、今後改善されればと思います。
しかし、そういったデメリットを上回るメリットが『Zeplin』にはあるので、今後もバシバシ使っていこうと思います！

無料版は1プロジェクトまでしか対応していないので、実務で使うとなると厳しいですが、試しに使うには十分ですので、ぜひ一度使ってみてはいかがでしょうか？
 

さいごに

ということで、今回は「デザイナーとエンジニアのUIコミュニケーションツール Zeplin」のご紹介記事となってしまいましたが、弊社では業務効率化のために様々なツールを利用しています。
そんな弊社でツールを駆使して効率的にデザイン業務をしてみたい！という方は、ぜひこちらからお気軽にお問い合わせください^^

こんにちは。新卒デザイナーのハナです。

最近は家でサーモンランばっかりやっています。

 

 

私は元々イラストを描くのが趣味なのですが、最近はイラストを描く仕事もちょいちょい回してもらえるようになりました。

なので今回はイラストの話をします。

 

 

webサイトや印刷物などに使用する素材としてイラストを描くとき、まず考えることは、どういうタッチのイラストにしようかな？ということです。

もしイラストのタッチが周りのデザインと調和していなければ、デザイン全体のイメージを壊しかねません。

 

私がイラストを描くとき、具体的にどうやってタッチを描き分けているかをご紹介します。

 

線画を描く

 

タッチの描き分けでは、線画の描き方が最初の大きなポイントになります。

線画を描く際に大切なのは、何の画材を使用するかということです。

鉛筆、シャーペン、クレヨン、ボールペン、つけペンなど、使用する画材によって線自体の持つ印象が大きく変わってきます。

 

ですが、いろいろなバリエーションの画材を集めたり新しい画材に慣れたりするのは大変で時間がかかるので、イラストソフトを使用するのも良いと思います○

 

今回はイラストソフトとペンタブレットを使用して線画を作成しました。

上の線画は鉛筆っぽいブラシで、あえて線を繋げないところなどを作ってラフな印象で描いてみました。線の強弱は抑えめです。

下の線画ははっきりしたブラシで、カートゥーンアニメっぽいイメージで強弱をつけ描いてみました。

 

ラフなアナログっぽい印象を出したいときは用紙感多めの鉛筆風ブラシ、はっきりした印象を与えたいときはテクスチャ感の少ないブラシを使用すると良いと思います。

また、同じ画材やブラシでも、線の太さや強弱の有無によっても大きくイメージが変わりますので、いろいろ試してみてください。

 

 

色を塗る

 

色の塗り方の描き分けで大切なことは、手作業感を残すか否かだと思います。

手作業感とは色の塗りムラや塗り残しです。

 

手作業感を多く残せばアナログっぽさが増し、温かかったり柔らかかったり自然っぽかったりラフっぽい印象を与えることができます。

逆に手作業感が少ないと均一な感じや人工っぽい感じ、硬い感じ、はっきりした感じの印象を与えることができます。

上のイラストでは、塗りムラや塗り残しをあえて作り、水彩絵の具で塗ったような着彩を目指しました。柔らかくて透明感のある印象が出せたと思います。

 

下のイラストはそういった手作業感を残さず、ベタ塗りのみで着色しました。はっきりしていて存在感と質量感のあるイラストになったと思います。

 

 

もちろんはっきりした線画で水彩風の塗りや、ラフな線画にベタ塗りをするなどの組み合わせもありです。

また大きくイメージが変わりますのでよろしければ試してみてください。

 

イラストのタッチというものは好みによるところが大きいので、趣味で絵を描いたりしているとどうしても一つのタッチにこだわりがちになってしまいます。

それを画風として個性を発揮するのももちろん良いことですが、素材としてイラストを何かに組み込むときは画風を一旦忘れることも必要になってきます。

線の引き方や色の塗り方など、他の人の作品などを参考にしながら色々と試し新たな技術を身に着けて、タッチや画風の選択肢を広げることも大切だと思います。

 

 

まとめ

 

・線画は画材やブラシによって大きく印象が変わる

・塗りは塗りムラ・塗り残しなど手作業感を残すか否かで印象が変わる

・自分が好きな絵柄やタッチなどにこだわりすぎず、いろいろな線の描き方や色の塗り方を試してみることが大事

 

ご閲覧ありがとうございました！みなさんも良いイラストライフを（・▽・）/