フレームワークを使ったレスポンシブサイト制作について、これから導入したい方向けの勉強会を行いました。

1. Framework
HWC FREELANCE COACH vol.1
フレームワーク ビギナー勉強会
2015/07/24 Fri @uzu

2. 2
サトウハルミ
web design FLAT
マークアップエンジニア
Twitter ＠uzu
gitHub ＠harumi-sato

3. 3
1. フレームワークの説明
フレームワークとは
いろんなジャンルに存在
2. レスポンシブFW
代表的な4つ
3. bootstrapの特徴
対応ブラウザ
メリット・デメリット
4. 実案件の紹介
案件４つをご紹介
5.デモ
LPをつくってみる
６．まとめ
アジェンダ

4. Framework
Sec?on 1
フレームワークの説明

5. 5
フレームワークとは
開発にフレームワークを利用すると、独自に必要とさ
れる部分だけを開発すれば済むため開発効率の向上が
見込める。
参考URL
フレームワークとは｜FW｜framework - 意味/解説/説明/定義 ： IT用語辞典
http://e-words.jp/w/フレームワーク.html

6. 効率UP
↓
コスト削減
keyword

7. お手本をコピペ
↓
カスタマイズ

8. 作りおき料理
＝素材カスタマイズして料理を作成

9. 作りおき料理
＝素材カスタマイズして料理を作成

10. 10
いろんなジャンルに存在する
• レスポンシブサイト
• レスポンシブメルマガ
• Wordpress
• compass
• リセットCSS
• スマホサイト

11. 今回はレスポンシブサイトの作成

12. Responsive
Sec?on 2
代表的なレスポンシブフレームワーク

13. 代表的な4つをご紹介
Pattern

14. 14
その１
bootstrap
Twitterのフレームワーク。
圧倒的に使っている人が多くスタンダー
ドなフレームワーク。
LP、webサービスに向いている。
参考URL
Bootstrap · The world's most popular mobile-first and
responsive front-end framework.
http://getbootstrap.com/

15. 15
その2
Foundation
アメリカのUIデザイン会社「ZURB」が
開発。複雑なグリッドシステムを作るこ
とができる。webサイト制作に向いてい
る。
参考URL
Foundation ¦ The Most Advanced Responsive Front-end
Framework from ZURB
http://foundation.zurb.com/

16. 16
その3
Web Starter Kit
Google社のフレームワーク
一部ドキュメントは日本語化
マテリアルデザインを意識した作り。
参考URL
Web Starter Kit ̶ Web Fundamentals
https://developers.google.com/web/tools/starter-kit/

17. 17
参考URL
Pure
http://purecss.io/
その4
Pure.css
yahoo社のフレームワーク
シンプル軽量

18. 実案件はbootstrap一択
Bootstrap

19. Point
Sec?on 3
bootstrapの特徴

20. 20
モバイルファーストで作成する
bootstrapサイト説明に書いてあるとおり
mobile first projects on the web.
参考URL
フレームワークとは｜FW｜framework - 意味/解説/説明/定義 ： IT用語辞典
http://e-words.jp/w/フレームワーク.html

21. 21
対応ブラウザ
bootstrap自体はIE9∼対応
メディアクエリがIE8に対応していない
responsive.js、
プログレッシブ・エンハンスメント対応。

22. 22
IE対応バージョンの目安
IE8 =
IE9 =
IE10 =
BtoB対象のサイト。リッチなjs表現は使わ
ない、レスポンシブは対応しない
静的HTML閲覧に問題のないパフォーマン
スを備える
動的、リッチな演出のサイトはIE10∼対応
とする。CSSプロパティが豊富、ブラウザ
パフォーマンスが高速

23. フレームワークのメリット
GOOD!

24. 24
Good 1
デバイス不具合が少ない
分割されたグリッド数でレイアウト。
各デバイス表示の検証が少なく済む

25. 25
Good 2
はじめから機能が入っている
よくあるコード・デザイン・機能が用意されている。

26. 26
Good 3
モジュール単位で導入できる。
運用時にパーツ追加が容易。モジュールのサンプル、
コードが用意されている。

27. 27
Good 4
制作コスト削減
ベースを使用することでコーディングが早くなる。
慣れればゼロから書くより早い。
最低限のデザインが用意されている。

28. 導入の理由
↓
コスト削減

29. フレームワークのデメリット
BAD…

30. 30
Bad 1
デザインの制限
margin、横幅、細かいレイアウト指定ができない。
デザイナの理解が必要。デザインでもめたり、時間が
かかったりしやすい。

31. 31
Bad 2
コードが複雑になりがち
OOCSSの考え。HTMLコードが長くなる。
フルスクラッチでjavascriptを多用するサイトなどで
bootstrapの仕様がじゃまになる場合がある。

32. 32
Bad 3
学習コストがかかる
リソースが英語。参考書籍が少ない。
bootstrapの概念の理解。

33. 導入の壁
↓
学習コスト

34. Project
Sec?on 4
実案件の紹介

35. はじめてのbootstrap
サトウさんbootstrapできますか？
↓
「やるしか無い」

36. 36
案件1
某クラウドソーシング webサービス
【概要】
システムエンジニアが運用しやすいよう
bootstrapを使ってほしいと依頼。
【ポイント】
日本語サイトをググって概念を理解した。
管理画面が好評で、サイト、ブログも
Bootstrapで作成
非公開
クライアントワーク

37. bootstrapで
サービスを作りたい
↓
「2度目もできるはず」

38. 38
案件2
決済系 webサービス
【概要】
決済・商品登録データベース、コントロール
画面を20画面作る。運用時に追加、マルチデ
バイス対応のためbootstrap指定での依頼
【ポイント】
TB、PC対応→後からSPも少ない作業で対応
できた。複雑なレイアウトで苦戦。
非公開
クライアントワーク

39. サイト立ち上げ数日前
…時間がない
↓
「コピペでサイト立ち上げる」

40. 40
案件3
コーディングユニット「co」
【概要】
個人プロジェクトのため工数が取れず、制作
時間短縮のために導入。
【ポイント】
フレームワークを使ってなかったら立ち上がっ
てなかった。1年の活動でチームが軌道に乗っ
たので、年内に脱bootstrap予定。
参考URL
co（コ）｜東京で活動するフリーランスのコーディングユニット
http://co-d.jp/

41. 効率よくコーディング
↓
「部分的に使ってみたい」

42. 42
案件4
自サイト「FLAT」
【概要】
SNS→ブログ→自サイトの動線を強化するた
め、レスポンシブがリニューアルの大きな目
的。技術の実現＝bootstrapで普通のサイト
を作ってみたかった。
【ポイント】
スマホは微調整のみで完了
参考URL
web design FLAT ‒ 渋谷のコーディング専門プロダクション
http://wd-flat.com/

43. デザインの予算がない
↓
「bootstrapままでOK」

44. 44
案件5
業務用受注サイト
【概要】
オーダー受注サイトをシステム開発会社と
共同開発。
【ポイント】
コスト削減のためユーザー画面をワイヤー
からbootstrapで作成し、bootstrapデフォ
ルトデザインをカスタマイズし、デザイナ
なしで作成。
非公開
クライアントワーク

45. 案件が増えている

46. Demo
Sec?on 5
bootstrapで1ページ作成

47. LPを作ってみる

48. 48
bootstrapから
（1）HTMLを作成、サンプルHTMLコード
を貼る。
（2）CDNに差し替える
（4）パーツを追加する
（5）完成

49. 49
Dreamweaverで作ってみます
（1）テンプレートを選択
（2）モジュールの差し込み
（3）完成

50. 50
Dreamweaverスニペットで使える

51. Reference
Document
参考資料

52. 52
参考URL ドットインストール
Bootstrap 3.0入門 (全18回) - プログラミ
ングならドットインストール
http://dotinstall.com/lessons/
basic_twitter_bootstrap_v4

53. 53
参考URL bootstrapギャラリー
デザイナさんに理解いただく方法として
ギャラリーサイトはおすすめです。
英語ドキュメントを最初に見るより、イ
メージから入ったほうが伝わる。
Bootstrap Expo
http://expo.getbootstrap.com/

54. 54
書籍 これからのｗｅｂサイト設計の新しい教科書
フレームワークを使った
サイト制作フロー解説の書籍。
前半レスポンシブについて、後半は
bootstrapを使ったサンプルサイトの制作。
おすすめ。
参考URL
これからのWebサイト設計の新しい教科書
http://www.amazon.co.jp/dp/4844364898/

55. 55
書籍 これからのｗｅｂサイト設計の新しい教科書
フレームワークについて少し書いてある。
最近のweb制作トレンドについて網羅して
あるのでおすすめ。
参考URL
http://www.amazon.co.jp/dp/4844364707/
プロとして恥ずかしくない 新・WEBデザインの大原則

56. 情報が早くて正確
↓
「英語ドキュメント」

57. Finish
Last
まとめ

58. 58
まとめ
• bootstrapを覚えればだいじょうぶ。
• コストダウンのため依頼は増えている。
• 学習コストはかかる。コードを書いて慣れる。
• 英語ドキュメントは情報が早く正確。

59. Thank you!2015/07/24 Fri @uzu