Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
なくなったわけじゃないけど、
Fireworksを使わないワークフローを
考えなきゃいけないかも会議
今日のアジェンダ
stage1 CMSをプロトタイプとして使うワークフローのすすめ
stage2 Fireworksvs.Photoshopでバナーを作ってみた
stage3 Fireworksの現状と二人が思うこれからのツール
Fireworksが
まるっとわかる教科書を
執筆しました
この二人がお届けします
stage1
stage2
「むずかしいことでも、わかりやすく伝
える」をモットーに楽しく学べるセミ
ナーを開催。今後は、e ラーニングや
電子出版の形式で、Web 制作を学ぶた
めの教育コンテンツにも注力していく。
大阪では、ソフト産業プラザ...
stage1
CMSをプロトタイプとして使う
ワークフローのすすめ
現状、Fireworksを
ワークフローでこう使っています
現状、Fireworksを
ワークフローでこう使っています
のご紹介のご紹介
デ モデ モ
デモでやることデモでやることデモでやること
CMSをワイヤーフレーム代わりに土台として使い
必要な画像パーツを Fireworksで作る、をくり返す
CMSをワイヤーフレーム代わりに土台として使い
必要な画像パーツを Fireworksで作る、...
demodemo
サイトマップ
ワイヤー
フレーム カンプ コーディング CMS実装
まず、CMS のメリットまず、CMS のメリット
サイトマップ
ワイヤー
フレーム カンプ コーディング CMS実装
まず、CMS のメリットまず、CMS のメリット
サイトマップ CMS実装
画像作成
公開
HTML
CSS 調整
ヒアリングヒアリング
フィードバックフィードバック
まず、CMS のメリットまず、CMS のメリット
なんか
よさそうじゃないですか?
ハイ、結構ラクできてます
どんな感じになるの…?という不安も
早い段階で解消できる
どんな感じになるの…?という不安も
早い段階で解消できる
動くものを見せて具体的に
イメージしてもらえる
大抵最初の予定と違ってくるもの
作りながら変えていける
大抵最初の予定と違ってくるもの
作りながら変えていける
デザインやレイアウトなどは
相談しながら対応
ページ分量がわかりやすく
原稿の準備をしてもらいやすい
ページ分量がわかりやすく
原稿の準備をしてもらいやすい
CMSならプロトタイプを流用できるCMSならプロトタイプを流用できる
ピクセルパーフェクト?なにそれ (^q^)ピクセルパーフェクト...
デザイナーだからこそ柔軟に
一緒に作っていけるって、いいよね
デザイナーだからこそ柔軟に
一緒に作っていけるって、いいよね
デザインは後回しにする
という考え方
stage1
ありがとうございました
hazakumi
質問・感想ください
Upcoming SlideShare
Loading in …5
×

CSS Nite in OSAKA, Vol.38「CMSをプロトタイプとして使う、ワークフローのすすめ」

994 views

Published on

2013年11月12日(火)開催
CSS Nite in OSAKA, Vol.38「なくなったわけじゃないけど、Fireworksを使わないワークフローを考えなきゃいけないかも会議」
●Stage1 はざくみパート:【CMSをプロトタイプとして使う、ワークフローのすすめ】のスライドです。
●概要
昨今では、一枚画像のデザインカンプを提出してOKが出たらコーディング…という作業工程を、現在、ほとんどしなくなりました。デザインカンプは作らず、最初にCMSを入れてHTMLプロトタイプ(試作品)を作ります。

実際にHTMLで動いているサイトに、ロゴ・写真・バナーなど、必要なパーツを入れ込んで仕上げ、クライアントに確認をとりながら追加・修正をしつつ、詰めて完成に近づけていきます。

この手法をとることで、画像だけでなく、テキストの分量や全体のバランスなど、実際に一枚のデザインカンプでは伝わらない内容を共有することができるようになりました。

CSSで表現可能な部分(ナビゲーションやテキスト装飾など)は、初めからCSSで組み、画像が必要な部分だけ、Fireworksでパーツを作成します。手を止めずに頭の中のデザインをどんどん形にするには、ひとつのツールで軽快にパーツを仕上げられるFireworksが私的にマッチしています。


●Stage2 【Fireworks VS. Photoshop でバナーを作ってみた】
●Stage3 :【Fireworksの現状と二人が思うこれからのツール】
のスライドは、下記をご覧ください。
http://www.slideshare.net/r360studio/cssnite-osaka38-mori-kazue

Published in: Design
  • Be the first to comment

CSS Nite in OSAKA, Vol.38「CMSをプロトタイプとして使う、ワークフローのすすめ」

  1. 1. なくなったわけじゃないけど、 Fireworksを使わないワークフローを 考えなきゃいけないかも会議
  2. 2. 今日のアジェンダ stage1 CMSをプロトタイプとして使うワークフローのすすめ stage2 Fireworksvs.Photoshopでバナーを作ってみた stage3 Fireworksの現状と二人が思うこれからのツール
  3. 3. Fireworksが まるっとわかる教科書を 執筆しました この二人がお届けします
  4. 4. stage1 stage2 「むずかしいことでも、わかりやすく伝 える」をモットーに楽しく学べるセミ ナーを開催。今後は、e ラーニングや 電子出版の形式で、Web 制作を学ぶた めの教育コンテンツにも注力していく。 大阪では、ソフト産業プラザ イメディ オ iMedio にて、Web 系セミナーを担 当。 Web デザイナー&イラストレーター。 デザイン、コーディング、CMS 構築 などの Web 制作全般、イラストや書 籍の執筆など活動中。 神戸を中心に、Web 制作に関わる人 のための勉強会やセミナーを開催し ています。 はざくみと呼んでください。 森 和恵 (もり・かずえ) 狭間 句美 (はざま・くみ)
  5. 5. stage1 CMSをプロトタイプとして使う ワークフローのすすめ
  6. 6. 現状、Fireworksを ワークフローでこう使っています 現状、Fireworksを ワークフローでこう使っています のご紹介のご紹介 デ モデ モ
  7. 7. デモでやることデモでやることデモでやること CMSをワイヤーフレーム代わりに土台として使い 必要な画像パーツを Fireworksで作る、をくり返す CMSをワイヤーフレーム代わりに土台として使い 必要な画像パーツを Fireworksで作る、をくり返す
  8. 8. demodemo
  9. 9. サイトマップ ワイヤー フレーム カンプ コーディング CMS実装 まず、CMS のメリットまず、CMS のメリット
  10. 10. サイトマップ ワイヤー フレーム カンプ コーディング CMS実装 まず、CMS のメリットまず、CMS のメリット
  11. 11. サイトマップ CMS実装 画像作成 公開 HTML CSS 調整 ヒアリングヒアリング フィードバックフィードバック まず、CMS のメリットまず、CMS のメリット
  12. 12. なんか よさそうじゃないですか? ハイ、結構ラクできてます
  13. 13. どんな感じになるの…?という不安も 早い段階で解消できる どんな感じになるの…?という不安も 早い段階で解消できる 動くものを見せて具体的に イメージしてもらえる
  14. 14. 大抵最初の予定と違ってくるもの 作りながら変えていける 大抵最初の予定と違ってくるもの 作りながら変えていける デザインやレイアウトなどは 相談しながら対応
  15. 15. ページ分量がわかりやすく 原稿の準備をしてもらいやすい ページ分量がわかりやすく 原稿の準備をしてもらいやすい CMSならプロトタイプを流用できるCMSならプロトタイプを流用できる ピクセルパーフェクト?なにそれ (^q^)ピクセルパーフェクト?なにそれ (^q^) デザインと入力を同時に進められるデザインと入力を同時に進められる
  16. 16. デザイナーだからこそ柔軟に 一緒に作っていけるって、いいよね デザイナーだからこそ柔軟に 一緒に作っていけるって、いいよね デザインは後回しにする という考え方
  17. 17. stage1 ありがとうございました hazakumi 質問・感想ください

×