受講講義
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜
http://schoo.jp/class/313/
講義内容
ウェブページを作る時、普通なら Photoshop や Firework でデザインカンプを作って、PsやAiで素材を作って、HTMLやCSSでコーディングして……という工程が今までは一般的でした。
ですが、今やユーザーがウェブページを見るために使っている端末はスマホやタブレット、ＰＣなど画面サイズがバラバラで、いちいちそれらに対応するために従来のやり方でやっていたらとてもじゃないが手間暇がかかりすぎてやってられないよね、という話から、最近は「インブラウザ・デザイン」という考え方が出てきつつあると。
デザインカンプをする段階からいきなり HTML5+CSS3 でコードを書き始めてしまい、まずは早い段階でプロトタイプを作って、そこから各端末の画面サイズに合わせて微調整していくというやり方だそうで。
なるほど確かにそっちの方が合理的ではありますね。そのツール、というかフレームワークとして BootStrap がこの動画では紹介されています。
メニューやボタンなどは従来だと Ps や Ai を使って「画像」として作り込んでましたが、今や CSS で描けてしまう時代。フラットデザインにシフトしていくウェブ全体の流れなら今後は Ps や Ai の出番がなくなってしまう……かも？
参考サイト
- BootStrap http://getbootstrap.com/
- Bootstrap日本語ドキュメント http://kenji-namba.github.io/bootstrap-doc-ja/getting-started.html
- LESS http://lesscss.org/
- CodeKit http://incident57.com/codekit/
メモ
- レスポンシブWEBデザイン概論 1/2 – NAVER まとめ.
- 今日からはじめる！Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜 | Find Job ! Startup.
参考書籍
[amazonjs asin=”B00AXUSZB8″ locale=”JP” tmpl=”Small” title=”神速Photoshop グラフィックデザイン編”]
[amazonjs asin=”4774155101″ locale=”JP” tmpl=”Small” title=”スマートフォンデザインでラクするために”]
