SlideShare a Scribd company logo
ハッシュタグ

デザイナーが             ##aaaaddeessiiggnnss

コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
      第22回:より凝ったグラフィック
                            @@GGMMOO  yyoouurrss
                             22001122..99..2200
ハッシュタグ

##aaaaddeessiiggnnss
ハッシュタグ

                  ##aaaaddeessiiggnnss


  がんばって作ったデザインが、
実装後に残念な結果にならないために
      なぜ残念になるか?
秋葉ちひろ
•・ @@ttoommmmmmmmyy
•・ デザイナー/アートディレクター
•・ WWeebb系・アプリ系
•・ BBaaiidduuでSSiimmeejjiiの開発のフロント
   エンドの一部
http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
前回


     変態99--ppaattcchh
今回のテーマ


より凝ったグラフィック
         前回は9-patchをした。
         これはビットマップ(画像)を使っていた
         が、今回はできるだけ画像を使わずに、ど
         れだけこった表現ができるかを調べてみ
         た。
WebでいうところのCSSと
                同じと考えるとよい。



11..コードのみで
                グラデーション、影など
                CSS3で新たに加わった




 可能な表現
  •・ 画像を使わなくてもできる表現を
  デザイナーが徹底解析!
22..デザインが
 組み込まれる仕組み
  •・ 仕組みを知れば、いろいろと応用
  がきく(かもしれない)
bbuuttttoonn__bbgg..ppnngg
bbuuttttoonn__bbgg ..99 ..ppnngg
main.xml
<Button
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
	 android:background="@drawable/button_bg"
	 android:text="撮影する"
  />
テキストや画像を
 表示したい場合
main.xml

<TextView
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
                撮影する
	 android:text="撮影する"
  />
main.xml

<ImageView
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
	 android:src="@drawable/photo"
   />




                      pphhoottoo..ppnngg
main.xml

<TextView
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
                撮影する
	 android:text="撮影する"
	 android:textSize="20sp"
   />
main.xml

<TextView
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
                撮影する
	 android:text="撮影する"
	 android:textSize="20sp"
	 android:textColor="#f00"
   />
main.xml

<TextView
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
                撮影する
	 android:text="撮影する"
	 android:textSize="20sp"
	 android:textColor="#f00"
	 android:background="#ccc"
   />
main.xml

<TextView
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
                 撮影する
	 android:text="撮影する"
	 android:textSize="20sp"
	 android:textColor="#f00"
	 android:background="#ccc"
	 android:padding="10dp"
   />
main.xml

<TextView
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
                 撮影する
	 android:text="撮影する"
	 android:textSize="20sp"
	 android:textColor="#f00"
	 android:background=
                 "@drawable/button_bg"
	 android:padding="10dp"
   />
main.xml

<TextView
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
                 撮影する
	 android:text="撮影する"
	 android:textSize="20sp"
	 android:textColor="#fff"
	 android:background=
                 "@drawable/button_bg"
	 android:padding="10dp"
   />
main.xml

<TextView
  android:layout_width="wrap_content"
	 android:layout_height="wrap_content"
	 android:text="撮影する"
	 android:textSize="20sp"
	 android:textColor="#fff"
	 android:background=
      bbuuttttoonn__bbgg..99..ppnngg
                             "@drawable/button_bg"
	 android:padding="10dp"
   />
main.xml

<TextView
  android:layout_width="wrap_content"
    <shape android:shape="rectangle" >
	 android:layout_height="wrap_content"
      <size

	 android:text="撮影する"
        android:height="100dp"
        android:width="100dp" />
     <solid android:color="#cc2f2f2f" />
	 android:textSize="20sp"
   </shape>

	 android:textColor="#fff"
       button_bg.xml
	 android:background=
                 "@drawable/button_bg"
	 android:padding="10dp"
   />
res

drawable-xhdpi

drawable-hdpi

drawable-mdpi
                 iimmgg
drawable-ldpi

layouts
                            JJAAVVAA
main.xml         hhttmmll
                  構造
values

strings.xml      ccssss
                 飾�り
res
drawable
                  xxmmll
drawable-xhdpi

drawable-hdpi

drawable-mdpi
                 iimmgg
drawable-ldpi               JJAAVVAA
layouts

main.xml         hhttmmll
                  構造
values

strings.xml      ccssss
                 飾�り
重要!


      <<sshhaappee>>
 コードでグラフィックを
  表現するためのタグ
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="xxxxxx" >

          ここにいろいろ書くよ
</shape>
rreeccttaannggllee


長方形           角丸長方形
oovvaall



   円
lliinnee

  線�
rriinngg




リング
rreeccttaannggllee


長方形           角丸長方形
rreeccttaannggllee
<shape android:shape="rectangle">
</shape>



     長方形                角丸長方形
rreeccttaannggllee
<shape android:shape="rectangle">
  <size android:width="100dp"
         android:height="50dp" />
</shape>
     長方形               角丸長方形
rreeccttaannggllee
<shape android:shape="rectangle">
  <size android:width="100dp"
        android:height="50dp" />
  <solid android:color="#ff64ae" />
</shape>
      長方形              角丸長方形
rreeccttaannggllee
<shape android:shape="rectangle">
  <size android:width="100dp"
        android:height="50dp" />
  <solid android:color="#ff64ae" />
      長方形              角丸長方形
  <stroke android:width="2dp"
          android:color="#000" />
</shape>
rreeccttaannggllee
<shape android:shape="rectangle">
  <size android:width="100dp"
        android:height="50dp" />
  <solid android:color="#ff64ae" />
     長方形               角丸長方形
  <stroke android:width="2dp"
          android:color="#000" />
  <corners android:radius="10dp" />
</shape>
rreeccttaannggllee
<shape android:shape="rectangle">
</shape>



     長方形                角丸長方形
rreeccttaannggllee
<shape android:shape="rectangle">
 <gradient android:startColor="#000"
           android:endColor="#fff"
           android:centerColor="#f00" />
</shape>
     長方形                角丸長方形
rreeccttaannggllee
<shape android:shape="rectangle">
 <gradient android:startColor="#000"
           android:endColor="#fff"
           android:centerColor="#f00" />
           android:angle="90" />
     長方形                角丸長方形
</shape>
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
rreeccttaannggllee
<shape android:shape="rectangle">
 <gradient android:startColor="#000"
           android:endColor="#fff" />
</shape>
     長方形                角丸長方形
rreeccttaannggllee
<shape android:shape="rectangle">
 <gradient android:startColor="#fff"
           android:endColor="#000" />
</shape>
     長方形                角丸長方形
rreeccttaannggllee
<shape android:shape="rectangle">
 <gradient android:startColor="#fff"
           android:endColor="#000" />
           android:type="radial" />
</shape>
     長方形                角丸長方形
rreeccttaannggllee
<shape android:shape="rectangle">
 <gradient android:startColor="#fff"
           android:endColor="#000" />
           android:type="radial" />
        android:gradientRadial
     長方形             角丸長方形
                           ="50" />
</shape>
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
rreeccttaannggllee
<shape android:shape="rectangle">
 <gradient android:startColor="#fff"
           android:endColor="#000" />
           android:type="radial" />
        android:gradientRadial
     長方形             角丸長方形
                           ="50" />
</shape>
rreeccttaannggllee
<shape android:shape="rectangle">
 <gradient android:startColor="#fff"
           android:endColor="#000" />
           android:type="radial" />
        android:gradientRadial
     長方形             角丸長方形
                           ="33" />
</shape>
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
ポイント!


<<sshhaappee>>タグでできること
<size> 大きさ
   <solid> 塗り
  <stroke> 線�
 <corners> 角丸
<gradient> グラデーション
 <padding> 内側の余白
<size> 大きさ wwiiddtthh,,  hheeiigghhtt
solid> 塗り bbaacckkggrroouunndd--ccoolloorr
troke> 線� bboorrddeerr
rners> 角丸 bboorrddeerr--rraaddiiuuss
dient> グラデーション ggrraaddiieenntt
dding> 内側の余白 ppaaddddiinngg
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
ssttrrookkee
                ssttaarrttCCoolloorr

               cceenntteerrCCoolloorr

                 eennddCCoolloorr
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
ssttrrookkee
                ssttaarrttCCoolloorr

               cceenntteerrCCoolloorr

                 eennddCCoolloorr




               ×
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
ssttrrookkee
               ssttaarrttCCoolloorr



                eennddCCoolloorr




               ×
rraaddiiaall



               ssttaarrttCCoolloorr




                eennddCCoolloorr
<gradient
                 android:startColor="#87d1bc"
cceenntteerrXX   android:endColor="#00845d"
cceenntteerrYY   android:type="radial"
                 android:gradientRadius="300"
                 android:centerX="0.2"
                 android:centerY="0.5" />
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
ssttrrookkee


  ×
実は不便


<<sshhaappee>>タグでできないこと

 •・ 上下左右、個別の<<ssttrrookkee>>
 •・ ドロップシャドウ的なもの
TTIIPP
                                              SS

カラーコードについて

                 ##dd6655ee9944
##cccccc
                             ##88bbcc11ee22
           ##000000
                      ##ffffaabb7755
TTIIPP
                                            SS
  ##cccccc          ##33cccccc
 ##000000          ##55000000
##dd6655ee9944   ##2255dd6655ee9944

##88bbcc11ee22   ##660088bbcc11ee22

##ffffaabb7755   ##5555ffffaabb7755
Q.   こういう表現なら
     どうする?
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
ccaassee..11


               99--ppaattcchh
   •・ グラデーション込みで99--ppaattcchhに
       してしまう
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
ん〜
やっぱりやだ
ccaassee..22


               重ねる
   •・ <<bbiittmmaapp>>  <<sshhaappee>>  は重ねられる
bbiittmmaapp




sshhaappee
bbiittmmaapp




sshhaappee
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	 <item>

              sshhaappee
	 </item>
	 <item>

             bbiittmmaapp
	 </item>
</layer-list>
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
bbiittmmaapp




sshhaappee
bbiittmmaapp



bbiittmmaapp



sshhaappee
bbiittmmaapp




sshhaappee
bbiittmmaapp




sshhaappee
nniinnee--ppaattcchh




     sshhaappee
nniinnee--ppaattcchh




     sshhaappee
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	 <item>

              sshhaappee
	 </item>
	 <item>

           nniinnee--ppaattcchh
	 </item>
</layer-list>
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
nniinnee--ppaattcchh




     bbiittmmaapp
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	 <item>

             bbiittmmaapp
	 </item>
	 <item>

           nniinnee--ppaattcchh
	 </item>
</layer-list>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	 <item>
    <bitmap
     android:src="@drawable/texture_bg"
     android:tileMode="repeat" />
 </item>
 <item>
    <nine-patch
     android:src="@drawable/border" />
	 </item>
</layer-list>
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textColor="#fff"
  android:shadowColor="#5000"
  android:shadowDx="0"
  android:shadowDy="-1"
  android:shadowRadius="1"
  android:text="11:20" />
android:shadowColor="#5000"
android:shadowDx="0"    XX位置
android:shadowDy="-1"         YY位置
android:shadowRadius="1"    ぼかし


text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
          XX位置          ぼかし

                 YY位置
http://www.techdoctranslator.com/android/guide/resources/available-resources/drawable-resource
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
##55000000

        bbiittmmaapp           sshhaappee


                                      ##00000000




tteexxttuurree__bbgg..ppnngg
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	 <item>
    <bitmap
     android:src="@drawable/texture_bg"
     android:tileMode="repeat" />
 </item>
 <item>
    <shape>
      <gradient
        android:startColor="#0000"
        android:endColor="#5000"
android:src="@drawable/texture_bg"
     android:tileMode="repeat" />
 </item>
 <item>
    <shape>
      <gradient
        android:startColor="#0000"
        android:endColor="#5000"
        android:type="radial"
        android:gradientRadius="300" />
	 </shape>
	 </item>
</layer-list>
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
まとめ

•・ コードでかけるものは、コードで表現
•・ 重ね技
 <<sshhaappee>>  <<bbiittmmaapp>>  <<nniinnee--ppaattcchh>>
•・ 位置調整も可能
ありがとうございました!


GGoooodd  LLuucckk!!
•・ @@ttoommmmmmmmyy
•・ ffaacceebbooookk  ::  秋葉ちひろ
•・ 次回は1100//44(木)@CCAAさん
 (カスタムUUIIについて)

More Related Content

Similar to 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips

CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
Taku AMANO
 
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーションAngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
Yosuke Onoue
 
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
 
画像を使わずにデザイン
画像を使わずにデザイン画像を使わずにデザイン
画像を使わずにデザイン
Ryo Maruyama
 
Androidレイアウトのスタンダードアプローチ
AndroidレイアウトのスタンダードアプローチAndroidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
Takao Sumitomo
 
Head First XML Layout on Android
Head First XML Layout on AndroidHead First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
 
クリエイター向け勉強資料 Ver1
クリエイター向け勉強資料 Ver1クリエイター向け勉強資料 Ver1
クリエイター向け勉強資料 Ver1
Hiroshi Oyamada
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
 
What's Sketch.app
What's Sketch.appWhat's Sketch.app
What's Sketch.app
littlebustersreply
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
 
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
Daiji Hirata
 
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
 
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしようTwenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Odyssey Eightbit
 
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsolaPf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
android sola
 
グレープシティ製品からみるSPA開発のトレンドと動向
グレープシティ製品からみるSPA開発のトレンドと動向グレープシティ製品からみるSPA開発のトレンドと動向
グレープシティ製品からみるSPA開発のトレンドと動向
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
 
Tide - SmalltalkでSPA
Tide - SmalltalkでSPATide - SmalltalkでSPA
Tide - SmalltalkでSPA
Masashi Umezawa
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
 

Similar to 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips (20)

CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーションAngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
 
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
 
画像を使わずにデザイン
画像を使わずにデザイン画像を使わずにデザイン
画像を使わずにデザイン
 
Androidレイアウトのスタンダードアプローチ
AndroidレイアウトのスタンダードアプローチAndroidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
 
Head First XML Layout on Android
Head First XML Layout on AndroidHead First XML Layout on Android
Head First XML Layout on Android
 
クリエイター向け勉強資料 Ver1
クリエイター向け勉強資料 Ver1クリエイター向け勉強資料 Ver1
クリエイター向け勉強資料 Ver1
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
 
What's Sketch.app
What's Sketch.appWhat's Sketch.app
What's Sketch.app
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
 
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
MTDDC 2013: Movable Type 6: 新しいMovable Typeのコンセプトと特徴
 
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
 
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしようTwenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
 
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsolaPf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
 
グレープシティ製品からみるSPA開発のトレンドと動向
グレープシティ製品からみるSPA開発のトレンドと動向グレープシティ製品からみるSPA開発のトレンドと動向
グレープシティ製品からみるSPA開発のトレンドと動向
 
Tide - SmalltalkでSPA
Tide - SmalltalkでSPATide - SmalltalkでSPA
Tide - SmalltalkでSPA
 
計算機理論入門09
計算機理論入門09計算機理論入門09
計算機理論入門09
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 

【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips