Ishihara wcan autumn_2013

Grow Group Ishihara takashi

制作効率を劇的にあげる最高のツール

石原隆志

About軽く自己紹介

Ishihara takashi

石原隆志

・熊本県天草市出身

・独学で勉強してきました。

Work軽く自己紹介

・2013年 7月

Grow Group合同会社

Agenda今日やること

1. 制作効率を考えるその前に

2. 制作フローを見直すためのツール

3. 開発効率を上げるためのツール

4. その他・地味に使えるツール

1. 制作効率を

考えるその前に

that considering

the production efficiency.

僕が働くGrow Group 合同会社

Before that considering the production efficiency.


僕が働くGrow Group 合同会社

現在社員数

2名Before that considering the production efficiency.


小さな会社が

利益上げるためには



0. 制作効率を考えるその前の前に

小さな会社が



利益率いかに工数をかけずにお金をいただくか。ぐへへ




小さな会社が


まぁ、今日は製作者として....



制作効率小規模のweb制作会社にとっては

利益に直結する重要な要素。Before that considering the production efficiency.


僕にはいつもかせられている課題。




あなたは、webサイトの構築を頼まれた時、

最善の方法を提案できていますか？



http://www.evolutionoftheweb.com/?hl=ja

ウェブの進化1. 制作効率を考えるその前に





ウェブの進化Before that considering the production efficiency.


Webテクノロジーの進歩スピードは

ものすごい早い。





レスポンシブwebデザイン1. 制作効率を考えるその前に

レスポンシブwebデザインBefore that considering the production efficiency.

・デバイスの多様化。

・技術的にも難易度が高い。

・意外と構築に時間がかかる。


Before that considering the production efficiency. webアプリケーション1. 制作効率を考えるその前に

1. 制作効率を考えるその前

Before that considering the production efficiency. webアプリケーションBefore that considering the production efficiency.

・デバイスの多様化により。

・便利なHTML5 API が続々と登場。



こんなに技術が進化して

制作者にかかる負担は増加の一方。

2018年には、エンジニアの4割は

ストレスで脱毛に悩む



そんなことはありません。


Before that considering the production efficiency. クラウド・コンピューティング1. 制作効率を考えるその前に

Before that considering the production efficiency. 様々なフレームワーク1. 制作効率を考えるその前に

Before that considering the production efficiency. 様々なツール・アプリケーション1. 制作効率を考えるその前に


技術は複雑に。やることは増えているが

その分恩恵は十分受けている。




知っていると知っていない。その差は大きい。

今日は ( 僕が知るかぎり )

をご紹介致します。最善の方法

2. 制作フローを

考えなおすためのツール

I rethink the production flow.

2. 制作フローを考えなおすためのツール


レスポンシブwebデザインで

5ページのwebサイトを作ります。


I rethink the production flow. 通常のやり方

ウォーターフォール方式

設計確認デザイン確認実装確認

通常のやり方

ウォーターフォール方式

設計確認デザイン確認実装確認



.....時間がかかる。

スマートフォンタブレットデスクトップ

1 1 1

5ページ分のデザインを上げるとして、

計 15 ファイル



デザイニングインブラウザDesigning in browser

デザイニングインブラウザ2. 制作フローを考えなおすためのツール


でも、チームでやるときってどうすれば.......


I rethink the production flow. 1. Style Tiles

スタイルタイルズ

http://styletil.es/

http://styletil.es

http://styletil.es



ダウンロードすると１枚のPSDが。

http://styletil.es/

http://styletil.es

http://styletil.es



http://samanthatoy.com/georgia-gov/

スタイルタイルズの例




I rethink the production flow. スタイルタイルズの例

完成

http://samanthatoy.com/washington-examiner/





1. Style Tilesスタイルタイルズ

デザインのイメージを1枚のPSDに集約。

ロゴ・ボタン・見出しなど、

主要なオブジェクトのイメージをチームでシェアする。



サイトで紹介しているPSDファイルはあくまで考え方。

それぞれの組織・チームで使いやすいテンプレートを考える。

1. Style Tilesスタイルタイルズ



https://tutsplus.com/

1. Style Tiles スタイルタイルズ

・デザインのイメージを1枚のPSDに集約。

ロゴ・ボタン・見出しなど、主要なオブジェクト

をチームでシェア。



ただ、これだけでは大変。そこで....


I rethink the production flow. 2. Style Guide

CSSの仕様をドキュメント化

http://css-tricks.com/css-style-guides/




I rethink the production flow. Style Guideの例

CSSの仕様をドキュメント化

https://github.com/styleguide









いろんなサイトのスタイルガイドを見て勉強。

https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides







I rethink the production flow. スタイルガイドを簡単に作る為の

ツールもたくさんある。

http://warpspire.com/kss/

Knyle Style Sheets

http://kaleistyleguide.com/

Kalei - Style guide

http://stylifyme.com/

Stylify me

Pears Style Docco















































































これで楽にスタイルガイドを作成。



webデザインのレイアウトには

パターンがある。Atomic Design という考え。


I rethink the production flow. pattern lab

パターン作りから始める、本格的なフレームワーク・Static Site Generator.

http://pattern-lab.info/





Atomic Designという考え方。

http://bradfrostweb.com/blog/post/atomic-web-design/







Web デザインに必要な要素を細かく設定。mustachaというHTMLテンプレートエンジンを使用

SCSSと併用し、それぞれの要素を事細かく指定

http://mustache.github.io/





まずは制作フローを見直すところから制作効率を変えていこう。

3. 作業効率を上げるためのツール

Tools for increasing the working efficiency


開発環境を整えるのってめんどくさい。

・いつの間にかバージョンアップしている。

・CMSを使ってはいけない案件....

・ディレクトリ構造から整える必要が.......


そんな悩みを解決してくれるツールをご紹介。




yeomanwebアプリケーションを

高速にビルド可能にするツール



yeomanプロジェクトを作成


$ yo webapp


Gruntjsのタスク管理。コンパイル等の自動化。


$ grunt server$ grunt test$ grunt


Bowerプロジェクト内のパッケージマネージャー


$ bower install jquery

$ bower search jquery


メリット

・Coffee scriptとか Sassとかのコンパイルをしてくれる。

・自動的にブラウザをリロード。

(同じネットワーク環境内だと、iPhone やiPadでもリロードしてくれる。)

・テストの実行。

・画像ファイルの最適化、軽量化を自動で。

・bowerコマンドで様々なライブラリを管理。



デメリット

・基本的にコマンドラインでの実行

・一から環境を作るのは結構たいへん。



Hammerテンプレートを選択し、構築のプラットフォームを

作成してくれる。



「Publish Build」機能で、Web上にアップロード&公開が一瞬で可能



他にも.....

Static Site GeneratorHTMLテンプレートエンジン + αでサイト制作を効率化してくれる。

Jekyll MIXTURE Middleman




開発環境を見なおして制作効率をアップする。

4. その他・地味に使えるツール

Other Tools



こんなツールがあれば楽なのに.....そう思うことって結構有りますよね？



知っていると知らない。そんなリソースの数が、

普段の何気ない作業の効率を決める。


Tools for increasing the working efficiency Emmet Live Style

CSSを書くだけでサイトに反映。リロードもなし。Chromeのエクステンション。


Tools for increasing the working efficiency 保存すらせずにサイトに反映。

Emmet Live Style



PAGE LAYERSHTMLからPSDに変換。

精度はかなり高い。


Tools for increasing the working efficiency PAGE LAYERS

webサイトをPSDに変換。精度はかなり高い。



KoalaSASSやLESS,Coffescriptのコンパイルなどを実行。

JSで作られたアプリ。



Koalawebの技術でのみ構築されているため、

windows,mac,linuxで稼働

まとめ

Summary

webテクノロジーの移り変わるスピードはものすごく速い。



1.Webテクノロジーの発展スピードはとにかく早い。




2.有益な情報はほとんど英語から。黒い画面のものが多い。




3.実際できるかどうかわからなくてもとりあえず挑戦。

実際どんな動きをするかわからないツールだとしてもとりあえず挑戦。




4.実際の作業フローに積極的に取り入れる。どうせ、いつかはやらなければいけないの

だから、やるなら今。




5.実際のフローに取り入れたら、それをさらに効率化。

自分、社内で使いやすいようにテンプレート化する。




とにかく挑戦！




ご静聴ありがとうございました。

Ishihara wcan autumn_2013

Documents

Transcript of Ishihara wcan autumn_2013