CREATOR BLOG

Web Starter Kitを触った感想とかとか

2014/07/09
てっちゃん
  • このエントリーをはてなブックマークに追加

blog01

こんにちは、デザイナーのてっちゃんです。
今回は最近Googleの方でリリースされたWeb Starter Kitが気になったので、触ってみました。

私は業務の中でBootstrapを使ってデザイン・コーディングを行っていますが、Bootstrapを使うために色々補助ツールを使っています。Sass、compass、grunt、画像圧縮、ブラウザのオートリロード とかですかね。
こんな感じで環境を整えていますが、もっと簡単に必要な環境を使うことが出来るパッケージになっているツールがWeb Starter Kitです。

Web Starter Kitって何ができるの?

様々なデバイスに対応することができるフレームワークです。
先ほど話しに挙げたBootstrapやFoundationといった有名なツールと似ていますが、決定的に違うのは環境ごと揃えてくれるところです。

  • マルチデバイス対応
  • スタイルガイド
  • ブラウザシンク
  • ライブリロード
  • JavaScript、CSS、HTMLの最適化
  • HTTP Serverの構築
  • sassコンパイル
  • ページスピードのレポート

これだけの環境が揃っているのに使わない手はないですよね。

必要環境

これらの機能を活用するためには、以下の環境が必要です。

  • Node
  • Ruby
  • Gulp
  • Sass

これらがなくてもコードを直接ダウンロードしてきて使うことも可能ですが、
せっかく便利なものがあるのでコマンドを叩いて環境を揃えましょう。

インストール

  1. githubよりファイルをダウンロード

  1. ディレクトリを移動

  1. Node、Ruby、Sassをインストール
  2. Sassのインストール

  1. gulpのインストール

  1. ローカルgulpのインストール(web-starter-kitに移動する)

これでインストールは終わりです。続いて…

Web Starter Kitの起動

以下のコマンドでWeb Starter Kitを起動してください。

これでローカルサーバーが立ち上がり以下のようになります。

PCでの表示
img03-1
スマホでの表示
img_02
起動してすぐに立ち上がるのは、ローカルホストの方です。BrowserSyncを使うには、すぐ下の
「http://192.168.128.128:3000/」を使ってください。
ただし、見たいデバイスとPCが同じネットワークにないと使えません。
img_04

これで、制作を進めることが出来ます。
今表示されているファイルは、

なので、こちらを変更していきます。
appの中には、2つのペースとなるファイルが存在しています。

index.html
スライドアウトメニューを含んだスタート時に確認できてるファイルです。レイアウトが最初から組まれているので、条件によってこちらのほうが作業スピードが早いでしょう。
basic.html
こちらは、表示して何もでてきません。デザインやコンテンツが無い代わりにベースとなるhead内の情報、cssやjsが入っています。こちらからガツガツオリジナルのデザインを構築していく時に便利です。

これら2つのどちらかとスタイルガイドを使って作業を進めていきます。

Web Starter Kitのスタイルガイド

スタイルガイドは、以下に格納されているので確認してみてください。

img05

全体的に簡素なスタイルが用意されています。
Bootstrapとは違い、多くのスタイルは用意されていませんので、こちらの自由なデザインを当てていくことを前提とした作りだと感じます。

Gridシステム

このへんもBootstrapと違って、自由度が保たれている感じがします。
画面を4分割で構成していて、web,tabletとスマホの画面サイズで分かれています。
全体のサイズはmax-width:864pxで指定されています。

g-mediumがtabletのレンジ
g-wideがwebのレンジ
となっていてスマホ表示は1カラムになる仕様です。
カラムの組み方もWeb Starter Kitではfloatを使っているので、任意の場所でclearを入れる必要があります。
細かいスタイルガイドは立ち上げて確認して下さい。

gulp

ちょくちょく出てきているgulpなのですが、他にも色々出来ます。

コマンド 詳細
gulp gulpの起動により、アウトプット先のフォルダに結果が反映されます。
gulp html HTMLを圧縮しています。使っているのはgulp-minify
gulp images 画像の圧縮です。使っているのはimagemin
gulp jshint avaScript構文チェッカーです。使っているのはgulp jshint.
gulp pagespeed Webサイトの表示速度やパフォーマンスを計測し、改善点を示してくれます。使っているのは PageSpeed Insights
gulp serve ローカルでサーバーが展開される。externalの方を使うとブラウザが同期できます。
gulp styles CSSの圧縮を行ないます。使っているのはgulp-minify-css tool

試してみるといいと思います。

まとめ

普段自分がbootstrapを使っているので比較しがちですが、使い勝手はbootstrapのほうがスタイルガイドやコンポーネントが豊富に取り揃えているので良いです。フレームワークというより、テンプレートに近い感覚です。自由度も高く、パッケージとして機能が組み込まれているので環境を瞬時に構築出来るのがウリになっています。

今回は、簡単に触っただけの紹介ですが、今後制作で使ってみた感想もかければ良いなと思っています。
これで興味を思った人は自分で触ってみることをおすすめします。
目新しいものを見聞きすることは多いと思いますが、実務含めなかなか自分の手を動かす機会は少ないとおもうので、この機会を是非活かして欲しいです。自戒を込めて...。

この記事を書いた人

てっちゃんUIデザイナー

和風系UIデザイナーのてっちゃんです。 本名は佐藤 哲裕、青森出身、好きな食べ物は蕎麦。 和服のことならいつでもお問い合わせ下さい。

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive