Designer Meets Bootstrap（22th Knock!）
1 like808 views
2014年 5月 17日（土）・B-nest 静岡市産学交流センター 第22回 Knock! Knock! 勉強会
Designer Meets Bootstrap（22th Knock!）
- 1. Designer Meets Bootstrap 矢部靖人 2014年 5月17日 Knock! Knock! 勉強会 あ、ここは発表者のコメントです。スライドの“行間”とでもお考えください。
- 3. 名 前：ゃべ ゃすひと 年 齢：三十路のなかば 住 所：長泉町（静岡県の東部） 職 業：兼業主夫 → 一児の父ちゃん 個人事業主（フリーランス） Web制作全般、制作の下請け 広告デザイン全般 主にWebサイト制作案件を、フルコミットでの直請けから、部分的な下請けまで承っています
- 4. Webデザイナー ↓ Web/DTPデザイナー、フリーペーパーの編集 ↓ Webディレクター / プランニング / 営業 ↓ フリーランスのWeb制作者 Webだけでなく、紙もの（DTP）から提案営業まで、幅広く経験した後に独立、今に至ります
- 5. よろしくお願いします
- 8. PCからスマホへ ・スクリーンサイズの変化 ・デスクの前 → いつでも、どこで ・一家に１台 → ひとり1台 より身近に、よりパーソナルに ネットの主戦場がPCからスマホに移ると、どんな変化があるのでしょうか
- 12. 検索からシェアへ ・重要な情報ソースとしての“個人” ・検索しない時代 → Google Now → Yahoo! Smart Search → LINE MALL ネットへの入り口がブラウザからアプリに変わり、検索行動も変化が起きているかも？
- 20. 1) Why Bootstrap ? さて、やっと本題のBootstrapです
- 26. レスポンシブWebデザイン レスポンシブWebデザインは、PC、タブレット、スマートフォ ンなど、あらゆるデバイスに最適化したWebサイトを、単一 のHTMLで実現する制作手法です。 ブラウザーのスクリーンサイズを基準にCSSでレイアウトを 調整することで、デバイスごとに専用サイトを用意することな く、マルチスクリーンに対応したWebサイトを制作できます。 ASCII.jp ( http://ascii.jp/elem/000/000/697/697463/ ) レスポンシブWebデザインの定義はこんな感じです
- 28. レスポンシブWebデザインは そんなに難しくない （Fluid Layout / Fluid Image / MediaQuery） レスポンシブWebデザインの技術的要素は、単体ではそれほど難しくないのですが…
- 46. 2）More easy, More Speedy そんなBootstrapですから、もうちょっと踏み込んだ使い方もしています
- 49. Photo by double-h from Flickr 新幹線は、速くて快適だから特急料金を払う価値があります
- 56. 市販テンプレートをちゃんと使うために ・基本スキルとしてのHTML / CSS ・完成形を想像するセンス ・適切なテンプレートを選ぶチカラ ・カスタマイズは必須 ・スキル / センス / 経験がより問われる 市販テンプレートの利用には、スクラッチで０から構築するよりも、実力が試されるくらいです
- 60. 最後に…
- 62. Photo by Tejvan Pettinger from Flickr 自転車も車輪が２つあるから簡単に乗れるわけで、この大変な時代を颯爽と駆け抜けたいですね
- 63. 実装に困ったらご連絡ください！
- 64. 本日はありがとうございました ご連絡・ご質問など下記までお願いします E-mail : info@hamnaly.com Facebook / Twitter : yabecchy