SlideShare a Scribd company logo
ハッシュタグ

デザイナーが             ##aaaaddeessiiggnnss

コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
               第11回:導入�・99--ppaattcchh
                   @@SSTTAARRTTUUPP  BBaassee  CCaammpp
                                       22001122..99..66
ハッシュタグ

                                       ##aaaaddeessiiggnnss




aassaammiieeeeee77   ttoommmmmmmmyy   aaddaammrroocckkeerr
ハッシュタグ

##aaaaddeessiiggnnss
ハッシュタグ

            ##aaaaddeessiiggnnss


  がんばって作ったデザインが、
実装後に残念な結果にならないために
デザイナーが
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げる
コツとTTiippss
@@ttoommmmmmmmyy
秋葉ちひろ/BBaaiidduu  JJaappaann
秋葉ちひろ
•・ @@ttoommmmmmmmyy
•・ デザイナー/アートディレクター
•・ WWeebb系・アプリ系
•・ BBaaiidduuでSSiimmeejjiiの開発のフロント
  エンドの一部
なぜ残念になるのか?


エンジニアまかせだから

•・ デザイナーが実装のことをわかっ
 ていないから
•・ 実装の指示が出せない
なぜ残念になるのか?


エンジニアまかせだから

•・ エンジニアはデザインのことをわ
 からずに実装しているから
実装のことをわかっていたら、
 組みやすい、理にかなった
   デザインができる
Webサイトの場合         Androidアプリの場合




Visual Design     Visual Design



           HTML
 Coding             Coding    XML
           CSS




  System             System
Webサイトの場合         Androidアプリの場合




Visual Design     Visual Design



           HTML
 Coding             Coding    XML
           CSS




  System             System
この勉強会のポイント


XXMMLLの実装
•・ ちょっとでも知識があれば、実装可
 能かどうかがわかる
•・ 110000%できなくてもいいので、
 ちょっとでも知っておこう
http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
背景画像




影
アナログ感




カスタムUUII
ダイアログ
11..  導入�
22..  99--ppaattcchh
11..  導入�
22..  99--ppaattcchh
11..  導入�
 •・ AAnnddrrooiiddアプリを作るには
  -- デザイナーとってむずかしくないの?
 •・ 画面解像度・画面サイズ
  -- デザインファイルはどの大きさで作る?  
  -- 解像度ちがいのデザインはどうやって作る
    の?
11..  導入�
 •・ AAnnddrrooiiddアプリのデザインで
  気をつけること
 •・ アプリの軽量化も考える
11..  導入�

AAnnddrrooiiddアプリを作るには
Eclipse   Android SDK
Eclipse   Android SDK
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
白くすればこわくない!
茶色とかもあるよ!
   え、そういう問題じゃない?
11..導
                                             入�
AAnnddrrooiiddアプリ


なにでできているの?

 •・ レイアウトまわり                   XXMMLL

 •・ ロジック            JJAAVVAA
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
    <LinearLayout style="@style/commonList" >
         <LinearLayout style="@style/commonText" >
             <TextView
                 style="@style/listText"
                 android:text="@string/base_sounds" />
             <TextView
                 style="@style/listSubText"
                 android:text="デフォルト" />
        </LinearLayout>
        <ImageView style="@style/listDialog" />
    </LinearLayout>
    <LinearLayout style="@style/commonList" >
        <LinearLayout style="@style/commonText" >
            <TextView
                style="@style/listText"
                android:text="@string/base_vibe" />
        </LinearLayout>
        <CheckBox style="@style/checkBox" />
    </LinearLayout>
    <LinearLayout style="@style/commonList" >
        <LinearLayout style="@style/commonText" >
            <TextView
                style="@style/listText"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

<LinearLayout>
    <LinearLayout style="@style/commonList" >
                 ddiivv
         <LinearLayout style="@style/commonText" >
             <TextView

   <TextView />      hh,,  pp
                 style="@style/listText"
                 android:text="@string/base_sounds" />
             <TextView
   <ImageView /> iimmgg
                 style="@style/listSubText"
                 android:text="デフォルト" />

   <CheckBox />
        </LinearLayout>
                  iinnppuutt  ttyyppee==cchheecckkbbooxx
        <ImageView style="@style/listDialog" />
    </LinearLayout>

   <RadioButton /> iinnppuutt  ttyyppee==rraaddiioo
    <LinearLayout style="@style/commonList" >
        <LinearLayout style="@style/commonText" >
            <TextView

   <button />        iinnppuutt  ttyyppee==bbuuttttoonn
                style="@style/listText"
                android:text="@string/base_vibe" />


</LinearLayout>
        </LinearLayout>
        <CheckBox style="@style/checkBox" />
    </LinearLayout>
    <LinearLayout style="@style/commonList" >
        <LinearLayout style="@style/commonText" >
            <TextView
                style="@style/listText"
res

drawable-xhdpi

drawable-hdpi

drawable-mdpi
                 iimmgg
drawable-ldpi

layouts
                            JJAAVVAA
main.xml         hhttmmll
                  構造
values

strings.xml      ccssss
                 飾�り
Q.   デザイナーにとって
     むずかしくないの?


A.   環境構築さえできれば
     なんとかなります
11..  導入�

画面解像度・画面サイズ
11..導
                            入�
AAnnddrrooiiddアプリの宿命


なぜこんなに苦労する

 •・ 画面解像度がバラバラ
 •・ 画面サイズも
   まったく統一されない
11..導
                                                                                   入�

iiPPhhoonneeの場合
                       ddeennssiittyy   ddeennssiittyy     ssiizzee((ppxx))
                        ggrroouupp        rraattiioo

 iiPPhhoonnee  33GG      116600              11          332200xx448800

iiPPhhoonnee  33GGSS     116600              11          332200xx448800

  iiPPhhoonnee  44       332200              22          664400xx996600

 iiPPhhoonnee  44SS      332200              22          664400xx996600
11..導
                                                                                    入�

AAnnddrrooiiddの場合
                       ddeennssiittyy   ddeennssiittyy      ssiizzee((ppxx))
                        ggrroouupp        rraattiioo

  ひと昔前                   116600              11          332200xx448800

XXppeerriiaa  aarrcc     224400            11..55        448800xx885544

 IINNFFOOBBAARR
      AA0011             224400            11..55        556600xx996600

   GGaallaaxxyy
      SS  IIII           224400            11..55        448800xx880000

   GGaallaaxxyy  
   NNeexxuuss            332200              22          772200xx11228800
11..導
                                                                               入�



116600ddppii 224400ddppii 332200ddppii
  mmddppii       hhddppii               xxhhddppii

    11            11..55                       22
              XXppeerriiaa  aarrcc     GGaallaaxxyy  NNeexxuuss
              IINNFFOOBBAARR  AA0011   GGaallaaxxyy  NNoottee
              GGaallaaxxyy  SS  IIII


                                              http://myakura.github.com/n/density.html
Q.   デザインファイルは
     どの大きさで作る?


A.
     xxhhddppiiで作る
     ((772200xx11228800))
448800xx880000                   772200xx11228800
                         xx00..7755
11..55   hhddppii                      xxhhddppii 22
                      xx11..3333

                      バッチ処理も可能。
                      ピクセルパーフェクトにこ
                      だわる場合は少々の手直し
                      が必要。
                      同じ画像を使うことももち
                      ろんできる。
                      できるが、Webのときと同
                      じことが起こる。
448800xx880000   772200xx11228800

  hhddppii         xxhhddppii
•・ 画像のサイズ
 を指定しない
 と大きく表示
 される
448800xx880000       772200xx11228800

 hhddppii              xxhhddppii
                 •・ 画像がねむい
                 •・ RReettiinnaa  DDiissppllaayy
                    でWWeebbサイトを
                    見た感じ
448800xx880000         772200xx11228800

 hhddppii               xxhhddppii

                 微調整
Q.   解像度ちがいのデザイン
     はどうやって作るの?



A.   大きいものから作ると
     楽ちん!(ただし要調整)
11..  導入�

AAnnddrrooiiddアプリのデザインで
          気をつけること
11..導
                                                 入�

iiPPhhoonneeとAAnnddrrooiiddの違い
          iiPPhhoonnee     AAnnddrrooiidd


 画面サイズ     22種類              星の数


画面の縦横比      同じ           機種によってちがう


 フォント     ヒラギノ           機種によってちがう
11..導
                          入�


気をつけること
•・ 文字により変化する部分がある
 (フォントが機種依存だから)
•・ 画面サイズが大きくなっても伸縮
 するようにする
 (画面サイズが機種依存だから)
Q.
     AAnnddrrooiiddアプリデザインを
     考えるときに気をつけるこ
     とは?



A.
     画面サイズが多少変化し
     ても耐えられるデザイン
     にすること
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
余白をじゃっかん大小して
自然に組めるデザインが、
  いちばんうれしい!
11..  導入�

アプリの軽量化も
   考える
11..導
                         入�


アプリの軽量化
•・ 重いのは画像です
•・ コードでかけるものはコードで
 かこう(→22回目にて詳しく)
この勉強会のポイント


XXMMLLの実装
•・ ちょっとでも知識があれば、実装可
 能かどうかがわかる
•・ 110000%できなくてもいいので、
 ちょっとでも知っておこう
11..  導入�
22..  99--ppaattcchh
22..  99--ppaattcchh
 •・ 99--ppaattcchhとは
   -- なぜ必要なの?
   -- 知っておく必要があるの?
 •・ 仕組みと作り方
 •・ 作成ツール
22..  99--ppaattcchh
 •・ 応用「このデザインはできます!」
 •・ 99--ppaattcchhに不向�きな例
22..  99--ppaattcchh

99--ppaattcchhとは
AAnnddrrooiiddアプリのデザインで
              キモとなる

    99--ppaattcchh
CCSSSS  ((CCSSSS33))  でいうと、

bboorrddeerr--iimmaaggee
  というプロパティがある
画像を99分割して、四隅は固定、
その他を伸びてもいいようにする
Q.   なぜ必要なの?


A.   伸縮のことを考えないと
     いけないことが多い
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
448800xx880000   556600xx996600
448800xx880000   556600xx996600
エンジニアさんに物申す!


   縦横比を
勝手に変えないで
  ください!
Q.   知っておく必要が
     あるの?


A.   あると思います。
     エンジニアさんに物申すため…�
22..  99--ppaattcchh

   仕組みと作り方
•・ 伸びる部分と伸びない部分を決める
•・ 中のコンテンツが入�り込むエリアを
 決める
黒い点((線�))で表現

•・ 書き出したパーツの上下左右に、
 11ppxxずつ余白を追加する
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
伸びる部分と伸びない部分

•・ 上側と左側に黒い点((線�))をかく
伸びるところ
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
このデザインに関しては

 結果は同じ




伸びても耐えられるデザイン
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
同じ色
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
大きな
グラデーション
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
同じ色




同じ色
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
このデザインに関しては

結果はビミョーにちがう




 もっこり感がビミョーに変わる
22..  99--ppaattcchh

   仕組みと作り方
•・ 伸びる部分と伸びない部分を決める
•・ 中のコンテンツが入�り込むエリアを
 決める
中のコンテンツが入�り込むエリア

 •・ 右側と下側に黒い点((線�))をかく
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
コンテンツが入�り込むエリア
余白
余白
余白
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
99--ppaattcchhは
余白を定義する
こともできる!
仕組みと作り方
•・ 伸びる部分と伸びない部分を決める
•・ 中のコンテンツが入�り込むエリアを
 決める

  双方は独立している
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="撮影する"
  />
22..  99--ppaattcchh

            作成ツール
•・ パーツを書き出したあと、
  「ddrraaww99ppaattcchh」を使う
•・ PPhhoottoosshhooppやFFiirreewwoorrkkssなどで
  そのまま黒い点を打つ
ddrraaww99ppaattcchh
•・ AAnnddrrooiidd  SSDDKKの中に入�っている
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
DEM
   O
ddrraaww99ppaattcchh、どう?

使いにくい!!
•・
 真ん中はどこ?   目分量

•・ 左右対称とかどうやるの? 目分量
•・ めっちゃ長いやつとか がんばって塗る
 どうするの?


もうめんどくさいので…�
PPhhoottoosshhooppでええやん!
PPhhoottoosshhooppの落とし穴
 •・ このまま書きだしても適用されない
 •・ 書き出し時のmmeettaa情報とかが問題?
 •・ 原因はよくわからない
ちなみに…�
FFiirreewwoorrkkssからでも
      ダメでした。
PPhhoottoosshhoopp



                                                             FFiirreewwoorrkkss



なのですが、その後懇親会で、PSでもできるよ!というお話を聞きました!
たぶん、わたしがやったものだと、まわりの9-patchのエリアに肉眼では見
えないような、うす∼い影などが入っていたような気もします。


ブログを書いてくださいましたので参考にしてください!
http://htomiyama.blogspot.jp/2012/09/9patchdraw9patch.html
Q.   99--ppaattcchhを作るには?



A.
     ・ddrraaww99ppaattcchhを使う
     ・PPhhoottoosshhooppとかでも
      できる…�??
             きれいに作れば、Photoshopでもできるようです!!
22..  99--ppaattcchh

        応用
「このデザインはできます!」
99--ppaattcchhのポイント11


伸ばす点はいくつでも

 •・ 上側・左側の伸ばす点はいくつでも
   打てます
99--ppaattcchhのポイント22


伸ばす点の割合

 •・ 何ピクセル打つかによって伸びる
   割合が変わってきます
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
99--ppaattcchhの注意点


伸ばすしかできない

 •・ ちぢむことができないので、
   最小の大きさで作るとGGoooodd!
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
重なっとるーー!!
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
99--ppaattcchhの33箇条
•・ 伸ばす点はいくつでも打てる
•・ 伸び率も比例する
•・ 小さめにつくる
ちなみに…�
一度やってみてください
    吐くぐらい、
 めっちゃめんどくさいです
22..  99--ppaattcchh

99--ppaattcchhに不向�きな例
不向�きな例


ストライプ・ドット
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
DEM
   O
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
不向�きな例


   一部テクスチャ
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
@@aakkaaii__tt
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
さいごに

•・ 別にデザイナーがやらなくてもいいけ
 ど、仕組みは知っておいてください
•・ 時間があったらやってみてください
   (ちょーめんどくさい)

•・ お互い苦労を知りましょう
ありがとうございました!


GGoooodd  LLuucckk!!
•・ @@ttoommmmmmmmyy
•・ ffaacceebbooookk  ::  秋葉ちひろ
•・ 次回は99//2200(木)@GGMMOOさん

More Related Content

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

Locondo 20190703@inno db_cluster
Locondo 20190703@inno db_clusterLocondo 20190703@inno db_cluster
Locondo 20190703@inno db_cluster
Shinya Sugiyama
 
初心者向けAndroidゲーム開発ノウハウ
初心者向けAndroidゲーム開発ノウハウ初心者向けAndroidゲーム開発ノウハウ
初心者向けAndroidゲーム開発ノウハウ
Kentarou Mukunasi
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324
Tak Inamori
 
[ABC2012S]Android2x/3x/4x対応アプリ開発Tips
[ABC2012S]Android2x/3x/4x対応アプリ開発Tips[ABC2012S]Android2x/3x/4x対応アプリ開発Tips
[ABC2012S]Android2x/3x/4x対応アプリ開発Tips
Kenichi Kambara
 
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
インフラジスティックス・ジャパン株式会社
 
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Akira Hatsune
 
ねぇねぇ、君は何使う?Web Design tool の話。
ねぇねぇ、君は何使う?Web Design tool の話。ねぇねぇ、君は何使う?Web Design tool の話。
ねぇねぇ、君は何使う?Web Design tool の話。
Kyoko Ochiai
 
Androidレイアウトのスタンダードアプローチ
AndroidレイアウトのスタンダードアプローチAndroidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
Takao Sumitomo
 
Design pattern in presto source code
Design pattern in presto source codeDesign pattern in presto source code
Design pattern in presto source code
Yahoo!デベロッパーネットワーク
 
Metroスタイルで花開くか? XAMLベースのUIフレームワーク
Metroスタイルで花開くか?XAMLベースのUIフレームワークMetroスタイルで花開くか?XAMLベースのUIフレームワーク
Metroスタイルで花開くか? XAMLベースのUIフレームワーク
Yuya Yamaki
 
Inside Android N
Inside Android NInside Android N
Inside Android N
Shinobu Okano
 
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターンng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
 
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
 
AndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントAndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイント
Takayuki Inoue
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
 
[R勉強会][データマイニング] プロセス・リソース・グラフと数理統計解析
[R勉強会][データマイニング] プロセス・リソース・グラフと数理統計解析[R勉強会][データマイニング] プロセス・リソース・グラフと数理統計解析
[R勉強会][データマイニング] プロセス・リソース・グラフと数理統計解析
Koichi Hamada
 
ザ・ドキュメント~うまくいかないNoSQL~
ザ・ドキュメント~うまくいかないNoSQL~ザ・ドキュメント~うまくいかないNoSQL~
ザ・ドキュメント~うまくいかないNoSQL~
Akihiro Kuwano
 
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpSeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
Yahoo!デベロッパーネットワーク
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
 

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

Locondo 20190703@inno db_cluster
Locondo 20190703@inno db_clusterLocondo 20190703@inno db_cluster
Locondo 20190703@inno db_cluster
 
初心者向けAndroidゲーム開発ノウハウ
初心者向けAndroidゲーム開発ノウハウ初心者向けAndroidゲーム開発ノウハウ
初心者向けAndroidゲーム開発ノウハウ
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324
 
[ABC2012S]Android2x/3x/4x対応アプリ開発Tips
[ABC2012S]Android2x/3x/4x対応アプリ開発Tips[ABC2012S]Android2x/3x/4x対応アプリ開発Tips
[ABC2012S]Android2x/3x/4x対応アプリ開発Tips
 
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
 
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
 
ねぇねぇ、君は何使う?Web Design tool の話。
ねぇねぇ、君は何使う?Web Design tool の話。ねぇねぇ、君は何使う?Web Design tool の話。
ねぇねぇ、君は何使う?Web Design tool の話。
 
Androidレイアウトのスタンダードアプローチ
AndroidレイアウトのスタンダードアプローチAndroidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
 
Design pattern in presto source code
Design pattern in presto source codeDesign pattern in presto source code
Design pattern in presto source code
 
Metroスタイルで花開くか? XAMLベースのUIフレームワーク
Metroスタイルで花開くか?XAMLベースのUIフレームワークMetroスタイルで花開くか?XAMLベースのUIフレームワーク
Metroスタイルで花開くか? XAMLベースのUIフレームワーク
 
Inside Android N
Inside Android NInside Android N
Inside Android N
 
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターンng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
 
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門
 
AndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントAndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイント
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
 
[R勉強会][データマイニング] プロセス・リソース・グラフと数理統計解析
[R勉強会][データマイニング] プロセス・リソース・グラフと数理統計解析[R勉強会][データマイニング] プロセス・リソース・グラフと数理統計解析
[R勉強会][データマイニング] プロセス・リソース・グラフと数理統計解析
 
ザ・ドキュメント~うまくいかないNoSQL~
ザ・ドキュメント~うまくいかないNoSQL~ザ・ドキュメント~うまくいかないNoSQL~
ザ・ドキュメント~うまくいかないNoSQL~
 
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpSeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 

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