Ishihara wcan autumn_2013

50 %
50 %
Information about Ishihara wcan autumn_2013

Published on September 17, 2013

Author: takashiishihara94

Source: slideshare.net

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. 1. 制作効率を 考えるその前に

僕が働く Grow Group 合同会社 現在 社員数 2名 Before that considering the production efficiency. 1. 制作効率を 考えるその前に

小さな会社が 利益上げるためには Before that considering the production efficiency. 1. 制作効率を 考えるその前に

0. 制作効率を 考えるその前 の前に 小さな会社が 利益上げるためには Before that considering the production efficiency. 利益率 いかに工数をかけずにお金をいただくか。ぐへへ 1. 制作効率を 考えるその前に

1. 制作効率を 考えるその前に Before that considering the production efficiency. 小さな会社が 利益上げるためには まぁ、今日は製作者として.... Before that considering the production efficiency. 1. 制作効率を 考えるその前に

制作効率 小規模のweb制作会社にとっては 利益に直結する 重要な要素。 Before that considering the production efficiency. 1. 制作効率を 考えるその前に

僕には いつもかせられている課題。 Before that considering the production efficiency. 1. 制作効率を 考えるその前に

Before that considering the production efficiency. あなたは、webサイトの構築を 頼まれた時、 最善の方法を提案できていますか? 1. 制作効率を 考えるその前に

Before that considering the production efficiency. http://www.evolutionoftheweb.com/?hl=ja ウェブの進化1. 制作効率を 考えるその前に

ウェブの進化 Before that considering the production efficiency. http://www.evolutionoftheweb.com/?hl=ja Webテクノロジーの進歩スピードは ものすごい早い。 1. 制作効率を 考えるその前に

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

レスポンシブwebデザイン Before that considering the production efficiency. ・デバイスの多様化。 ・技術的にも難易度が高い。 ・意外と構築に時間がかかる。 1. 制作効率を 考えるその前に

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

1. 制作効率を 考えるその前 Before that considering the production efficiency. webアプリケーション Before that considering the production efficiency. ・デバイスの多様化により。 ・便利なHTML5 API が続々と登場。 1. 制作効率を 考えるその前に

Before that considering the production efficiency. こんなに技術が進化して 制作者にかかる負担は増加の一方。 2018年には、エンジニアの4割は ストレスで脱毛に悩む 1. 制作効率を 考えるその前に

Before that considering the production efficiency. そんなことはありません。 1. 制作効率を 考えるその前に

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

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

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

Before that considering the production efficiency. 技術は複雑に。 やることは増えているが その分恩恵は十分受けている。 1. 制作効率を 考えるその前に

1. 制作効率を 考えるその前に Before that considering the production efficiency. 知っている と 知っていない。 その差は大きい。 今日は ( 僕が知るかぎり ) をご紹介致します。最善の方法

2. 制作フローを 考えなおす ためのツール I rethink the production flow.

2. 制作フローを 考えなおす ためのツール I rethink the production flow. レスポンシブwebデザインで 5ページのwebサイトを作ります。

2. 制作フローを 考えなおす ためのツール I rethink the production flow. 通常のやり方 ウォーターフォール方式 設計 確認 デザイン 確認 実装 確認

通常のやり方 ウォーターフォール方式 設計 確認 デザイン 確認 実装 確認 2. 制作フローを 考えなおす ためのツール I rethink the production flow. .....時間がかかる。 スマートフォン タブレット デスクトップ 1 1 1 5ページ分のデザインを上げるとして、 計 15 ファイル

2. 制作フローを 考えなおす ためのツール I rethink the production flow. デザイニング イン ブラウザ Designing in browser

デザイニング インブラウザ2. 制作フローを 考えなおす ためのツール I rethink the production flow. でも、チームで やるときって どうすれば.......

2. 制作フローを 考えなおす ためのツール I rethink the production flow. 1. Style Tiles スタイルタイルズ http://styletil.es/

2. 制作フローを 考えなおす ためのツール I rethink the production flow. ダウンロードすると1枚のPSDが。 http://styletil.es/

2. 制作フローを 考えなおす ためのツール I rethink the production flow. http://samanthatoy.com/georgia-gov/ スタイルタイルズの例

2. 制作フローを 考えなおす ためのツール I rethink the production flow. スタイルタイルズの例 完成 http://samanthatoy.com/washington-examiner/

2. 制作フローを 考えなおす ためのツール I rethink the production flow. 1. Style Tiles スタイルタイルズ デザインのイメージを1枚のPSDに集約。 ロゴ・ボタン・見出しなど、 主要なオブジェクトのイメージをチームでシェアする。

2. 制作フローを 考えなおす ためのツール I rethink the production flow. サイトで紹介しているPSDファイルはあくまで 考え方。 それぞれの 組織・チーム で使いやすい テンプレートを考える。 1. Style Tiles スタイルタイルズ

2. 制作フローを 考えなおす ためのツール I rethink the production flow. https://tutsplus.com/ 1. Style Tiles スタイルタイルズ ・デザインのイメージを1枚のPSDに集約。 ロゴ・ボタン・見出しなど、主要なオブジェクト をチームでシェア。 2. 制作フローを 考えなおす ためのツール I rethink the production flow. ただ、これだけでは 大変。 そこで....

2. 制作フローを 考えなおす ためのツール I rethink the production flow. 2. Style Guide CSSの仕様をドキュメント化 http://css-tricks.com/css-style-guides/

2. 制作フローを 考えなおす ためのツール I rethink the production flow. Style Guideの例 CSSの仕様をドキュメント化 https://github.com/styleguide

2. 制作フローを 考えなおす ためのツール I rethink the production flow. いろんなサイトのスタイルガイドを見て勉強。 https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

2. 制作フローを 考えなおす ためのツール 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

2. 制作フローを 考えなおす ためのツール I rethink the production flow. これで楽にスタイルガイドを作成。

2. 制作フローを 考えなおす ためのツール I rethink the production flow. webデザインのレイアウトには パターン がある。 Atomic Design という考え。

2. 制作フローを 考えなおす ためのツール I rethink the production flow. pattern lab パターン作りから始める、 本格的なフレームワーク・Static Site Generator. http://pattern-lab.info/

2. 制作フローを 考えなおす ためのツール I rethink the production flow. Atomic Designという考え方。 http://bradfrostweb.com/blog/post/atomic-web-design/

2. 制作フローを 考えなおす ためのツール I rethink the production flow. Web デザインに必要な要素を細かく設定。 mustachaというHTMLテンプレートエンジンを使用 SCSSと併用し、それぞれの要素を事細かく指定 http://mustache.github.io/

2. 制作フローを 考えなおす ためのツール I rethink the production flow. まずは制作フローを見直すところから 制作効率を変えていこう。

3. 作業効率を 上げる ためのツール Tools for increasing the working efficiency

3. 作業効率 を上げる ためのツール 開発環境を整えるのってめんどくさい。 ・いつの間にかバージョンアップしている。 ・CMSを使ってはいけない案件.... ・ディレクトリ構造から整える必要が....... Tools for increasing the working efficiency

そんな悩みを解決してくれる ツールをご紹介。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency

3. 作業効率 を上げる ためのツール yeoman webアプリケーションを 高速にビルド可能にするツール Tools for increasing the working efficiency

3. 作業効率 を上げる ためのツール yeoman プロジェクトを作成 Tools for increasing the working efficiency $ yo webapp

3. 作業効率 を上げる ためのツール Grunt jsのタスク管理。コンパイル等の自動化。 Tools for increasing the working efficiency $ grunt server $ grunt test $ grunt

3. 作業効率 を上げる ためのツール Bower プロジェクト内のパッケージマネージャー Tools for increasing the working efficiency $ bower install jquery $ bower search jquery

3. 作業効率 を上げる ためのツール メリット ・Coffee scriptとか Sassとかのコンパイルをしてくれる。 ・自動的にブラウザをリロード。 (同じネットワーク環境内だと、iPhone やiPadでもリロードしてくれる。) ・テストの実行。 ・画像ファイルの最適化、軽量化を自動で。 ・bowerコマンドで様々なライブラリを管理。 Tools for increasing the working efficiency

3. 作業効率 を上げる ためのツール デメリット ・基本的にコマンドラインでの実行 ・一から環境を作るのは結構たいへん。 Tools for increasing the working efficiency

3. 作業効率 を上げる ためのツール Hammer テンプレートを選択し、構築のプラットフォームを 作成してくれる。 Tools for increasing the working efficiency

3. 作業効率 を上げる ためのツール 「Publish Build」機能で、 Web上にアップロード&公開が一瞬で可能 Tools for increasing the working efficiency

3. 作業効率 を上げる ためのツール 他にも..... Static Site Generator HTMLテンプレートエンジン + α でサイト制作を効率化してくれる。 Jekyll MIXTURE Middleman Tools for increasing the working efficiency

3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 開発環境を見なおして 制作効率をアップする。

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

3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency こんなツールがあれば楽なのに..... そう思うことって結構有りますよね?

3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 知っていると知らない。 そんなリソースの数が、 普段の何気ない作業の効率を決める。

3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency Emmet Live Style CSSを書くだけでサイトに反映。リロードもなし。 Chromeのエクステンション。

3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 保存すらせずにサイトに反映。 Emmet Live Style

3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency PAGE LAYERS HTMLからPSDに変換。 精度はかなり高い。

3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency PAGE LAYERS webサイトをPSDに変換。 精度はかなり高い。

3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency Koala SASSやLESS,Coffescriptのコンパイルなどを実行。 JSで作られたアプリ。

3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency Koala webの技術でのみ構築されているため、 windows,mac,linuxで稼働

まとめ Summary

webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 1.Webテクノロジーの発展スピードは とにかく早い。

webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 2.有益な情報はほとんど英語から。 黒い画面のものが多い。

webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 3.実際できるかどうかわからなくても とりあえず挑戦。 実際どんな動きをするかわからない ツールだとしても とりあえず挑戦。

webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 4.実際の作業フローに積極的に取り入れる。 どうせ、いつかはやらなければいけないの だから、やるなら今。

webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 5.実際のフローに取り入れたら、 それをさらに効率化。 自分、社内で使いやすいように テンプレート化する。

webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency とにかく挑戦!

webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency ご静聴ありがとうございました。

Add a comment

Related presentations

Related pages

Ishihara - Education - documents.mx

Ishihara wcan autumn_2013. New Ishihara Color Plates - Set 38. Subaru/Gemini MIR Observations of Warm Debris Disks Hideaki Fujiwara (Subaru Telescope) 1 ...
Read more

test ishihara - Documents

Ishihara wcan autumn_2013. JAR-FCL 3 SECTION 1 Appendix 14 to Subparts B and C Colour perception (See JAR–FCL 3.225 and 3.345) 1 The Ishihara test ...
Read more

Ishihara Earthquake - Documents

Soil Behaviour in Earthquake Geotechnics KENJI ISHIHARA Department of Civil Engineering Science University of Tokyo This publication was supported by a ...
Read more

Chingford Children's Centre Autumn2013 Activities - Documents

Chingford Children's Centre provides education, family support and professional services to parents, carers and children in the Borough of Waltham Forest ...
Read more