このページの本文へ

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

成功ネット企業の人財育成大研究

第16回 

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

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

  • はてなブックマークに登録
  • del.icio.usに登録
  • livedoorクリップに登録
  • Buzzurlに登録
  • StumbleUponに登録
  • Google Bookmarksに登録
  • Facebookでシェア
  • Yahoo!ブックマークに登録
  • お気に入りに登録
  • 本文印刷

 こんにちは!

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

 未経験者やサイト制作経験があまりない方は「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/

カテゴリートップへ

この連載の記事

ASCII.jp RSS2.0 配信中

Webディレクター江口明日香が行く

みんなが買ってる最新アイテムはコレだ!

VOCALOID3 スターターIA ARIA ON THE PLANETES

VOCALOID3 スターターIA ARIA ON THE PLANETES

ヤマハ

17,745円〜

24人が購入

標準HTML5タグリファレンス (WEB PROFESSIONAL)

標準HTML5タグリファレンス (WEB PROFESSIONAL)

アスキー・メディアワークス

2,205円〜

70人が購入

Google上位表示 64の法則 (WEB PROFESSIONAL)

Google上位表示 64の法則 (WEB PROFESSIONAL)

アスキー・メディアワークス

2,499円〜

69人が購入

Speck MacBook Air 13型 See Thru - Clear SPK-MBA13-SEE-CLR

Speck MacBook Air 13型 See Thru - Clear SPK-MBA13-SEE-CLR

スペックコンピュータ

4,262円〜

21人が購入

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

アスキー・メディアワークス

2,499円〜

38人が購入

メモリーカード 32GB (PCH-Z321J)

メモリーカード 32GB (PCH-Z321J)

ソニー・コンピュータエンタテインメント

7,772円〜

9人が購入

iPhone 4S/4 防指紋性・高光沢機能性フィルム PRO GUARD AF for iPhone 4S/4 / PGAF-IPH4

iPhone 4S/4 防指紋性・高光沢機能性フィルム PRO GUARD AF for iPhone 4S/4 / PGAF-IPH4

マイクロソリューション Micro Solution Inc.

60人が購入

Amazon.co.jp