みなさんはHP作成をどうゆう手順でやってますか？

質問

自己流で何年か自己満サイトを作ってきましたが、
この度仕事として作成する運びとなり質問にあがりました。

私がサイトをつくるときは
１．Photoshopで画面デザインをおこす
２．スライスして画像を吐き出す
３．Dreamwaverで手打ちでCSSを組む
以上です。

IllustratorとFireworksも持っているのですが、
よく使いこなせません。
Fireworksについては一度も触ってません。。。

この方法は妥当でしょうか？

もうひとつ質問★
トップページ以外は、
トップページのソースをそのままコピーして
CSSのBOX内容を変更して違うページに仕立てているのですが
みなさんもそうされていますか？
昔iFrameを使ったサイトを使っていたので、
毎回同じソースを読み込むのはとても重いような気がして
心配です。

CSSのdivで全体を構成してるのもSEO的にどうでしょうか？
色々なサイトを回ってみたんですが
どうもTableでの構成が多いようなので…

どなたかアドバイス宜しくお願いします。

回答No.3

sunwarship

仕事でWeb制作していますが、全く同じやり方です。
１．Photoshopで画面デザインをおこす
２．スライスして画像を吐き出す
３．Dreamwaverで手打ちでCSSを組む

Illustratorはロゴや地図作成の時に使ってます。
Fireworksは起動すらしたことありません^^

ここからは参考意見として。

もう一つの質問ですが、Dreamweaver使ってるのであれば、
トップページをコピーというよりも、共通項目を
ライブラリ化もしくはテンプレート化すると効率いいです。
（ヘッダーやフッター、全頁共通のものを。）

ライブラリファイルを更新すれば全頁に適用されますので。
ライブラリについては↓
http://wakabano.cool.ne.jp/dream/useful/function/fun_03.html

同時にCSSも多数ページで使うID,classは一枚のCSSにまとめて、
各ページで使うID,classはそれぞれ別のCSSに記述すると後々わかりやすいです。
（CSSのBOX内容を変更して違うページに仕立てているってとこです）

CSSコーディングができるのであれば
iframeやtableレイアウトはやめましょう。
昔のコーディング技術です。SEO的にもよくないですし、
W3Cでは論外ですしね。

Divで全体を構成するのもOKですよ。（Div病なんて言葉もありますが）
慣れれば自然とDivの数も少なくなるかと思います。

補足

専門のご意見大変参考になりました！

ライブラリ機能すごいですね！
はじめてDreamwaverの意味を知った気がしますw

tableタグはやはりSEo的にアウトなんですね。。
もっとCSSも勉強しなきゃですね。。
毎回
ブラウザチェックすると対外くずれてココロが折れそうになります。

ほんとに助かりました！
ありがとうございます！

回答No.2

salonpath

■最初の質問
まったく問題ないです、大丈夫です。

photoshopだろうが、illustratorだろうが、fireworksだろうが、painterだろうが、GIMPだろうがjpgはjpgでgifはgifです。
自分のやりやすいようにやって効率をあげてけばいいんです。
けど誰かと共同作業をするならまた別の話。

■もうひとつの質問
indexと後続ページのレイアウトが同じようなものならコピーでやってます

iframeで毎回同じソースを読み込む必要を無くしても
レイアウトにtableタグを使って無駄なソースを何十行も増やしてたら意味がないですよ。

お礼

問題ないんですねー。
まわりにWebを作るヒトがいなくて
ずっと見よう見まねでしたが
合ってて安心しました！

返答ありがとうございます！

回答No.1

nekonoke99

私も自己満足サイト作成者です。
もし仕事でサイトを作成するとなった場合「私ならこうする」的な回答になってしまいますが。

まず真っ先に、内容を考えます。
派手なFlashなどよりも、きちんと閲覧されるような内容でないとダメでしょう。
企業の採用案内でも、新卒採用と中途採用で書く内容は変わるはずです。

次に、アクセシビリティを考えます。
詳しく書くと長くなるので避けますが「誰でも快適に閲覧できる」と言うようなことです。
下記のWebページが参考になると思います。
http://www.kanzaki.com/docs/html/accessible.html
http://jp.fujitsu.com/about/design/ud/assistance/

CSSなどに着手するのは最後です。上のアクセシビリティをふまえて、色や文字サイズを決めていきます。
HTMLドキュメントがきちんとした（Validな）ものであれば、デザインはCSSでいかようにもなりますので最後に回すわけです。
色の組み合わせは色盲／色弱の閲覧者（私も赤緑色盲）でも見やすいものにすること、文字の大小も閲覧者が自由に大きさを指定できるよう、CSSでの「**pt」というような記述は避けたほうがよいと思います。

SEOに関しては、私自身、知識不足を感じておりますので、回答は控えさせていただきます。
ただ、tableでの入れ子でデザインすることは避けたほうがよろしいかと…

蛇足ですが、私は画像編集ソフトに関しては「フリーウェアで十分＆買うお金がない」という状態なので、PhotoshopやIllustratorとは無縁です。

お礼

デザインを起こす時の設計が一番大事なんですね！
文字や色に関してももっと注意して設計しようと思います。

返答ありがとうございました。