お役立ち情報

  • Home
  • お役立ち情報
  • ホームページの作り方を一から解説!超初心者のための入門ガイド
ホームページの作り方

ホームページの作り方を一から解説!超初心者のための入門ガイド

自分のお店のホームページを作成したいけど何から始めていいのかわからない。
また、自社の商品をホームページを通して販売したいと思ったり、ブログを作ってアフィリエイトを初めてみたい。という方に以前よりも多く相談を受けるようになりました。

また、プログラミングを始めたいのだけど何から始めたら良いのかわからない。などそのような悩みをもつあなたに、ホームページ制作の超基本を解説します。

このページを読むと、ホームページを作成するにあたり、次にあなたがするべきことがわかります。

用途に合わせて読み進めていただければと思います。

ホームページの作り方は2つある

ホームページを作るには主に以下の2つの方法があります。

  1. 1、無料ホームページ作成ツールを使用する
  2. 2、プログラミング言語を学習して0から作成する

まず、無料ホームページ作成ツールの特徴からご紹介します。

無料ホームページ作成ツールとは

日本国内でも展開しているサービスもいくつかありますが、これらの特徴として、

  • ・無料で作成することができる
  • ・豊富なテンプレートがありデザインセンスがいらない
  • ・プログラミングの知識がなくてもOK

なので初心者が始めるにはおすすめです。

無料ホームページ作成ツールとして有名なものは、

  • ・Wix
  • ・Jimdo

などがありますが、詳しくは、「目的別で始める無料ホームページ制作ツールおすすめ13選」という記事に書きましたのでこちらを参考にしてみてください。

また、聞いたことがある方もいると思いますが、世界で最も愛用されている無料ホームページ作成ツールとして「Wordpress」というものがあります。
ワードプレスロゴ画像
ワードプレスはプログラミング知識がなくてもホームページを作ることができますが、その他のちょっとした前提知識が必要となります。

WordPressを使用してホームページ制作を始めたい方向けにも、「初心者でも簡単にWordpressを始める3つの手順」という記事に詳しく書きましたのでこちらをご覧ください。

プログラミングを学んでホームページを作成

ホームページを作成するために必要なプログラミング言語は、

  • ・HTML
  • ・CSS

この二つをまずは学習することでまずはホームページの見た目を作れるようになります。

簡単に説明すると、HTMLとはテキスト文字を入力してホームページに表示させる役割があります。
HTMLの説明画像
こんな感じで、入力した文字がそのままホームページに表示されます。

そして、ホームページに表示されたテキスト文字を、大きくしたり、色をつけたり、斜めにしたり、見た目を変えるために使うのがCSSと考えて貰えばわかりやすいでしょうか。
CSSの説明画像

先程のHTMLにCSSというものを書いて文字を大きく、赤くしてみました。

この二つのプログラミング言語を使って、テキストエディタや、メモ帳などでも作ることができます。しかし、これらのメモ帳等はプログラミング用に用意されているものではないので、プログラミング用のテキストエディタを使うと良いです。
私がおすすめしているのは無料で使える「Sublime Text」です。

プログラミングを学習したい方におすすめの学習サイトや、おすすめ本は
「プログラミング学習は何から始めるべき?おすすめのサイトや本をご紹介」という記事を更新する予定ですのでこちらも更新をお待ちください!!

ホームページ制作でやってはいけないこと

今この記事を読んでいるあなたが絶対にやってはいけないことを2つご紹介します。

1つ目は、Google検索で、「ホームページ制作会社 おすすめ」
と検索して表示されてくる会社に高額な料金を支払って依頼をすることです。

ホームページ制作には適正料金があります。
今の段階で高額な料金を支払ってでも実現したいホームページの機能ってなんでしょうか?
何も分からないまま高額料金を支払って業者に依頼するのは危険です。

もう一つのやってはいけないことは、実現したい機能を実装することが自分ではできない場合に業者へ依頼することになるのですが、費用を抑えたいからという理由でクラウドソーシングで見つけたフリーランスエンジニアなどに安く依頼することです。

これはなぜダメかというと、フリーランスエンジニアが悪いというわけではなく、ホームページ内にその機能をどのように組み込んで欲しいかを正しく言語化できずにエンジニアに伝えてしまい、うまく意思の疎通ができず、完成するまでにお互いに相当な労力を使うことになり、エンジニアも費用に見合っていないと途中でトラブルになったりするケースがあります。

自分が実現できない機能ということは自分がその機能についてどのような方法で組み立てたら良いかを分からないということなので依頼している内容と違う!ということになってしまいます。
そんなときはスーパーエンジニアのしょたれにご相談ください。「@3110syota