「Webサイトを作るにはまず何から始めればいいの?」という疑問を持つ方はたくさんいます。サーバー契約、ドメイン取得、デザインなど何から手をつければよいのかわからない方も多いのではないでしょうか。今回は、そのよな方のためにWebサイトを公開するまでの手順を解説します。「Webサイト制作は難しい」というイメージを持つ方が多いですが、初心者でも簡単に制作することが可能です。この記事だけで必要な準備が全て完結するので、ぜひ参考にしてください。下準備Webサイトを必要になるのが「ドメイン」と「サーバー」です。この2つがなければ、制作したWebサイトをインターネット上に公開することができません。Webサイト制作に便利なのが「CMS」です。このツールは、必要不可欠ではありませんが、コンテンツ管理などが楽になるので使用することをオススメします。ドメイン・サーバー・CMSこの3つを説明します。ドメイン取得ドメインを取得できるオススメのサービスを紹介します。お名前.comGMOインターネット株式会社が運営するのが「お名前.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の3つから選ぶことができます。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-CUBECサイトのCMSといえば、EC-CUBが人気です。日本製で信頼も高く、国内の導入事例も多いため、安心して使用できます。WordPressと同じで無料で使用できるので、初期投資を低く抑えれるのが魅力です。ECサイトに必要な機能が搭載されています。無料で使用できますが、サポートなどは一切なく、エラーや問題が生じた場合は、自分で対処しなければならないところがデメリットです。ネットショップを運営したい方にオススメのCMSになります。サイトURL:https://www.ec-cube.net/デザインWebサイトを公開できる下準備が整備できると、次に必要になるのはデザインです。美しく、おしゃれなデザインも素晴らしいですが、重要なのはユーザーが使いやすい「ユーザーファースト」になります。HTML・CSS・Javascriptなどのプログラミング言語が使用できる方は、自分のオリジナルサイトが制作できます。そのような言語が使用できない方も、WordPressのテンプレートを導入することで使いやすく、デザイン性の高いサイトを使用できるので安心してください。有料テンプレートオススメの有料テンプレートを紹介します。ストーク徹底的にユーザーファーストを追求した有料テンプレートとして人気なのがストークです。美しいレイアウト、カスタマイズのしやすさ、機能の充実性など万能なテンプレートになります。素晴らしいところは、モバイルファーストに設計されており、スマートフォンでの閲覧にも綺麗なレイアウトが保たれています。SNSボタン機能・ランディングページ作成機能・スライドショー機能なども搭載しており、プラグインなどで機能を拡張しなくても十分に使えるのがメリットです。サイトURL:https://open-cage.com/stork/NEXTAGENEXTAGEはコーポレートサイトとして使用できるテンプレートです。HTML・CSSが全くわからなくても使用できるので、Webに詳しい方が会社にいなくても、運用できます。色の配色、広告の差し替えなども簡単にでき、レスポシブにも対応しています。サイトデザインが古く、全体的なレイアウト変更は難しいところがデメリットです。サイトURL:http://design-plus1.com/tcd-w/tcd021PRECIOUSNEXTAGEは、重厚感のあるデザインですが、PRECIOUSはカジュアルなデザインが特徴です。商品を美しく魅せることに重点を置いており、スライダー機能を実装しています。家具・雑貨などを取り扱う企業に向いているテンプレートになり、デザインだけでなく、実用性も高いので、オススメです。士業の方にオススメなのが、LAWです。大きなヘッダー画像と動きのあるメニューが、他のサイトとの違いになります。誠実性・信頼性をテーマにして制作されているのが、このテンプレートの魅力です。サイトURL:http://design-plus1.com/tcd-w/tcd031無料テンプレート無料で使えるテンプレートを紹介します。有料テンプレートと同じように機能性、デザイン性に優れた無料テンプレートがたくさんあるので紹介します。BLOGは無料とは思えないほどデザイン性が優れています。ブログする方に向けて制作されたテンプレートになり、初めてブログ運営する方にオススメです。レスポシブにも対応しており、スマートフォンでの閲覧も大丈夫です。カスタマイズが難しいところがマイナスポイントになります。サイトURL:http://lionblog.fit-jp.com/BizVektor無料で商用利用できるテーマになり、様々なジャンルの企業に使用できる高い汎用性が魅力です。SNSボタンも設置でき、機能性にも優れています。シンプルで使いやすいですが、レイアウトが古いのがデメリットです。ブログ向けの設計になっていますが、コーポレートサイトとしても使用できます。有料版もあるので、お試しに無料版から使い始めて気に入れば、有料版に切り替えましょう。サイトURL:https://wp-emanon.jp/emanon-free/Sydney無料のビジネス用テンプレートの中で、特におしゃれなのがSydneyです。ヘッダー、ナビゲーションなど複数のバリエーションが用意されています。レスポシブ対応はもちろん、ランディングページも簡単に作成できます。IT企業やベンチャー企業などが使いやすいデザインになっているのが特徴です。海外風のおしゃれなテンプレートを使いたい方にオススメです。saitoURL:http://demo.athemes.com/sydney/TotalTotalは写真をメインにしたテンプレートです。写真をできるだけ多く見せたいという方に向いています。最近の傾向としては文章よりも写真を中心にしたWebサイトが流行しているので、そういう意味ではこのテンプレートはピッタリです。英語で設定しなければならないので、英語が苦手な方は苦戦します。サイトURL:http://demo.hashthemes.com/total/オリジナルテーマ既存のテーマ以外にもオリジナルのWebサイトを制作することは可能です。その場合必要になるのが、HTMLやCSSなどのプログラミング言語になります。このようなスキルがある方は、ゼロからWebサイトを制作できます。既存のテンプレートを使用しても、このような言語が使える方であれば、カスタマイズすることも可能です。画像サイト制作において必要になるのが画像です。テンプレートと同じように画像素材も有料と無料があります。有料で提供しているサイトと無料で提供しているサイトを紹介します。扱っているサイトです。様々な素材があります。素材によって値段は違いますが3000円〜10000円が相場です。種類がたくさんあるので、求めている写真に出会う確率は高くなります。サイトURL:https://pixta.jp/ビジンソザイ女性モデルに特化した写真素材サイトです。ヘアスタイル・化粧・スキンケアなどに関するメディアにサービスになります。価格は4000円〜50000円が相場です。物・美容・ビジネスなど様々なジャンルの写真があります。すごいところは写真の数だけではありません。価格が他のサイトと比べとても安く、184円から購入できます。写真素材に困ったときは、このサイトにアクセスすることをオススメします。サイトURL:https://www.foto.ne.jp/shutterstock海外の写真素材サイトになり、外国人のモデルを求める方にオススメです。ビジネス・抽象画・ファッションなどジャンルは幅広いですが、全ての写真がとてもおしゃれです。月額制のプランもあり、リーズナブルな値段で購入できます。サイトURL:https://www.shutterstock.comAflo大手写真素材サイトと比べると、品数は少ないですが、細かくカテゴリー分けされているので、探している素材を簡単に見つけることができます。バックグラウンド素材や合成向き素材など加工するための素材も提供しているのが特徴です。使用できる画像素材サイトを紹介します。PAKUTASO2011年から運営している老舗の無料素材サイトです。使って楽しい、見て楽しい」をコンセプトにしており、ゾンビに扮した男性とデートする女性の写真など他の写真にはない特徴的な画像がたくさんあります。商用利用可能ですが、一部クレジット表記が必要になるので、注意してください。食べ物・ビジネス・スポーツ・アーティストなど様々なジャンルの写真が提供されています。写真の数は、他のサイトと比べると少ないのが、デメリットです。画像のサイズもバラバラなので、使用する際にはトリミングするなどの加工が必要になる場合があります。サイト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/ツールプロの現場でも使われているツールを紹介します。初心者の方も簡単に利用できるので、参考にしてください。ToolsWebサイトを制作する上で、必ず使用するのが開発者ツールです。ToolsはChromeにしか搭載されていない機能になるので、使用する際にはChromeブラウザが必要になります。(Firefoxにも同じような機能を持つFirebugという機能があります。Toolsが起動します。この機能は、Chromeのデフォルト機能なので、プラグインなどをインストールして、機能拡張しなくても使用できます。1.一番左上にある正方形と矢印のアイコンをクリックすると要素を選択でき、その要素のHTMLやCSSを調べることができます。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.htmlPhotoshopWebデザインや画像加工のツールとして人気なのがPhotoshopです。Webサイトでは、多くの画像を使用する上に、デザインの良し悪しを大きく左右します。画像加工だけでなく、Webサイト全体のレイアウトをPhotoshopでおこなう方もいます。llustratorと違い、画像加工がメインなのでイラスト制作や修正には向いていません。Photoshopは月額980円で利用できる有料ツールですが、ブラウザで画像加工できる無料ツール「pixlr」もオススメです。pixlrサイトURL:https://pixlr.com/editor/PhotoshopサイトURL:http://www.adobe.com/jp/products/photoshop.htmlテキストエディタコーディングに必要になるのがテキストエディタです。テキストエディタによって作業スピードが大幅に変わるので、自分に合ったエディタを見つけるようにしましょう。WindowsとMac両方に対応しているためパソコンさえ持っていれば使用できます。海外産のツールですがプラグインを利用することで日本語化もできます。抜群の操作性と高い拡張性、おしゃれな見た目が人気の秘密です。高機能なのに無料で利用できるのが最大のメリット。Textの詳しい使い方や設定方法などを解説しています。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/miMac専用のテキストエディタになり、Macユーザーに長い間愛されています。シンプルな機能で動作が早いのが魅力です。自称機能やスペルチェックなど必要最小限の機能だけで利用したい方にオススメです。サイトURL:http://www.mimikaki.net/まとめ今回は、Webサイト制作に必要なツールを紹介しました。手順をもう一度まとめると以下のようになります。1.ドメイン取得2.サーバー契約3.Webサイト制作このような流れを参考に取り組んでください。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。