画像を使わずにデザイン

画像を使わずにデザイン

2011/09/19h13i32maru@Twitter

maruyama-r@KLab

自己紹介• 丸山 亮(h13i32maru) 最近はJSを触ってます

• KLab株式会社所属

http://twitter.com/h13i32maru

https://www.facebook.com/ryo.maruyama

https://github.com/h13i32maru

32 http://blog.h13i32maru.jp

Androidアプリ作りました

• 毎日の摂取カロリーをメモしていくアプリ

• 32Calorie

• 食事ごとのカロリーをなんとなくメモしていく

• お手軽・シンプル

ダ、ダサい(-_-;)

素人デザイン

• いかにも素人が作ったデザイン

• 原色カラー

• 適当な配置

• ボタンの大きさ

デザイナーさん登場

完成したモック画面が・・・

すごく良い！！けど・・・

• 画像を使ったデザインは後から変更が難しい

• 色や大きさを変えるだけでもお願いしないと

• Adobe製品もってないから自分で変更できない

画像(なるべく)使わない

• じゃあ画像を使わずに再現してみよう

• WebViewを使ったCSSデザインはしない

頑張って再現してみました

基本はshape.xml

• Androidでは四角形 / 円形をXMLで簡単に作れます

• もちろん角丸 / グラデーションも可能

• これをViewの背景画像として設定する

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="16dp" android:topLeftRadius="0dp" android:topRightRadius="16dp"/> <solid android:color="#e7deaa"/>

<gradient android:startColor="#261f1b" android:endColor="#40332a" android:angle="270"/></shape>

まとめ

• やっぱりデザイナーさんの本気はすごい

• 画像無しでも配色とか配置を考えると良くなる

• 画像にプログラムで色をつけることも可能

- color filterを使って白いアイコンを黒いアイコンにするとか

• シャドー、エンボスはできなさそう

おわり