Androidアプリの
魅力的な
インターフェース
本当にiOSのアプリのデザインを
流用するだけでいいの?
株式会社ツクロア 秋葉ちひろ
12:00
?2013.8.21 マイナビ クリエイターズ Power Session
•見た目だけでなく機能のデザインを
•デザインと技術、双方からのアプローチ
「気 持ちいい」をデザインする会社
PC / iPhone / iPad / Android / and more...
秋葉 ちひろ デザイナー / アートディレクター
Designers Hack
技術にしばられずに
体験やデザインを考える
デザイナーズハック
http://designers-hack.net
12:00
Native Apps
Android
MockUp
Native Apps
まずは iOS 版のデザインを
つくってから、
Android 版にも使いまわしてよ。
12:00
Android
MockUp
Design
Design
Develop
Develop
Workflow
12:00
Android
MockUp
Android の Default UI
12:00
Android
MockUp
12:00
Android
MockUp
Why ?
Android の Default UI
Default UI は、
実装に負担をかけない
Android も同じものに?
?
res/menu/activity_main.xml
<menu>
  ∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼
    <item android:id="@+id/action_delete"
          android:icon=...
Why ?
Android の Default UI
iOS の UI をまねることで、
余計に工数がかかる
(こともある)
Why ?
Android の Default UI
iOS の UI をまねることで、
余計に工数がかかる
(こともある)
?
ANA
Good samples
iOS と Android で
UI をうまく使い分けている例
12:00
Android
Good samples
iOS と Android で
UI をうまく使い分けている例
12:00
Android
Expedia
Good samples
iOS と Android で
UI をうまく使い分けている例
12:00
Android
Dropbox
Android アプリの
基本的な Default UI について
12:00
Android アプリのデザインが
むずかしいといわれる理由
Android アプリの
基本的な Default UI について
基本的な Default UI
> Android Fragmentation Report July 2013 - OpenSignal
基本的な Default UI
> Android Fragmentation Report July 2013 - OpenSignal
基本的な Default UI
> Android Fragmentation Report July 2013 - OpenSignal
基本的な Default UI
> Android Fragmentation Report July 2013 - OpenSignal
基本的な Default UI
基本的な Default UI
基本的な Default UI
> Androidのバージョン履歴 - Wikipedia
4.2
11.13
4.1
6.27
4.0
10.18
2009
2.0
10.26
2.2
5.21
2.3
12.6
2010 2011 2012...
3.x
基本的な Default UI
> Androidのバージョン履歴 - Wikipedia
d
4.2
11.13
4.1
6.27
4.0
10.18
0 2.2
5.21
2.3
12.6
010 2011 2012 2013
4....
Design Concept
•バージョン 2.x から一新した 4.x
•できるだけ無駄なものを排除し、
シンプルに
基本的な Default UI
Design Concept
• 2.x から一新した 4.x
• できるだけ無駄なものを排除し、
シンプルに
基本的な Default UI2.3 4.0-
Design Concept
• 2.x から一新した 4.x
• できるだけ無駄なものを排除し、
シンプルに
基本的な Default UI2.3 4.0-
さまざまな画面サイズに
適応しやすい工夫
•9-patch
•Action Bar
基本的な Default UI
9-patch
• さまざまな画面サイズにあうように
調整できる、Android アプリ特有の
画像の実装方法
基本的な Default UI
基本的な Default UI
画像を 9 分割して、四隅は固定、
その他を伸びてもいいようにする
480x800 560x960
Action Bar
基本的な Default UI
Action Bar
基本的な Default UI
1. App icon
Action Bar
基本的な Default UI
1. App icon
Action Bar
基本的な Default UI
2. View control • app name
• tab controls
• drop-down menus
Action Bar
基本的な Default UI
3. Action buttons • most important actions
Action Bar
基本的な Default UI
4. Action overflow • more buttons
View controls
基本的な Default UI
• app name
View controls
基本的な Default UI
• tab controls
View controls
基本的な Default UI
• drop-down menu
Action buttons
Action overflow
基本的な Default UI
Action buttons
Action overflow
基本的な Default UI
Action buttons
Action overflow
基本的な Default UI
Action buttons
Action overflow
基本的な Default UI
編集
Action buttons
Action overflow
基本的な Default UI
基本的な Default UI
Split action bar
上下にわかれた Action bar
Split action bar
上下にわかれた Action bar
基本的な Default UI
でも、
横向きでは split しない
Split action bar
上下にわかれた Action bar
基本的な Default UI
Split action bar
上下にわかれた Action bar
基本的な Default UI
異なるサブタスク間、
ビュー間、またはノード間
を切り替える機能をユーザ
に提供します。
Tab bar
> iOS ヒューマンインターフェ...
Split action bar
上下にわかれた Action bar
基本的な Default UI
基本的な Default UI
Navigation Drawer
基本的な Default UI
> Navigation Drawer | Android Developer
Navigation Drawer
基本的な Default UI
すべて
Person Name
2 hours ago
All what to say is Android Design is along the guideline.
Lo...
Navigation Drawer
基本的な Default UI
すべて
Person Name
2 hours ago
All what to say is Android Design is along the guideline.
Lo...
これからの (?) デザイン
12:00
これからの (?) デザイン
•Card UI
•Effective animation
Card UI
これからの (?) デザイン
Card UI
• カードベースのフラットUIデザイン
• Android 5.0 Key Lime Pie で正式採用?
これからの (?) デザイン
Card UI
• カードベースのフラットUIデザイン
• Android 5.0 Key Lime Pie で正式採用?
これからの (?) デザイン
Card UI
すべて
Person Name
2 hours ago
All what to say is Android Design is along the guideline.
Lorem ipsum dolor sit amet, ...
すべて
Person Name
2 hours ago
All what to say is Android Design is along the guideline.
Lorem ipsum dolor sit amet, consecte...
すべて
Person Name
2 hours ago
All what to say is Android Design is along the guideline.
Lorem ipsum dolor sit amet, consecte...
Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur rid...
Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur rid...
Card UI
•出現時のアニメーションがさまざま
•Google+ では、iOS と Android で
出現アニメーションがちがう
これからの (?) デザイン
Effective animation
これからの (?) デザイン
•アニメーションは、つければいい
というわけではない
•自然で気持ちのよい動き
気持ちよさをデザインする
Effective animation
•フラットな中に、ほんの少しだけ立体感を
感じさせるようなエフェクト
これからの (?) デザイン
Effective animation
これからの (?) デザイン
•ローディング時のエフェクト
気持ちよさをデザインする
Effective animation
•もっといろんな効果的なものがあるの
ではないか?
•そういった観点からの提案を心がけて
いる
これからの (?) デザイン
Effective animation
•もっといろんな効果的なものがあるの
ではないか?
•そういった観点からの提案を心がけて
いる
これからの (?) デザイン
Effective animation
•もっといろんな効果的なものがあるの
ではないか?
•そういった観点からの提案を心がけて
いる
これからの (?) デザイン
Effective animation
•もっといろんな効果的なものがあるの
ではないか?
•そういった観点からの提案を心がけて
いる
これからの (?) デザイン
Effective animation
•もっといろんな効果的なものがあるの
ではないか?
•そういった観点からの提案を心がけて
いる
これからの (?) デザイン
Google のめざす UX
•わたしたちの生活に自然に入り込み、
便利にしていく
Google Map Google Calendar Google Search
> Google Now
Google+
Google のめざす UX
• Car navigation
• Chrome や Map、
Calendar との連携で
Push 通知
• Chrome や Map、
Calendar との連携で
Push 通知
•写真の顔認識機能
•写真の色補正
•笑顔補正
プロトタイプについて
弊社でのこころみ
12:00
HTML based prototype
• HTML をベースに Android ネイティブ
アプリのプロトタイプをつくる
プロトタイプについて弊社でのこころみ
Why HTML ?
•ビルドの手間が必要なく、その場で
微調整ができる
プロトタイプについて弊社でのこころみ
Good!
Why HTML ?
•完成品とは少しちがうところもある
プロトタイプについて弊社でのこころみ
Bad!
プロトタイプについて弊社でのこころみ
> Fries
How about Hybrid ?
プロトタイプについて弊社でのこころみ
> 【第3回】スマホ向けアプリ開発における ハイブリッドアプリの利点 - MdN Design Interactiv
Native Web View×
固定のUI
Tr...
Android アプリの魅力的な
インターフェース
•各所で Default UI を使えないかどうか考える
12:00
8月末日、
電子書籍発売!
AppName
TabName TabName TabName
[tuqulore] 音楽を再生するときのバグ - おせわに
なっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] Interfa...
AppName
TabName TabName TabName
[tuqulore] 音楽を再生するときのバグ - おせわに
なっております、秋葉です。さきほどは ...
17:49hideki.akiba
[tuqulore] Interfa...
ありがとうございました
秋葉ちひろ @tommmmy
12:00
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜
Upcoming SlideShare
Loading in...5
×

Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜

34,424

Published on

2013年8月21日開催のマイナビクリエイターズ Power Session Vol.1 スマホアプリUI攻略 での資料

0 Comments
112 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
34,424
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
125
Comments
0
Likes
112
Embeds 0
No embeds

No notes for slide

Transcript of "Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの?〜"

  1. 1. Androidアプリの 魅力的な インターフェース 本当にiOSのアプリのデザインを 流用するだけでいいの? 株式会社ツクロア 秋葉ちひろ 12:00 ?2013.8.21 マイナビ クリエイターズ Power Session
  2. 2. •見た目だけでなく機能のデザインを •デザインと技術、双方からのアプローチ 「気 持ちいい」をデザインする会社 PC / iPhone / iPad / Android / and more... 秋葉 ちひろ デザイナー / アートディレクター
  3. 3. Designers Hack 技術にしばられずに 体験やデザインを考える デザイナーズハック http://designers-hack.net
  4. 4. 12:00 Native Apps Android MockUp
  5. 5. Native Apps まずは iOS 版のデザインを つくってから、 Android 版にも使いまわしてよ。
  6. 6. 12:00 Android MockUp Design Design Develop Develop Workflow
  7. 7. 12:00 Android MockUp Android の Default UI
  8. 8. 12:00 Android MockUp
  9. 9. 12:00 Android MockUp
  10. 10. Why ? Android の Default UI Default UI は、 実装に負担をかけない
  11. 11. Android も同じものに? ?
  12. 12. res/menu/activity_main.xml <menu>   ∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼     <item android:id="@+id/action_delete"           android:icon="@drawable/ic_action_delete"           android:title="@string/action_delete" android:showAsIcon="ifRoom" />   ∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼∼ </menu> #これだけだと、Android 2.x 以下ではメニューキーにて呼び出される
  13. 13. Why ? Android の Default UI iOS の UI をまねることで、 余計に工数がかかる (こともある)
  14. 14. Why ? Android の Default UI iOS の UI をまねることで、 余計に工数がかかる (こともある) ? ANA
  15. 15. Good samples iOS と Android で UI をうまく使い分けている例 12:00 Android
  16. 16. Good samples iOS と Android で UI をうまく使い分けている例 12:00 Android Expedia
  17. 17. Good samples iOS と Android で UI をうまく使い分けている例 12:00 Android Dropbox
  18. 18. Android アプリの 基本的な Default UI について 12:00
  19. 19. Android アプリのデザインが むずかしいといわれる理由 Android アプリの 基本的な Default UI について
  20. 20. 基本的な Default UI > Android Fragmentation Report July 2013 - OpenSignal
  21. 21. 基本的な Default UI > Android Fragmentation Report July 2013 - OpenSignal
  22. 22. 基本的な Default UI > Android Fragmentation Report July 2013 - OpenSignal
  23. 23. 基本的な Default UI > Android Fragmentation Report July 2013 - OpenSignal
  24. 24. 基本的な Default UI
  25. 25. 基本的な Default UI
  26. 26. 基本的な Default UI > Androidのバージョン履歴 - Wikipedia 4.2 11.13 4.1 6.27 4.0 10.18 2009 2.0 10.26 2.2 5.21 2.3 12.6 2010 2011 2012 201 9.15 1.6 4.30 1.5 2.1 1.12 Cupcake Donut Eclair Froyo Gingerbread 1.5 1.6 2.0/2.1 2.2 2.3 iPhone 3GS iPhone 4 iPhone 4S iPhone 5
  27. 27. 3.x 基本的な Default UI > Androidのバージョン履歴 - Wikipedia d 4.2 11.13 4.1 6.27 4.0 10.18 0 2.2 5.21 2.3 12.6 010 2011 2012 2013 4.3 7.24 2.1 1.12 iPhone 4 iPhone 4S iPhone 5 Ice Cream Sandwitch 4.0 Jelly Bean 4.1/4.2/4.3 Honeycomb 3.0/3.1/3.2
  28. 28. Design Concept •バージョン 2.x から一新した 4.x •できるだけ無駄なものを排除し、 シンプルに 基本的な Default UI
  29. 29. Design Concept • 2.x から一新した 4.x • できるだけ無駄なものを排除し、 シンプルに 基本的な Default UI2.3 4.0-
  30. 30. Design Concept • 2.x から一新した 4.x • できるだけ無駄なものを排除し、 シンプルに 基本的な Default UI2.3 4.0-
  31. 31. さまざまな画面サイズに 適応しやすい工夫 •9-patch •Action Bar 基本的な Default UI
  32. 32. 9-patch • さまざまな画面サイズにあうように 調整できる、Android アプリ特有の 画像の実装方法 基本的な Default UI
  33. 33. 基本的な Default UI 画像を 9 分割して、四隅は固定、 その他を伸びてもいいようにする
  34. 34. 480x800 560x960
  35. 35. Action Bar 基本的な Default UI
  36. 36. Action Bar 基本的な Default UI 1. App icon
  37. 37. Action Bar 基本的な Default UI 1. App icon
  38. 38. Action Bar 基本的な Default UI 2. View control • app name • tab controls • drop-down menus
  39. 39. Action Bar 基本的な Default UI 3. Action buttons • most important actions
  40. 40. Action Bar 基本的な Default UI 4. Action overflow • more buttons
  41. 41. View controls 基本的な Default UI • app name
  42. 42. View controls 基本的な Default UI • tab controls
  43. 43. View controls 基本的な Default UI • drop-down menu
  44. 44. Action buttons Action overflow 基本的な Default UI
  45. 45. Action buttons Action overflow 基本的な Default UI
  46. 46. Action buttons Action overflow 基本的な Default UI
  47. 47. Action buttons Action overflow 基本的な Default UI 編集
  48. 48. Action buttons Action overflow 基本的な Default UI
  49. 49. 基本的な Default UI Split action bar 上下にわかれた Action bar
  50. 50. Split action bar 上下にわかれた Action bar 基本的な Default UI でも、 横向きでは split しない
  51. 51. Split action bar 上下にわかれた Action bar 基本的な Default UI
  52. 52. Split action bar 上下にわかれた Action bar 基本的な Default UI 異なるサブタスク間、 ビュー間、またはノード間 を切り替える機能をユーザ に提供します。 Tab bar > iOS ヒューマンインターフェイスガイドライン p.142
  53. 53. Split action bar 上下にわかれた Action bar 基本的な Default UI
  54. 54. 基本的な Default UI
  55. 55. Navigation Drawer 基本的な Default UI > Navigation Drawer | Android Developer
  56. 56. Navigation Drawer 基本的な Default UI すべて Person Name 2 hours ago All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
  57. 57. Navigation Drawer 基本的な Default UI すべて Person Name 2 hours ago All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, ホーム ユーザー 写真
  58. 58. これからの (?) デザイン 12:00
  59. 59. これからの (?) デザイン •Card UI •Effective animation
  60. 60. Card UI これからの (?) デザイン
  61. 61. Card UI • カードベースのフラットUIデザイン • Android 5.0 Key Lime Pie で正式採用? これからの (?) デザイン
  62. 62. Card UI • カードベースのフラットUIデザイン • Android 5.0 Key Lime Pie で正式採用? これからの (?) デザイン
  63. 63. Card UI すべて Person Name 2 hours ago All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, これからの (?) デザイン
  64. 64. すべて Person Name 2 hours ago All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, これからの (?) デザイン
  65. 65. すべて Person Name 2 hours ago All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, Person Name 2 hours ago All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. これからの (?) デザイン
  66. 66. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, Person Name 2 hours ago All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, これからの (?) デザイン
  67. 67. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, Person Name 2 hours ago All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, Person Name 2 hours ago All what to say is Android Design is along the guideline. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, これからの (?) デザイン
  68. 68. Card UI •出現時のアニメーションがさまざま •Google+ では、iOS と Android で 出現アニメーションがちがう これからの (?) デザイン
  69. 69. Effective animation これからの (?) デザイン •アニメーションは、つければいい というわけではない •自然で気持ちのよい動き 気持ちよさをデザインする
  70. 70. Effective animation •フラットな中に、ほんの少しだけ立体感を 感じさせるようなエフェクト これからの (?) デザイン
  71. 71. Effective animation これからの (?) デザイン •ローディング時のエフェクト 気持ちよさをデザインする
  72. 72. Effective animation •もっといろんな効果的なものがあるの ではないか? •そういった観点からの提案を心がけて いる これからの (?) デザイン
  73. 73. Effective animation •もっといろんな効果的なものがあるの ではないか? •そういった観点からの提案を心がけて いる これからの (?) デザイン
  74. 74. Effective animation •もっといろんな効果的なものがあるの ではないか? •そういった観点からの提案を心がけて いる これからの (?) デザイン
  75. 75. Effective animation •もっといろんな効果的なものがあるの ではないか? •そういった観点からの提案を心がけて いる これからの (?) デザイン
  76. 76. Effective animation •もっといろんな効果的なものがあるの ではないか? •そういった観点からの提案を心がけて いる これからの (?) デザイン
  77. 77. Google のめざす UX
  78. 78. •わたしたちの生活に自然に入り込み、 便利にしていく Google Map Google Calendar Google Search > Google Now Google+ Google のめざす UX
  79. 79. • Car navigation
  80. 80. • Chrome や Map、 Calendar との連携で Push 通知
  81. 81. • Chrome や Map、 Calendar との連携で Push 通知
  82. 82. •写真の顔認識機能 •写真の色補正 •笑顔補正
  83. 83. プロトタイプについて 弊社でのこころみ 12:00
  84. 84. HTML based prototype • HTML をベースに Android ネイティブ アプリのプロトタイプをつくる プロトタイプについて弊社でのこころみ
  85. 85. Why HTML ? •ビルドの手間が必要なく、その場で 微調整ができる プロトタイプについて弊社でのこころみ Good!
  86. 86. Why HTML ? •完成品とは少しちがうところもある プロトタイプについて弊社でのこころみ Bad!
  87. 87. プロトタイプについて弊社でのこころみ > Fries
  88. 88. How about Hybrid ? プロトタイプについて弊社でのこころみ > 【第3回】スマホ向けアプリ開発における ハイブリッドアプリの利点 - MdN Design Interactiv Native Web View× 固定のUI Transition Scroll データの呼出 表示部分
  89. 89. Android アプリの魅力的な インターフェース •各所で Default UI を使えないかどうか考える 12:00
  90. 90. 8月末日、 電子書籍発売!
  91. 91. AppName TabName TabName TabName [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba [tuqulore] Interfaceを削除する方法 - おせわに なっております、秋葉です。さきほどは ... 17:49Chihiro.Akiba [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba 144 48 96 144 3624 12 54pt 42pt 36pt よく使う余白ブロック(px) Roboto Bold Roboto Regular 3px 6px 9px [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba よく使う要素ブロック(px) 画像要素などでよく使う大きさのブロックです。 よく使うフォントサイズ フォントはあまりたくさん使わずに、 できるだけこの 3 種類におさえま しょう。 余白で使うブロックです。 だいたいの大きさにあわせて大きさを調整 すれば、それだけできれいなレイアウトに。 コピペしてぺたぺた使えます。 よく使うフォント 英語は「Roboto」、日本語は「モ トヤ マルベリ」にしましょう。モ トヤ マルベリがない場合は「ヒラ ギノ丸ゴ / 角ゴ」あたりが無難です。 font-weight は 2 種類(Bold/Regular)で考えましょう。 よく使うライン むやみに太さを変えず、できるだけ この 3 種類におさえましょう。
  92. 92. AppName TabName TabName TabName [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba [tuqulore] Interfaceを削除する方法 - おせわに なっております、秋葉です。さきほどは ... 17:49Chihiro.Akiba [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba 144 48 96 144 3624 12 54pt 42pt 36pt よく使う余白ブロック(px) Roboto Bold Roboto Regular 3px 6px 9px [tuqulore] 音楽を再生するときのバグ - おせわに なっております、秋葉です。さきほどは ... 17:49hideki.akiba よく使う要素ブロック(px) 画像要素などでよく使う大きさのブロックです。 よく使うフォントサイズ フォントはあまりたくさん使わずに、 できるだけこの 3 種類におさえま しょう。 余白で使うブロックです。 だいたいの大きさにあわせて大きさを調整 すれば、それだけできれいなレイアウトに。 コピペしてぺたぺた使えます。 よく使うフォント 英語は「Roboto」、日本語は「モ トヤ マルベリ」にしましょう。モ トヤ マルベリがない場合は「ヒラ ギノ丸ゴ / 角ゴ」あたりが無難です。 font-weight は 2 種類(Bold/Regular)で考えましょう。 よく使うライン むやみに太さを変えず、できるだけ この 3 種類におさえましょう。 http://goo.gl/XepQd
  93. 93. ありがとうございました 秋葉ちひろ @tommmmy 12:00
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×