ウェブで何かするのにかかるコスト

  1. ウェブの仕組み
    1. URL とは何か
    2. インターネットの仕組み
    3. ウェブサーバーとは
    4. ドメイン名とは
    5. ハイパーリンクとは
  2. ツールとセットアップ
    1. GitHub Pages の使い方
    2. Google App Engine を使ってウェブサイトを公開する方法
    3. ウェブサーバーにファイルをアップロードするには
    4. ウェブサイトが正しく動作することを確認するには
    5. ウェブサイトを作るのにどんなソフトウェアが必要か
    6. ウェブで何かするのにかかるコスト
    7. どんなテキストエディターが利用できるか
    8. ブラウザーの開発者ツールとは
    9. ローカルテストサーバーを用意するには
  3. デザインとアクセシビリティ
    1. アクセシビリティとは
    2. アクセシビリティを推進する HTML の機能
    3. ウェブサイトのデザインは何から始めればよいか
    4. すべての種類のユーザーのためにデザインするには
    5. 一般的なウェブレイアウトには何が含まれているのか
  4. よくある CSS の問題の解決
    1. CSS の一般的な質問
    2. CSS 生成コンテンツの使用
    3. アイテムを中央揃えするには
    4. テキストに影を追加するには
    5. ポインターを当てるとボタンの色を変えるには
    6. ボックスを半透明にするには
    7. 最初の段落を強調表示するには
    8. 段落の最初の行を強調するには
    9. 画像を歪ませずにボックスを埋めるには
    10. 装飾的なボックスの作成
    11. 要素に影を追加するには
    12. 見出しの直後に来た段落を強調表示するには
  5. よくある HTML の問題の解決
  6. よくある JavaScript の問題の解決

ウェブに関わることは、見た目ほど安いものではありません。この記事では、あなたがどれくらいの費用を負担しなければならないか、またその理由について説明します。

前提知識: すでにどのソフトウェアが必要かウェブページやウェブサイトなどの違いドメイン名とは何かを理解していること。
目標: ウェブサイトを作成するための完全なプロセスを確認し、各ステップでどれくらいのコストがかかるかを確認すること。

概要

ウェブサイトを立ち上げるとき、費用は何も掛からないかもしれませんし、青天井かもしれません。 この記事では、費用の有無にかかわらず、どのように準備し、またどれだけ費用がかかるかについて議論します。

ソフトウェア

テキストエディター

Windows のメモ帳、Linux の Gedit、Mac の TextEdit などのテキストエディターを使った経験はおありでしょう。色分けしたり、文法をチェックしたり、コードの構築を手助けしたりするエディターを選択すれば、コードを書くのが楽になります。

無料のエディターは多くあります。たとえば、 BracketsBluefishTextWranglerEclipseNetbeansVisual Studio Code などです。また Sublime Text のように好きなだけ試用できるが、料金を支払ったほうが良いものもあります。なかには、 PhpStorm のように、購入ライセンスによって、価格が数百円から 2 万円程度になるものもあります。 Microsoft Visual Studio は数万円から数十万円しますが、 Visual Studio Express は個人やオープンソースプロジェクトでは無料で使えます。 有料ソフトウエアには、無料の試用期間を設けているものもあります。

最初に何種類かのエディターを試して、用途に合うのはどれか調べるといいでしょう。 HTMLCSS、それに JavaScript で簡単なコードを書くのであれば、シンプルなエディターをお勧めします。

テキストエディターの品質と使いやすさは、あまり価格と連動しません。実際に使ってみて、目的に合うか調べるようにしてください。例えば Sublime Text は安価ですが、多くの無料プラグインがあり、拡張性が高いエディターです。

画像エディター

お使いのシステムには、簡単な画像エディターやビューアーが入っているはずです。 Windows ではペイント、 Ubuntu では Eye of Gnome、 Mac では Preview などです。これらのプログラムは比較的機能が限られていて、レイヤーやエフェクトを追加したり、グループ化したりすることができる、より強力なエディターがすぐに必要になるでしょう。

編集ソフトは無料のもの (GIMP, Paint.NET)、やや高価なもの (PaintShop Pro, less than $100)、または数百ドルのもの (Adobe Photoshop) もあります。

これらは似たような機能を持っているので、どれを使用しても構いません。この中には様々な機能を網羅しているソフトもありますが、すべての機能を使う日は決して来ないでしょう。 ある時点で他の設計者とプロジェクトを交換する必要がある場合は、彼らがどのツールを使用しているかを調べる必要があります。 編集ソフトは完成したプロジェクトを標準のファイル形式にエクスポートできますが、各編集ソフトは進行中のプロジェクトを独自の特別な形式で保存します。 インターネット上のほとんどの画像は著作権で保護されているので、使用する前にファイルのライセンスを確認することをお勧めします。 Pixabay のようなサイトは、 CC0 ライセンスの下で画像提供を行なっているので、商用利用のための変更・編集を加えても公開することができます。

メディアエディター

ウェブサイトに動画や音声を入れたい場合は、オンラインサービス(YouTube、Vimeo、Dailymotion など)を埋め込むか、自作の動画を入れることができます(帯域幅のコストについては下記をご覧ください)。

音声ファイルの場合、フリーソフト(Audacity, Wavosaur)、数百円の有料ソフト(Sound Forge, Adobe Audition)などがあります。同様に、動画編集ソフトもフリーソフト(PiTiVi, OpenShot for Linux, iMovie for Mac)、低価格のもの(Adobe Premiere Elements)、高価格のもの(Adobe Premiere Pro, Avid Media Composer, Final Cut Pro)があります。デジタルカメラに付属しているソフトウェアで、すべてのニーズを満たすことができるかもしれません。

公開ツール

また、ファイルをアップロードする方法も必要です。自分のハードドライブから遠くのウェブサーバーにアップロードします。そのためには、 (S)FTP クライアント, RSyncGit/GitHub などの公開ツールを使用する必要があります。

それぞれのオペレーティングシステムには、ファイルマネージャーの一部として、 (S)FTP クライアントが入っています。 Windows のエクスプローラー、 Nautilus (Linux の一般的なファイルマネージャー)、 Mac の Finder はすべてこの機能を入れています。しかし、ローカルやリモートのディレクトリーを並べて表示したり、サーバーのパスワードを格納するために、専用の (S)FTP クライアントを選ぶ人がよくいます。

(S)FTP クライアントをインストールする場合、信頼性が高く無料の選択肢がいくつかあります。例えば、すべての全プラットフォーム用の FileZilla、 Windows 用の WinSCP、 Mac または Windows 用の Cyberduckその他があります。

FTP は本質的に安全ではないので、 SFTP - 最近ではほとんどのホスティングサイトが既定値で提供している安全で暗号化されたバージョンの FTP - または SSH 上の Rsync のような別の安全なソリューションを使用するようにすべきです。

ブラウザー

ブラウザーはすでにお持ちか、無料で取得することができます。必要に応じて、 Firefox をこちらで、または Google Chrome をこちらでダウンロードしてください。

ウェブアクセス

コンピューター / モデム

コンピューターが必要です。費用は、予算や住んでいる地域によって大きく異なります。最小限のウェブサイトを公開するには、エディターとウェブブラウザーを起動できる基本的なコンピューターがあればよいので、入門レベルはかなり低く抑えることができます。

もちろん、複雑なデザインや写真の加工、音声や動画のファイルを作成する場合は、より本格的なコンピューターが必要になります。

また、遠隔地のサーバーにコンテンツをアップロードする必要があるため、モデムが必要になります(後述の「ホスティング」参照)。インターネット接続は、 ISP から月々数百円で借りることができますが、地域によって費用が異なる場合があります。

ISP アクセス

十分な 帯域幅があることを確認してください。

  • 低帯域幅のアクセスでも、「シンプルな」ウェブサイト(適度な大きさの画像、テキスト、いくつかの CSS と JavaScript)に対応するのには十分かもしれません。その場合、モデムのレンタル料を含めて、数百円程度のコストで済むでしょう。
  • 一方、何百ものファイルを扱う高度なウェブサイトや、重い動画・音声ファイルをウェブサーバーから直接配信する場合は、DSL、ケーブル、ファイバーアクセスなどの広帯域接続が必要になります。この場合、低帯域幅のアクセス回線と同じ料金になる場合ありますし、より専門的なニーズには月額数万円かかることもあります。

ホスティング

帯域幅を理解する

ホスティングプロバイダーは、ウェブサイトが消費する帯域幅の量に応じて料金を請求します。これは、一定時間内に何人の人々やウェブクローリングロボットがコンテンツにアクセスしたか、またコンテンツがどれだけのサーバー空間を占有したかによって決まります。動画を YouTube, Dailymotion, Vimeo などの専用サービスに格納するのが一般的なのは、このためです。例えば、プロバイダーは「合理的な」帯域幅の使用のために、 1 日あたりの訪問者を数千人までに制限しているプランを提供しているかもしれません。ただし、これはプロバイダによって定義が異なるため、注意が必要です。信頼性の高い、有料の、私用ホスティングは、月額 10 〜 15 ドル程度を要することに留意してください。

メモ: 「無制限」の帯域幅というものは存在しません。膨大な量の帯域幅を消費する場合は、膨大な金額を支払うことが予想されます。

ドメイン名

ドメイン名は、ドメイン名提供会社(レジストラー)を通じて購入する必要があります。ホスティングプロバイダーがレジストラーで ある場合もあります(例えば IonosGandi はレジストラーであり、同時にホスティングプロバイダーでもあります)。ドメイン名は通常、年間 5 ~ 15 ドルかかります。このコストは、以下によって変化します。

  • 現地の事情: 国によってトップレベルドメイン名の価格が異なるため、より高価なものもあります。
  • ドメイン名に関連するサービス: 一部のレジストラーは、住所や電子メールアドレスを独自のアドレスで隠すことにより、 スパム防止機能を提供しています。住所はレジストラーが代行することで提供し、電子メールアドレスはレジストラーのエイリアスで隠蔽することができます。

自分で作るホスティングと「パッケージ」ホスティングの比較

ウェブサイトを公開する場合、データベースの設定(必要な場合)やコンテンツ管理システム (CMS) (Wordpress, Dotclear, spip など)の導入、既製または独自のテンプレートのアップロードなどを、すべてを自分自身で行うことが可能です。

ホスティングプロバイダーの環境を使用することもできますし、月額 10 ~ 15 ドル程度で、あらかじめ CMS がパッケージされた専用のホスティングサービス(Wordpress, Tumblr, Blogger など)を直接契約して利用することもできます。後者の場合、何も支払う必要はありませんが、テンプレートやその他のオプションの制御が難しくなる可能性があります。

無料のホスティングと有料のホスティングの比較

無料のサービスがたくさんあるのに、なぜホスティングにお金を払わなければならないのか、と思うかもしれません。

  • 有料であれば、より多くの自由をお持ちいただけます。ウェブサイトは自分自身のものであり、別のプロバイダーへシームレスに移行することができます。
  • 無料のホスティングプロバイダーは、自分で管理できないところで、コンテンツに広告を追加することがあります。

ファイルを簡単に移動することが可能であり、ほとんどの有料サイトで稼働時間が保証されているため、無料ホスティングに頼るよりも、有料ホスティングに行くことをお勧めします。ほとんどのホスティングプロバイダは、開始するために大きな割引を提供しています。

混合型のアプローチを選択する人もいます。例えば、メインのブログはフルドメイン名の有料ホスティングサービスに置き、自発的で戦略的でないコンテンツは無料ホスティングサービスに置くという方法です。

プロのためのウェブサイト制作会社とホスティング

プロのウェブサイトを望むなら、おそらくウェブ会社に依頼することでしょう。

ここで、コストは以下のような複数の要素に左右されます。

  • 数ページのテキストからなるシンプルなウェブサイトでしょうか?それとももっと複雑な、何千ページもあるようなウェブサイトですか?
  • 定期的に更新しますか?それとも静的なウェブサイトになるのでしょうか?
  • ウェブサイトは、コンテンツ(例えば内部データ)を収集するために、社内の IT 構造と接続する必要があるでしょうか?
  • 今流行っているピカピカの新機能が欲しいのでしょうか?この記事の執筆時点では、クライアントは複雑なパララックスを備えた単一のページを求めています。
  • ユーザーストーリーを考えたり、複雑な UX 問題を解決したりするために広告代理店が必要でしょうか。例えば、ユーザーを引き込むための戦略を作成したり、いくつかのアイデアの中から解決策を選ぶための A/B テストなどです。

また、ホスティングについては、次のような選択肢を検討する必要があります。

  • サーバーが故障したときのために、サーバーを冗長化したいですか?
  • 95% の信頼性で十分でしょうか、それとも 24 時間体制のプロのサービスが必要でしょうか?
  • 注目の超高速専用サーバーが欲しいのか、それとも低速の共有機で対応できるのでしょうか?

これらの質問にどう答えるかによって、サイトのコストは数十万円から数千万円になる可能性があります。

次のステップ

さて、ウェブサイトがどのような費用を要するかを理解したところで、いよいよそのウェブサイトの設計と作業環境の設定を開始することになります。