Your SlideShare is downloading. ×
0
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Ishihara wcan autumn_2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ishihara wcan autumn_2013

617

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
617
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Grow Group Ishihara takashi 制作効率を 劇的にあげる 最高のツール 石原隆志
  • 2. About 軽く自己紹介 Ishihara takashi 石原隆志 ・熊本県天草市出身 ・独学で勉強してきました。
  • 3. Work 軽く自己紹介 ・2013年 7月 Grow Group合同会社
  • 4. Agenda 今日やること 1. 制作効率を考えるその前に 2. 制作フローを見直すためのツール 3. 開発効率を上げる ためのツール 4. その他・地味に使える ツール
  • 5. 1. 制作効率を 考えるその前に that considering the production efficiency.
  • 6. 僕が働く Grow Group 合同会社 Before that considering the production efficiency. 1. 制作効率を 考えるその前に
  • 7. 僕が働く Grow Group 合同会社 現在 社員数 2名 Before that considering the production efficiency. 1. 制作効率を 考えるその前に
  • 8. 小さな会社が 利益上げるためには Before that considering the production efficiency. 1. 制作効率を 考えるその前に
  • 9. 0. 制作効率を 考えるその前 の前に 小さな会社が 利益上げるためには Before that considering the production efficiency. 利益率 いかに工数をかけずにお金をいただくか。ぐへへ 1. 制作効率を 考えるその前に
  • 10. 1. 制作効率を 考えるその前に Before that considering the production efficiency. 小さな会社が 利益上げるためには まぁ、今日は製作者として.... Before that considering the production efficiency. 1. 制作効率を 考えるその前に
  • 11. 制作効率 小規模のweb制作会社にとっては 利益に直結する 重要な要素。 Before that considering the production efficiency. 1. 制作効率を 考えるその前に
  • 12. 僕には いつもかせられている課題。 Before that considering the production efficiency. 1. 制作効率を 考えるその前に
  • 13. Before that considering the production efficiency. あなたは、webサイトの構築を 頼まれた時、 最善の方法を提案できていますか? 1. 制作効率を 考えるその前に
  • 14. Before that considering the production efficiency. http://www.evolutionoftheweb.com/?hl=ja ウェブの進化1. 制作効率を 考えるその前に
  • 15. ウェブの進化 Before that considering the production efficiency. http://www.evolutionoftheweb.com/?hl=ja Webテクノロジーの進歩スピードは ものすごい早い。 1. 制作効率を 考えるその前に
  • 16. Before that considering the production efficiency. レスポンシブwebデザイン1. 制作効率を 考えるその前に
  • 17. レスポンシブwebデザイン Before that considering the production efficiency. ・デバイスの多様化。 ・技術的にも難易度が高い。 ・意外と構築に時間がかかる。 1. 制作効率を 考えるその前に
  • 18. Before that considering the production efficiency. webアプリケーション 1. 制作効率を 考えるその前に
  • 19. 1. 制作効率を 考えるその前 Before that considering the production efficiency. webアプリケーション Before that considering the production efficiency. ・デバイスの多様化により。 ・便利なHTML5 API が続々と登場。 1. 制作効率を 考えるその前に
  • 20. Before that considering the production efficiency. こんなに技術が進化して 制作者にかかる負担は増加の一方。 2018年には、エンジニアの4割は ストレスで脱毛に悩む 1. 制作効率を 考えるその前に
  • 21. Before that considering the production efficiency. そんなことはありません。 1. 制作効率を 考えるその前に
  • 22. Before that considering the production efficiency. クラウド・コンピューティング 1. 制作効率を 考えるその前に
  • 23. Before that considering the production efficiency. 様々なフレームワーク 1. 制作効率を 考えるその前に
  • 24. Before that considering the production efficiency. 様々なツール・アプリケーション 1. 制作効率を 考えるその前に
  • 25. Before that considering the production efficiency. 技術は複雑に。 やることは増えているが その分恩恵は十分受けている。 1. 制作効率を 考えるその前に
  • 26. 1. 制作効率を 考えるその前に Before that considering the production efficiency. 知っている と 知っていない。 その差は大きい。 今日は ( 僕が知るかぎり ) をご紹介致します。最善の方法
  • 27. 2. 制作フローを 考えなおす ためのツール I rethink the production flow.
  • 28. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. レスポンシブwebデザインで 5ページのwebサイトを作ります。
  • 29. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. 通常のやり方 ウォーターフォール方式 設計 確認 デザイン 確認 実装 確認
  • 30. 通常のやり方 ウォーターフォール方式 設計 確認 デザイン 確認 実装 確認 2. 制作フローを 考えなおす ためのツール I rethink the production flow. .....時間がかかる。 スマートフォン タブレット デスクトップ 1 1 1 5ページ分のデザインを上げるとして、 計 15 ファイル
  • 31. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. デザイニング イン ブラウザ Designing in browser
  • 32. デザイニング インブラウザ2. 制作フローを 考えなおす ためのツール I rethink the production flow. でも、チームで やるときって どうすれば.......
  • 33. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. 1. Style Tiles スタイルタイルズ http://styletil.es/
  • 34. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. ダウンロードすると1枚のPSDが。 http://styletil.es/
  • 35. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. http://samanthatoy.com/georgia-gov/ スタイルタイルズの例
  • 36. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. スタイルタイルズの例 完成 http://samanthatoy.com/washington-examiner/
  • 37. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. 1. Style Tiles スタイルタイルズ デザインのイメージを1枚のPSDに集約。 ロゴ・ボタン・見出しなど、 主要なオブジェクトのイメージをチームでシェアする。
  • 38. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. サイトで紹介しているPSDファイルはあくまで 考え方。 それぞれの 組織・チーム で使いやすい テンプレートを考える。 1. Style Tiles スタイルタイルズ
  • 39. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. https://tutsplus.com/ 1. Style Tiles スタイルタイルズ ・デザインのイメージを1枚のPSDに集約。 ロゴ・ボタン・見出しなど、主要なオブジェクト をチームでシェア。 2. 制作フローを 考えなおす ためのツール I rethink the production flow. ただ、これだけでは 大変。 そこで....
  • 40. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. 2. Style Guide CSSの仕様をドキュメント化 http://css-tricks.com/css-style-guides/
  • 41. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. Style Guideの例 CSSの仕様をドキュメント化 https://github.com/styleguide
  • 42. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. いろんなサイトのスタイルガイドを見て勉強。 https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
  • 43. 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
  • 44. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. これで楽にスタイルガイドを作成。
  • 45. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. webデザインのレイアウトには パターン がある。 Atomic Design という考え。
  • 46. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. pattern lab パターン作りから始める、 本格的なフレームワーク・Static Site Generator. http://pattern-lab.info/
  • 47. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. Atomic Designという考え方。 http://bradfrostweb.com/blog/post/atomic-web-design/
  • 48. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. Web デザインに必要な要素を細かく設定。 mustachaというHTMLテンプレートエンジンを使用 SCSSと併用し、それぞれの要素を事細かく指定 http://mustache.github.io/
  • 49. 2. 制作フローを 考えなおす ためのツール I rethink the production flow. まずは制作フローを見直すところから 制作効率を変えていこう。
  • 50. 3. 作業効率を 上げる ためのツール Tools for increasing the working efficiency
  • 51. 3. 作業効率 を上げる ためのツール 開発環境を整えるのってめんどくさい。 ・いつの間にかバージョンアップしている。 ・CMSを使ってはいけない案件.... ・ディレクトリ構造から整える必要が....... Tools for increasing the working efficiency
  • 52. そんな悩みを解決してくれる ツールをご紹介。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency
  • 53. 3. 作業効率 を上げる ためのツール yeoman webアプリケーションを 高速にビルド可能にするツール Tools for increasing the working efficiency
  • 54. 3. 作業効率 を上げる ためのツール yeoman プロジェクトを作成 Tools for increasing the working efficiency $ yo webapp
  • 55. 3. 作業効率 を上げる ためのツール Grunt jsのタスク管理。コンパイル等の自動化。 Tools for increasing the working efficiency $ grunt server $ grunt test $ grunt
  • 56. 3. 作業効率 を上げる ためのツール Bower プロジェクト内のパッケージマネージャー Tools for increasing the working efficiency $ bower install jquery $ bower search jquery
  • 57. 3. 作業効率 を上げる ためのツール メリット ・Coffee scriptとか Sassとかのコンパイルをしてくれる。 ・自動的にブラウザをリロード。 (同じネットワーク環境内だと、iPhone やiPadでもリロードしてくれる。) ・テストの実行。 ・画像ファイルの最適化、軽量化を自動で。 ・bowerコマンドで様々なライブラリを管理。 Tools for increasing the working efficiency
  • 58. 3. 作業効率 を上げる ためのツール デメリット ・基本的にコマンドラインでの実行 ・一から環境を作るのは結構たいへん。 Tools for increasing the working efficiency
  • 59. 3. 作業効率 を上げる ためのツール Hammer テンプレートを選択し、構築のプラットフォームを 作成してくれる。 Tools for increasing the working efficiency
  • 60. 3. 作業効率 を上げる ためのツール 「Publish Build」機能で、 Web上にアップロード&公開が一瞬で可能 Tools for increasing the working efficiency
  • 61. 3. 作業効率 を上げる ためのツール 他にも..... Static Site Generator HTMLテンプレートエンジン + α でサイト制作を効率化してくれる。 Jekyll MIXTURE Middleman Tools for increasing the working efficiency
  • 62. 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 開発環境を見なおして 制作効率をアップする。
  • 63. 4. その他・地味に 使える ツール Other Tools
  • 64. 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency こんなツールがあれば楽なのに..... そう思うことって結構有りますよね?
  • 65. 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 知っていると知らない。 そんなリソースの数が、 普段の何気ない作業の効率を決める。
  • 66. 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency Emmet Live Style CSSを書くだけでサイトに反映。リロードもなし。 Chromeのエクステンション。
  • 67. 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 保存すらせずにサイトに反映。 Emmet Live Style
  • 68. 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency PAGE LAYERS HTMLからPSDに変換。 精度はかなり高い。
  • 69. 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency PAGE LAYERS webサイトをPSDに変換。 精度はかなり高い。
  • 70. 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency Koala SASSやLESS,Coffescriptのコンパイルなどを実行。 JSで作られたアプリ。
  • 71. 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency Koala webの技術でのみ構築されているため、 windows,mac,linuxで稼働
  • 72. まとめ Summary
  • 73. webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 1.Webテクノロジーの発展スピードは とにかく早い。
  • 74. webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 2.有益な情報はほとんど英語から。 黒い画面のものが多い。
  • 75. webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 3.実際できるかどうかわからなくても とりあえず挑戦。 実際どんな動きをするかわからない ツールだとしても とりあえず挑戦。
  • 76. webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 4.実際の作業フローに積極的に取り入れる。 どうせ、いつかはやらなければいけないの だから、やるなら今。
  • 77. webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency 5.実際のフローに取り入れたら、 それをさらに効率化。 自分、社内で使いやすいように テンプレート化する。
  • 78. webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency とにかく挑戦!
  • 79. webテクノロジーの移り変わるスピードは ものすごく速い。 3. 作業効率 を上げる ためのツール Tools for increasing the working efficiency ご静聴ありがとうございました。

×