SlideShare a Scribd company logo
聞いて覚える
マテリアルデザイン⼊⾨
~ニュアンスを掴んで理解しよう~
2015/11/7 WordBench京都
by @maki_saki
2015-11-10 2
⽬次
• マテリアルデザインについて
• マテリアルデザインの機能
• マテリアルデザインの活⽤法(私⾒)
• フレームワークの紹介
• 参考サイトの紹介
2015-11-10 3
⾃⼰紹介
HN:コンチ(ぼっち)
@maki_saki
2015-11-10 4
⾃⼰紹介
経歴
• 携帯FLASHデザイナー(6年)
↓
• 旅⾏会社Web担当(4ヶ⽉)
↓
• 制作会社ディレクタ[社畜](3年⽬)
別にデザインの
スペシャリストとか
凄いフロントエンジニアとか
じゃないです!!!
HN:コンチ(ぼっち)
@maki_saki
2015-11-10 5
⾃⼰紹介
時々、勉強会開いてます\(^o^)/
過去開催の勉強会
• jQuery勉強会
• CSSフレームワーク勉強会
• コーディング規約勉強会
• タグマネージャー勉強会
• LESSを始める勉強会
etc
マテリアルデザインを知ろう
2015-11-10 7
マテリアルデザインを知ろう|はじめに
Google I/O 2014 で
新しいデザインガイドラインが発表されました。
その前に…
フラットデザインって
ありましたね?
2015-11-10 9
マテリアルデザインを知ろう|フラットデザインとの違い
スキューモフィック
デザイン
フラットデザイン
• iOS、Widows8など様々な
インターフェイスにマッチする。
• シンプルゆえ、コンテンツに
フォーカスできる。
• CSSで作りやすいのでレスポンシブの
実装が容易
• 流⾏りのためクリエイティブが⾼い
プロダクトに⾒える。
(個⼈差があります。)
2013年 フラットデザインとは?
2015-11-10 10
マテリアルデザインを知ろう|⽬的
• 統⼀感のある設計
• 影やレイヤーなど3Dを表現
• 様々な画⾯サイズに適応できるデザイン
• 装飾ではなく、意味を伝える動き
あらゆるデバイスで統⼀感のある
「UIの基礎原則」を作る
2015-11-10 11
マテリアルデザインを知ろう|⽬的
なぜマテリアルデザインは作られたか
2015-11-10 12
マテリアルデザインを知ろう|⽬的
「紙」と「インク」
マテリアルデザインでは「紙」と「インク」と⽐喩(メタファー)している。
UIはバーチャル空間に「紙」の特徴を持つ。
「紙」は⻑⽅形か円となる。
ひし形などの複雑な形にはならない。
複雑な形は「インク」(コンテンツ)と
して紙の上に書く
2015-11-10 13
マテリアルデザインを知ろう|⽬的
3D(XYZ軸)空間でのUI設計
マテリアルデザインのUIは、紙を組み合わせて3次元で設計をする。
UI(紙)はXYZ軸を持つ
インクはZ軸を持たない
紙のUIを重ねて情報設計をする。
また「紙」の中の遷移は「紙」の中で
⾏われる。
2015-11-10 14
マテリアルデザインを知ろう|⽬的
紙の変形
紙のUIはコンテンツの遷移やピックアップなどの⽬的に合わせて変形する。
UI(紙)の変形はXY軸で⾏われる。
また、拡⼤しているように⾒せないように等
倍で変形しない。
円型は等倍で変形する。
Z軸を超えて変形しないのは、他のオブジェク
トをすり抜けてしまい現実ではありえない遷
移をするからである。
紙の厚みは固定である。
2015-11-10 15
マテリアルデザインを知ろう|⽬的
Z軸と影(シャドウ)
Z軸は⾼さの移動のみに絞られ、他のオブジェクトをすり抜ける事はしない。
またUIによって⾼さが異なる。
紙のUIは1dpの厚みを持つ
Z軸の標⾼・アニメーションによって
シャドウの量は異なる。
質問です。
2015-11-10 17
マテリアルデザインを知ろう|⽬的
このテーブルの上にある
「紙」と「インク」はどれでしょう
2015-11-10 18
マテリアルデザインを知ろう|まとめ
マテリアルデザインはフラットデザインを
⽤いたデザインガイドラインである。
≠
マテリアルデザインの機能
アニメーション
2015-11-10 21
マテリアルデザインの機能|アニメーション
リップル(波紋)
タップすると波紋のアニメーションが起こる。
2015-11-10 22
マテリアルデザインの機能|アニメーション
隆起
タップすると紙は⼀度浮き上がり、そして沈みます。
2015-11-10 23
マテリアルデザインの機能|アニメーション
リーベル
円形で覆うアニメーション、コンテンツの遷移に使われる
2015-11-10 24
マテリアルデザインの機能|アニメーション
視覚的な遷移
コンテンツの遷移はタップした場所が広がり詳細が現れる。
※カード、リスト、グリッドで共通して使われる。
2015-11-10 25
マテリアルデザインの機能|アニメーション
アニメーションの順序
アニメーションはグリッドのコンテンツの順に
沿って動きます。
※コンテンツが⼀括でアニメーションするのはNGです。
2015-11-10 26
マテリアルデザインの機能|アニメーション
⼀環性のあるアニメーション
アニメーションは協調性がある必要があります。
2015-11-10 27
マテリアルデザインの機能|アニメーション
何度も押したくなるアニメーション
派⼿に動く事でユーザーを楽します。
スタイル
2015-11-10 29
マテリアルデザインの機能|スタイル
カラー設計
⼀つの主要⾊(プライマリー)と強調⾊(アクセント)によって成り⽴つ。
プライマリー アクセント
2015-11-10 30
マテリアルデザインの機能|スタイル
アクセントカラー
重要な要素に注⽬をさせるために使います。
(アクションボタン、スイッチ、スライダーなど)
アクセント
2015-11-10 31
マテリアルデザインの機能|スタイル
タイポグラフィ
Roboto(欧⽂)とNoto(和⽂)を使⽤します。
Android5.0以降にはRobotoは標準装備されています。
Roboto Noto
2015-11-10 32
マテリアルデザインの機能|スタイル
アイコン
予めシステム⽤のアイコンフォントが⽤意されています。
2015-11-10 33
マテリアルデザインの機能|スタイル
画像使⽤の原則
イラストや写真を使⽤する場合は、個⼈関連、情報と関連し、
喜びを表現した画像を選択します。
2015-11-10 34
マテリアルデザインの機能|スタイル
適切なサイズ
デバイスに応じて画像がボケないように最適な画像を出すように切り分けます。
2015-11-10 35
マテリアルデザインの機能|スタイル
アイコン
独⾃でアイコンを作る場合は24dpのグリッドシステムを使⽤します。
2015-11-10 36
マテリアルデザインの機能|スタイル
⽂字サイズ
レイアウトの機能タイプによって⽂字サイズの上限があります。
2015-11-10 37
マテリアルデザインの機能|スタイル
⾔葉
ユーザーには「あなた」と話しかけるように⽂章を作ります。
○
2015-11-10 38
マテリアルデザインの機能|スタイル
確認の⾔葉
ユーザーに動作をさせる場合は⼀貫した動詞を使⽤します。
○
少し話題を替えましょう
私最近ブログを
リニューアルしました。
2015-11-10 41
ブログリニューアル
テーマ変えたら、
アクセス数が3割くらい
落ちました
\(^o^)/
マテリアルデザイン怖い
(違う)
閑話休題
レイアウト
2015-11-10 46
マテリアルデザインの機能|レイアウト
Seem(繋ぎ⽬)とStep(段差)
レイアウトの境界は、紙が「並ぶ」Seem(繋ぎ⽬)、
紙が「重なる」Stepとあります。
Seem Step
隣接した紙が
同時に動きます。
それぞれの紙が
別々に動きます。
2015-11-10 47
マテリアルデザインの機能|レイアウト
画⾯密度(DP)
画⾯に収まる画素数です
⾼密度スクリーンは、低密度のものよりインチあたりの画素数が⾼いです。
画⾯密度 =画⾯の幅(または⾼さ)のピクセル/インチ画⾯の幅(または⾼さ)インチ
2015-11-10 48
マテリアルデザインの機能|レイアウト
ブレークポイントシステム
2015-11-10 49
マテリアルデザインの機能|レイアウト
UI領域 Status bar
2015-11-10 50
マテリアルデザインの機能|レイアウト
App bar
App barはブランディングと
機能(ナビゲーション、検索、アクション)を持ちます。
Nav icon
Title Action icon
Menu icon
2015-11-10 51
マテリアルデザインの機能|レイアウト
ボタン
UIで使⽤するボタンは3種類で、デザインは優先度で決定します。
フローティング
アクションボタン
レイズドボタン フラットボタン
2015-11-10 52
マテリアルデザインの機能|レイアウト
フローティングアクションボタン
紙の上にならどこにでも配置できます。
また、Seem、Stepのどちらにも関連がある場合は跨いで表⽰できます。
2015-11-10 53
マテリアルデザインの機能|レイアウト
レイズドボタン
レイズドボタンとフラットボタンは汎⽤的に使⽤できる。
優先度で使い分けをする。
押すと、
浮かび上がります。
2015-11-10 54
マテリアルデザインの機能|レイアウト
フラットボタン
遷移先を複雑になり過ぎないように
ツールバーやダイアログはフラットボタンを使⽤します。
インクで作られた
影の無いボタン
2015-11-10 55
マテリアルデザインの機能|レイアウト
コンテンツ
コンテンツの表現は主にこの3つです。
リスト グリッド カード
2015-11-10 56
マテリアルデザインの機能|レイアウト
リスト
単⼀の連続した項⽬を垂直配置で複数配列する。
⼀つのリストの中に3⾏以上のテキストが⼊る場合はカードを使う。
2015-11-10 57
マテリアルデザインの機能|レイアウト
グリッド
連続した均⼀なデータの画像を複数配列して視覚的に選択させる
シャドウ無し
2015-11-10 58
マテリアルデザインの機能|レイアウト
カード
異なる要素で関連のある構成内容を表⽰するのに使⽤します。
カードコレクションは同⼀平⾯上でレイアウトされます。
シャドウ有り
2015-11-10 59
マテリアルデザインの機能|レイアウト
タブ
グループ分けされたコンテンツの切り替えに使⽤します。
※ナビゲーションとして使⽤しません。
タップとスワイプで
コンテンツの切り替えが
可能
どうです?
マテリアルデザインの事
少し⾝近に感じれましたか?
ご清聴ありがとうござました。
(*ゝω・*)
嘘です!!
d(*´∀`)b
もうちょい続きます。
マテリアルデザインの活⽤法
そんなのない!
(多分)
だって他所様の
デザインガイドですよ!
パクリダメゼッタイ
でも知っておくと
良い事もあるんですよ
(多分)
2015-11-10 69
マテリアルデザインの活⽤法
• 概念を理解し応⽤して
⾃分のデザインガイドラインを作るため。
• ガイドラインを作る⼿前の設計で
認識を共有できる。
• Googleが作っているので受け⼊れられやすい
設計と提案が可能。
ガイドラインって必要?
Q.
必要じゃボケ!!
A.
ガイドラインをつくるの
⼤変ですが、ちゃんと
メリットあります。
2015-11-10 73
マテリアルデザインの活⽤法
他社ガイドライン
バーンワークス株式会社 某社畜
ガイドラインがあると
みんな仲良く、統⼀した品質を保てます!!
ブランディング
とても⼤事
ブランディング
とても⼤事
ご清聴ありがとうござました。
(*ゝω・*)
嘘です!!
d(*´∀`)b
※本⽇2度⽬
もうちょい続きます。
マテリアルデザインの
フレームワーク
2015-11-10 80
マテリアルデザインのフレームワーク
Material Design Lite
Google謹製のフレーム
ワーク
最低限マテリアルデザン
を実装するためのもの
JSとCSSを合わせて
27KBという超軽量
License:Apache2 license
2015-11-10 81
マテリアルデザインのフレームワーク
Materialize
マテリアルデザインの設
計を実装したフレーム
ワーク
UIコンポーネントが豊富
エンジニアに⼈気
License:MIT License
2015-11-10 82
•マテリアルデザインのフレームワーク
Material Design for Bootstrap
Boostrapにマテリアルデ
ザイン要素を適応させた
もの
Bootstrapユーザーは
敷居が低く使える
License:MIT License
参考サイト
2015-11-10 84
参考サイト
公式ドキュメント
公式サイトが正義です。
最新の情報はここで確認!
Google Design
2015-11-10 85
参考サイト
CSSのclassだけですでに
⽂字⾊と背景⾊が⽤意されている。
モックアップを作るのにとても便利
カラーパレット
google-material-color
2015-11-10 86
参考サイト
カラーパレット
カラーパレットを作るのにとても
便利です
Material Palette
2015-11-10 87
参考サイト
他の⼈が作ったマテリアルデザインの
サイトが⾒えます。
デザインギャラリー
MaterialUp
ご清聴ありがとうござましたやで。
(*ゝω・*)
参考⽂献
公式ドキュメント
http://www.google.com/design/spec/material-design/introduction.html
マテリアルデザイン
http://www.slideshare.net/akioyonekura1/materialdesign-49393726

More Related Content

What's hot

Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
 

What's hot (19)

Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
 
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
 
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトこれまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
 
働き方のプロトタイピング
働き方のプロトタイピング働き方のプロトタイピング
働き方のプロトタイピング
 
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
 
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
 
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-tech
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
 

Viewers also liked

Viewers also liked (13)

マテリアルデザイン
マテリアルデザインマテリアルデザイン
マテリアルデザイン
 
FICC VISION 2016
FICC VISION 2016FICC VISION 2016
FICC VISION 2016
 
ホントのホントの0から始める3Dモデリング入門
ホントのホントの0から始める3Dモデリング入門ホントのホントの0から始める3Dモデリング入門
ホントのホントの0から始める3Dモデリング入門
 
マーケティングブリーフ項目 テンプレート
マーケティングブリーフ項目 テンプレートマーケティングブリーフ項目 テンプレート
マーケティングブリーフ項目 テンプレート
 
Introducing Fluent Design
Introducing Fluent DesignIntroducing Fluent Design
Introducing Fluent Design
 
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
 
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
 
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
 
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
 
確実に良くするUI/UX設計
確実に良くするUI/UX設計確実に良くするUI/UX設計
確実に良くするUI/UX設計
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 

Similar to 聞いて覚えるマテリアルデザイン入門

Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなこと
Masakazu Muraoka
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
 
CIサーバーとSchemaSpyでデータベースのドキュメント作成を自動化
CIサーバーとSchemaSpyでデータベースのドキュメント作成を自動化CIサーバーとSchemaSpyでデータベースのドキュメント作成を自動化
CIサーバーとSchemaSpyでデータベースのドキュメント作成を自動化
Hiroyuki Ohnaka
 
最近挑戦していること at MF Geeks Night 2015.03.19
最近挑戦していること at MF Geeks Night 2015.03.19最近挑戦していること at MF Geeks Night 2015.03.19
最近挑戦していること at MF Geeks Night 2015.03.19
Naoto Koshikawa
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
 

Similar to 聞いて覚えるマテリアルデザイン入門 (20)

作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
 
JSつまみぐい
JSつまみぐいJSつまみぐい
JSつまみぐい
 
プログラミング同好会とすごい合同勉強会
プログラミング同好会とすごい合同勉強会プログラミング同好会とすごい合同勉強会
プログラミング同好会とすごい合同勉強会
 
Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなこと
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
 
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
 
connpass特徴と開発の流れ
connpass特徴と開発の流れconnpass特徴と開発の流れ
connpass特徴と開発の流れ
 
Swiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考えるSwiftにおけるclassとstructの使い分けをDDDから考える
Swiftにおけるclassとstructの使い分けをDDDから考える
 
PHP カンファレンス福岡 2017 参加報告
PHP カンファレンス福岡 2017 参加報告PHP カンファレンス福岡 2017 参加報告
PHP カンファレンス福岡 2017 参加報告
 
EPIU
EPIUEPIU
EPIU
 
CIサーバーとSchemaSpyでデータベースのドキュメント作成を自動化
CIサーバーとSchemaSpyでデータベースのドキュメント作成を自動化CIサーバーとSchemaSpyでデータベースのドキュメント作成を自動化
CIサーバーとSchemaSpyでデータベースのドキュメント作成を自動化
 
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
 
ドメイン駆動設計勉強会発表
ドメイン駆動設計勉強会発表ドメイン駆動設計勉強会発表
ドメイン駆動設計勉強会発表
 
Htmlのコトバ
HtmlのコトバHtmlのコトバ
Htmlのコトバ
 
html5j最新情報
html5j最新情報html5j最新情報
html5j最新情報
 
Leopardの独自技術の紹介と提案
Leopardの独自技術の紹介と提案Leopardの独自技術の紹介と提案
Leopardの独自技術の紹介と提案
 
Cmsdou oosaka
Cmsdou oosakaCmsdou oosaka
Cmsdou oosaka
 
Webコーディングの基本+α
Webコーディングの基本+αWebコーディングの基本+α
Webコーディングの基本+α
 
最近挑戦していること at MF Geeks Night 2015.03.19
最近挑戦していること at MF Geeks Night 2015.03.19最近挑戦していること at MF Geeks Night 2015.03.19
最近挑戦していること at MF Geeks Night 2015.03.19
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
 

聞いて覚えるマテリアルデザイン入門