top > ホームページの作り方 > 0日目 ホームページを作る前に用意するもの

0日目 ホームページを作る前に用意するもの

ホームページを作るためには、いくつか必要なものがあります。まずそれらを用意しましょう。

  1. PC(パソコン)
  2. 紙とペン
  3. HTMLエディタ
  4. HTML/CSS辞典
  5. レンタルサーバーの契約
  6. ドメイン取得
  7. FTPクライアント
  8. テスト環境

PC(パソコン)

現在、このページを閲覧しているということは、PCで閲覧していると思われますので、すでにPCはお持ちだと思いますが、ホームページを制作するためのPCスペックについて述べたいと思います。

PCはデスクトップ型とノート型がありますが、どちらでも構いません。最近はノート型でも高スペックですので、省スペースを望まれるのであればノートPCがよいでしょう。画面(ディスプレイ)を大きくしたい、などこだわりたい方はデスクトップPCがお勧めです。

もし、ホームページビルダーのようなオーサリングソフトやPhotoshopのような画像編集ソフトをお使いの場合は高スペックのPCが望ましいです。大抵、そのようなソフトは望ましい使用環境(必要システム構成)が明示されていますので、ご参考ください。

単純にHTMLエディタでホームページを作成する場合はそれほど高スペックのPCは必要ではありません。

モニタは、オーサリングソフトや画像編集ソフトを使用する場合は、大きければ大きいほど作業性は向上します。

また、出来る限り最新版のソフトを使用するほうがバグ等も改善され、快適に作業できると思います。

私が普段使っているPC

私は、ノートPCで、OS:Windows 7(64bit)、プロセッサ:Intel Core i7、メモリ:8GB、というかなり高スペックのPCを使用しています。このくらいないと、ブラウザを複数立ち上げ、PhotoshopやIllustratorを同時に起動した環境下では、快適に作業できません。モニタは17.3インチ、解像度:1600x900pxです。お値段は、Officeなども入れて15万円程度でした。だいたい、このくらいのスペックのPCは、オプションの付け具合にもよりますが、10万~15万で購入できるのではないかと思います。

紙とペン

まずは、PCの前に向かって何か書くのではなく、紙とペンを使って頭の中を整理します。もちろん、Microsoft Word(ワード)を使ってもよいですが、図を描きたいと思ったときは下手でも手で書いたほうが早いです。

紙は、チラシの裏とかに書かずにちゃんと閉じてあるもの、あるいはルーズリーフでもよいですがちゃんと閉じて利用しましょう。折角書いたものがどこかに行ってしまっては悲しいので…。ペンはシャーペンでもボールペンでも何でもよいですが書きやすいものを選びましょう。

私が普段使っている紙とペン

無印良品の「再生紙ダブルリングノート・無地」とドイツ製のシャープペンシルFABER-CASTELL社の「COLORMATICS」です。

HTMLエディタ

必ず、PCに付属している「メモ帳」ではなく、HTMLエディタ(ホームページソフト)を使用しましょう。メモ帳ではホームページを作るための機能が全く備わっていません。お勧めの無料のHTMLエディタは「Tera Pad」や「HTML Project2」です。タグの補完機能が付いていたり、ソースコードが色分けされるのでとても編集しやすくなります。

HTML Project2を使用する際、UTF-8などのファイルが文字化けする場合があるかもしれません。そういうときは、nkf32.dllというのをダウンロードして、HTML Project2のインストールフォルダに入れるとよいらしいです。

WYSIWYG(ウィジウィグ)機能(直接タグを打ち込むのではなく図を編集していく方法)が使いたい場合は無料のalphaEDITや、もっとプロジェクト管理をしっかり行いたい方は、有償の初心者向けホームページ制作ソフト「ホームページビルダー」やWebデザイナー御用達の「Dreamweaver(ドリームウィーバー)」を使用しても構いません。

その他、よく利用されているHTMLエディタには、

などがあります。

最近(2010年夏)は、Macユーザの間では、DreamweaverよりもCoda(コーダ)というエディタが大人気のようで、Macを使っているWebデザイナーさんは、DreamweaverからCodaに乗り換えたって話をよく聞きます。また2012年には新バージョンのCoda2が発売され、Web業界界隈が賑わっていました。

あと、これもかなり開発者向けになるので、初心者さんには敷居が高いかもしれませんが、2014年くらいからWebデザイナーさんの間で話題沸騰中?なのが、BracketsというAdobeから出ているオープンソースのHTMLエディタです。インストール時点ではあまり機能が備わっていないので、プラグインを色々と付けないといけないのですが、独自のカスタマイズができるので、自分の使い勝手の良いように自由に変更できるのが良い点です。

お勧めのプラグインとしては、

などです。その他のお勧めプラグインは以下から。

プラグインはBrackets本体から検索して見つけることもできます。

あと、ショートカットを覚えると色々と捗ります。

私が普段使っているテキストエディタ

EmEditor
これほど起動が早くて、高性能なテキストエディタはなかなかないと思います。HTMLやCSSのソースコードの色分けもしてくれるし正規表現やファイル内一括置換もしてくれるのでメインのエディタとして使用しています。無料バージョン(EmEditor Free)と有料バージョンがありますが、私は有料のほうを利用中です。

Adobe Dreamweaver
主にDreamweaverのテンプレート機能を利用して新規にWebサイトを作成する際に利用しています。

Aptana
無料の上級者向けのオーサリングツールです。Webサイトをゼロから構築するときなどに便利です。タグを補完してくれたり、ソースを記述している最中にデバック(バグを見つけて修正することを)してくれたりします。非常に高性能なのですがそれ故に初心者の方にはかなり敷居が高いと思います。最近はDreamweaverを使い始めたのでほとんど出番がなくなってしまいました・・・。

HTML/CSS辞典

やはり、辞典はひとつは必ず持っていたほうがよいです。しかし高価なものですので、どうしても購入するのは・・・とお思いの方は、Webサイトでリファレンスなどをブックマークしておくと便利です。

お勧めのリファレンスサイト

レンタルサーバーの契約

ホームページをインターネット上で公開するためには「Webサーバ」というものが必要です。普通はレンタルします。
レンタルサーバーは本当にピンからキリまであります。ホームページの用途にもよりますが、ネット販売ビジネスで使用するなら年間数万円のきちんとしたもの、個人商店などの情報発信に使用するならもっと安価なものでもよいと思います。

レンタルサーバーを選ぶポイントは、

  1. まともな会社か調べる
  2. 容量を確認する
  3. どんなプログラムが使用できる確認する

などです。

まともな会社か調べる、というのは非常に重要で、2012年6月にファーストサーバというレンタルサーバー会社が、5千もの顧客データを削除してしまった事件がありましたが、過去にそのような事件を起こしていないか、評判はどうかというのはしっかりと調べておきましょう。

また、レンタルサーバー会社を過信せず、定期的にサーバの情報のバックアップをとっておきましょう。

お勧めレンタルサーバー

個人的にお勧めするレンタルサーバーです。非常に格安になっています。

さくらのレンタルサーバ




ロリポップ!




私が契約しているレンタルサーバー

ロリポップ!
サイトが怪しげですが(笑)まともな会社です。月263円で容量8GBという破格な値段ですが、サポートもしっかりしています。

さらに、月105円で容量1GBという信じられないくらいの破格な値段のプランもあります。これなら中学生や高校生でもお小遣いを出して、Webサイトが作れそうですね。

ドメイン取得

レンタルサーバーを契約するとともにドメインも取得します。ドメインというのは、要はホームページのURLです。ホームページの住所みたいなものですね。普通はレンタルサーバーのサブドメインが使用できますが、できれば独自ドメインを取得することをお勧めします。まともな会社であれば、レンタルサーバーを契約する際にドメインの取得も代行してくれるはずです。

ドメインは年間契約をするのが一般的ですが、更新を忘れないようにしましょう。一度手放してしまうとドメインが悪用されてしまったり転売に利用されたりするので注意です。

私が利用したドメイン取得代行サービス

ムームードメイン
上記、ロリポップ!と同じ会社が経営しています。年間380円からドメインが利用できるのでかなりお得です!

FTPクライアント

PCで作ったホームページをWebサーバにアップロードするためのツールです。普通はレンタルサーバーの管理画面からアップロードできるのですが、専用のツールを使ったほうが便利です。FFFTPという無料のFTPクライアントがお勧めです。また、SSHプロトコルを利用して安全にファイルを転送したい場合は、SFTP(SSH File Transfer Protocol)ファイル転送クライアント、あるいは、FTPS(File Transfer Protocol over SSL/TLS)ファイル転送クライアントを使用するのがお勧めです。ただし、SFTP/FTPSファイル転送はサーバが対応していない場合もあるので、まずは使用できるか確認してみましょう。先ほど紹介したロリポップ!というレンタルサーバーでは、SFTPファイル転送が利用できます。

2013年1月現在、マスターパスワード機能に対応しているのは、FFFTP、WinSCP、NextFTP4などらしいです。FileZillaはマスターパスワード機能がついていません。FFFTPは日本製なので日本語です。他のは海外製ですが日本語にできるようです。

Gumblar(ガンブラー)ウィルス対策として、FTPS/SFTP転送、マスターパスワード設定をすることをお勧めします。

テスト環境

テスト環境を用意します。といってもご自身のPCのブラウザでチェックができます。
PHPなどのプログラムを使用する場合は、別途Webサーバが必要です。ご自身のPCをWebサーバ化することもできます。

ホームページの動作確認をするブラウザですが、できればFirefoxあるいはGoogle Chromeというブラウザをお勧めします。これらのブラウザは、Web標準に準拠したソースコードを正しく理解してくれますし、ホームページを制作する際にとても便利な「アドオン」というプラグイン機能があります。

ホームページ制作に役立つアドオンに関しては、以下のサイトをご参照ください。時間があればこちらでも紹介したいと思います。

私のテスト環境

最近は公開サーバにテスト環境のディレクトリを置くことが多いです。ただし、HTMLファイルなどの静的なファイルに限ります。PHPなどのプログラム言語の動作確認をするときは、バグが有った場合サーバに負荷が掛かり過ぎたりして最悪ダウンしまう可能性もあるので、レンタルサーバ上では開発途中の動作確認はしないようにしましょう。

ページの最終更新日:2015.08.16

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る