Designer Meets Bootstrap

矢部靖人

2014年 5月17日Knock! Knock! 勉強会

あ、ここは発表者のコメントです。スライドの“行間”とでもお考えください。

自己紹介

はじめに自己紹介をさせてください

名 前 ： ゃべ ゃすひと年 齢 ： 三十路のなかば住 所 ： 長泉町（静岡県の東部）職 業 ： 兼業主夫 → 一児の父ちゃん 個人事業主（フリーランス） Web制作全般、制作の下請け 広告デザイン全般

主にWebサイト制作案件を、フルコミットでの直請けから、部分的な下請けまで承っています

Webデザイナー↓

Web/DTPデザイナー、フリーペーパーの編集↓

Webディレクター / プランニング / 営業↓

フリーランスのWeb制作者

Webだけでなく、紙もの（DTP）から提案営業まで、幅広く経験した後に独立、今に至ります

よろしくお願いします

0) 変わり始めているWeb

本題に入る前に、2014年という時代背景を整理したいと思います

スマホからのネット利用者は1年間で1100万人増加、PCからは350万人減少 -INTERNET Watch

http://internet.watch.impress.co.jp/docs/news/20140423_645717.html

時代はスマホ全盛、BtoCサイトでは過半数超えも珍しくない状況です（当社調べ）

PCからスマホへ

・ スクリーンサイズの変化・ デスクの前 → いつでも、どこで・ 一家に１台 → ひとり1台 より身近に、よりパーソナルに

ネットの主戦場がPCからスマホに移ると、どんな変化があるのでしょうか

iPhone 6 が発売されました、またデカくなりましたね…

Webサイトからアプリへ

・ ブラウザという万能な窓 → アプリという専用の窓・ タッチポイントの変化（App Store）・ 開かれた世界から、閉ざされた世界へ

PCではブラウザで利用するWebサービスも、スマホではアプリを使いますよね

Facebookでは、機能ごとにアプリを分割しています（メッセンジャーなど）

検索からシェアへ

・ 重要な情報ソースとしての“個人”・ 検索しない時代 → Google Now → Yahoo! Smart Search → LINE MALL

ネットへの入り口がブラウザからアプリに変わり、検索行動も変化が起きているかも？

そして…ウェアラブルへ？

見逃せない動きとして、スマホの次？も考えないといけません

メガネ型デバイスはSF的な未来を感じさせます

スマートウォッチでは、先行しているAndroid陣営ですが…Smartですか？

当面の本命は、やはりApple Watchかもしれません

ウェアラブルデバイスと親和性の高い音声コントロールは、何を変えていくでしょうか

ドラスティックな変化の時代

大きな時代のうねりの中で、私たちはどう立ちまわるのがいいのでしょう？

ドラスティックな変化の時代

今必要なモノ 未来への備え

「直近で必要なコト」・「数年先を想像すること」、どちらも必要。バランスが大事かと。

1) Why Bootstrap ?

さて、やっと本題のBootstrapです

これまで主流であったPCでのWebサイト利用は、まだまだ健在です

スマートフォンからアクセスは爆発的に増えています

もちろんタブレット端末も無視できません

ユーザーは複数のデバイスを、シチュエーションに応じて使い分けます

レスポンシブWebデザイン

マルチデバイス対応と言えば、レスポンシブWebデザインを採用することも多いですよね

レスポンシブWebデザイン

レスポンシブWebデザインは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。

ASCII.jp ( http://ascii.jp/elem/000/000/697/697463/ )

レスポンシブWebデザインの定義はこんな感じです

+

要は「ひとつのHTML×デバイスのスクリーン幅に応じたCSS」でデザインを制御するイメージ

レスポンシブWebデザインはそんなに難しくない

（Fluid Layout / Fluid Image / MediaQuery）

レスポンシブWebデザインの技術的要素は、単体ではそれほど難しくないのですが…

技術的には…難しくない。でも、実際には迷うことばかり…・ breakpointはどうする？・ モバイルファースト？・ レガシー環境（IE8とか）対策は？

実際、「breakpointを決める」だけでも、検討する要素は多く大変ですよね

Bootstrapを共通言語にする“世界の叡智”

そういう「大変だけど汎用性の高いこと」は、他人の成果をあてにして良いと思います

ほかの人の書いたコードって読みにくくないですか？

他人のコードも自分の過去のコードも、Bootstrapに則っていれば、そこは理解が速いです

CSS設計って難しくない？

CSSの書き方・設計思想も人それぞれです

BEM OOCSSSMACSS

こういうCSS設計思想も取り入れたら、コードはメンテナブルになるはずです

そんなこんなでBootstrap、結構つかえるヤツなんです

“いかにも”なサイトしかできない？

と思われるのは、「エンジニア御用達」と言われた時代の負の遺産、思い込みです

よく見るJumbotronをデフォルトのまま使うと、こんな感じです

Bootstrapのブログデーマだと、こんな感じ

Bootstrap公式サイトに掲載されている事例です

Bootstrap公式サイトに掲載されている事例です

日本語サイトでのBootstrap事例です

国内のBootstrap事例を集めたまとめページもあります

hamnalyでもBootstrapは積極的に使用しています

hamnalyでもBootstrapは積極的に使用しています

hamnalyでもBootstrapは積極的に使用しています

最終的には、俺々テンプレート化

何事も使いようです、自分のワークフローに上手く取り入れるのが大事かと

2）More easy, More Speedy

そんなBootstrapですから、もうちょっと踏み込んだ使い方もしています

もっと簡単に、もっと速く（それなりのものを速く作る）

コストのかけられない案件で、もしかすると上手くハマるかもしれません

スピードという価値

・ 速さという付加価値（特急料金）・ 空いた時間で、 ・ 休んでもいい、働いてもいい ・ 勉強してもいい ・ 新しいコトにチャレンジしてもいい

特に「速い」ということは、価値が高いことだと考えています

Photo by double-h from Flickr

新幹線は、速くて快適だから特急料金を払う価値があります

Amazonプライムのお急ぎ便も、年会費は少し高いけど止められないサービスです

市販テーマ / テンプレートの使用具体的には…

もっと速く作るために、「手間を買う」という発想です

海外のテンプレート販売サイトは、よくチェックします

海外の無料テンプレートに、インスピレーションを求めることもあります

制作でラクすることは悪くないクライアントの利益に貢献できるかだ

と、ワタシが言った

市販テンプレートの利用を敬遠する向きもあるかと思いますが…もう一度考えてみませんか？

（余談ですが、この話はたぶん都市伝説…）

あるレストランでピカソがウェイターから絵を描いてと頼まれました。彼は30秒ほどで描き、それを1万ドルだと言いました。

「30秒で書いた絵が1万ドル！？」ウェイターがびっくりして言うと、ピカソはこう言いました。

「30秒じゃない、40年と30秒だ」

この話の真偽はさておき、それまでの積み重ねがあってこそ、と言うことですね

市販テンプレートをちゃんと使うために

・ 基本スキルとしてのHTML / CSS・ 完成形を想像するセンス ・ 適切なテンプレートを選ぶチカラ ・ カスタマイズは必須・ スキル / センス / 経験がより問われる

市販テンプレートの利用には、スクラッチで０から構築するよりも、実力が試されるくらいです

事例サイトは非公開ですゴメンナサイ

先般のhamnalyでの事例のなかにも、市販テンプレートベースのものがあります

「ここの色をこうして…」「このパーツはこう使えるかも…」と、できあがりをシミュレートします

市販テーマ / テンプレートの注意点

・ そのままイケる、なんてことはまずない・ ソースをちゃんと見る ・ v2系とv3系 ・ なんちゃってBootstrap・ ライセンスは適切に

制作のベースとして使える、良質なテンプレートを見極める目が大事です

最後に…

もっと簡単に、もっと速く（それなりのものを速く作る）

クルマの両輪丁寧に、より高い専門性（自分にしかできないモノ）

仕事もスキルの活かし方も、「複数のモノを適材適所でバランスよく」が大事ではないか、と

Photo by Tejvan Pettinger from Flickr

自転車も車輪が２つあるから簡単に乗れるわけで、この大変な時代を颯爽と駆け抜けたいですね

実装に困ったらご連絡ください！

本日はありがとうございましたご連絡・ご質問など下記までお願いします

E-mail : info@hamnaly.comFacebook / Twitter : yabecchy