トップページの作り方

ホームページのトップページ制作の準備として

トップページ制作にまず必要なもの

トップページ制作を行う際、まずは準備として下記のものが必要となります。

紙と鉛筆

デザインといってもまずは手書きで準備が必要になります。用意してください。

画像編集ソフト

最もよく利用されているのが、Adobe Photoshop（アドビフォトショップ）
もしくはAdobe Illustlator（アドビイラストレーター）という画像編集用ソフトです。
バージョンは古くても大丈夫ですが、できればフォトショップ（もしくはイメージレディ）で、「スライス」の機能がついているものが便利です。

フォトショップなどが無くても下記のソフトでもデザインの作成は可能です。
とりあえず何かしらのソフトを手に入れてください。

• ・Adobe Photoshop（アドビフォトショップ）
• ・Adobe Illustlator（アドビイラストレーター）
• ・Adobe Fireworks(アドビファイヤーワークス)
• ・ウェブアートデザイナー（ホームページビルダーについてくるソフト）

心がけとして

ホームページのトップページをデザインする際、下記の要項を念頭に置いて考えましょう。
デザインに自信がある・無しにかかわらず、基本的な心がけは大切です。

「常にエンドユーザーだったら」を念頭に置く

当たり前の事が結構難しいのですが、「自分が使う立場、見る立場だったら？」と常にエンドユーザーになった場合をイメージして、文字の大きさや、ボタンの配置・配色などを調整します。
そうすれば、見栄えは良いが、小さすぎて読めない文章や、どこにボタンがあるか分からず迷子になるようなホームページは回避されるでしょう。

Webサイト制作の秩序・ルール・マナーを守る

他人のホームページをマネする・・・プロのデザインの良いところをお手本にする、レイアウトをお手本にするなど、参考にするのは私は大賛成です。 ですが、写真をコピーして使う・文章をコピーして使うなどは間違いなくルール違反となりますので、行わないようにしましょう。

トップページ制作メニュー

ホームページの構成図を作る

トップページを制作するにはまず、ホームページ全体の構成が決まっていないと作れません。
まずは手書きでもエクセルを使用しても、構成図を作成しましょう。

ホームページの構成図を作るの続きはこちら

ホームページトップページの手書きレイアウトを作る

トップページの手書きラフイメージをつくります。トップページには何が必要か、何をアピールするか、どのようなナビゲーションの配置にするかを決定し、見える形にします。

トップページの手書きレイアウトを作るの続きはこちら

ページ幅・領域の幅を決める

画像編集ソフトで、デザインに着手します。
まずはページの幅・各領域の幅を決め、四角の領域を作ります。

ページ幅・領域の幅を決めるの続きはこちら

各部分に必要なものを入れる

各領域のサイズが決まると、次に各領域に入る内容を入れていきます。ここではあまりデザインにこだわらず、わかる所・できるところから埋めていきます。

各部分に必要なものを入れるの続きはこちら

トップページに必要な要素を入れる

ある程度各領域に入れるものが入り、多少デザインができれば、すべての領域をとにかく埋めます。
同じような内容が繰り返される部分は、とりあえずコピーを張り付けておき、全体の出来上がりイメージを早く完成させましょう。

トップページに必要な要素を入れるの続きはこちら

色・詳細デザイン

トップページに入る全体の内容が埋まれば、あとはデザインの詳細・全体の色などの調整を行います。
できるだけシンプルで、色味を抑えたほうがまとまりやすくなります。

色・詳細デザインの続きはこちら

画像を切り出して保存する

デザインが大体決まれば、必要な部品を画像ファイルで保存します。

画像を切り出して保存するの続きはこちら

トップページをコーディングする

画像を切り出したらようやくHTMLの作成に取り掛かります。
初心者の方はテーブルコーディングでも十分ですが、時間や技術の習得を求めるのであればCSSコーディングをマスターしましょう。

トップページコーディングの続きはこちら