2015.4.25WordBenchMiyazaki,Vol.9
WordPressといろんなAPIを組み合わせて
Webアプリを作ろう
Tomoka Baba
Tohru Tsuzurahara
2015.4.25WordBenchMiyazaki,Vol.9
黒 原 道 (つづらはらとおる)
eaterTohru Tsuzurahara
大阪出身、宮崎在住
後藤修氏とのデザインユニット「eater」にて、
Webデザイン・構築 / グラフィックデザインを行っています。
http://29eater.com
WordBench宮崎運営
セミナーイベント「Design Pledge」運営など
CSS Nite LP, Disk 22「Webデザインで使うPhotoshop」
dot-Ai Vol.2「ネタ祭り2013」
CSS Nite LP, Disk 34「Webデザインで使うPhotoshop Pt.2」
CSS Nite @Co-Edo, Vol.19/Vol.20
『Webデザインの現場ですぐに役立つ Photoshop仕事術』
等に出演
2015.4.25WordBenchMiyazaki,Vol.9
WordPressといろんなAPIを組み合わせて
Webアプリを作ろう
2015.4.25WordBenchMiyazaki,Vol.9
霧島地区、国道223号線沿線の
観光ガイドマップを作りたい。
2015.4.25WordBenchMiyazaki,Vol.9
http://r223.jp
2015.4.25WordBenchMiyazaki,Vol.9
店舗やスポットの情報を追加や更新したい。
WordPress
2015.4.25WordBenchMiyazaki,Vol.9
スポットの位置をGoole Mpasで表示したい
Google Maps API
2015.4.25WordBenchMiyazaki,Vol.9
現在地を取得して地図に表示したい
Geolocation API
2015.4.25WordBenchMiyazaki,Vol.9
モバイルファーストで!
CSSフレームワーク
2015.4.25WordBenchMiyazaki,Vol.9
HTML5 Geolocation API
×
Google Maps API
×
WordPress
×
CSSフレームワーク
で作ったガイドマップWebアプリ
2015.4.25WordBenchMiyazaki,Vol.9
チーム紹介
2015.4.25WordBenchMiyazaki,Vol.9
ディレクション
デザイン
マークアップ
WordPress構築
黒 原 道 馬場 大佳
WPプラグイン開発
サーバー構築
サーバー構築
児玉 秋二
2015.4.25WordBenchMiyazaki,Vol.9
開発環境・チーム環境
2015.4.25WordBenchMiyazaki,Vol.9
日常の連絡
Slack
2015.4.25WordBenchMiyazaki,Vol.9
コードの管理
Bitbucket(Git)
2015.4.25WordBenchMiyazaki,Vol.9
ローカルでの開発環境
VCCW(Vagrant )
VCCW
2015.4.25WordBenchMiyazaki,Vol.9
サイト作成にあたっての前提条件
2015.4.25WordBenchMiyazaki,Vol.9
「時間的な都合もありカンプは作らない」
そもそもモバイルファーストなので、たくさんある
デバイス(画面サイズ)に対して、ピクセルパーフェ
クトで作れない。
2015.4.25WordBenchMiyazaki,Vol.9
「クライアントやチームでの
確認はどうするか?」
2015.4.25WordBenchMiyazaki,Vol.9
2015.4.25WordBenchMiyazaki,Vol.9
2015.4.25WordBenchMiyazaki,Vol.9
「インブラウザーデザイン」
コードでデザインする。キャンバスはブラウザ。
[CSSフレームワーク]を活用することで、時間を
短縮できる。
2015.4.25WordBenchMiyazaki,Vol.9
「CSSフレームワーク」
Bootstrap Foundation
2015.4.25WordBenchMiyazaki,Vol.9
あらかじめ用意されているCSSやJSを適用す
ることで、短時間でレスポンシブ対応サイトが
作れる。
「CSSフレームワーク」
2015.4.25WordBenchMiyazaki,Vol.9
Material is the metaphor
物質(マテリアル)は比喩(メタファー)です
「マテリアルデザイン」
2015.4.25WordBenchMiyazaki,Vol.9
よく知られた触覚の特質を使用すると、ユーザが速くアフォーダンス
(見た目から連想する機能)を理解する助けになります。
「マテリアルデザイン」
The use of familiar tactile
attributes helps users quickly
understand affordances.
2015.4.25WordBenchMiyazaki,Vol.9
フラットデザイン以前のスキュアモーフィズムが
視覚的だったのに対して触覚を重視する。
見た目はフラットデザインに見えるが、重なり順をあらわす影や、
ユーザーの操作に対して、レスポンシブな反応が返ってくる
ところがフラットデザインとは違う。
「マテリアルデザイン」
2015.4.25WordBenchMiyazaki,Vol.9
・モバイル端末との親和性が高く、ユーザー
 がストレスなく操作できる。
・UIで魅せる性質のサイトではない。
・タイトなスケジュールの中で、様々なトレー
ドオフを行った結果でもある…。
「マテリアルデザイン」
2015.4.25WordBenchMiyazaki,Vol.9
マテリアルデザイン
CSSフレームワーク
×
2015.4.25WordBenchMiyazaki,Vol.9
Materialize
http://materializecss.com/
2015.4.25WordBenchMiyazaki,Vol.9
2015.4.25WordBenchMiyazaki,Vol.9
or
2015.4.25WordBenchMiyazaki,Vol.9
2015.4.25WordBenchMiyazaki,Vol.9
2015.4.25WordBenchMiyazaki,Vol.9
あらかじめ用意されているCSSやJSを適用す
ることで、短時間でレスポンシブ対応サイトが
作れる。
「CSSフレームワーク」
2015.4.25WordBenchMiyazaki,Vol.9
<div class="container">
コンテンツ全体をラッピングする。
※このclassがないとウインドウに対して
width:100%;になる。
「グリッドレイアウト」
2015.4.25WordBenchMiyazaki,Vol.9
<div class="row">
グリッドを縦に分割する。
class="row"をつけたブロック内にグリッド
を使ったレイアウトを作っていく。
「グリッドレイアウト」
2015.4.25WordBenchMiyazaki,Vol.9
<div class="col s12 m6 l4">
col→カラムを表します
s12→スマートフォンでの使用カラム数
m6→タブレットでの使用カラム数
l6→PCでの使用カラム数
※カラムは全部で12本です。
「グリッドレイアウト」
2015.4.25WordBenchMiyazaki,Vol.9
<div class="btn">
btn→ボタンのデザインが適用されます
<div class="waves-effect waves-light btn">
waves-effect
→ボタンを押した時に動きをつける
waves-light
→ エフェクトのカラーを定義
「ボタン」
2015.4.25WordBenchMiyazaki,Vol.9
<div class="teal lighten-2">
teal→ 色相を表しています
lighten-2→ 明度を表しています
「カラー」
2015.4.25WordBenchMiyazaki,Vol.9
コーディングが終わったらWPテーマ化
2015.4.25WordBenchMiyazaki,Vol.9

WordPressといろんなAPIを組み合わせてWebアプリを作ろう