初めてのhtml

ホームページ作成を自分で進めるためのおすすめ方法【何を作るのか?】

ホームページ作成を自分で始めたいけど、方法が分からない
という方へ

私自身そうでした。漠然とホームページ作成を自分で始めてみたいと思ってはいましたが、開始するまでに、随分と時間が掛かってしまいました。

初めてであれば、右も左も分からず、道に迷いやすいのは当然ですね。

ゴールも道のりも、スタート位置さえも見えていなければ、なおさらです。
まずは、ゴールを決めて道順を明確にしましょう。スタートはその後です。

本記事では、下記の内容を解説します。

■ホームページ作成を自分で進めるためのオススメな方法とは?

様々なホームページ

『ゴールを決めて、道のりを知り、走り始めましょう。』

なにかを作るまでの過程は、マラソンに似ています。
  1. 目的地に向けて
  2. どこをどのように通るコースなのかを知り
  3. 準備をしてスタートラインに立ちます。

ホームページ作成において、今回おすすめする方法は上記3点です。
具体的な作り方のポイントを以下にまとめています。

順番に進めて、自分のホームページを完成させましょう。

⬜︎ゴールを決めましょう(ホームページを作る目的)

ゴールとなる目標を定める

作成したいものを明確にしましょう。

ゴールが決まっていないと、なにをもって、完成とするのかが分かりません。進む道が見えていないのと同じです。どこに辿り着くのか自分でも分からない状況は避けましょう。

完成形はいくつあってもいいので、目に見える形にしてみましょう。

見比べて決めた方が、いつまでもあれこれ悩むより早く決まります。時間に余裕があるのなら、全部作ってみて見比べてみてもいいですね。

考えながら作りながら始めると、あれもこれも追加、もっとこうしたい、ああしたいと、いつまでたっても完成しません。ホームページは何個作ってもいいし、あとから追加や修正も可能です。

ここまで出来たら完了!と言えるイメージを形にしましょう。

⬜︎道のりを明確にしましょう(作成手順の明確化)

ゴールまでの道のり
ホームページで実現したい表現の記述方法を明確にしましょう。

どこをどのように進めば、ゴールできるのかロードマップが必要です。
記述方法は、インターネット上で調べることができるので、検索して見つけてみましょう。

基本的なホームページは、以下5つで構成されています。

  1. ヘッダー:ページの看板となるタイトル
  2. リード:訪問者の興味を引く文章等
  3. コンテンツ:訪問者への提供内容(悩みの解決)
  4. CTA:訪問者への行動案内
  5. フッター:さらに必要な情報を提供

何をどうすれば良いのかを明確にしておけば、あとは一個ずつ記載して進むだけで済みます。

⬜︎スタートを切りましょう(ツールの準備)

スタートライン

道具を揃えて、スタートを切りましょう。

走りやすい服装に着替えて、走りやすいシューズを履かないと、走りにくくなってしまいます。
作成に必要なツールである、テキストエディタとWEBブラウザを用意して、開始しましょう。

テキストエディタに必要情報が記入できたら、WEBブラウザで開いて完成形を確認します。ゴールに近づいているか確認しながら進みましょう。

■ホームページ作成を自分で始めるための無料ツール

テキストエディタで作って、WEBブラウザで確認の繰り返し。
基本的には、メモ帳さえあればホームページは作れます

文字・画像の大きさや配置、色や枠線などを指定する言語が、htmlと呼ばれるマークアップ言語です。

メモ帳に記述していきます。出来上がったファイルをWEBブラウザで読み込みめば、htmlで指定した表現でページが表示されます。

⬜︎テキストエディタ(作成)

メモ帳
初心者に優しい機能を持つ無料テキストエディタ
「Brakets」は、Adobe社のオープンソースソフトウェアです。

Braketsならhtmlの入力補助に、Chromeでのライブプレビュー機能を備えています。
タグの先頭文字を入力すると候補が出ててきたり、先頭のタグを閉じると、終わりのタグが自動で入力されるので便利です。

GoogleChromeをインストールしていれば、ライブプレビュー機能を使えます。入力がダイレクトに反映さえるので、確認しながら進めることができます。

その他、以下ポイントも便利な機能です。

  • 入力補助
  • 終了タグ補完
  • フォルダ階層表示

Braktetsダウンロードページ:
https://brackets.softonic.jp/

⬜︎WEBブラウザ(表示の確認)

Webブラウザ
Braketsと連携できるGoogleChromeがベスト

Braketsのライブプレビュー機能を使うためには、GoogleChromeのインストールが必要です。
Braketsのライブプレビューを実行すると、GoogleChromeが開き、現在までのコード結果が反映された状態で表示されます。修正時にも即時反映されるため、記述と表示の連携が分かりやすいです。

その他、以下ポイントも便利な機能です。

  • WEBページのソース構造を表示できる検証機能
  • スマホなどのレスポンシブ切り替え表示確認機能

ダウンロードヘルプページ:
https://support.google.com/chrome/answer/95346?hl=ja&co=GENIE.Platform%3DDesktop

⬜︎サーバー&ドメイン(設置環境)

住宅とホームページ

土地と住所を用意して、家を建てましょう。

ホームページ(家)を設置する為には、サーバー(土地)と、ドメイン(住所)が必要です。

サーバーのレンタル費用は、月1000円程かかります。
ドメインにも費用はかかりますが、クラウドサーバを提供しているエックスサーバーに登録すると、ドメインを1つ無料で入手できます。

Xserverは、障害が少なく、安定性に定評あるサーバーなので、がっつりホームページを作る方にはおすすめです。

月額990円(税込)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
  • 安定の「エックスサーバー」
  • 「エックスサーバー」ならドメイン1つ無料
  • ドメイン追加なら「お名前.com」

■□━━ 急げ、ドメインは早い者勝ち! ━━□■

     ■お名前.com

■まとめ

いかがでしたでしょうか。
始められそうですか?ゴール出来そうですか?

htmlで実現できる表現方法は、同じ表現でもいくつか方法があるので、迷う事もあるかもしれません。
目的はゴールすることなので、どれを使ってもいいのです。

いくつもの道を通ってみて、自分の走りやすい道を探しましょう。
それがゴールまでの近道となるはずです。

⬜︎記事のポイントのまとめ

今回のポイントをまとめてみると、以下内容となります。

  1. ゴール設定
  2. 道のりの明確化
  3. 準備&スタート
  4. 環境設定
  5. 公開

こんな感じです。

目標が決まれば、他のことがどんどん決まっていきます。
改めて、目標って大事なんだと感じました。

⬜︎終わりに

「ゴール設定→道のり確認→準備・スタート」というのは、学習全般に言えますね。
なりたい自分を決めて、なにを学べば実現できるかを明確にし、順番に進めていきましょう。

あれもこれもいっぺんにはできないので、優先順位をつけて、一つずつ完了させていけば、必ず実現できます。

一つ一つ小さなことからコツコツと。
チリツモの精神で、知識と技術を蓄積していきましょう。

「稼ぐ」ためには、下準備が必要です。最初は大変なことでも、慣れてくれば大したことなく、やっていけるはずです。頑張りましょう。

というわけで今回は以上です。
自分の作りたいものを作るために、基礎となる部分から習得して、実現させていきましょう。

コメントを残す