OITEC:プロジェクトを作る前にやること、作ってからやること

1. @mitsuba_tan プロジェクトを作るまえにやること、プロジェクトを作ってまずやること。

2. デザインできてますか

3. できたら苦労しやへん

4. そうだ！

5. くばってるテンプレート使えばいいじゃない！

7. すごく・・・テンプレっぽいです

8. なんとなくそれっぽくみせよう！

9. そのためには・・・・

10. プロジェクトを作るまえにやること、

11. proﬁle • H.N. :蜜葉優 [mitsuba yu] • Expression Blendが好きな人 • twitter:@mitsuba_tan • Web:http://c-mitsuba.com • blog:http://d.hatena.ne.jp/c-mitsuba

12. proﬁle

13. proﬁle

16. 16

17. はじめのはじめに

18. 資料が128枚にもなってしまったこと予めお詫び申し上

19. なお、本セッションはみつばの

20. はじめに

21. Metroは一目見て分かる、最短のプロセスで目的を達成できる、この２点を実現するために重要なのがインフォグラフィックとタイポグラフィです。情報を一目見て把握するためには、アイコンが非常に有効です。知識や情報を視覚的に表現したものをインフォグラフィックといいます。Metroでは、情報の概念を直感的に理解するために、シンプルなアイコンがよく使われています。さらに、情報の詳細を理解するには文字情報が

22. 「Metro is Flavor.」

23. agenda • プロジェクトを作る前にやること＞コンテンツを決めよう！＞コンテンツを整理しよう！＞色を決めよう！

24. agenda • プロジェクトを作ってからやること＞基本レイアウトを決めよう！＞タイポグラフィ＞イメージの取り扱い

25. プロジェクトを作る前にやるこ

26. コンテンツをきめよう • 有益（！ネタ)なアプリが作りたいなら、普段なにしてるか考えてみよう。 • Twitter,Facebook,ぶろぐかく • ごはんたべてる、おちゃしてる

27. コンテンツをきめよう・あまり広すぎるテーマはアプリには適しません。・ごはんアプリ１つとってもラーメンアプリやお茶会 Scatter & Gather

28. 情報アーキテクチャのお勉強・ Introduction to Information Retrieval ・この本は情報検索のための本です。・人が情報を精査するときの思考や情報検索の手法が書いてあります。

29. たとえば・・・

30. 美味しいイタリアンを紹介する

32. こんなはなし • 「いたりあんがたべたいの！」 • 「おいしいパスタのおみせがあるよ」 • 「でもピザもたべたいの！」 • 「じゃあピザもあるところにしよう」

33. イタリアンを整理しよう • ざっくりしたテーマが決まれば、コンテンツを３つのレイヤーに整理しましょう。 • ３階層に分けることがWindows Store

34. イタリアンを整理しよう • パスタ • ペペロンチーノ • こんなペペロンチーノがおいしい、、えとせえとせ

35. イタリアンを整理しよう • ピザ • マルゲリータのピザ • こんなマルゲリータがおいしい、、えとせえとせ。

36. イタリアンを整理しよう • ワイン • 赤ワイン • サンジョベーゼの濃ゆいがおいしい、、えとせ、、

38. まずはベースカラーからはじめま

39. 色を決めよう • イタリアンっぽい色を決めよう！ • イタリアンっぽい色って？ • バジル？ • トマト？

40. 色を決めよう

41. ちょっと具体例すぎますね（

42. いろ、いろいろ • 色っていうのはWindows Store Appsや Windows Phone Appsでとても重要な要素です。 • だって全画面表示するし、グラデーション

43. なのにみんながよくいうの

44. なんとなくこんなかんじで。

45. なんとなく女子的なかんじで。

46. なんとなくおとなっぽいかんじ

47. なんとなくあまいかんじで。

48. なんとなくクールなかんじで。

49. もっとひどいときは・・・

50. なんとなくよしななかんじで！

51. そんなこといわれてもわっから

52. 色の辞書（！お勉強）・なんでもいいので一冊買いましょう。・ちなみにあたしはMDNの雑誌についてた付録の本。・こういうかんじを出したい時はこんな

53. 53

54. 色のお勉強 • もっとてっとりばやくカラーセットが選びたい！ • きゅーらーおすすめ。 https:// kuler.adobe.com/

55. とりあえずベースが決まったら

56. 文字色を決めよう文字色を決めよう文字色を決めよう

57. 文字色・ Windows Phone Appsでは、ユーザー設定にアクセントカラーがあるため、黒も白も対応している方が好

58. さいごの１色・アプリでは最低限３色の色を使います。多すぎても少なすぎても良くないです。３色から４色におさめましょう。

59. さいごの１色・最後の１色はアクセントカラーです。・たとえばに

60. さいごの１色 ■アクセントカラーはユーザーの目を引くために、非常に重要な要素です。 ■この色の決め方はカラーセットを引くか、

62. なんでここで名前かという

63. 名前がなかったら

64. ソリューションがつくれない

65. とりあえずApp23.slnで

66. なまえ ■ブランディングが重要なMetro Designですから、名前はとても重要です。 ■思想を持って、ついったーくらいあんとを

67. もうすこし名前のはなし ■アクロニム：複数の単語の頭文字を取り出す方法 ■たとえば「AUTOMATED METEOROLOGICAL DATA ACQUISITION SYSTEM」

68. もうすこし名前のはなし ■プラス造語法(A+B=AB) ■たとえばの「ポテト＋チップス」 ■たとえばの「ベビー＋ローション」 ■たとえばの「ビタミン＋ウォーター」

69. もうすこし名前のはなし ■減量造語法(A+B=AB) ■たとえばの「ゴリラ＋クジラ」 ■たとえばの「Handy＋Camera」 ■たとえばの「ごはん＋パン」

70. もうすこし名前のはなし ■プラス造語法 ■減量造語法 ■変形造語法 ■頭文字造語法 ■並べ替え造語法

71. もうすこし名前のはなし ■あとは言語を変えてみるとか、、、「必ず見つかる。非常に正確に。」＝ Bing(中国語) ■連想する単語に変えてみるとか、、、「美人時計」->「BeautyClock」-

72. もうすこし名前のはなし ■音にこだわってみるとか、、、「か行」「さ行」「た行」「ら行」この音を聞くと、チクチクする感覚があり、刺激がある音＝クリエティブ音「な行」「は行」「ま行」「や、わ」などは

73. agenda ■プロジェクトを作る前にやること＞コンテンツを決めよう！＞コンテンツを整理しよう！＞色を決めよう！

74. さぁソリューションをつくろ

75. さぁソリューションをつくろ P74/121

76. agenda ■プロジェクトを作ってからやること＞基本レイアウトを決めよう！＞タイポグラフィ＞イメージの取り扱い

77. 基本レイアウトを決めよう！

78. イタリアンを整理しよう • パスタ • ペペロンチーノ • こんなペペロンチーノがおいしい、、えとせえとせ

79. agenda

81. agenda

82. agenda • プロジェクトを作ってからやること＞基本レイアウトを決めよう！＞タイポグラフィ

83. おいしいいたりあん agenda パスタピッツァミートソースカルボナーララビオリマルゲリータペペロンチーノアラビアータカルツォーネ

84. おいしいいたりあん agenda パスタピッツァミートソースカルボナーララビオリマルゲリータペペロンチーノアラビアータカルツォーネ

85. パスタ agenda ミートソーシュット、モルタデッラ、またはポルチーニが加えられることもある。伝統的なものとは違った作り方として、牛肉とともに豚肉、鶏肉、ガチョウのレバーを利用したり、オリーブ油とともにバターを使用するレシピも存在する。また、実際にはトマトペーストではなく、トマトソースを使うレシピも広く知られている。イタリアでは、伝統的にタリアテッレと和えてイタリア南部の簡単な調理法しかなかったパス調理される（tagliatelle alla bolognese）。まタを、「肥満の街（La Grassa）」[1]すなわちたはラザーニャ、カネロニとして調理される。食の都である北部のボローニャの裕福層が、隣リガトーニなどの、短い管状のパスタと合わせ ¥ 接するフランスのラグー（煮込み）をもとに肉ることもある。や野菜、ワインなどを贅沢に使用して作らせたイタリア国外では、スパゲッティと和えて食さのが起源といわれている[2]。れることが一般的である。この食べ方はイタリ

86. タイポグラフィ

87. タイポグラフィ • Metro UIはその名の通り、地下鉄の駅で使われている標識などからインスパイアを受けていますが、その下地にあるのは国際タイポグラフィ様式です。 • 装飾を廃したシンプルなグラフィックの中で、ユーザーは自然とデザインの要素として認識できるもの…配色や文字のレイアウトに目がいきます。 • つまり、タイポグラフィを知り、意識するということは、

88. ふぉんといろいろ • abcdefg012345あいうえお • abcdefg012345あいうえお • abcdefg012345あいうえお • abcdefg012345あいうえお

89. ふぉんといろいろ • めいりおMeiryoメイリオ • しーごSegoe UIシーゴ • ゆうごしっくYu Gothicユーゴシック • あんずもじ奏

90. ふぉんといろいろ • しーごSegoe UIシーゴ • しーごSegoe UIシーゴ • しーごSegoe UIシーゴ • しーごSegoe UIシーゴ • しーごSegoe UIシーゴ • しーごSegoe UIシーゴ

91. Windows Phone Fonts

92. Windows Store Apps Fonts

93. ふぉんといろいろ • ゆーごしっくYuGothic • ゆーごしっくYuGothic

94. おいしいいたりあんパスタ agenda ピッツァミートソースカルボナーララビオリマルゲリータペペロンチーノアラビアータカルツォーネ

95. ミートソースパスタ agenda を利用したり、オリーブ油とともにバターを使用するレシピも存在する。また、実際にはトマトペーストではなく、トマトソースを使うレシピも広く知られている。イタリアでは、伝統的にタリアテッレと和えて調理される（tagliatelle alla bolognese）。またはラザーニャ、カネロニとして調理される。リガトーニなどの、短い管状のパスタと合わせることもある。イタリア国外では、スパゲッティと和えて食されることが一般的である。この食べ方はイタリア国内にも広がってきている[3]。しかしこのスパゲッティ・ボロネーゼ（Spaghetti alla Bolognese, スパゲッティ・ボローニャ風の意）は、イタリア南部のように乾いたパスタではなく、卵を原材料としたパスタが好まれてきたエミリア料理（cucina emiliana）の伝統には属さないものであり、本来的にボローニャ風とは言い難いものである。日イタリア南部の簡単な調理法しかなかったパスタを、「肥満の街（La 本では、ナポリタンと並んで日本人になじみの深いスパゲッティ・メ Grassa）」[1]すなわち食の都である北部のボローニャの裕福層が、隣接すニューのひとつである。るフランスのラグー（煮込み）をもとに肉や野菜、ワインなどを贅沢に使戦後、兵庫県宝塚市にあったイタリア料理店 “アベーラ” の初代店主オラッ用して作らせたのが起源といわれている[2]。ツィオ・アベーラ(1913 - 1974)が、「スパゲティミートソース」として店 ¥ 1982年にイタリア料理アカデミー(Accademia Italiana della Cucina)[3]ので出したのが日本初という説がある[4]。ボローニャ代表によって発行されたレシピは、材料を牛肉、パンチェッタ、 1959年、キユーピーが独立した缶入り商品としてこのソースを発売[5]した玉葱、人参、セロリ、トマトペースト、肉のブイヨン、赤ワイン、そして任ことが、家庭によりミートソースを普及させる下地を作った。これに追随意での牛乳およびクリームに制限している。ソフリットとしてプロシュッする形でスパゲッティ・ソースの販売が各社で行なわれ、レトルト食品中ト、モルタデッラ、またはポルチーニが加えられることもある。伝統的なも心にバラエティーを極める現在でも、未だミートソースの人気は衰えてい

96. ふぉんといろいろ • めいりおmeiryo • めいりおmeiryo • めいりおmeiryo • めいりおmeiryo

101. タイポグラフィのお勉強・タイポグラフィの中でも Metroの日本語について書かれた本はこれしかないよ！！

102. イメージの取り扱い

103. とりあえずこの辺に絵を入れたい

105. agenda ¥

107. すごくそれっぽい！

110. おいしいイタリアンパスタ agenda ピッツァミートソースカルボナーララビオリマルゲリータペペロンチーノアラビアータカルツォーネ

111. すごくそれっぽい！

112. 画像レイアウトのお勉強・限られた画像リソースを様々なレイアウトを行うことで、ユーザに与える印象を操作する手法が書かれてあります。・レイアウトだけでなく、画像全体の色味やトリミングの仕方を工夫するだけでも、かっこ良く魅せる方法も書いてあります。

113. まとめ

114. agenda • プロジェクトを作る前にやること＞コンテンツを決めよう！＞コンテンツを整理しよう！＞色を決めよう！

115. まとめ • できるだけピンポイントなコンテンツを選択する。<-コンテンツにストーリーを持たせる • コンテンツを３つの階層構造にわける。 • ベースカラー -> 文字色 -> アクセントカラーを決める。 • 名前は印象的且つ理由を持ってつける。

117. まとめ • 基本的なレイアウトは継承しつつ、日本語フォントに合わせてデザインする。 • フォントが与える印象の違いを考慮して、使い分ける。 • 画像リソースは三分割法を使えば、まずバランスか崩れない。

118. 、いいつつ、やっぱり一番大事なの

119. いろです。

120. 119

121. App10 120

122. タイトルがぴんくになるだけでかわいい、女子的、春っぽい

123. おいしいイタリアンパスタピッツァミートソースカルボナーララビオリマルゲリータペペロンチーノアラビアータカルツォーネ

124. おいしいイタリアンパスタピッツァミートソースカルボナーララビオリマルゲリータペペロンチーノアラビアータカルツォーネ

125. ミートソースパスタを利用したり、オリーブ油とともにバターを使用するレシピも存在する。また、実際にはトマトペーストではなく、トマトソースを使うレシピも広く知られている。イタリアでは、伝統的にタリアテッレと和えて調理される（tagliatelle alla bolognese）。またはラザーニャ、カネロニとして調理される。リガトーニなどの、短い管状のパスタと合わせることもある。イタリア国外では、スパゲッティと和えて食されることが一般的である。この食べ方はイタリア国内にも広がってきている[3]。しかしこのスパゲッティ・ボロネーゼ（Spaghetti alla Bolognese, スパゲッティ・ボローニャ風の意）は、イタリア南部のように乾いたパスタではなく、卵を原材料としたパスタが好まれてきたエミリア料理（cucina emiliana）の伝統には属さないものであり、本来的にボローニャ風とは言い難いものである。日イタリア南部の簡単な調理法しかなかったパスタを、「肥満の街（La 本では、ナポリタンと並んで日本人になじみの深いスパゲッティ・メ Grassa）」[1]すなわち食の都である北部のボローニャの裕福層が、隣接すニューのひとつである。るフランスのラグー（煮込み）をもとに肉や野菜、ワインなどを贅沢に使戦後、兵庫県宝塚市にあったイタリア料理店 “アベーラ” の初代店主オラッ用して作らせたのが起源といわれている[2]。ツィオ・アベーラ(1913 - 1974)が、「スパゲティミートソース」として店 ¥ 1982年にイタリア料理アカデミー(Accademia Italiana della Cucina)[3]ので出したのが日本初という説がある[4]。ボローニャ代表によって発行されたレシピは、材料を牛肉、パンチェッタ、 1959年、キユーピーが独立した缶入り商品としてこのソースを発売[5]した玉葱、人参、セロリ、トマトペースト、肉のブイヨン、赤ワイン、そして任ことが、家庭によりミートソースを普及させる下地を作った。これに追随意での牛乳およびクリームに制限している。ソフリットとしてプロシュッする形でスパゲッティ・ソースの販売が各社で行なわれ、レトルト食品中ト、モルタデッラ、またはポルチーニが加えられることもある。伝統的なも心にバラエティーを極める現在でも、未だミートソースの人気は衰えてい

126. ミートソースパスタを利用したり、オリーブ油とともにバターを使用するレシピも存在する。また、実際にはトマトペーストではなく、トマトソースを使うレシピも広く知られている。イタリアでは、伝統的にタリアテッレと和えて調理される（tagliatelle alla bolognese）。またはラザーニャ、カネロニとして調理される。リガトーニなどの、短い管状のパスタと合わせることもある。イタリア国外では、スパゲッティと和えて食されることが一般的である。この食べ方はイタリア国内にも広がってきている[3]。しかしこのスパゲッティ・ボロネーゼ（Spaghetti alla Bolognese, スパゲッティ・ボローニャ風の意）は、イタリア南部のように乾いたパスタではなく、卵を原材料としたパスタが好まれてきたエミリア料理（cucina emiliana）の伝統には属さないものであり、本来的にボローニャ風とは言い難いものである。日イタリア南部の簡単な調理法しかなかったパスタを、「肥満の街（La 本では、ナポリタンと並んで日本人になじみの深いスパゲッティ・メ Grassa）」[1]すなわち食の都である北部のボローニャの裕福層が、隣接すニューのひとつである。るフランスのラグー（煮込み）をもとに肉や野菜、ワインなどを贅沢に使戦後、兵庫県宝塚市にあったイタリア料理店 “アベーラ” の初代店主オラッ用して作らせたのが起源といわれている[2]。ツィオ・アベーラ(1913 - 1974)が、「スパゲティミートソース」として店 ¥ 1982年にイタリア料理アカデミー(Accademia Italiana della Cucina)[3]ので出したのが日本初という説がある[4]。ボローニャ代表によって発行されたレシピは、材料を牛肉、パンチェッタ、 1959年、キユーピーが独立した缶入り商品としてこのソースを発売[5]した玉葱、人参、セロリ、トマトペースト、肉のブイヨン、赤ワイン、そして任ことが、家庭によりミートソースを普及させる下地を作った。これに追随意での牛乳およびクリームに制限している。ソフリットとしてプロシュッする形でスパゲッティ・ソースの販売が各社で行なわれ、レトルト食品中ト、モルタデッラ、またはポルチーニが加えられることもある。伝統的なも心にバラエティーを極める現在でも、未だミートソースの人気は衰えてい

127. リつくったあとに、うーんってなっカラーの比率を変えてみましょう。

128. ベースカラーとアクセントカラーをいれかえてみたりするといいかも。

129. ベース緑よりもベース赤のほうがなんとなく美味しそうでしょ！！

130. （赤は人の食欲を誘う色なんですって

131. ね、かんたんでしょう？

132. ね、それっぽいでしょう？

133. ね、それっぽいでしょう？

134. この資料だって、Metroっぽくなってったでしょ？

135. ご清聴ありがとうございました＜ ) ﾉﾞ (＞ヮ

136. まとめ • できるだけピンポイントなコンテンツを選択する。 • コンテンツを３つの階層構造にわける。 • ベースカラー -> 文字色 -> アクセントカラーを決める。 • 名前は印象的且つ理由を持ってつける。 • 基本的なレイアウトは継承しつつ、日本語フォントに合わせてデザインする。 • フォントが与える印象の違いを考慮して、使い分ける。 • 画像リソースは三分割法を使えば、まずバランスか崩れない。

OITEC:プロジェクトを作る前にやること、作ってからやること

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von c-mitsuba

Mehr von c-mitsuba (20)

OITEC:プロジェクトを作る前にやること、作ってからやること

Hinweis der Redaktion