SlideShare a Scribd company logo
これだけは知っておけ!
はじめてのAndroidアプリデザイン
〜 9-patch 編〜
株式会社ツクロア 秋葉ちひろ
12:002014.3.18 スクー
•見た目だけでなく機能のデザインを
•デザインと技術、双方からのアプローチ
「気 持ちいい」をデザインする会社
PC / iPhone / iPad / Android / and more...
秋葉 ちひろ デザイナー / アートディレクター
Action Bar
9-patch
UIと画面遷移
これだけは知っておけ!シリーズ
済
本日
未定
• デザイナー
• 企画をする人
• 開発者
これだけは知っておけ!シリーズ
Androidアプリ制作に携わる
•9-patch
今日の授業
> Android Fragmentation Report July 2013 - OpenSignal
前回の
復習
画面サイズが多様すぎる!
画面サイズの展開を見た時点で
つらい!
前回の
復習
Android - Default UI
12:00
前回の
復習
Android - Default UI
前回の
復習
ActionBar
Action Barのデザイン前回の
復習
前回の
復習
前回の
復習
Androidアプリデザインのコツ
前回の
復習
余白が大小しても
違和感のないデザイン!
9-patch
9-patch
こんなデザイン、
実装できないよ。
に、打ち勝つために!
9-patchとは?
画像を意図したとおりに
引き伸ばす
A
余白を決めるB
9-patchとは?
画像を意図したとおりに
引き伸ばす
A
余白を決めるB
角丸がっ!
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
引き伸ばされる領域
9スライス
1x1 px
1px line
書きだしたパーツの上下左右に
1pxずつ余白を追加する
A : 画像を意図したとおりに引き伸ばす
1
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
上側と左側に
黒い点(線)をかく
2
A : 画像を意図したとおりに引き伸ばす
伸びるところ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
このデザインに関しては
結果は同じ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
同じ色
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
大きな
グラデーション
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
同じ色
同じ色
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
このデザインに関しては
結果はビミョーにちがう
デザイナーのみなさん、
このクオリティどうする?
9-patchとは?
画像を意図したとおりに
引き伸ばす
A
余白を決めるB
書きだしたパーツの上下左右に
1pxずつ余白を追加する
B : 余白を決める
1
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
右側と下側に
黒い点(線)をかく
2
B : 余白を決める
コンテンツが入り込むエリア
余白
余白
余白
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
B
A
button_bg .png
button_bg .png.9
main.xml
<Button
android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
	 android:background="@drawable/button_bg"
	 android:text="撮影する"
/>
<Button
android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
	 android:background="@drawable/button_bg"
	 android:text="撮影する"
	 android:padding="15dp"
/>
main.xml
android:padding="15dp"
9-patchでの余白の設定と
XMLでの余白の設定、
どちらが優先される
でしょうか?
問題5px
5px
9-patchでの余白
XMLでのpadding
(15dp)
android:padding="15dp"
9-patchでの余白
9-patchでの余白
XMLでのpadding
(15dp)
9-patchでの余白
XMLでのpadding
(15dp)
9-patchのつくりかた
Draw9PatchをつかうA
グラフィックツールでつくるB
Android Asset StudioをつかうC
9-patchのつくりかた
Draw9PatchをつかうA
グラフィックツールでつくるB
Android Asset StudioをつかうC
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
9-patchのつくりかた
Draw9PatchをつかうA
グラフィックツールでつくるB
Android Asset StudioをつかうC
9-patchのつくりかた
Draw9PatchをつかうA
グラフィックツールでつくるB
Android Asset StudioをつかうC
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
1ヶ所しか伸ばせない…
9-patchの応用と注意
伸ばす点はいくつでもA
伸ばす点の割合がポイントB
伸ばすことしかできないC
9-patchの応用と注意
伸ばす点はいくつでもA
伸ばす点の割合がポイントB
伸ばすことしかできないC
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
左の3つの図ように、
点の領域を変えていくと
どうなるでしょうか?
問題
A
B
C
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
9-patchの応用と注意
伸ばす点はいくつでもA
伸ばす点の割合がポイントB
伸ばすことしかできないC
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
重なっている!!
重なってしまった例
9-patchが適用できるかどうか
向き / 不向きは
デザイナーでも考えよう
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
@akai_t
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
logo.png
actionbar_bg.png
ic_menu
_plus.png
ic_menu
_search.png
9-patchを理解して…
質の高いデザインを!
また今度!
おつかれさまでした!
秋葉ちひろ @tommmmy
12:00
UIと画面遷移
未定
だよっ
レポート課題
画面遷移がすぐれていると思う
Androidアプリを教えてください!
理由もおねがいします。

More Related Content

PDF
組み込み開発でのシステムテスト自動化の一つの考え方(STAC)
PDF
Caterpillar cat 232 d skid steer loader (prefix dpr) service repair manual (d...
PPTX
UE4ローカライズ事例 (UE4 Localization Deep Dive)
PDF
Keycloak拡張入門
PDF
PlasticSCMの活用テクニックをハンズオンで一緒に学ぼう!
PDF
OpenStack入門 2016/06/10
PPTX
アプリ起動時間高速化 ~推測するな、計測せよ~
PPTX
セキュリティとアジャイル開発のいい関係について考える
組み込み開発でのシステムテスト自動化の一つの考え方(STAC)
Caterpillar cat 232 d skid steer loader (prefix dpr) service repair manual (d...
UE4ローカライズ事例 (UE4 Localization Deep Dive)
Keycloak拡張入門
PlasticSCMの活用テクニックをハンズオンで一緒に学ぼう!
OpenStack入門 2016/06/10
アプリ起動時間高速化 ~推測するな、計測せよ~
セキュリティとアジャイル開発のいい関係について考える

What's hot (20)

PDF
建築革命、更に進化!デジタルツイン基盤の真打ち登場【概要編 Unity Reflect ver 2.1 】
PDF
Prometheus monitoring from outside of Kubernetes
 〜どうして我々はKubernetes上のPromet...
PPTX
Yocto bspを作ってみた
PDF
今日から始める LotusScript - Domino クラスライブラリの使い方
KEY
XPages 開発 Tips 百連発
PPTX
おうち Lab で GitDNSOps / GitDNS Ops in My Home Lab
PDF
XcodeのTargetについてのTIPS
PDF
OpenStackをさらに”使う”技術 概要と基礎操作
PPTX
Dronecodeの概要とROSの対応について
PDF
Example of exiting legacy system
PDF
Fault, Error, Failure の違い
PDF
昔話「TPモニター」
PDF
Harbor RegistryのReplication機能
PDF
新しくなったAzure Stack HCIは以前と何が違うのか?もう一度ゼロからしっかり整理します!
PPTX
カンバンゲーム
PPTX
もう知らずにはいられないGitOpsをArgoCDで学ぶ【WESEEK Tech Conf #3】
PDF
はじめての Gatling
PPTX
Azure Spatial Anchorについて少し調べた話
PDF
DockerとPodmanの比較
PDF
大規模オンプレミス環境はGitOpsの夢を見るか(CI/CD Conference 2021 by CloudNative Days 発表資料)
建築革命、更に進化!デジタルツイン基盤の真打ち登場【概要編 Unity Reflect ver 2.1 】
Prometheus monitoring from outside of Kubernetes
 〜どうして我々はKubernetes上のPromet...
Yocto bspを作ってみた
今日から始める LotusScript - Domino クラスライブラリの使い方
XPages 開発 Tips 百連発
おうち Lab で GitDNSOps / GitDNS Ops in My Home Lab
XcodeのTargetについてのTIPS
OpenStackをさらに”使う”技術 概要と基礎操作
Dronecodeの概要とROSの対応について
Example of exiting legacy system
Fault, Error, Failure の違い
昔話「TPモニター」
Harbor RegistryのReplication機能
新しくなったAzure Stack HCIは以前と何が違うのか?もう一度ゼロからしっかり整理します!
カンバンゲーム
もう知らずにはいられないGitOpsをArgoCDで学ぶ【WESEEK Tech Conf #3】
はじめての Gatling
Azure Spatial Anchorについて少し調べた話
DockerとPodmanの比較
大規模オンプレミス環境はGitOpsの夢を見るか(CI/CD Conference 2021 by CloudNative Days 発表資料)
Ad

Viewers also liked (20)

PPTX
Html5で9parts
PDF
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
PDF
Webエンジニアのためのandroidアプリ開発
PDF
IBM XCITE Spring 2015 - XPages application success story and IBM Bluemix
PDF
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
PPTX
創薬に必要なデータ統合の現在と未来
PDF
AsyncTask アンチパターン
PDF
Programming24 第2回androidアプリ勉強会
PPTX
Learn kwikphysics
PDF
Particle physics and my study
PDF
Androidアプリのマネタイズ方法|metaps pte. ltd.
PDF
Android上で動く力学シミュレーター
PPTX
小学生でもできるAndroidアプリ開発
PDF
ゴールデンウィークに最適な学習コンテンツ
PDF
Akiyasu Tomoeda
PPT
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
PDF
Master of RecyclerView
PDF
物理、数学に興味を持ってもらうアプリ集案
Html5で9parts
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
Webエンジニアのためのandroidアプリ開発
IBM XCITE Spring 2015 - XPages application success story and IBM Bluemix
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
創薬に必要なデータ統合の現在と未来
AsyncTask アンチパターン
Programming24 第2回androidアプリ勉強会
Learn kwikphysics
Particle physics and my study
Androidアプリのマネタイズ方法|metaps pte. ltd.
Android上で動く力学シミュレーター
小学生でもできるAndroidアプリ開発
ゴールデンウィークに最適な学習コンテンツ
Akiyasu Tomoeda
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
Master of RecyclerView
物理、数学に興味を持ってもらうアプリ集案
Ad

Similar to これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ (17)

PDF
これだけは知っておけ!はじめてのAndroidアプリデザイン〜ActionBar編 先生:秋葉 ちひろ
PDF
これだけは知っておけ!はじめてのAndroidアプリデザイン
PDF
プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
PDF
(デ部発表用抜粋版)プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
PDF
No border, スマホ UI! 〜これからのモバイルアプリデザイン〜
PDF
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
PDF
ABC2012 Spring: Android Design for Dummies
PDF
Androidレイアウトのスタンダードアプローチ
PDF
Abc2012f adamrocker
PDF
勘違いだらけのAndroid UIデザイン
PDF
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
PDF
Android multiscreen
PDF
UIデザインは誰のもの?
PDF
Android Design ざっくりレビュー
PDF
Sixapart day-2012-ideamans
PDF
第一回Android training4desinger
PDF
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
これだけは知っておけ!はじめてのAndroidアプリデザイン〜ActionBar編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン
プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
(デ部発表用抜粋版)プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
No border, スマホ UI! 〜これからのモバイルアプリデザイン〜
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2012 Spring: Android Design for Dummies
Androidレイアウトのスタンダードアプローチ
Abc2012f adamrocker
勘違いだらけのAndroid UIデザイン
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Android multiscreen
UIデザインは誰のもの?
Android Design ざっくりレビュー
Sixapart day-2012-ideamans
第一回Android training4desinger
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips

More from schoowebcampus (20)

PPTX
Compl exxx after
PPTX
Compl exxx before
PDF
ビジネスプラン概要資料 New
PDF
schoo法人利用-ビジネスプランのご案内
PDF
PHP実践 ~外部APIを使って情報を取得する~
PDF
i.school, The University of Tokyo "Methods of concept designing and user surv...
PDF
i.school, The University of Tokyo "Divergence, convergence, and expression of...
PDF
i.school, The University of Tokyo "The purposes and methods of technological ...
PDF
i.school, The University of Tokyo "The purposes and methods of interviews and...
PDF
i.school, The University of Tokyo "Foundation and methodology in creating inn...
PDF
ポートフォリオ公開後のマーケティング法
PDF
授業資料(スクー)
PDF
個人事業主・フリーランスのための確定申告 ~白色申告編~
PDF
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
PDF
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
PDF
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
PDF
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
PDF
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
Compl exxx after
Compl exxx before
ビジネスプラン概要資料 New
schoo法人利用-ビジネスプランのご案内
PHP実践 ~外部APIを使って情報を取得する~
i.school, The University of Tokyo "Methods of concept designing and user surv...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of interviews and...
i.school, The University of Tokyo "Foundation and methodology in creating inn...
ポートフォリオ公開後のマーケティング法
授業資料(スクー)
個人事業主・フリーランスのための確定申告 ~白色申告編~
初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1
少ない資金でシステム開発を委託する方法(補助金と類似事例の有無)
補助金で合格しやすい事業計画の作り方(主に創業補助金、ものづくり補助金)
アプリ開発したい人必見!Swiftを使ってiPhoneアプリに広告実装!【appC cloud school】
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司

Recently uploaded (10)

PDF
sustainability_MSOLサステナビリティレポート_202508_日本語版_完成版.pdf
PDF
東京商工会議所荒川支部で中小企業講演「今日から使える!省力化・効率化に向けた生成AI活用入門」
PDF
【QYResearch】世界製薬業界の市場変革と将来展望における多角的な事業展開の探求
PDF
2508_ インパクトレポート会社概要_雨風太陽
PDF
西都 採用サイト掲載用ピッチ資料 | 安心して働ける環境と成長できるキャリアパス
PDF
世界化学品産業の市場動向と将来展望に関する包括的な調査研究 QYResearch
PDF
【2507】インパクト共創室実績
PDF
【会社紹介資料】株式会社スキルアップ ~エンジニア第一主義!収入・働きやすさ・成長機会でトップクラスを目指す~ 高収入を実現する還元モデル × 自分で選べ...
PPTX
データサイエンス研修提案資料 RIZAPビジネスイノベーション株式会社.pptx
PDF
受発注バスターズ説明資料  (2025_08_13~) Saleshub掲載用.pdf
sustainability_MSOLサステナビリティレポート_202508_日本語版_完成版.pdf
東京商工会議所荒川支部で中小企業講演「今日から使える!省力化・効率化に向けた生成AI活用入門」
【QYResearch】世界製薬業界の市場変革と将来展望における多角的な事業展開の探求
2508_ インパクトレポート会社概要_雨風太陽
西都 採用サイト掲載用ピッチ資料 | 安心して働ける環境と成長できるキャリアパス
世界化学品産業の市場動向と将来展望に関する包括的な調査研究 QYResearch
【2507】インパクト共創室実績
【会社紹介資料】株式会社スキルアップ ~エンジニア第一主義!収入・働きやすさ・成長機会でトップクラスを目指す~ 高収入を実現する還元モデル × 自分で選べ...
データサイエンス研修提案資料 RIZAPビジネスイノベーション株式会社.pptx
受発注バスターズ説明資料  (2025_08_13~) Saleshub掲載用.pdf

これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ