このページの本文へ

ちょっと待って!Dreamweaverを開けるその前に……

2007年03月23日 09時00分更新

文●とこ みゆき/サポタント株式会社

  • この記事をはてなブックマークに追加
本文印刷

 こんにちは!

 皆さんはウェブページを制作するときにどんな手順で、どんなソフトを使ってつくりますか?

 未経験者やサイト制作経験があまりない方は「Dreamweaverをまず開ける。」と答えがちですが、
 制作経験者は全く違う答えになるのをご存知でしょうか?

 つくるときの手順を変えるだけで、すばやく、よいサイトができます!

 今日は、実務経験者がサイトをつくるときの、制作手順(私の周りでメジャーです。)をご紹介しましょう。

慣れるまで最初からソフトは開かない

 サイト制作に慣れている方の多くは、ウェブページをつくるときいきなりDreamweaverは開きません。
 制作するとき慣れるまではいきなりソフトを開かないようにしましょう。

 つくりたいサイトを手書きでいいのでラフを描いてみます。

 もし作りたいサイトのイメージが具体的でない場合はいろいろな参考にしたいサイトを見つけ、よいところを自分で書き出しながらラフデザインをまず完成させます。

 ラフデザインには簡単に各部分のサイズも入れておいてくださいね。
*参考となるサイトの各部品がどのくらいの大きさなのかも事前に調べて参考にしましょう。

次に開くのは画像加工ソフト

 次に・・・・。
 まだDreamweaverは開きません。

 ラフデザインが完成すれば、次に看板やナビゲーションボタン、バナーなどの部品をつくります。看板などに必要な画像加工もここでしておきます。

 画像加工ソフトの操作に慣れている方は、手書きスケッチのかわりに1ページのデザイン画をPhotoshopやFireworksでつくる場合もあります。看板やボタンなどの部品をそこから切り出してもOKです。

 切り出した部品は、予めサイト設定をするフォルダ内にimages(画像を保存するフォルダとして名前をわかりやすくつけておきましょう)をつくり保存をしておきます。

そしてようやくコーディングです

 お待たせしました。
 先ほどの部品と、ラフ図を見てコーディングしますのでここでようやくDreamweaverを開けます。

 必要な部品がそろっていて、ページの構成も決まっていますので、あとはDreamweaverの画面でバナーなどの部品や説明文を配置し、リンクを設定し、必要なタグ(Altタグなど)を入力します。

 あとは、プレビューでチェックし問題なければ、htmlファイルと必要な画像をアップロードして完成です。

 ウェブページをつくる!と聞けば、「Dreamweaverではじまり、Dreamweaverで終わる。」というように思っている方もいらっしゃいますが、実際は部品づくりなどの準備をしっかりとしてDreamweaverで配置するだけなのです。

 実際に面接にきた登録者でサイト制作の経験があります!と言う人に、

 「ウェブページをつくるときにどのようにつくるか手順をお話ください。」

 と質問すると「まずDreamweaverを開いて・・・」と説明がはじまる場合があります。そこでつっこんで質問をすると、どんどんシドロモドロになることも少なくありません。最後には「実は経験といっても文字を修正していただけで・・。」という言い訳が出てしまう場合があります。

 反対に、上記のような流れを説明してくれると「あ、この人はわかっているな。」という感じを受けます。

 ウェブデザイナーを採用するときにも、この質問は有効かもしれませんね♪

今日からはじめられる「To do」

それでは、今日からはじめられる3つのルールです。
ウェブページをつくるとき

(1) まずつくりたいページのラフを描く(手書きOK!)

(2) PhotoshopやFireworksなどの画像加工ソフトで
 写真を画像加工し、バナーや看板、ボタンなどの部品を全て完成させる。

(3) Dreamweaverで部品を1ページの中に配置し、アップロードする。

いかがでしょうか?
もし違う手順で今までやっていらっしゃった方は上記を試してみてください。
スピードアップすると思いますよ♪

今回も最後までお読みいただきどうも有難うございました。
次回もどうぞよろしくお願いいたします。

著者プロフィール

名前 とこ みゆき happy[アットマーク]supotant.com
※著者に直接問い合わせをする際は、お名前、会社名、サイトURLなどを明記してください。
会社 サポタント株式会社
サイト http://www.supotant.com/

この連載の記事

一覧へ

WebProfessional 新着記事