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