Knowhow

この「ノウハウ」のページは実体験を元に、Web制作のポイントや注意点をまとめました。これから制作する上で参考になる事が多いと思います。

Step_1

自社制作とWeb制作担当者の決定

まずは、社内で制作するという会社での決定が必要です。次に適任とされるWeb制作担当者の選択が必要になります。Webサイトの規模にもよりますが、2〜3人いれば充分だと思います。この段階で担当者が決定したら、速やかに必要なソフトの購入と学習を始めてください。

Step_2

スケジュールを決める

Webサイトを制作する場合はサーバにアップするまでのスケジュールを決めてください。あまり長い期間をかけているとテキスト等の内容を再度変更することにもなります。サイトの内容にもよりますが、自社Webサイト構想が決定したら速やかに計画表を立てて完成を目指してください。

Step_3

リニューアル（新規）のプランニング

リニューアル（新規）するためには、企画案が必要になります。リニューアルの場合は、現状のコンテンツの修正と見直し・トップページやベーシックデザインや配色の再検討・素材や機能の追加等を含めてWebサイト構成の骨組みを構成します。せっかくリニューアルするのだから、コンテンツに新企画を導入するなどして検討してください。
新規の場合は、骨組みからですので他社の多くのサイトを参考にしてください。企業のWebサイトの基本パターンはある程度フォーマット化さていますので、どこかに自社のオリジナル性を発揮してプランニングしてください。
リニューアルにしても新規にしても、サイト全体を顧客に分かりやすい構成にしてださい。
このWebサイト構成が一番重要な作業ですから、何度か繰り返したり、社内プレゼンやブレーンストーミング（アイディアの出し合い）等も心がけて、メモやラフスケッチで個々のページを確認してください。

Step_4

Webサイト構想を綿密に紙等に描く

プランニングが固まりましたら、Webサイト構想を目に見える形にします。プランニング段階ではアイディアですから紙等にラフスケッチでもいいのですが、ここではWebサイト構想をツリー構造にして、より具体的に綿密に紙等に描いてください。新規でもリニューアルの場合でも、より分かりやすい・使いやすい工夫やデザインにも力を入れてください。
HWPのWebサイトはデザイン事務所なので、デザインとして「曲線」にこだわりました。直線的なデザインならフォーマットを決めれば簡単ですので、企画と素材と配色にこだわってください。

最初はトップページからの第一階層の「ナビボタンの数」と「名称（和文・欧文）」と「順番」と「内容」を決定してください。また、第二・第三階層も同じようにリンク関連は全て紙等に描いて設計図のような全体構想図を完成させてください。リンクしたウィンドウは基本的には同一ウィンドウで表示した方が分かりやすいですが、コンテンツによっては別ウィンドウ表示という方法もあります。

Step_5

素材の準備と編集と管理

●フォルダとファイルの管理

パソコンにWebサイト用の「作業（サイト）フォルダ」を1つ作ります。作業（サイト）フォルダ名は半角英数字でサイト名と同じ名称にしておいた方が混乱がありません。また、アンダーハイフンでその年の年（月）数字2〜4桁を入れておくと、いつの年（月）に制作したかが分かります。
半角英数字の作業（サイト）フォルダ内に画像等を入れておくのですが、サーバには直接アップしないテキストの元原稿と元画像を保管する「編集用フォルダ」も作ってください。「編集用フォルダ」は「作業（サイト）フォルダ」の中でも外でもいいのですが、2つで1セットと考えて管理してください。「編集用フォルダ」とその中のフォルダ名やファイル名は日本語でもいいのですが、後でファイルもフォルダも増えてきますので、再利用する時にすぐに分かるよな管理と名称にしておいてください。

サーバにアップする「作業（サイト）フォルダ」内のフォルダやファイル名もすべて半角英数字にしてください。また、各フォルダの数が増えても混乱しないようなファイル名とフォルダ名にしてください。同じカテゴリーはアンダーバーやハイフンを使用してナンバリングしておくと便利です。新規のフォルダやファイルが後から多くなることを前提に名称を付けてください。またナンバリングは二桁の「01」のように最初は0数字にしておくと99個までは使えると同時に「一覧」表示にした時にファイルが01から順番に並ぶので管理が楽になります。

後から増える予定のファイルや画像等は別フォルダを制作して管理しておくことをお勧めします。HWPでもフォルダ内にフォルダを作って分類しています。どの画像がどこにあるかがすぐに分かる管理をしています。

※作業（サイト）フォルダ：htmlやCSSや加工処理した画像類
→ファイル名・フォルダ名はすべて半角英数字→サーバにアップする。
※編集フォルダ：元原稿や元画像
→ファイル名・フォルダ名は日本語可→サーバにアップしない。

●テキスト原稿

テキスト原稿は文字の修正や用字用語の統一の原稿整理を事前に済ませておき、編集用フォルダのテキスト用フォルダに保存しておいてください。新規の場合は特にテキストの誤字がないように再確認してください。また、テキスト原稿はこの段階でタイトル・中見出し・小見出しと分かるようにランク付けして整理しておくと、CSS設定する時の後作業が楽になります。

●画像原稿

元原稿は「編集用フォルダ」内の「画像フォルダ」に入れてください。リサイズしてサイトで使用する画像原稿はフォルダ名とファイル名を半角英数字にして分けて管理してください。特に画像類は後から増えてきますので、変更があっても元画像が分からなくなってしまうことがないように注意してください。ちなみに、画像類はこのHWPサイトでも80点は軽く超えています。たぶん、年内には100点は超えると予想しています。

●配　　色

事前にベースとなるカラーを決めておいてください。
ちなみに、HWPサイトの場合は、メインカラーは青（#577DB5）。サブカラーは黒（#000000）とグレー（#999999）とモスグリーン（#EEF4EB）。背景色は薄クリーム（#FFFFEE）。表組の項目にはクリーム色（#F7F4D6）です。
他に各カテゴリー6項目がありますので、ポイントカラーを設定しました。
Step up（#C28888） 、Design（#95795） 、 Research（#7A7979） 、
Material&Function（#73838F） 、 Knouwhow（#D69D74） 、Inquiry（#A7BE7C） です。

Step_6

準備するソフトと修得

HTMLファイルはメモ帳（シンプルテキスト）のようなテキスト・エディター・ソフトにHTML形式で書いていけばできるのですが、企業の場合は引継もありますし、時間短縮を考慮すればWeb制作ソフトを使用した方が効率的です。もちろん、中身はHTML形式になるので最低限のHTMLとCSSは少しずつ覚えておくと何かと便利です。
ソフトはいろいろあるのですが、プロ仕様の2〜3点がお勧めです。
・Web制作ツールのソフトでは「Dreamweaver」等
・写真やバナーやボタンなどの画像制作ツールのソフトでは「Fireworks」「Photoshop」等
・アニメーションやインタラクティブな要素も必要なら「Flash」等
しっかりしたWebサイト構想が確定すれば、後は分業するなどして制作します。ワードやエクセルのソフトが得意な人ならWebサイト制作等の基本的なソフト修得はすぐにマスターできると思います。

Step_7

サーバにアップ

Webサイトが完成したら、サーバにデータをアップロードして公開するのですが、最初はサーバにテスト用のデレクトリを作り、不具合がないかを多様なOSやブラウザで最終チェックを済ませてから、本格的なアップロードをお勧めします。
リニューアルならサーバはあると思いますが、新規の場合でもレンタルサーバの業者はたくさんありますので、各業者のホームページを見て自社に合ったサーバと容量等のタイプを選択してください。また、ドメインがない場合はドメイン取得（○○○.co.jp等）もしてください。
データのアップロードは、専用のソフトが無料や安価でありますが、Webサイト制作ソフト（Dreamweaver等）にはその機能が付随しているので簡単にローカルデータをアップデートして公開することができます。アップデート方法はソフト習得用の本等にも記載されています。

Step_8

自社制作は段階的に

Webサイト制作の自社制作は難しくありませんが、クオリティのあるデザインやオリジナルの写真・イラスト・ロゴデザインやCGI等の難易度の高いスクリプトは難しいかもしれません。
すべて初めてという場合は、進行管理から原稿制作、そして少しずつWebサイト制作に関わってください。1〜2年で90%以上の制作に携われば自社制作は成功です。