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

Framework

HWC  FREELANCE  COACH  vol.1

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

2

サトウハルミ


web design FLAT 
 マークアップエンジニア

Twitter ＠uzu 


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

アジェンダ

Framework

Sec?on  1

5

フレームワークとは

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

効率

UP  

↓  

コスト削減

お手本をコピペ

 

↓  

作りおき料理

作りおき料理

10

いろんなジャンルに存在する

• レスポンシブサイト • レスポンシブメルマガ • Wordpress • compass • リセットCSS • スマホサイト

Responsive

Sec?on  2

代表的な

4つをご紹介

14

その１

bootstrap

Twitterのフレームワーク。 圧倒的に使っている人が多くスタンダー ドなフレームワーク。 LP、webサービスに向いている。 参考URL

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

15

その2

Foundation

アメリカのUIデザイン会社「ZURB」が 開発。複雑なグリッドシステムを作るこ とができる。webサイト制作に向いてい る。 参考URL

Foundation ¦ The Most Advanced Responsive Front-end Framework from ZURB

16

その3

Web Starter Kit

Google社のフレームワーク 一部ドキュメントは日本語化

マテリアルデザインを意識した作り。

参考URL

Web Starter Kit ̶ Web Fundamentals

17 参考URL Pure http://purecss.io/

その4

Pure.css

yahoo社のフレームワーク シンプル軽量

実案件は

bootstrap一択

Point

Sec?on  3

20

モバイルファーストで作成する

bootstrapサイト説明に書いてあるとおり mobile first projects on the web.

参考URL

フレームワークとは｜FW｜framework - 意味/解説/説明/定義 ： IT用語辞典 http://e-words.jp/w/フレームワーク.html

21

対応ブラウザ

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

22

IE対応バージョンの目安

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

フレームワークのメリット

24

Good 1

デバイス不具合が少ない

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

25

Good 2

はじめから機能が入っている

26

Good 3

モジュール単位で導入できる。

運用時にパーツ追加が容易。モジュールのサンプル、 コードが用意されている。

27

Good 4

制作コスト削減

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

導入の理由

 

↓  

フレームワークのデメリット

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を使ってほしいと依頼。 【ポイント】 日本語サイトをググって概念を理解した。 管理画面が好評で、サイト、ブログも Bootstrapで作成 非公開 クライアントワーク

bootstrapで  

サービスを作りたい

 

↓  

38

案件2

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

サイト立ち上げ数日前

 

…時間がない  

↓  

40

案件3

コーディングユニット

「co」

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

効率よくコーディング

 

↓  

42

案件4

自サイト「FLAT」

【概要】 SNS→ブログ→自サイトの動線を強化するた め、レスポンシブがリニューアルの大きな目 的。技術の実現＝bootstrapで普通のサイト を作ってみたかった。 【ポイント】 スマホは微調整のみで完了 参考URL

web design FLAT ‒ 渋谷のコーディング専門プロダクション http://wd-flat.com/

デザインの予算がない

 

↓  

44

案件5

業務用受注サイト

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

Demo

Sec?on  5

48

bootstrapから

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

49

Dreamweaverで作ってみます

（1）テンプレートを選択 （2）モジュールの差し込み （3）完成

50

Reference

Document

52

参考URL ドットインストール

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

53

参考URL bootstrapギャラリー

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

54

書籍 これからのｗｅｂサイト設計の新しい教科書

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

55

書籍 これからのｗｅｂサイト設計の新しい教科書

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

情報が早くて正確

 

↓  

Finish

Last

58

まとめ

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

Thank you!