Webに関わる、すべての人に。

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

Webサイトの作り方まとめ。【公開まで、5分で理解できます!】
URLをコピーする
URLをコピーしました!

この記事では、Webサイトの制作から公開までの流れについてまとめていきます。
完全初心者でも理解しやすいようまとめています。

ではいきましょう!

ねむ。のプロフィール

ねむ。

高校1年生の頃から、趣味で» ブログを始める。そこからWebサイトを作ることに興味を持ち、仕事にしたいと考え» 株式会社Giveの立ち上げを決意!

ねむ。

高校1年生の頃から、趣味で» ブログを始める。

そこからWebサイトを作ることに興味を持ち、仕事にしたいと考え» 株式会社Giveの立ち上げを決意!

この記事の目次

↓ 私たちが利用しているおすすめのサーバー ↓

サイト制作で使うもの。

サイト制作で使うもの。

まずは、Webサイトを作る上で必要なものを解説します。
大きく分けると、この3つが必要になってきます。

  • サイトの設計図
  • サイトのデザイン案
  • サイトで読み込むファイル

それぞれいついて、もうすこしまとめていきます。

サイト制作で使うもの①

サイトの設計図

サイトの設計図

まずはサイトの設計図が必要になってきます。

図で書くとこういったものです。

コーポレートサイトのサイト設計

このように、必要な機能や記事などを出していきます。

また、ブログなどの場合では、カテゴリーやキーワードもここで出してみてもいいかもしれません。

ブログサイトのサイト設計

サイト制作で使うもの②

サイトのデザイン案

サイトのデザイン案

次に、サイトをデザインしていきます。
ヘッダーやフッター、メインコンテンツなどです。

見出しのデザインや画像のサイズ、文字色などを決めていきましょう。

案が思いつかない場合は、いろいろなサイトを調べてみるといいでしょう。

サイト制作で使うもの③

サイトで読み込むファイル

サイトで読み込むファイル

最後に、サイトで読み込むファイルを用意していきます。

Webサイトの場合だとこの3種類が主に使われます。

  • HTML
    →文字や画像などを読み込む。
  • CSS
    →文字色や文字の大きさ、デザインなどを指定する。
  • JavaScript
    →主に動きを制御する。

文字と画像だけがなれべばいいのであれば、HTMLファイルさえあればサイトは最低限成り立ちます。

コードが書けないなら、WordPressがおすすめです。

実際にコードを書くことは、かなり難しいです。

  • 調べ方がわからない。
  • 何を書いたらいいのかわからない。
  • バグ・エラーの解決方法がわからない。

このような問題が出てくるかと思います。

なので、まずはWordPressというツールを使ってみましょう!
簡単なサイトだと、コードを全く書かずにサイトを作ることができます。

使い方に関してはこちらの記事で解説しているので、ぜひ読んでみてください。

サイトを公開するために必要なもの。

サイトを公開するために必要なもの。

次に、完成したサイトを公開するために必要なものを紹介します。
公開するとは、インターネット環境があれば誰でも表示できる状態にすることを意味しています。

  • ドメイン
  • サーバー
  • ファイル

この3つを用意しましょう!

公開までに必要なもの①

ドメイン

ドメイン

サイトを公開するために必要なもの1つ目がドメインです。
よく見る例だと、◯◯.comや〇〇.jpなどです。

こちらのサービスで取得していきましょう。

他にも取得の際に使えるサービスはたくさんあるので、こちらで比較してみてください。

公開までに必要なもの②

サーバー

サーバー

次に必要なものがサーバーです。
データを保存したり、データの受け渡しを行います。

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

また、おすすめのサーバーはこちらです!

他にもサーバーはいろいろあるので、こちらで比較してみてください。

公開までに必要なもの③

ファイル

ファイル

最後に、さっきの項目で作ったファイルを整理していきます。
画像はまとめて画像フォルダに入れたり、HTMLファイルもまとめてフォルダに入れたり。

画像などは、可能な限り容量を小さくしておきましょう。

用意できない方向けのサイト制作サービス。

用意できない方向けのサイト制作サービス。

先程紹介した、ドメインやサーバーを用意できない方、お金をかけたくないという方もいるでしょう。
ご安心ください。

そういった方向けに、無料で利用できるサービスを3つご紹介します。

おすすめのWeb制作サービス①

GiveLog

GiveLog

GiveLogは、私たちGiveの提供しているサービスです。
上で紹介したWordPressというツールをどこまでも無料で利用でき、そして、サポートまで無料で受けられます。

面倒な初期設定を済ませた状態でスタートできるので、ぜひ気軽に利用してみてください!

おすすめのWeb制作サービス②

Wix

Wix

Wix.comでおなじみのWixです。
ドラッグアンドドロップというマウス操作だけで自分好みのWebサイトを作ることができます。

パソコンとスマホで表示できる項目を変えたり、SNSの投稿を埋め込んだりと、カスタマイズの幅はとても大きいです。

ですが、無料プランだと動作が遅かったり、完成したサイトの表示速度が遅い、などのデメリットがあります。
(有料プランでも機能によっては重くなることがあります。)

ですが、一度使ってみるといいかもしれません。
しっかりサイトを公開したいのであれば、操作も快適な有料プランがおすすめです。

おすすめのWeb制作サービス③

STUDIO

STUDIO

最後に紹介するWeb制作ツールがSTUDIOです。
近年人気と知名度を上げています。

Wixのようにコードを書かずにサイトが作れる点や、操作が軽い点などがあります。

サービスの紹介ページのデザインがきれいなのも魅力です。

こちらも無料で始められるので、ぜひ使ってみてください。

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

実は、この他にもたくさんのWeb制作で使えるツールがあります。
ここで紹介してしまうと長くなってしまうので、こちらの記事でまとめています。
>>Web制作で使えるツールを紹介!【知識ゼロでも公開できる。】

作れないなら外注するのもありです。

作れないなら外注するのもありです。

ここまでは自分でサイトを作る場合に関してまとめてみました。
ですが、現実問題、作れない方も多いと思います。

  • パソコン操作が苦手。
  • デザインの自身がない。
  • トラブルが合ったときに対処できない。

こういった方や、Webサイトを自分で作りたいと考えている方以外は外注する(他者に制作してもらう)ことをおすすめします。

あなたに知識がなくても、意見を汲み取り、ベストなWebサイトを制作してもらえます。

実際に外注する際のメリットや注意点はこちらで詳しくまとめているので、外注を検討している方は発注前に確認してみてください。

>>こんな場合のWeb制作は外注がオススメ!【プロに任せよう】

私たちもWebサイトを制作します!

私たちもWebサイトを制作します!

私たちGiveでも、Webサイトを制作する事業を行っています。

単に制作するだけでなく、完成後も運用・保守を行ったり、売上げアップのための施策も行います。

見積もりは無料で行えるので、ぜひお問い合わせください。

まとめ。

最後に、この記事のまとめです。
Webサイトは、次の順番に作っていきます。

  • サイトを設計する。
  • サイトのデザインを考える。
  • サイトで読み込むファイルを用意する。

ここまで終わらせたら、ドメインやサーバーを契約して公開しましょう。

また、ここまでの知識がない方はこちらのサービスを利用することで自身で作ることができます。

また、どうしても自分で作りたい方以外は外注することも選択肢の1つとして持っていてください。

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

スポンサードリンク

スポンサードリンク

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

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
この記事の目次
閉じる