そっち方向に地味なハロウィンをしてみた

ハッピーハロウィーン!ってもう終わりましたね。
マエダです。
 
実は今年も社内でごきげんなパリピたちとハロウィンパーティーをしました。
 
地味ハロウィン自体が年々メジャー化してきて、ハッシュタグ「地味ハロウィン」が
さらに注目されてきたように感じます。
#地味ハロウィン
 
昨年の様子はこちら。

地味にハロウィンをしてみました


 
 
しかし事件はおきました。
いつもコスプレしないメンバーがガチでコスプレしてきて度肝抜かれる状況に直面しました。
 
弊社は時代と逆行してしまったのです。

※ 隣にジョニー・デップばりのイケメンがいます。
 

 
 
こ、こいつ誰だ!
 
 
マリオでも、ルイージでもワリオでもなく、「ワルイージ」。
 
 
あ、あれ?あれあれ??
 
『そっち方向』の地味で攻めてきたってこと?
 
 
時代に逆行?
 
ノンノン!時代をリードしているんですね。。。(白目
 
 
 
それはそうと、弊社では来年から理由もなく渋谷出張を10/31に入れる社内規定を真剣に検討したいと思います。(ウソ
http://nlab.itmedia.co.jp/nl/articles/1710/31/news132.html

デザイナーとエンジニア間のデザインもろもろを助けてくれるツール「Zeplin」

こんにちは。デザイナーの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」のご紹介記事となってしまいましたが、弊社では業務効率化のために様々なツールを利用しています。
そんな弊社でツールを駆使して効率的にデザイン業務をしてみたい!という方は、ぜひこちらからお気軽にお問い合わせください^^

ドラムはじめました

顎関節症の疑いを抱えながら生きているマエダです。
 
超個人的なことなのですが、何を思ったかドラムをはじめました。

写真はレッスンで使用させていただいているドラムです。
 
バンドする予定も願望もありません。
ミッドライフ・クライシスでしょうか。
 
 
16年前にROCK IN JAPAN FESTIVALで聴いたSUPERCARのツインドラムが忘れられません。
ただただカッコよかった。
 
 
ドラム叩けるとモテそうなので頑張りたいと思います。爆

そろそろVisual Studio Codeに乗り換えたい

使い慣れたエディタを変えるには(個人的に)かなり決心が必要なのですが、この度、話題のMicrosoft製Visual Studio Code(以下VS Code)をお迎えしました。

Visual Studio Code – Wikipedia

https://ja.wikipedia.org/wiki/Visual_Studio_Code

Visual Studio Code はソースコードエディタである。マイクロソフトにより開発され、Windows, Linux, macOS 上で動作する[5]。デバッグ、Gitクライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持つ。カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更できる

実際に使いだしてみたら想像以上に便利だったので、今更感はありますが個人的にVS Codeの良かったと思う点を書いてみようと思います。

因みに主に想定する言語はPHPです。

Visual Studioっぽい


当然ですが、名前にVisual Studioと付いているだけあってVisual Studioに似たアトモスフィアを放っています。
Visual Studioを使ったことがあれば割と抵抗なく導入できるような気がしました。
個人的には大事なポイントです。

検索がつよい


Ctrl+Pを押したときに「ファイルを検索して開く」ボックスが開くのですが、他にも色々なことができます。
最初に”#”を入力すると「ワークスペース内のシンボルを検索して移動」、”>”を入力するとVS Codeの「コマンドの検索と実行」になります。
“?”で機能の一覧が表示されるので「なんだっけ?」ってこともありません。
それぞれの検索機能は別途専用のショートカットで開くこともできます。

IntelliSenseが使える


イマドキっぽい。
定義の参照は、参照箇所が別ファイルでも問題なく認識・動作してくれます。
ただ、Pluginで導入できるPHP IntelliSenseはphp-language-serverを利用しているため、PHP7を参照できるようにしないと動作しません。

Emmetが使える


イマドキっぽい。
デフォルトで入ってます。

Xdebug使える

イマドキっぽい。

印象まとめ

とにかく検索が便利。
エディタ自体も多機能かつ使いやすいです。
まだまだ進化途中(のはず)なので、謎の仕様や不思議なことが起きたりもしますが、しばらくはVS Codeのお世話になっていこうと思います。

イラストのタッチを描き分ける

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

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

 

 

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

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

 

 

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

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

 

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

 

線画を描く

 

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

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

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

 

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

 

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

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

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

 

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

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

 

 

色を塗る

 

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

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

 

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

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

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

 

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

 

 

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

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

 

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

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

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

 

 

まとめ

 

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

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

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

 

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