OSHIIRE

「わ!」より「お!」となる体験を。

綺麗なデザインの盛り付け方 -超小ネタ編- @カレーとデザインの夕べ

f:id:wariemon:20151221193254j:plain

この記事は Fablic Advent Calendar 2015 の 22日目のエントリになります。
 
先日弊社で開催された カレーとデザインの夕べ の中で発表した "ゆるいスライド" のお話をします!iOSアプリデザインにおける超小ネタです。
 
 
改めましてこんにちは。 Fablic の UIデザイナー、@wariemon です。
記事を読んでくださりありがとうございます!
 
 
 カレーとアプリデザイン 

 

カレーってすごくシンプルですよね。白い器にルーと白いご飯。最高にシンプルな訴求です。

この図 と アプリデザインのとある部分 に、ぼくは想いを重ねてみました。

 

f:id:wariemon:20151222130819j:plain

f:id:wariemon:20151222130826j:plain

 

そうです! 最近増えつつある、白背景のアプリアイコンです!

 

...という無理やりな導入から、白背景のアプリアイコンをデザインをする時の超小ネタをゆる〜く発表させていただきました。

 

 

この部分に注目してみよう

 

白背景のアプリアイコンの魅力といえば、

 

- メインのエレメントに注目をさせることができる

- 不必要な要素を省いたシンプルな見た目

- クリーンな印象

 

などが考えられると思いますが、

このデザインをする上で一個気をつけたい部分があります。

それは、

 

f:id:wariemon:20151222130726j:plain

f:id:wariemon:20151222130656j:plain

f:id:wariemon:20151222130618j:plain

(参考記事 : Let’s talk about white app icons by Michael Flarup on Medium)

 

そう、この縁についたグレーのラインです!

「なんだそんなことか」という些細な部分かもしれませんが、

いくら料理が美味しくても、盛りつけるお皿が汚れていては、せっかくの料理も台無し。

 

デザインも一緒です。

どんな状態であれ、美しく見えるようにしたいもの。

 

 

では早速、汚れを取ってみましょう!

 

f:id:wariemon:20151222130554j:plain

 (Templete : iOS App Icon Template by PixelResort)

 

このテンプレート、とても便利ですよね。

僕もアプリアイコンをデザインする時はいつもお世話になっています!

 

ただ、白背景のアプリアイコンを作るときには一点気をつけないといけないことがあるのです。

 

f:id:wariemon:20151222130518j:plain

 

まず、カレーを装ってみました。

 ここで、赤枠の部分に注目してみましょう。

 

f:id:wariemon:20151222130457j:plain

f:id:wariemon:20151222130423j:plain

 

そうなんです!

実は普通にレイアウトしただけでは、汚れがついたままになってしまうのです!

 

 

たったひと手間で綺麗に

 

で、どうしたら取れるの?という部分ですが、

本当にひと手間加えるだけで大丈夫なんです!

 

このpsdのレイヤーに注目してみましょう。

 

f:id:wariemon:20151222130357j:plain

f:id:wariemon:20151222130330j:plain

 

たったこれだけです! base というレイヤー名で絞り込んで一気に消すと、ものの数秒で汚れが消えるのです!

 

たったこのひと手間を加えるだけで、あなたの手塩にかけたデザインも綺麗に盛り付けられます!

 

f:id:wariemon:20151222130252j:plain

 

 

まとめ

 

... というゆるーいスライドを発表させていただいたのですが、こういう細かい部分ってすごく大事だと考えています。

 

料理もデザインも、見た目は二の次!じゃ悲しいですよね。

綺麗な盛り付けは、そのあとの体験も よりよいもの にしてくれるはず。

綺麗な盛り付けは、綺麗な器から。

 

この話が、皆さんの少しでも糧になれば幸いです!

 

 

当日発表した スライドはこちらにアップしておきました!

 

 

次の Fablic Advent Calendar 2015iOS Developer の @pompopo さんです!

 

それではありがとうございました!