Webページ制作の流れに関して

Webページ制作の流れに関して教えて下さい。

１．お客様と打ち合わせた内容を基にワイヤーフレームの作成。
２．コンテンツの作成はIllustratorとPhotoshopで作成。
３．Fireworksでモックを作成後PDFで出力した内容をお客様に確認。
４．指摘された内容を修正（２，３の工程を繰り返す）。
５．コーディング
６．お客様にブラウザで実際に確認頂き修正後、納品。

私は上記の流れで考えております。

上司に、この他にExcelで詳細設計書が必要だと言われます。
詳細設計書に盛り込む内容はテキストボックスでコンテンツを表現。
テキストボックスに番号を付与して、番号の横に概要を書く。
画像なのかテキストなのか？どの部分をリンクにするのか？コンテンツのサイズは？
各コンテンツの余白の大きさ。フォントのサイズは？
Jqueryの挙動に関して。


私は正直、上司の意図が分かりません。
モックでコンテンツの概要が分かると思っております。

画像なのかテキストなのか？どの部分をリンクにするのか？コンテンツのサイズは？各コンテンツの余白の大きさは？
上記は全てモックで確認出来ると思っております。

フォントのサイズは？
初期のフォントのサイズを決めて、実際に形にして見て調整するので良いと思っております。

jQueryの挙動もコーディングを行い実際の動作をお客様に確認して
頂いた方が分かりやすいと思っております。


テキストボックスも実寸サイズではないですし。
コンテンツ自体が必要なくなるとテキストボックスに付与していた番号も
全て変更になります。それに伴い概要の番号も変更になります。

そもそも、詳細設計書を基にコーディングを行うはずなのに、現状では
コーディングに修正が生じた際にその都度、詳細設計書を書き変えております。
設計書の意味を為してはいないと思っております。

正直、Excelでドキュメントを作成する労力をデザインやコーディングに使いたいと思っております。
ただし、コーディング規約やソース、画像、CSSをどの階層に置くのか等は
ドキュメントでしっかりと明文化する必要があると思っております。

会社の事業内容自体がまったく別で初めてWebページを制作します。

皆様のご意見、お考えをお聞かせ頂けませんでしょうか？

駄文を最後までご覧頂いてどうもありがとうございました。

宜しくお願いします。

質問者からの補足コメント

• Fireworksはweb作成ソフトです。
  
  批判するだけなら誰でも出来るよね。
  なぜ、必要なのか一切理由に触れていない。
  
  回答にして回答に非ずといったところですか？

  No.1の回答に寄せられた補足コメントです。 補足日時：2015/05/28 10:13

No.1 回答者： ふーさん 回答日時： 2015/05/27 10:32

１．ワイヤーフレーム？？？？

ＣＧでも作るんですか？

＞２．コンテンツの作成はIllustratorとPhotoshopで作成。
webなのになんでweb作成ソフトを使わないんですか？

＞モックでコンテンツの概要が分かると思っております。
じゃあ、それを説明しなさい

＞画像なのかテキストなのか？どの部分をリンクにするのか？コンテンツのサイズは？各コンテンツの余白の大きさは？上記は全てモックで確認出来ると思っております。

できないよ

＞フォントのサイズは？
＞初期のフォントのサイズを決めて、実際に形にして見て調整するので良いと思っております。
あーダメだぁ、本当に何も知らないんですね

No.2 ベストアンサー 回答者： naktak 回答日時： 2015/05/27 13:30

> １．お客様と打ち合わせた内容を基にワイヤーフレームの作成。

画面遷移図はないですよね。どの画面がどのような役割を持って、
どのように遷移することでどのようなことを実現するか、記さなくていいのでしょうか？

> 画像なのかテキストなのか？どの部分をリンクにするのか？コンテンツのサイズは？
> 各コンテンツの余白の大きさ。フォントのサイズは？
全部必要な情報です。
そのように要素を定義してページを構成している、という材料です。
勿論、それがすべてExcelである必要はありませんが、定義している資料が必要です。
Excelなどでは表現しづらく、ワイヤーフレーム内で明示しているものについては、わざわざExcelで定義し直して二重管理にする必要はないでしょう。
しかし、そうだとしても、Excelなどで別途資料化するものと、ワイヤーフレーム内で定義するものをはっきり区別して提示すべきでしょう。

もし、ググって出てきた以下のようなワイヤーフレームを作っていて、それしか提供していないのであれば、情報不足としかいいようがありません。
http://www.from.co.jp/weblog/files/2013/04/wire. …
http://lab.gpol.co.jp/trend/ScreenShot00147.jpg

> モックでコンテンツの概要が分かると思っております。
分かると思っているのはあなただけかもしれません。

> jQueryの挙動もコーディングを行い実際の動作をお客様に確認して
> 頂いた方が分かりやすいと思っております。
分かりやすいどうかと、仕様として定義しているかどうかは別問題です。

> 現状ではコーディングに修正が生じた際にその都度、詳細設計書を書き変えております。
コーディングに修正が生じたから設計書を直すのではなく、要望・仕様変更が生じたから
設計書を直し、コーディングを行うのです。

> 正直、Excelでドキュメントを作成する労力をデザインやコーディングに使いたいと思っております。
この言い分は、デザイナーとしての主観でしかありません。気持ちは重々分かりますが。
そのデザイン、挙動で正しいという担保が何もないということは、後から何言われても
文句は言えないということです。

挙動は、確かに動くものを渡して触ってもらうのが一番イメージしやすいでしょうが、
成果物とは別に、何を以てその成果物を作成・納品したかを明確にしなければなりません。
それがないなら、客側としては、極端なこと言ったら、『そんなことどこにも記されてない、追加料金など払わない、だからやれ』ですね。
たまにいますよ、そういう人。言葉を選んでなだめながらお願いするのにも一苦労です。

この回答へのお礼

おはようございます。ご回答を頂きましてどうもありがとうございました。

確かに全体を俯瞰するための画面遷移図は必要ですね。
Excelとワイヤーフレームで定義内容をしっかりと区別するようにします。

＞成果物とは別に、何を以てその成果物を作成・納品したかを明確にしなければなりません。
後々のトラブルを防止するために明文化する必要があるのですね。

なぜ、ドキュメントが必要なのか考えながら作成します。

それでは、失礼します。

お礼日時：2015/05/28 10:11

No.3 回答者： shockatz 回答日時： 2015/05/28 09:27

システム開発会社のインハウス・デザイナーさんですか？

あるいは上司さんがシステム開発会社出身？

ここに集まっている連中は、PGやコーダばっかりで、おそらくあなたの上司と同じか、より融通の効かない答えしか出ませんよ。
PhotoshopやIllustrator、Fireworksと聞いただけで拒否反応が出ますんで。

自分は以前、（某中堅）デザイン広告会社の中でシステム開発を行っていたので、立場は主さんとまるっきり真逆ですが、あちらの業界では「要件定義書」とか「システム仕様書」を作っても、顧客も含め、誰も見ません。
いきなり「まずビジュアル」「完成品を持ってこい」「仮のデザインじゃわからん」です。
画面詳細設計仕様書は、下請に出す場合の見積必要書類でしたね。

自分がシステム担当した理由も、そもそもシステム開発会社に外注する仕様書が誰も作れず、何とか開発にこぎつけても、詳細変更時のトラブルばっかりで、収拾がつかなくなったことが原因です。

「郷に入らば郷に従え」じゃないですが、業界文化とか、企業文化のようなものがあって、Webのように「異種格闘技」のような世界だと、属している世界に従うしかないというのが正直な話です。

あなたの上司さんと、あなたのどちらが正しいかは、会社のスタンスによって決まります。
なので、本当に正直に言うと、「システム開発会社のインハウスデザイナ」とか「広告会社の中のSE」は、当初は重宝がられる存在でも、所詮長続きはしないと思いますよ。

この回答へのお礼

おはようございます。ご回答を頂きましてどうもありがとうございました。

確かに自分がドキュメントに疑問に思っても会社のスタンスで全て決まりますね。

私と立場が違う回答者様の体験談をお聞かせ頂いて勉強になりました。

自分の専門性をもっと高めるように努力します。

それでは、失礼します。

お礼日時：2015/05/28 10:11