Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Framework
HWC  FREELANCE  COACH  vol.1
フレームワーク ビギナー勉強会
2015/07/24  Fri  @uzu
2
サトウハルミ

web design FLAT 

マークアップエンジニア
Twitter @uzu 

gitHub @harumi-sato
3
1. フレームワークの説明
 フレームワークとは
 いろんなジャンルに存在
2. レスポンシブFW
 代表的な4つ
3. bootstrapの特徴
 対応ブラウザ
 メリット・デメリット
4. 実案件の紹介
 案件4つをご紹介
5.デモ
 ...
Framework
Sec?on  1
フレームワークの説明
5
フレームワークとは
開発にフレームワークを利用すると、独自に必要とさ
れる部分だけを開発すれば済むため開発効率の向上が
見込める。
参考URL
フレームワークとは|FW|framework - 意味/解説/説明/定義 : IT用語辞典
ht...
効率UP  
↓  
コスト削減
keyword
お手本をコピペ  
↓  
カスタマイズ
作りおき料理
=素材カスタマイズして料理を作成
作りおき料理
=素材カスタマイズして料理を作成
10
いろんなジャンルに存在する
• レスポンシブサイト
• レスポンシブメルマガ
• Wordpress
• compass
• リセットCSS
• スマホサイト
今回はレスポンシブサイトの作成
Responsive
Sec?on  2
代表的なレスポンシブフレームワーク
代表的な4つをご紹介
Pattern
14
その1
bootstrap
Twitterのフレームワーク。
圧倒的に使っている人が多くスタンダー
ドなフレームワーク。
LP、webサービスに向いている。
参考URL
Bootstrap · The world's most popul...
15
その2
Foundation
アメリカのUIデザイン会社「ZURB」が
開発。複雑なグリッドシステムを作るこ
とができる。webサイト制作に向いてい
る。
参考URL
Foundation ¦ The Most Advanced Resp...
16
その3
Web Starter Kit
Google社のフレームワーク
一部ドキュメントは日本語化
マテリアルデザインを意識した作り。
参考URL
Web Starter Kit ̶ Web Fundamentals
https://de...
17
参考URL
Pure
http://purecss.io/
その4
Pure.css
yahoo社のフレームワーク
シンプル軽量
実案件はbootstrap一択
Bootstrap
Point
Sec?on  3
bootstrapの特徴
20
モバイルファーストで作成する
bootstrapサイト説明に書いてあるとおり
mobile first projects on the web.
参考URL
フレームワークとは|FW|framework - 意味/解説/説明/定義 : IT...
21
対応ブラウザ
bootstrap自体はIE9∼対応
メディアクエリがIE8に対応していない
responsive.js、
プログレッシブ・エンハンスメント対応。
22
IE対応バージョンの目安
IE8 =
IE9 =
IE10 =
BtoB対象のサイト。リッチなjs表現は使わ
ない、レスポンシブは対応しない
静的HTML閲覧に問題のないパフォーマン
スを備える
動的、リッチな演出のサイトはIE10∼対応...
フレームワークのメリット
GOOD!
24
Good 1
デバイス不具合が少ない
分割されたグリッド数でレイアウト。
各デバイス表示の検証が少なく済む
25
Good 2
はじめから機能が入っている
よくあるコード・デザイン・機能が用意されている。
26
Good 3
モジュール単位で導入できる。
運用時にパーツ追加が容易。モジュールのサンプル、
コードが用意されている。
27
Good 4
制作コスト削減
ベースを使用することでコーディングが早くなる。
慣れればゼロから書くより早い。
最低限のデザインが用意されている。
導入の理由  
↓  
コスト削減
フレームワークのデメリット
BAD…
30
Bad 1
デザインの制限
margin、横幅、細かいレイアウト指定ができない。
デザイナの理解が必要。デザインでもめたり、時間が
かかったりしやすい。
31
Bad 2
コードが複雑になりがち
OOCSSの考え。HTMLコードが長くなる。
フルスクラッチでjavascriptを多用するサイトなどで
bootstrapの仕様がじゃまになる場合がある。
32
Bad 3
学習コストがかかる
リソースが英語。参考書籍が少ない。
bootstrapの概念の理解。
導入の壁  
↓  
学習コスト
Project
Sec?on  4
実案件の紹介
はじめてのbootstrap  
サトウさんbootstrapできますか?  
↓  
「やるしか無い」
36
案件1
某クラウドソーシング webサービス
【概要】
システムエンジニアが運用しやすいよう
bootstrapを使ってほしいと依頼。
【ポイント】
日本語サイトをググって概念を理解した。
管理画面が好評で、サイト、ブログも
Bootst...
bootstrapで  
サービスを作りたい  
↓  
「2度目もできるはず」
38
案件2
決済系 webサービス
【概要】
決済・商品登録データベース、コントロール
画面を20画面作る。運用時に追加、マルチデ
バイス対応のためbootstrap指定での依頼
【ポイント】
TB、PC対応→後からSPも少ない作業で対応
で...
サイト立ち上げ数日前  
…時間がない  
↓  
「コピペでサイト立ち上げる」
40
案件3
コーディングユニット「co」
【概要】
個人プロジェクトのため工数が取れず、制作
時間短縮のために導入。
【ポイント】
フレームワークを使ってなかったら立ち上がっ
てなかった。1年の活動でチームが軌道に乗っ
たので、年内に脱boo...
効率よくコーディング  
↓  
「部分的に使ってみたい」
42
案件4
自サイト「FLAT」
【概要】
SNS→ブログ→自サイトの動線を強化するた
め、レスポンシブがリニューアルの大きな目
的。技術の実現=bootstrapで普通のサイト
を作ってみたかった。
【ポイント】
スマホは微調整のみで完了
...
デザインの予算がない  
↓  
「bootstrapままでOK」
44
案件5
業務用受注サイト
【概要】
オーダー受注サイトをシステム開発会社と
共同開発。
【ポイント】

コスト削減のためユーザー画面をワイヤー
からbootstrapで作成し、bootstrapデフォ
ルトデザインをカスタマイズし、デザイ...
案件が増えている
Demo
Sec?on  5
bootstrapで1ページ作成
LPを作ってみる
48
bootstrapから
(1)HTMLを作成、サンプルHTMLコード
を貼る。
(2)CDNに差し替える
(4)パーツを追加する
(5)完成
49
Dreamweaverで作ってみます
(1)テンプレートを選択
(2)モジュールの差し込み
(3)完成
50
Dreamweaverスニペットで使える
Reference
Document
参考資料
52
参考URL ドットインストール
Bootstrap 3.0入門 (全18回) - プログラミ
ングならドットインストール
http://dotinstall.com/lessons/
basic_twitter_bootstrap_v4
53
参考URL bootstrapギャラリー
デザイナさんに理解いただく方法として
ギャラリーサイトはおすすめです。

英語ドキュメントを最初に見るより、イ
メージから入ったほうが伝わる。

Bootstrap Expo
http://exp...
54
書籍 これからのwebサイト設計の新しい教科書
フレームワークを使った
サイト制作フロー解説の書籍。
前半レスポンシブについて、後半は
bootstrapを使ったサンプルサイトの制作。
おすすめ。
参考URL
これからのWebサイト設計の...
55
書籍 これからのwebサイト設計の新しい教科書
フレームワークについて少し書いてある。
最近のweb制作トレンドについて網羅して
あるのでおすすめ。
参考URL
http://www.amazon.co.jp/dp/4844364707/...
情報が早くて正確  
↓  
「英語ドキュメント」
Finish
Last
まとめ
58
まとめ
• bootstrapを覚えればだいじょうぶ。
• コストダウンのため依頼は増えている。
• 学習コストはかかる。コードを書いて慣れる。
• 英語ドキュメントは情報が早く正確。
Thank you!2015/07/24  Fri  @uzu
Nächste SlideShare
Wird geladen in …5
×

フレームワークビギナー勉強会

1.137 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

フレームワークビギナー勉強会

  1. 1. Framework HWC  FREELANCE  COACH  vol.1 フレームワーク ビギナー勉強会 2015/07/24  Fri  @uzu
  2. 2. 2 サトウハルミ
 web design FLAT 
 マークアップエンジニア Twitter @uzu 
 gitHub @harumi-sato
  3. 3. 3 1. フレームワークの説明  フレームワークとは  いろんなジャンルに存在 2. レスポンシブFW  代表的な4つ 3. bootstrapの特徴  対応ブラウザ  メリット・デメリット 4. 実案件の紹介  案件4つをご紹介 5.デモ  LPをつくってみる 6.まとめ アジェンダ
  4. 4. Framework Sec?on  1 フレームワークの説明
  5. 5. 5 フレームワークとは 開発にフレームワークを利用すると、独自に必要とさ れる部分だけを開発すれば済むため開発効率の向上が 見込める。 参考URL フレームワークとは|FW|framework - 意味/解説/説明/定義 : IT用語辞典 http://e-words.jp/w/フレームワーク.html
  6. 6. 効率UP   ↓   コスト削減 keyword
  7. 7. お手本をコピペ   ↓   カスタマイズ
  8. 8. 作りおき料理 =素材カスタマイズして料理を作成
  9. 9. 作りおき料理 =素材カスタマイズして料理を作成
  10. 10. 10 いろんなジャンルに存在する • レスポンシブサイト • レスポンシブメルマガ • Wordpress • compass • リセットCSS • スマホサイト
  11. 11. 今回はレスポンシブサイトの作成
  12. 12. Responsive Sec?on  2 代表的なレスポンシブフレームワーク
  13. 13. 代表的な4つをご紹介 Pattern
  14. 14. 14 その1 bootstrap Twitterのフレームワーク。 圧倒的に使っている人が多くスタンダー ドなフレームワーク。 LP、webサービスに向いている。 参考URL Bootstrap · The world's most popular mobile-first and responsive front-end framework. http://getbootstrap.com/
  15. 15. 15 その2 Foundation アメリカのUIデザイン会社「ZURB」が 開発。複雑なグリッドシステムを作るこ とができる。webサイト制作に向いてい る。 参考URL Foundation ¦ The Most Advanced Responsive Front-end Framework from ZURB http://foundation.zurb.com/
  16. 16. 16 その3 Web Starter Kit Google社のフレームワーク 一部ドキュメントは日本語化 マテリアルデザインを意識した作り。 参考URL Web Starter Kit ̶ Web Fundamentals https://developers.google.com/web/tools/starter-kit/
  17. 17. 17 参考URL Pure http://purecss.io/ その4 Pure.css yahoo社のフレームワーク シンプル軽量
  18. 18. 実案件はbootstrap一択 Bootstrap
  19. 19. Point Sec?on  3 bootstrapの特徴
  20. 20. 20 モバイルファーストで作成する bootstrapサイト説明に書いてあるとおり mobile first projects on the web. 参考URL フレームワークとは|FW|framework - 意味/解説/説明/定義 : IT用語辞典 http://e-words.jp/w/フレームワーク.html
  21. 21. 21 対応ブラウザ bootstrap自体はIE9∼対応 メディアクエリがIE8に対応していない responsive.js、 プログレッシブ・エンハンスメント対応。
  22. 22. 22 IE対応バージョンの目安 IE8 = IE9 = IE10 = BtoB対象のサイト。リッチなjs表現は使わ ない、レスポンシブは対応しない 静的HTML閲覧に問題のないパフォーマン スを備える 動的、リッチな演出のサイトはIE10∼対応 とする。CSSプロパティが豊富、ブラウザ パフォーマンスが高速
  23. 23. フレームワークのメリット GOOD!
  24. 24. 24 Good 1 デバイス不具合が少ない 分割されたグリッド数でレイアウト。 各デバイス表示の検証が少なく済む
  25. 25. 25 Good 2 はじめから機能が入っている よくあるコード・デザイン・機能が用意されている。
  26. 26. 26 Good 3 モジュール単位で導入できる。 運用時にパーツ追加が容易。モジュールのサンプル、 コードが用意されている。
  27. 27. 27 Good 4 制作コスト削減 ベースを使用することでコーディングが早くなる。 慣れればゼロから書くより早い。 最低限のデザインが用意されている。
  28. 28. 導入の理由   ↓   コスト削減
  29. 29. フレームワークのデメリット BAD…
  30. 30. 30 Bad 1 デザインの制限 margin、横幅、細かいレイアウト指定ができない。 デザイナの理解が必要。デザインでもめたり、時間が かかったりしやすい。
  31. 31. 31 Bad 2 コードが複雑になりがち OOCSSの考え。HTMLコードが長くなる。 フルスクラッチでjavascriptを多用するサイトなどで bootstrapの仕様がじゃまになる場合がある。
  32. 32. 32 Bad 3 学習コストがかかる リソースが英語。参考書籍が少ない。 bootstrapの概念の理解。
  33. 33. 導入の壁   ↓   学習コスト
  34. 34. Project Sec?on  4 実案件の紹介
  35. 35. はじめてのbootstrap   サトウさんbootstrapできますか?   ↓   「やるしか無い」
  36. 36. 36 案件1 某クラウドソーシング webサービス 【概要】 システムエンジニアが運用しやすいよう bootstrapを使ってほしいと依頼。 【ポイント】 日本語サイトをググって概念を理解した。 管理画面が好評で、サイト、ブログも Bootstrapで作成 非公開 クライアントワーク
  37. 37. bootstrapで   サービスを作りたい   ↓   「2度目もできるはず」
  38. 38. 38 案件2 決済系 webサービス 【概要】 決済・商品登録データベース、コントロール 画面を20画面作る。運用時に追加、マルチデ バイス対応のためbootstrap指定での依頼 【ポイント】 TB、PC対応→後からSPも少ない作業で対応 できた。複雑なレイアウトで苦戦。 非公開 クライアントワーク
  39. 39. サイト立ち上げ数日前   …時間がない   ↓   「コピペでサイト立ち上げる」
  40. 40. 40 案件3 コーディングユニット「co」 【概要】 個人プロジェクトのため工数が取れず、制作 時間短縮のために導入。 【ポイント】 フレームワークを使ってなかったら立ち上がっ てなかった。1年の活動でチームが軌道に乗っ たので、年内に脱bootstrap予定。 参考URL co(コ)|東京で活動するフリーランスのコーディングユニット http://co-d.jp/
  41. 41. 効率よくコーディング   ↓   「部分的に使ってみたい」
  42. 42. 42 案件4 自サイト「FLAT」 【概要】 SNS→ブログ→自サイトの動線を強化するた め、レスポンシブがリニューアルの大きな目 的。技術の実現=bootstrapで普通のサイト を作ってみたかった。 【ポイント】 スマホは微調整のみで完了 参考URL web design FLAT ‒ 渋谷のコーディング専門プロダクション http://wd-flat.com/
  43. 43. デザインの予算がない   ↓   「bootstrapままでOK」
  44. 44. 44 案件5 業務用受注サイト 【概要】 オーダー受注サイトをシステム開発会社と 共同開発。 【ポイント】
 コスト削減のためユーザー画面をワイヤー からbootstrapで作成し、bootstrapデフォ ルトデザインをカスタマイズし、デザイナ なしで作成。 非公開 クライアントワーク
  45. 45. 案件が増えている
  46. 46. Demo Sec?on  5 bootstrapで1ページ作成
  47. 47. LPを作ってみる
  48. 48. 48 bootstrapから (1)HTMLを作成、サンプルHTMLコード を貼る。 (2)CDNに差し替える (4)パーツを追加する (5)完成
  49. 49. 49 Dreamweaverで作ってみます (1)テンプレートを選択 (2)モジュールの差し込み (3)完成
  50. 50. 50 Dreamweaverスニペットで使える
  51. 51. Reference Document 参考資料
  52. 52. 52 参考URL ドットインストール Bootstrap 3.0入門 (全18回) - プログラミ ングならドットインストール http://dotinstall.com/lessons/ basic_twitter_bootstrap_v4
  53. 53. 53 参考URL bootstrapギャラリー デザイナさんに理解いただく方法として ギャラリーサイトはおすすめです。 英語ドキュメントを最初に見るより、イ メージから入ったほうが伝わる。 Bootstrap Expo http://expo.getbootstrap.com/
  54. 54. 54 書籍 これからのwebサイト設計の新しい教科書 フレームワークを使った サイト制作フロー解説の書籍。 前半レスポンシブについて、後半は bootstrapを使ったサンプルサイトの制作。 おすすめ。 参考URL これからのWebサイト設計の新しい教科書 http://www.amazon.co.jp/dp/4844364898/
  55. 55. 55 書籍 これからのwebサイト設計の新しい教科書 フレームワークについて少し書いてある。 最近のweb制作トレンドについて網羅して あるのでおすすめ。 参考URL http://www.amazon.co.jp/dp/4844364707/ プロとして恥ずかしくない 新・WEBデザインの大原則
  56. 56. 情報が早くて正確   ↓   「英語ドキュメント」
  57. 57. Finish Last まとめ
  58. 58. 58 まとめ • bootstrapを覚えればだいじょうぶ。 • コストダウンのため依頼は増えている。 • 学習コストはかかる。コードを書いて慣れる。 • 英語ドキュメントは情報が早く正確。
  59. 59. Thank you!2015/07/24  Fri  @uzu

×