Webサイトの作り方まとめ【公開まで5分で理解できます！】

この記事では、Webサイトの作り方から公開するまでの流れについてまとめています。

Web制作の知識が全くない方向けにまとめているので、最後まで読んでみてください。

また、コードを書けない方でも利用できるサービスも紹介しているので、利用してみてください。

ではいきましょう！

Webサイトの作り方

まず先に、Webサイトを制作する順番を紹介します。
基本的にはこの5ステップで完成させていきます。

それぞれについて解説していきます。

Webサイト制作の流れ①

PCを用意する

ノートでもデスクトップでもいいので、PCを用意しましょう。
最近だと、iPadやタブレット端末にキーボードを付けて制作する方もいます。

ですが、画面のサイズやキーの打ちやすさからPCをおすすめします。

また、おすすめのPCはこちらでまとめています。

＞＞Web制作におすすめなPC【選び方もまとめています！】

Webサイト制作の流れ②

設計図を作る

おおまかでもいいので、サイトの設計図を用意しましょう。
ブログなのか、会社などで使われるコーポレートサイトなのかによって構成が変わってきます。

イメージとしては、こういった感じです。

また、このサイトの設計図は別の言い方だとサイトマップとも呼ばれたりします。

Webサイト制作の流れ③

エディターを用意する

HTMLやCSSなど、コードを書く際に使います。
有名なものだと、AtomやVisual Studio Code（VSCode）があります。

無料で利用できるものもあるので、ぜひ気に入ったエディタを利用してみてください。

おすすめはVisual Studio Codeです。

Webサイト制作の流れ④

デザイン案を考える

ヘッダーやフッター、メインコンテンツなどのパーツ単位のデザインや、トップページや記事ページなどのページ単位のデザインを決めていきます。

見出しのデザインや画像のサイズ、色、大きさなどを決めます。

Adobe XDなどで作ることが多いです。

案が思い浮かばない際には、いろいろなサイトを調べてみるといいかもしれません。

Webサイト制作の流れ⑤

ファイルを作制する

サイトで表示される内容をファイルにまとめましょう。

Web制作だと、主にこの3種類のファイルと画像が利用されます。

文字と画像を表示されるだけのデザインを気にしないサイトなら、HTMLファイルだけあれば問題ありません。

コードが書けないなら、CMSを使いましょう

コードを書けず上にあるファイルを用意できそうにないなら、CMSを利用するのがおすすめです。

マウスのドラッグアンドドロップ操作だけで見た目や動きのついたサイトを作ることもできます。

詳しいことは後半でまとめるので、そちらを読んでみてください。

サイトを公開する場合に必要なもの

次に、上の項目で完成させたサイトを公開する為に必要なものを紹介します。

この3つを用意できれば、インターネット環境があれば誰でも表示できる状態になります。

公開までに必要なもの①

ドメイン

◯◯.comや〇〇.jpなどで、URLとも言われます。
このサイトの場合だとgi-ve.jpです。

値段の安さと知名度から、お名前ドットコムで取得するのがおすすめです。

文字列や種類に悩んだ際には、こちらの記事を参考に決めてみてください。

公開までに必要なもの②

サーバー

データの保存や受け渡しを行います。

最近のレンタルサーバーだと、マウス操作とちょっとした文字入力だけでほとんどの設定が完了します。

処理速度も速く、月額660円から利用することもできるので、ConoHa WINGがおすすめです。

また、レンタルサーバー比較はこちらの記事を参考にしてみてください・

公開までに必要なもの③

フォルダ

上の項目で作ったファイル類をフォルダーに入れて整理しましょう。
また、画像を圧縮してファイルサイズを小さくしても良いかもしれません。

ここで整理したフォルダをサーバーにアップロードして設定を行えば、先程契約したドメインに接続すると、サイトが表示されるようになります。

コードが書けない際におすすめのCMS

HTMLやCSS、JavaScript等のコードが書けない方は、こちらのCMSを利用してみても良いかもしれません。

それぞれに特徴があるので、自分にあったサービスを利用してみてください。

おすすめのCMS①

WordPress

世界のWebサイトのうち6割程が、こちらのWordPressで制作されていると言われています。

そのぐらいWordPressは世界的にも有名なCMSになります。

コードが書けない方でもカスタマイズがしやすく、コードがかける方にとっても柔軟にカスタマイズを行えるのでおすすめです。

GiveLog

通常だとサーバーやドメインを用意する必要があり、年間1万円程度かかるWordPressですが、私達のサービスGiveLog（ギブログ）を利用することで永久無料で利用することが可能です。

初期設定のサポートもついているので、ぜひ一度利用してみて欲しいです。

おすすめのCMS②

Wix

こちらもかなり有名なCMSで、マウスでのドラッグアンドドロップ操作のみでWebサイトを制作することができます。

パソコンとスマートフォンで表示を変えたり、サイトに動きをつけることもできるのでかなりおすすめです。

ですが、無料プランだと動作が重たく広告が入ってしまうなどのデメリットがある為、最低でもベーシックプラン（月額900円）以上がおすすめです。

試しに使ってみる分には無料でも十分なので、サイト制作を始めてみたい方は利用してみましょう。

おすすめのCMS③

STUDIO

近年人気と知名度を上げています。
また、日本で制作されたCMSなので、サポートも他のCMSに比べると手厚く感じられると思います。

他のCMSに比べてデザインを意識している印象があるので、こだわったサイトを制作したい人にはおすすめです。

まだまだある、Web制作ツール。

いま紹介してきたCMS以外にも、まだまだたくさんのWeb制作に使えるCMSがあります。

より多くのCMSから比較したいという方はぜひこちらの記事を参考にしてみてください。

＞＞Web制作におすすめのCMSは？【◯種類を比較しました！】

作れないなら、外注するのがおすすめです

ここまではWebサイトを自分で作る方法についてまとめてきました。

ですが、自分自身で作れない方や、納得のいかないデザインになった方もいるかと思います。

そういった場合には、Webサイトを別の業者に制作してもらう（外注する）ことをおすすめします・

外注することで得られるメリットやデメリットは別の記事でまとめているので、発注前に確認しておきましょう。

＞＞Web制作は外注がおすすめ？【プロに任せるメリットを解説します！】

なお、私達もWebサイトの制作や運用をサポートしているので、まずはお問い合わせをしてみてください。

まとめ。

最後に、この記事のまとめです。
Webサイトは、この5ステップで完成させていきます。

次に、制作したサイトはこちら3つを用意することで公開することができます。

また、コードが書けない場合にはこちらのCMSを利用してみてください。

また、自分自身で作ることに限界を感じているのなら、外部に委託することをおすすめします。

気になった項目があれば、読み返してみてください！

それではまた、次の記事でお会いしましょう。