css nite in osaka,...

17
なくなったわけじゃないけど、 Fireworksを使わないワークフローを 考えなきゃいけないかも会議

Upload: kuni-haza

Post on 19-Jun-2015

424 views

Category:

Design


1 download

DESCRIPTION

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

TRANSCRIPT

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

なくなったわけじゃないけど、Fireworksを使わないワークフローを考えなきゃいけないかも会議

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

今日のアジェンダstage1 CMSをプロトタイプとして使うワークフローのすすめ

stage2 Fireworks vs.Photoshop でバナーを作ってみた

stage3 Fireworksの現状と二人が思うこれからのツール

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

Fireworksがまるっとわかる教科書を執筆しました

この二人がお届けします

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

stage1stage2

「むずかしいことでも、わかりやすく伝

える」をモットーに楽しく学べるセミ

ナーを開催。今後は、eラーニングや

電子出版の形式で、Web制作を学ぶた

めの教育コンテンツにも注力していく。

大阪では、ソフト産業プラザ イメディ

オ iMedio にて、Web系セミナーを担

当。

Webデザイナー&イラストレーター。

デザイン、コーディング、CMS構築

などのWeb制作全般、イラストや書

籍の執筆など活動中。

神戸を中心に、Web制作に関わる人

のための勉強会やセミナーを開催し

ています。

はざくみと呼んでください。

森 和恵(もり・かずえ)

狭間 句美(はざま・くみ)

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

stage1

CMSをプロトタイプとして使うワークフローのすすめ

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

現状、Fireworksをワークフローでこう使っています現状、Fireworksをワークフローでこう使っています

のご紹介のご紹介デ モデ モ

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

デモでやることデモでやることデモでやること

CMSをワイヤーフレーム代わりに土台として使い必要な画像パーツを Fireworksで作る、をくり返すCMSをワイヤーフレーム代わりに土台として使い必要な画像パーツを Fireworksで作る、をくり返す

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

demodemo

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

サイトマップ ワイヤーフレーム カンプ コーディング CMS実装

まず、CMS のメリットまず、CMS のメリット

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

サイトマップ ワイヤーフレーム カンプ コーディング CMS実装

まず、CMS のメリットまず、CMS のメリット

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

サイトマップ CMS実装画像作成

公開HTMLCSS 調整

ヒアリングヒアリング

フィードバックフィードバック

まず、CMS のメリットまず、CMS のメリット

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

なんかよさそうじゃないですか?

ハイ、結構ラクできてます

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

どんな感じになるの…?という不安も早い段階で解消できるどんな感じになるの…?という不安も早い段階で解消できる

動くものを見せて具体的にイメージしてもらえる

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

大抵最初の予定と違ってくるもの作りながら変えていける大抵最初の予定と違ってくるもの作りながら変えていける

デザインやレイアウトなどは相談しながら対応

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

ページ分量がわかりやすく原稿の準備をしてもらいやすいページ分量がわかりやすく原稿の準備をしてもらいやすい

CMSならプロトタイプを流用できるCMSならプロトタイプを流用できる

ピクセルパーフェクト?なにそれ (^q^)ピクセルパーフェクト?なにそれ (^q^)

デザインと入力を同時に進められるデザインと入力を同時に進められる

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

デザイナーだからこそ柔軟に一緒に作っていけるって、いいよねデザイナーだからこそ柔軟に一緒に作っていけるって、いいよね

デザインは後回しにするという考え方

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

stage1

ありがとうございましたhazakumi質問・感想ください