Webウェブ製作の手順と必要な知識は？

質問

独学で、Web製作の勉強をしている者ですが、
ちょっと個人で製作依頼を頼まれ、勉強の一環として
引き受けてみようかと思っているのですが、
分からないことがいくつかございます。

サイトで調べてみますと、
実際に製作に入る前にフォトショップなどで
レイアウトのデザイン案やサイトマップ、フォルダ構造を出す場合が多いようなのですが、
こちらの作業をしたことがなかったので、イメージがわかりません。
何か参考になるようなサイトや書籍がございましたら
教えてください。

また、サイトで使う画像についてですが、
いろいろサイトを見てますと、キレイな写真が使われている場合が
多いかと思いますが、こちらの写真は実際製作側で用意するのでしょうか？
また、カメラマンなどに依頼するものなのでしょうか？

当方、フォトショップ、イラストレーター、ドリームウィーバーの操作と
簡単なHTML、CSSの知識しかまだありませんので、それに加えて
勉強しなければならない知識がございましたら、
アドバイスのほどよろしくお願い致します。

ちなみに、方向性としては、デザインの方をメインにやっていこうかと
思っていますので、デザインの勉強は前提で考えております。

それでは、有識者の方、経験者の方、
是非ともよろしくお願い申し上げます。

回答No.6

mat-21 · ベストアンサー

続き。。。

サイトマップはわかりますよね。サイト構造。
index.htmlから枝分かれしていく、コンテンツ構造の事です。
これは、表組みたいな感じで、exelとか、提出書類にデザイン性を持たせて格好良くしたいなら、かなり面倒ですが、Illustratorとかで書類を作ります。

それとは別で、ページ構成表（サイトマップを具現化したもの）
これもExelとかで作りますが、例えば、
───────────────────────────────────────
◎トップページ
＿＜掲載要素＞新着情報・最新の製品情報・各コンテンツメニュー
＿＜備＿＿考＞＊Flashにてイメージ写真を掲載予定
＿＿＿＿＿＿＿＊各コンテンツメニューはグローバルメニューとは別に、バナー化で、
＿＿＿＿＿＿＿＿小さなイメージとコンテンツ名、100文字程度の説明で掲載。
───────────────────────────────────────
◎商品紹介
＿＜掲載要素＞各商品情報
・・・・・
───────────────────────────────────────
といった感じで、各ページの内容を具現化して記載して書類を作ります。
サイトマップとページ構成表でセットでお客様がみれば、どんなサイト構成になっているかわかりますし、ページ構成表を見れば、抜けている内容がないか確認できます。
とは言え、実際絵でみないと、なかなか気づかない事もよくあります。
しかし、このぐらいのものがないと、実際ページをデザインするときに、困ります。
ですので、最後の最後で、この内容がどこにも入ってないから、入れておいて！ってことはほんとよくあります。

フォルダ構造は、作り手によって、バラバラです。
index.htmlのディレクトリに全てのページのhtmlを置く人もいれば、ページ毎にディレクトリを作って、全て、index.htmlにする人もいます。cssファイルやjavascriptファイル、imgファイルの保存先も、まとめてする人もいれば、几帳面に、cssフォルダ、jsフォルダ、imagesフォルダを作って、それぞれ入れる人もいます。
お客様の指定がない限り、今後自分がサイト管理者になることがよくあることですので、自分が管理しやすい構造で良いと思います。
お客様に「サイト構造はこうしますね」ぐらいで、構造表を作って、渡せばいいと思います。言ってもたぶんわかりません^_^;

デザインは、photoshopかfireworksでします。
最初にスケッチブックでこんな感じで自分レベルで作画するかもしれませんが、HTMLの構造上、印刷物をデザインするような自由なレイアウトはできません。できるにはできますが、あとあとコーディングの際、大変になります。
ですので、私の場合、経験とキャリアで、直接Fireworksでデザインしていきます。photoshopでもいいのですが、Fireworksの方が、Web用に作るアイテムが揃っています。
で、実際にブラウザで表示されるサイズで作っていきます。確かにブラウザの文字で表示するテキスト部は、Fireworksでは綺麗すぎますが、実際はブラウザではガタガタですし、文字送りもブラウザ表示とは異なりますが、最初にお客様に見せるデザイン案ですので、綺麗な方が見栄えが良いです。文章ブロックは、実際はブラウザの文字になるんだぐらいは、お客様もわかります。というか、それで、どーのこーのは言われたことはありません。
あとあと、画像などをスライスして、GIFやJPEGにしますから、この段階できっちりやっていきます。とは言え、この段階で全ページデザインする必要はありません。トップページと、余力があれば、中面1ページぐらいの本番同等のデザインをしちゃいましょう。ざっくりとしたデザインを持って行っても、逆に「そんなデザインになるんだ！」と思われちゃいます。

できたら、デザインをJPGなどで別名保存して、メールで送ります。
と同時に、プリントアウトして、先に作った、サイトマップやページ構成表、このデザインのプリントアウト、その他、制作スケジュール表や、あと伝えておきたこと、お客様の準備するもののリスト表のセットに表紙を付けて、製本(まーホチキスかな)、お客様にアポイントをとって、持ち込みましょう。
その際、お返事は、いつ頃になるか、必ず聞きましょう。聞かないと、いつまでも返事がない場合が多いです。

以上です。頑張って下さい。
あーあくまで、やりかたは人それぞれですので^_^;

回答No.5

mat-21

その手の者です。
引き受けようとする仕事の役割分担は、まー別として、
ウェブサイトを作るにあたり、役割分担（作業担当）があります。

私もプロですが、サイトの規模にもよりますが、全て自分でやろうとするのは無理があります。
ましてや、全てのセクションに知識があるプロ中のプロなら別ですが....

まーデザインをメインにと思っておられるので、デザインをやりながら、
仕事の流れによる、セクション付けがわかって来ると思いますが。。。。

デザインをメインにと言っておりますが、
この場合、デザインはもとより、WEB化のコーディングプログラマーも考えられてるのでしょう。
実際、デザインだけという仕事は少なく、コーディングもやってくださいの依頼が多いです。

デザインに関しては、Photoshop, Illustrator, Dreamwaverが使えるようですが、
強いているなら、Fireworksも使いこなしてください。
文字が入った画像制作（特に小さい文字）は、PhotoshopよりもFireworksの方が綺麗です。
ただし写真の画質加工は、Photoshopの方が綺麗です。
後、Flashもお客様の要求に多い仕事です。Flashも必須と言えるでしょう。
よって、HTML, CSS, JavaScriptはもちろん、FlashのActionScriptですね。
もっと追求するなら、今時はHTMLもPHPを使って動的にするサイトが増え、
これもまた、お客様から多く要求があります。
特にフォームなどは、CGIもありますが、今時はPHPで！と言われます。

先ほど、Flashも。と言いましたが、
今時は、iPadの影響があり、FlashではなくaJaxなどjavascriptを使ったサイトを求めらルケースが増えています。
※iPadはFlash未対応のため。

また、せっかくこれから始められる、もしくは、はじめたばかりですから、
HTMLもHTML5もこれからは、勉強する要素ですね。

いずれにしても、やろうと思っても、何か課題を与えられないと覚えないもんです。
私の場合もそうでした。
ですので、仕事をもらったら、そこからで良いと思います。
技術的な事は、こうしてみたいとか、あーしてみたいとなれば、
本を買ったり、ネットで調べたりと、すればいいわけですから。

ただ、一つ言えるのは、それ専門に詳しい人が近くに一人でもいると、早く勉強していけると思います。
技術的な事は、調べればわかりますが、以外と単純な事は、調べるのに四苦八苦します。
例えば、文章は<p>タグで、なぜ<div>だとダメなのか？ 表示が同じならいいじゃん！って^_^;
どこかのブログに載ってそうだけど....
レイアウトするときtableを使っちゃだめ！ってどーゆーこと？
これもどっかに載ってそうだけど....
意外と「そんな事も知らないで仕事してるの？」って事、聞けないですよね^_^;
今時は聞けるかな？

ページ構成や、コンテンツ要素を考えるのは、そもそもディレクターのセクションですので、
写真をどれ使うとか、写真、材料、資料の手配も私の場合、ディレクターにやらせちゃってます。
デザイナーがそこまでやることはないですが、
直接仕事をもらうと、そこまでやらないと行けないことも、しばしばありますね。
よって、そういった事も、他の方がおっしゃるとおり、デザインをするまえに、詰める必要があります。

文字数制限で、書ききれませんでした。長くなってごめんなさい＞＜
次で。

回答No.4

naokita

最低でも、ラフとカンプを作る事。
簡単なイメージのスケッチと
しっかりしたページの設計図が必要です。
次に、ページ構成のサイトマップ（ディレクトリ構成）を作る。

これらは、クライアントとじっくり決める事。
（あとから変更を極力少なくする為の決め事です）
この辺がいい加減だと全然進まなかったり、トラブルや作り直しもあるでしょう。

この辺までは、「ウェブディレクション」などの書籍かな。
チームでの制作方法などを書いているでしょうけど・・・

サーバの用意も忘れずに。
動的サイトならシステム概要も。
プレゼンは無いと思いますので、プロモーションとか複数カンプも不要ですよね。

画像は、商品などの画像類があれば、クラ側から借りるか、新規で撮影するか。
または、購入する必要もあります。（条件次第でフリー画像もありますけどね）
大きな案件ならカメラマンの登場ですね。
最近は、どんな画像でもソフトで上手くレタッチ出来ますからね。
同時に、原稿の用意ですね。

ここまで準備出来れば静的サイトなら数日で完成できるでしょう。
あとは、質問者さんのセンスと技術次第です。

＞簡単なHTML、CSSの知識しかまだありませんので、
それなら、厳しいかも。他サイトのソースみないで同じレイアウト組めなきゃ・・・
自信はある？　納期の予想すら出来ないでしょ？
処女作なら有償ではなく無償で引き受けてみたら？　自分を試す意味で。

その他、運営も任されて、
「検索しても出てこない」とイヤミを言われないように・・・

回答No.3

metametamu

＞それに加えて勉強しなければならない知識がございましたら、アドバイスのほどよろしくお願い致します。

場合によってはJavaScriptも必要になることもありますね。
その他、どこまでサイトの面倒を見るのかはっきりしていないので何とも言えないのですが、どうやってサイトに人を呼び込むのかとか考える必要があるのではないでしょうか。

＞サイトで使う画像についてですが、

個人への依頼なので、写真はデジカメで自前で用意にした方がコストもかからないのでいいんじゃないでしょうか。本屋に行けばオークション用の綺麗な取り方とかその手の本があると思います。

＞レイアウトのデザイン案やサイトマップ、フォルダ構造を出す

サイトマップなどは他の人に見せるわけでもないので手書きのメモ程度でいいと思いますよ。
デザイン案はラフとかで書き出しておいて、イラストレーターとかでサイトを実際の大きさの画像で作りこんで、必要なパーツを切り取ってサイトに利用するとかでも効率いいかなと思います。

回答No.2

noname#140971

×方向性としてはデザインの方をメインに・・・
○方向性としては顧客ニーズの実現を最優先に・・・

＞レイアウトのデザイン案やサイトマップ、フォルダ構造・・・

これを決めるのは、あくまでも顧客が提示してくる情報。それを抜きに、予め、ページメニューやデザインを決めて置いて、それに当てはめることはしないし、できないと思いますよ。

もう、随分と昔、新聞の編集長とやらをしていました。が、そのページデザインを決めるのは、記事が集まった時。一つひとつの記事に見合うデザインであり、全体の記事の兼ね合いに沿ったデザイン。ですから、デザインなんてのは最終段階での閃きで決めることになると思いますよ。

大事なことは、顧客ニーズを上手く引き出すこと。「お任せしまーす」なんと言葉を信じていたら、どんでもないことに。そういう顧客に限って、「なんじゃー、こりゃー」と言いだしますからな。

大事なことは、顧客ニーズの実現に当たっては、その作業を請け負わないこと。顧客が顧客の責任でやることとサイト制作者が担当することとの線引は明確にしておくことです。

写真は、頼まれることをあるでしょうし、相手が用意することもあるでしょう。でも、その選択と決定は、顧客責任で。

こんなところかと思います。

回答No.1

webtera

私の個人的な意見ですが、ただＷＥＢサイトを制作するといっても、制作方法は多数ありますので、どのようなサイトを希望されているのかを、必ず確認する必要があります。
そして、ＷＥＢサイトについてどのような位置づけなのか（ネットショップ、会社案内、作品発表など）、作ってお終いではなく、公開した後の更新作業のことも踏まえて（人によっては、自身でされる方もいる）制作しなければなりません。
ですので、公開後の更新をどのようにお考えなのかをじっくりと聞き、頻繁に更新が必要な方には、更新作業の場合などを詰めていく必要があります。

制作方法ですが、別にPhotoshopにこだわる必要はありませんが、デザイン見本が必ず必要ですので、同じような機能を有するソフトで制作する必要はあります。
このようなソフトを使えば、同じデザインでロゴやリンクボタンのデザインや色を変更したものを、多数用意できる利点がありますが、操作方法を熟知するためには、多少時間が必要です。
そして、一般の印刷物のような紙媒体のデザインとは違うので、よく利用されている検索サイトへの上位表示される為の工夫が必ず必要です。

そういったことも踏まえて制作するためには、依頼者側が承知している場合は別として、「勉強の一環」的な気分で制作されたのでは、依頼者側はいいものができるか心配になってきますよ。
ご自身が「任してください。いいものを作ります。」と言える状態になるまでは、受けるべきではない様に思います。厳しく書きますが、その依頼者の為に制作するのであって、自己満足にならない為にも、必要なことだと思います。

長文で失礼しました。