↓
「コピペでサイト立ち上げる」
40
案件3
コーディングユニット
「co」
【概要】
個人プロジェクトのため工数が取れず、制作 時間短縮のために導入。
【ポイント】
フレームワークを使ってなかったら立ち上がっ てなかった。1年の活動でチームが軌道に乗っ たので、年内に脱bootstrap予定。
参考URL
co（コ）｜東京で活動するフリーランスのコーディングユニット http://co-d.jp/
効率よくコーディング
↓
「部分的に使ってみたい」
42
案件4
自サイト「FLAT」
【概要】
SNS→ブログ→自サイトの動線を強化するた め、レスポンシブがリニューアルの大きな目 的。技術の実現＝bootstrapで普通のサイト を作ってみたかった。
【ポイント】
スマホは微調整のみで完了
参考URL
web design FLAT ‒ 渋谷のコーディング専門プロダクション http://wd-flat.com/
デザインの予算がない
↓
「
bootstrapままで
OK」
44
案件5
業務用受注サイト
【概要】
オーダー受注サイトをシステム開発会社と 共同開発。
【ポイント】
コスト削減のためユーザー画面をワイヤー からbootstrapで作成し、bootstrapデフォ ルトデザインをカスタマイズし、デザイナ なしで作成。
非公開
クライアントワーク
案件が増えている
DemoSec?on 5 bootstrapで1ページ作成
LP
を作ってみる
48
bootstrapから
（1）HTMLを作成、サンプルHTMLコード を貼る。
（2）CDNに差し替える
（4）パーツを追加する
（5）完成
49
Dreamweaverで作ってみます
（1）テンプレートを選択
（2）モジュールの差し込み
（3）完成
50
Dreamweaverスニペットで使える
ReferenceDocument 参考資料
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デザインの大原則
情報が早くて正確
↓
「英語ドキュメント」
FinishLast まとめ
58
まとめ
• bootstrapを覚えればだいじょうぶ。
• コストダウンのため依頼は増えている。
• 学習コストはかかる。コードを書いて慣れる。
• 英語ドキュメントは情報が早く正確。