ホームページ作成を自分で始めたいけど、方法が分からない
という方へ
私自身そうでした。漠然とホームページ作成を自分で始めてみたいと思ってはいましたが、開始するまでに、随分と時間が掛かってしまいました。
初めてであれば、右も左も分からず、道に迷いやすいのは当然ですね。
ゴールも道のりも、スタート位置さえも見えていなければ、なおさらです。
まずは、ゴールを決めて道順を明確にしましょう。スタートはその後です。
本記事では、下記の内容を解説します。
目次
■ホームページ作成を自分で進めるためのオススメな方法とは？
『ゴールを決めて、道のりを知り、走り始めましょう。』
なにかを作るまでの過程は、マラソンに似ています。- 目的地に向けて
- どこをどのように通るコースなのかを知り
- 準備をしてスタートラインに立ちます。
ホームページ作成において、今回おすすめする方法は上記3点です。
具体的な作り方のポイントを以下にまとめています。
順番に進めて、自分のホームページを完成させましょう。
⬜︎ゴールを決めましょう（ホームページを作る目的）
作成したいものを明確にしましょう。
ゴールが決まっていないと、なにをもって、完成とするのかが分かりません。進む道が見えていないのと同じです。どこに辿り着くのか自分でも分からない状況は避けましょう。
完成形はいくつあってもいいので、目に見える形にしてみましょう。
見比べて決めた方が、いつまでもあれこれ悩むより早く決まります。時間に余裕があるのなら、全部作ってみて見比べてみてもいいですね。
考えながら作りながら始めると、あれもこれも追加、もっとこうしたい、ああしたいと、いつまでたっても完成しません。ホームページは何個作ってもいいし、あとから追加や修正も可能です。
ここまで出来たら完了！と言えるイメージを形にしましょう。⬜︎道のりを明確にしましょう（作成手順の明確化）
どこをどのように進めば、ゴールできるのかロードマップが必要です。
記述方法は、インターネット上で調べることができるので、検索して見つけてみましょう。
基本的なホームページは、以下５つで構成されています。
- ヘッダー：ページの看板となるタイトル
- リード：訪問者の興味を引く文章等
- コンテンツ：訪問者への提供内容（悩みの解決）
- CTA：訪問者への行動案内
- フッター：さらに必要な情報を提供
何をどうすれば良いのかを明確にしておけば、あとは一個ずつ記載して進むだけで済みます。
⬜︎スタートを切りましょう（ツールの準備）
道具を揃えて、スタートを切りましょう。
走りやすい服装に着替えて、走りやすいシューズを履かないと、走りにくくなってしまいます。作成に必要なツールである、テキストエディタとWEBブラウザを用意して、開始しましょう。
テキストエディタに必要情報が記入できたら、WEBブラウザで開いて完成形を確認します。ゴールに近づいているか確認しながら進みましょう。
■ホームページ作成を自分で始めるための無料ツール
テキストエディタで作って、WEBブラウザで確認の繰り返し。基本的には、メモ帳さえあればホームページは作れます。
文字・画像の大きさや配置、色や枠線などを指定する言語が、htmlと呼ばれるマークアップ言語です。
メモ帳に記述していきます。出来上がったファイルをWEBブラウザで読み込みめば、htmlで指定した表現でページが表示されます。
⬜︎テキストエディタ（作成）
「Brakets」は、Adobe社のオープンソースソフトウェアです。
Braketsならhtmlの入力補助に、Chromeでのライブプレビュー機能を備えています。
タグの先頭文字を入力すると候補が出ててきたり、先頭のタグを閉じると、終わりのタグが自動で入力されるので便利です。
GoogleChromeをインストールしていれば、ライブプレビュー機能を使えます。入力がダイレクトに反映さえるので、確認しながら進めることができます。
その他、以下ポイントも便利な機能です。
- 入力補助
- 終了タグ補完
- フォルダ階層表示
Braktetsダウンロードページ：
https://brackets.softonic.jp/
⬜︎WEBブラウザ（表示の確認）
Braketsのライブプレビュー機能を使うためには、GoogleChromeのインストールが必要です。
Braketsのライブプレビューを実行すると、GoogleChromeが開き、現在までのコード結果が反映された状態で表示されます。修正時にも即時反映されるため、記述と表示の連携が分かりやすいです。
その他、以下ポイントも便利な機能です。
- WEBページのソース構造を表示できる検証機能
- スマホなどのレスポンシブ切り替え表示確認機能
ダウンロードヘルプページ：
https://support.google.com/chrome/answer/95346?hl=ja&co=GENIE.Platform%3DDesktop
⬜︎サーバー＆ドメイン（設置環境）
土地と住所を用意して、家を建てましょう。
ホームページ（家）を設置する為には、サーバー（土地）と、ドメイン（住所）が必要です。
サーバーのレンタル費用は、月1000円程かかります。
ドメインにも費用はかかりますが、クラウドサーバを提供しているエックスサーバーに登録すると、ドメインを１つ無料で入手できます。
Xserverは、障害が少なく、安定性に定評あるサーバーなので、がっつりホームページを作る方にはおすすめです。
月額990円(税込)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
- 安定の「エックスサーバー」
- 「エックスサーバー」ならドメイン1つ無料
- ドメイン追加なら「お名前.com」
■□━━ 急げ、ドメインは早い者勝ち！ ━━□■
■お名前.com
■まとめ
いかがでしたでしょうか。
始められそうですか？ゴール出来そうですか？
htmlで実現できる表現方法は、同じ表現でもいくつか方法があるので、迷う事もあるかもしれません。
目的はゴールすることなので、どれを使ってもいいのです。
いくつもの道を通ってみて、自分の走りやすい道を探しましょう。
それがゴールまでの近道となるはずです。
⬜︎記事のポイントのまとめ
今回のポイントをまとめてみると、以下内容となります。
- ゴール設定
- 道のりの明確化
- 準備＆スタート
- 環境設定
- 公開
こんな感じです。
目標が決まれば、他のことがどんどん決まっていきます。
改めて、目標って大事なんだと感じました。
⬜︎終わりに
「ゴール設定→道のり確認→準備・スタート」というのは、学習全般に言えますね。
なりたい自分を決めて、なにを学べば実現できるかを明確にし、順番に進めていきましょう。
あれもこれもいっぺんにはできないので、優先順位をつけて、一つずつ完了させていけば、必ず実現できます。
一つ一つ小さなことからコツコツと。
チリツモの精神で、知識と技術を蓄積していきましょう。
「稼ぐ」ためには、下準備が必要です。最初は大変なことでも、慣れてくれば大したことなく、やっていけるはずです。頑張りましょう。
というわけで今回は以上です。
自分の作りたいものを作るために、基礎となる部分から習得して、実現させていきましょう。
