画像を使わずにデザイン
TRANSCRIPT
画像を使わずにデザイン
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を使って白いアイコンを黒いアイコンにするとか
• シャドー、エンボスはできなさそう
おわり