前回までの記事
Webサイトを作ろう！【3】ページの構成を考える
Webサイトを作ろう！【4】テーマカラーを決める
こちらをご覧いただいて、作りたいサイトの概要はおおよそ決まったことと思います。
今回はついにサイトの顔となるトップに表示されるページを作っていきましょう。
テキストエディタでファイルを作る
トップページやHOME（ホーム）と呼ばれるページがサイトの第一歩です。
とりあえずこの1ページだけでもWeb上にあれば「サイトがそこにある」と言えます。
個人経営の企業さんなら、HOMEのページに会社概要、問い合わせ先、業務内容を記載して、1ページで完結させるものでも充分な場合もあります。
実際にページを作るには【 2 】必要なソフトを準備するでもご紹介したテキストエディタを使います。
ここでは一例として TeraPad を使用してご説明します。
（他のテキストエディタやメモ帳でも記述内容は変わりません）
index.html ファイルを作る
TeraPad を起動
↓
『 Hello world 』と入力
※なんとなくのお試し文章なので、入れる文字は日本語でも英語でもなんでもOKです。
↓
『 index.html 』と名前を付けて保存
※保存先フォルダは 【 2 】必要なソフトを準備する にて準備したサイト用のデータ保存フォルダにします。
このファイルにテキストやタグといった記述を行ってページを作っていきます。
実際に記述する内容は次の記事にて。
表示を確認する
Internet ExplorerとFirefoxのそれぞれのアイコンマークをクリックすると、現在入力している記述が、それぞれのブラウザ上でどう表示されるかを確認することができます。
もちろんこの段階では実際にWeb上にデータをあげた訳ではないので、あくまでも目安ですがかなり正確に表示されるので、入力途中での確認には充分に使えます。
アップロードする
作成・保存したファイルは自分のパソコンの中にあります。
これをWeb上で皆に見てもらうサイトにするには、作ったファイルをWeb上、つまりはサーバー上に置かなければなりません。
そこで、自分のパソコンからサーバーに向かってポイッとデータを放り込み、サーバーに受け取ってもらう（＝アップロードする）必要があります。
FFFTPの仕組み
使い方としては自分のパソコン内のデータ（左）をクリックしたままサーバー（右）へ引っ張っていくだけなので簡単です。
サーバー側にアップロードした時点で、それは世界のどこからでも見えるものになります。
人に見られると困る情報などは間違えてアップロードしないように気をつけましょう。
間違えてデータをアップロードした場合や、作成途中のデータを試しにアップロードした場合などは、右クリックして出てくるメニューから削除できます。
URLの確認方法
サーバーへアップロードしたデータを右クリック⇒【 URLをクリップボードへコピー 】するとデータの在り処をコピーすることができます。
適当な場所（メモ帳とか）へ【 貼り付け 】してみると、サーバー上のURLが分かります。
FFFTPの初期設定
まずご自分のサーバーやプロバイダの環境に合わせてFFFTPの設定を行います。
基本的に各レンタルサーバーのサイト内のヘルプやサポートのページに設定方法の記載があるはずなので探してみてください。
FFFTPを起動した後、【 新規ホスト 】を選択してください。
ホストの設定名：①任意の名前
自分のサイト名など、お好みのもので構いません。
ホスト名：②初期ドメイン
サーバーと同じホスト名。初期ドメインなら『 ○○○.jp 』や『 www.○○○.com 』となり、IPアドレスなら『 127.0.0.0 』のような数字になります。
サーバーと契約した時のメール等に記載があるはずです。
分からなければサポートに電話して聞いてみましょう。
「ファイル転送ソフトのFFFTPの初期設定をしている」と伝えれば、サポートのひとが察して良い感じに教えてくれるはず。
ユーザー名：③初期ドメインのサブドメイン
初期ドメインが ○○○.●●●.jp なら ●●● の部分がサブドメインです。
パスワード：④サーバーパスワード
サーバーのパスワード。
これもサーバーと契約した時のメールに記載があるはずです。
分からなければサポートに電話して聞きましょう。
ローカルの初期フォルダ：⑤PC内のサイト用フォルダ
自分のパソコンの中でサイト作成用のデータを置いているフォルダを指定します。
例 ： C:\website
ホストの初期フォルダ：⑥サーバー側のサイト用フォルダ
サーバー側でサイト用のデータを置きたい場所を指定します。
特に指定がなければ空白でOKです。
以上の設定を行うと、次回から起動後の枠内に上記の①で決めた任意の名前が表示されるようになるので、そのまま【 接続 】をクリックしてください。
さくらインターネット FFFTPファイル転送
最初の設定方法などが分かりやすく説明されているのでご参考に。
契約しているサーバーによってはこんな感じでインストールから使い方まで細かく説明してくれていることもあるので、検索で探してみてくださいね。
画像を準備
写真や自作のイラストを画像フォルダに保存しましょう。
写真であればデジカメや携帯で撮影したもの、画像であれば自分で描いたものや、製作者さんが公開しており利用を許可したものを使います。
この時に注意が必要なのは、Web上で素材サイトさんが無料配布してくださっている画像などでも、商用サイト（企業や店舗、ネットショップなどの利益に関わるサイト）では使用不可になっていたりもします。
その辺りは製作者さんによって規約も異なるため、最初にじっくり規約を読み、どうしても不明なことがあれば製作者さんにメール等で連絡をとって尋ねてみましょう。
また、こういった問題を予め考えなくて済むように可能であれば無料の写真編集ソフトなどを使って、出来る限り自分で素材を準備しましょう。
画像や写真の編集
デジカメで撮影した商品の写真をちょっとオシャレに飾りつけたい、トップの画像として自分でロゴを作りたい、など、色々なご希望があると思います。
写真の加工編集や画像の作成には、自分のパソコンに専用ソフトをインストールして使用する方法と、Web上でソフトを借りて（クラウドサービスで）作業する方法があります。
用途や無料・有料によって様々なソフトがありますが、簡単な描画ソフトとして一番身近なのは、Windowsに初期搭載されているペイントソフトですね。
デジカメならご購入時に写真編集ソフトが付いていたり、メーカーがソフトを提供してくれていたりします。
その他にもWeb上に色々なソフトや素材が公開されています。
無料素材を提供してくださっているサイトさん、画像編集ソフトのご紹介と私の自作画像を配布素材として置いていますのでご参考に。
⇒Webサイトを作ろう！【 番外編1 】画像編集ソフト・素材サイト
⇒Webサイトを作ろう！【 番外編2 】商用利用OKな無料素材
画像の保存先
基本的にサイト作成のためのデータは全て、先ほど作ったテキストファイル【 index.html 】と同じ階層に保存します。
しかしデータが増えてくると、多少のフォルダ分けをしないとゴチャゴチャして大変になってきます。
あまりデータが多くないサイトであれば全てを一律で【 website 】フォルダに保存しても良いですし、整理整頓したい方は【 image 】フォルダを予め作っておいて、その中に画像を保存しても大丈夫です。
Webサイトを作ろう！：シリーズ記事
【1】レンタルサーバーとドメイン
【2】必要なソフトを準備する
【3】ページの構成を考える
【4】テーマカラーを決める
【5】トップページと画像を用意（この記事です）
【6】トップページの一例
【7】HTMLソースコードの解説①
【8】HTMLソースコードの解説②
【9】複数ページを作る
【10】横並びメニューをCSSで作る
【11】縦並びメニューをCSSで作る
【12】スタイルシート（CSS）の解説
【 番外編1 】画像編集ソフト・素材サイト
【 番外編2 】商用利用OKな無料素材
「Webサイトはこうしてもらえると嬉しい」という個人的な希望
