「Webサイトを作るにはまず何から始めればいいの？」という疑問を持つ方はたくさんいます。
サーバー契約、ドメイン取得、デザインなど何から手をつければよいのかわからない方も多いのではないでしょうか。
今回は、そのよな方のためにWebサイトを公開するまでの手順を解説します。
「Webサイト制作は難しい」というイメージを持つ方が多いですが、初心者でも簡単に制作することが可能です。
この記事だけで必要な準備が全て完結するので、ぜひ参考にしてください。
下準備
Webサイトを必要になるのが「ドメイン」と「サーバー」です。
この2つがなければ、制作したWebサイトをインターネット上に公開することができません。
Webサイト制作に便利なのが「CMS」です。
このツールは、必要不可欠ではありませんが、コンテンツ管理などが楽になるので使用することをオススメします。
まずは、ドメイン・サーバー・CMSこの3つを説明します。
ドメイン取得
ドメインを取得できるオススメのサービスを紹介します。
お名前.com
GMOインターネット株式会社が運営するのが「お名前.com」です。
ドメインサービスで一番知名度が高く、安い値段で取得できることが特徴になります。
ドメインは、契約期間中では継続的に料金が発生するので、できるだけ安い値段で契約するようにしましょう。
キャンペーンも頻繁におこなわれており、ドメイン代が安くなる機会がたくさんさるので、常にチェックすることをオススメします。
サイトURL：https://www.onamae.com/
ムームードメイン
ムームードメインは、GMOペパボ株式会社が運営するドメイン取得サービスになり、GMOインターネット株式会社のグループ会社が運営しています。
業界最安値ではありませんが、最安値水準で取得することができ、お名前.comと価格はほとんど変わりません。
管理画面が見やすく、初心者も安心して使うことができます。
レンタルサーバーの「ロリポップ」や「ヘテルム」との相性が良く、簡単にドメイン設定できます。
他にも、ネットショップ運営サービス「カラーミーショップ」、ホームページ作成サービス「グーペ」とも相性が良いのが特徴です。
他のサービスとの連携を意識する方には、ムームードメインがオススメです。
サイトURL：https://muumuu-domain.com/
スタードメイン
ネットオウル株式会社が運営するドメイン取得サービスが、スタードメインです。
サーバーも運営しており、スタードメインでドメインを取得すると特典として、「スタードメイン特典プラン」を利用することができます。
ドメインを取得した流れで設定でき、Webサイトを公開することができます。
デメリットとして、このプランではデータベースを利用不可なので、動的なサイトを運営することはできません。
サイトURL：https://www.star-domain.jp
エックスドメイン
エックスドメインは、レンタルサーバーとして知名度の高いエックスサーバが運営しています。
エックスサーバーとエックスドメインは連携が簡単なので、エックスサーバーを利用する予定の方はエックスドメインを使用するのがオススメです。
エックスドメインを利用すれば、制限はありますが無料のレンタルサーバーを使用できます。
他のドメイン取得サービスと比べて、少し値段が高くなるのがデメリットです。
サイトURL：https://www.xdomain.ne.jp/
サーバー
オススメのレンタルサーバーを紹介します。
ロリポップ
一番安く利用できるサーバーとして有名なのが、ロリポップです。
月額105円から利用できるので、デモサイトや初心者にオススメのサーバーになります。
とにかく安く利用したい方には、ロリポップがオススメです。
管理画面が使いにくく、集中的にアクセスが集まるとサーバーがダウンしてしまうところがデメリットになります。
コストを抑えているため、電話でのサポートはなく、メール・チャットでのサポートになっています。
サイトURL：https://lolipop.jp/
エックスサーバー
エックスサーバーは3つのプランが用意されており、X10・X20・X30の３つから選ぶことができます。
X10は1050円、X20は2100円、X30は4200円の料金設定です。
ロリポップと比べると料金は高くなっていますが、機能性が高くなっています。
転送量・MySQL量などが多く、コスパが良いうえに、1つのプランを契約するだけで複数のウェブサイトを公開できるのが魅力です。
EC-CUBEもインストールできるので、ECサイトを運営することも可能です。
高機能サーバーですが、デメリットになるのが値段になり、安さを追求する方には向いていません。
サイトURL：https://www.xserver.ne.jp/
さくらインターネット
サポートの充実性と回線の安定性に定評があるサーバーといえば、さくらインターネットになります。
最安値のライトプラン(月額129円)を契約しても電話でのサポートを受けれます。
レンタルサーバーで電話対応している会社は珍しく、初心者も安心して利用できるのが人気の理由です。
転送量も多く、アクセスが集中してもダウンする可能性が低いのが魅力です。
マルチドメインの数が少ないので、複数のサイトを公開したい方にはオススメしません。
サイトURL：https://www.sakura.ne.jp/
CMS
必須のツールではありませんが、コンテンツの管理にかかる時間を大幅に削減できるのがCMSの機能です。
作業時間を短縮することができ、個人・法人問わず導入する事例が増えています。
WordPress
高機能なCMSとして歴史も長く、利用者の多いのがWordPressです。
豊富なプラグインがあり、高い拡張性がWordPressの特徴になります。
利用者が多いため、わからないことや困ったこと場合は、簡単に情報を集めることができます。
無料で使用でき、アイキャチ画像、パンくずリスト、カテゴリー設定などブログに欠かせない機能がすぐに使えるのも魅力です。
既存のテーマを導入すると、Webサイトを一からデザインする必要がなく、すぐに綺麗なレイアウトのサイトができます。
インストールURL：https://ja.wordpress.org/
EC-CUB
ECサイトのCMSといえば、EC-CUBが人気です。
日本製で信頼も高く、国内の導入事例も多いため、安心して使用できます。
WordPressと同じで無料で使用できるので、初期投資を低く抑えれるのが魅力です。
ログイン機能・商品管理機能・受注管理機能・コンテンツ管理・メルマガ配信・売上集計機能などECサイトに必要な機能が搭載されています。
無料で使用できますが、サポートなどは一切なく、エラーや問題が生じた場合は、自分で対処しなければならないところがデメリットです。
ネットショップを運営したい方にオススメのCMSになります。
サイトURL：https://www.ec-cube.net/
デザイン
Webサイトを公開できる下準備が整備できると、次に必要になるのはデザインです。
美しく、おしゃれなデザインも素晴らしいですが、重要なのはユーザーが使いやすい「ユーザーファースト」になります。
HTML・CSS・Javascriptなどのプログラミング言語が使用できる方は、自分のオリジナルサイトが制作できます。
そのような言語が使用できない方も、WordPressのテンプレートを導入することで使いやすく、デザイン性の高いサイトを使用できるので安心してください。
有料テンプレート
オススメの有料テンプレートを紹介します。
ストーク
徹底的にユーザーファーストを追求した有料テンプレートとして人気なのがストークです。
美しいレイアウト、カスタマイズのしやすさ、機能の充実性など万能なテンプレートになります。
特に素晴らしいところは、モバイルファーストに設計されており、スマートフォンでの閲覧にも綺麗なレイアウトが保たれています。
SNSボタン機能・ランディングページ作成機能・スライドショー機能なども搭載しており、プラグインなどで機能を拡張しなくても十分に使えるのがメリットです。
サイトURL：https://open-cage.com/stork/
NEXTAGE
NEXTAGEはコーポレートサイトとして使用できるテンプレートです。
HTML・CSSが全くわからなくても使用できるので、Webに詳しい方が会社にいなくても、運用できます。
色の配色、広告の差し替えなども簡単にでき、レスポシブにも対応しています。
少しサイトデザインが古く、全体的なレイアウト変更は難しいところがデメリットです。
サイトURL：http://design-plus1.com/tcd-w/tcd021
PRECIOUS
NEXTAGEは、重厚感のあるデザインですが、PRECIOUSはカジュアルなデザインが特徴です。
商品を美しく魅せることに重点を置いており、スライダー機能を実装しています。
家具・雑貨などを取り扱う企業に向いているテンプレートになり、デザインだけでなく、実用性も高いので、オススメです。
サイトURL：http://design-plus1.com/tcd-w/tcd019
LAW
弁護士・公認会計士・司法書士など士業の方にオススメなのが、LAWです。
大きなヘッダー画像と動きのあるメニューが、他のサイトとの違いになります。
誠実性・信頼性をテーマにして制作されているのが、このテンプレートの魅力です。
サイトURL：http://design-plus1.com/tcd-w/tcd031
無料テンプレート
無料で使えるテンプレートを紹介します。
有料テンプレートと同じように機能性、デザイン性に優れた無料テンプレートがたくさんあるので紹介します。
LION BLOG
LION BLOGは無料とは思えないほどデザイン性が優れています。
ブログする方に向けて制作されたテンプレートになり、初めてブログ運営する方にオススメです。
レスポシブにも対応しており、スマートフォンでの閲覧も大丈夫です。
カスタマイズが難しいところがマイナスポイントになります。
サイトURL：http://lionblog.fit-jp.com/
BizVektor
無料で商用利用できるテーマになり、様々なジャンルの企業に使用できる高い汎用性が魅力です。
SNSボタンも設置でき、機能性にも優れています。
シンプルで使いやすいですが、レイアウトが古いのがデメリットです。
サイトURL：http://sample.bizvektor.com/
Emanon Free
スライド機能もあり、動的なデザインも可能なEmanon Free。
ブログ向けの設計になっていますが、コーポレートサイトとしても使用できます。
有料版もあるので、お試しに無料版から使い始めて気に入れば、有料版に切り替えましょう。
サイトURL：https://wp-emanon.jp/emanon-free/
Sydney
無料のビジネス用テンプレートの中で、特におしゃれなのがSydneyです。
ヘッダー、ナビゲーションなど複数のバリエーションが用意されています。
レスポシブ対応はもちろん、ランディングページも簡単に作成できます。
IT企業やベンチャー企業などが使いやすいデザインになっているのが特徴です。
海外風のおしゃれなテンプレートを使いたい方にオススメです。
saitoURL：http://demo.athemes.com/sydney/
Total
Totalは写真をメインにしたテンプレートです。
写真をできるだけ多く見せたいという方に向いています。
最近の傾向としては文章よりも写真を中心にしたWebサイトが流行しているので、そういう意味ではこのテンプレートはピッタリです。
英語で設定しなければならないので、英語が苦手な方は苦戦します。
サイトURL：http://demo.hashthemes.com/total/
オリジナルテーマ
既存のテーマ以外にもオリジナルのWebサイトを制作することは可能です。
しかし、その場合必要になるのが、HTMLやCSSなどのプログラミング言語になります。
このようなスキルがある方は、ゼロからWebサイトを制作できます。
既存のテンプレートを使用しても、このような言語が使える方であれば、カスタマイズすることも可能です。
画像
サイト制作において必要になるのが画像です。
テンプレートと同じように画像素材も有料と無料があります。
有料で提供しているサイトと無料で提供しているサイトを紹介します。
有料画像素材
PIXTA
約3000万点の写真素材・イラスト素材・動画素材・音楽素材を扱っているサイトです。
写真素材は、人物・動物・風景など様々な素材があります。
素材によって値段は違いますが3000円〜10000円が相場です。
種類がたくさんあるので、求めている写真に出会う確率は高くなります。
サイトURL：https://pixta.jp/
ビジンソザイ
女性モデルに特化した写真素材サイトです。
ヘアスタイル・化粧・スキンケアなどに関するメディアにサービスになります。
価格は4000円〜50000円が相場です。
サイトURL：http://bijinsozai.com/
fotostock
世界最大級の写真素材を提供するサイトになり、その数は50000点以上です。
人物・動物・風景・食べ物・美容・ビジネスなど様々なジャンルの写真があります。
すごいところは写真の数だけではありません。
価格が他のサイトと比べとても安く、184円から購入できます。
写真素材に困ったときは、このサイトにアクセスすることをオススメします。
サイトURL：https://www.foto.ne.jp/
shutterstock
海外の写真素材サイトになり、外国人のモデルを求める方にオススメです。
ビジネス・抽象画・ファッションなどジャンルは幅広いですが、全ての写真がとてもおしゃれです。
月額制のプランもあり、リーズナブルな値段で購入できます。
サイトURL：https://www.shutterstock.com
Aflo
大手写真素材サイトと比べると、品数は少ないですが、細かくカテゴリー分けされているので、探している素材を簡単に見つけることができます。
バックグラウンド素材や合成向き素材など加工するための素材も提供しているのが特徴です。
サイトURL：http://www.aflo.com/
無料画像素材
無料で使用できる画像素材サイトを紹介します。
PAKUTASO
2011年から運営している老舗の無料素材サイトです。
使って楽しい、見て楽しい」をコンセプトにしており、ゾンビに扮した男性とデートする女性の写真など他の写真にはない特徴的な画像がたくさんあります。
商用利用可能ですが、一部クレジット表記が必要になるので、注意してください。
サイトURL：https://www.pakutaso.com/
足成
食べ物・ビジネス・スポーツ・アーティストなど様々なジャンルの写真が提供されています。
写真の数は、他のサイトと比べると少ないのが、デメリットです。
画像のサイズもバラバラなので、使用する際にはトリミングするなどの加工が必要になる場合があります。
サイトURL：http://www.ashinari.com/
写真AC
写真ACは、画像のザイズを選ぶことができ、豊富な種類の写真があります。
「イラストAC」や「フォントAC」なども運営しており、これらも無料で使用できるので、オススメです。
総会員数が270万人以上を誇り、多くの方が利用している信頼できるサービスです。
サイトURL：https://www.photo-ac.com/
フード・フォト
食べ物や飲み物に特化した写真素材サイトです。
全てプロのカメラマンが撮影しているので、高品質な写真を手に入れることができます。
食べ物を扱うWebサイトにオススメのサービスです。
サイトURL：https://food.foto.ne.jp/
O-DAN
海外の無料画像素材サイトです。
海外のおしゃれな画像が欲しい方は、ぜひチェックしてください。
カテゴリー分けされていないので、お目当の画像を探しにくいのが難点です。
サイトURL：http://o-dan.net/ja/
ツール
プロの現場でも使われているツールを紹介します。
初心者の方も簡単に利用できるので、参考にしてください。
Chrome Developer Tools
Webサイトを制作する上で、必ず使用するのが開発者ツールです。
Chrome Developer ToolsはChromeにしか搭載されていない機能になるので、使用する際にはChromeブラウザが必要になります。
(Firefoxにも同じような機能を持つFirebugという機能があります。)
ChromeダウンロードURL：https://www.google.co.jp/chrome/browser/desktop/index.html
Chromeブラウザを立ち上げてWindowsの方は「F12」、Macの方は「command」+「option」+「i」を押すとChrome Developer Toolsが起動します。
この機能は、Chromeのデフォルト機能なので、プラグインなどをインストールして、機能拡張しなくても使用できます。
1.一番左上にある正方形と矢印のアイコンをクリックすると要素を選択でき、その要素のHTMLやCSSを調べることができます。
また、ブラウザ上でHTML とCSSの書き換えができ、制作や修正にかかる手間を短縮できるのがメリットです。
2.1の隣にあるボタンをおすとスマートフォンやタブレットなどの表示に切り替えることができます。
テスト段階ではデベロッパーツールで確認して公開する前の最終確認では、実機で確認するようにしましょう。
Googleアナリティクス
アクセス解析として必要になるツールがGoogleアナリティクスです。
検索順位向上やアクセス解析に必須のツールなので、必ず導入してください。
こちらの記事に導入方法や画面の見方を説明しています。
https://kumaweb-d.com/service/seo-how-to/
サーチコンソール
Googleアナリティクスと同じように、サーチコンソールはGoogleが公式に提供しているツールです。
「検索クエリ」や「Googleからのペナルティ」などを調べることができます。
サーチコンソールの導入方法や使い方などをこちらの記事で紹介しています。
https://kumaweb-d.com/service/seo-how-to/
llustrator
チラシなどの印刷物のデザインにも使用されるツールがllustratorです。
Webサイトのレイアウトやデザインにも使用することができます。
イラストが扱いやすく、イラストをコピーしてHTML内に貼り付けるだけでSVGデータとしても扱えるので、レスポンシブにも対応できます。
こちらのツールはアドビの製品になり、月額2180円で利用できます。
サイトURL：http://www.adobe.com/jp/products/illustrator.html
Photoshop
Webデザインや画像加工のツールとして人気なのがPhotoshopです。
Webサイトでは、多くの画像を使用する上に、デザインの良し悪しを大きく左右します。
画像加工だけでなく、Webサイト全体のレイアウトをPhotoshopでおこなう方もいます。
llustratorと違い、画像加工がメインなのでイラスト制作や修正には向いていません。
Photoshopは月額980円で利用できる有料ツールですが、ブラウザで画像加工できる無料ツール「pixlr」もオススメです。
pixlrサイトURL：https://pixlr.com/editor/
PhotoshopサイトURL：http://www.adobe.com/jp/products/photoshop.html
テキストエディタ
コーディングに必要になるのがテキストエディタです。
テキストエディタによって作業スピードが大幅に変わるので、自分に合ったエディタを見つけるようにしましょう。
Sublime Text
恋に落ちるエディタとして多くの方から愛されているSublime Text。
WindowsとMac両方に対応しているためパソコンさえ持っていれば使用できます。
海外産のツールですがプラグインを利用することで日本語化もできます。
抜群の操作性と高い拡張性、おしゃれな見た目が人気の秘密です。
高機能なのに無料で利用できるのが最大のメリット。
こちらの記事でSublime Textの詳しい使い方や設定方法などを解説しています。
https://kumaweb-d.com/web/sublime-text/
サイトURL：https://www.sublimetext.com/
ATOM
Sublime Textと並ぶ人気のエディタになり、Sublime Textにはない便利な機能などプラグインを使って実装することができます。
ATOMもWindowsとMac両方に対応しています。
このツールも無料で使用でき、使いやすいのでオススメです。
サイトURL：https://atom.io/
TeraPad
日本で開発された国産のエディタになり、全て日本語で表示されるため、英語が苦手な方にオススメのエディタです。
Windowsのみ対応しているエディタなので、Macの方は使用することができません。
スンプルな機能で使いやすさは抜群です。
サイトURL：http://www5f.biglobe.ne.jp/~t-susumu/
Notepad++
こちらのエディタもWindows専用のツールになり、外国で開発されましたが日本語での使用が可能です。
様々な文字コードに対応しており、プログラミングする上で問題なく、使用できます。
サイトURL：https://notepad-plus-plus.org/
mi
Mac専用のテキストエディタになり、Macユーザーに長い間愛されています。
シンプルな機能で動作が早いのが魅力です。
自称機能やスペルチェックなど必要最小限の機能だけで利用したい方にオススメです。
サイトURL：http://www.mimikaki.net/
まとめ
今回は、Webサイト制作に必要なツールを紹介しました。
手順をもう一度まとめると以下のようになります。
1.ドメイン取得
2.サーバー契約
3.Webサイト制作
このような流れを参考に取り組んでください。