Successfully reported this slideshow.

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

1

Share

Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 17
1 of 17

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

1

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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 質問・感想ください

×