プログラミング

自分専用のホームページ作成に必要な費用とスキル【最短1ヶ月】

 

個人でお菓子や絵画などのお教室をはじめたい〜!

 

そういった時に必須なのが自分専用のホームページ

 

また、小学校のプログラミング必修化に伴い今のうちに学んでおけば、

子供に教えることもでき一石二鳥。

 

コロナで家も出れない事ですし、

自宅にいる時間を活用し自分専用のホームページを作ってみてはいかがでしょうか?

 

 

自分専用のホームページ作成に必要な費用とスキル

自分専用ホームページ制作

 

まず主にサイト作成のために必要な知識がこちらになります。

プログラミング(コード)の知識

HTML

CSS

レスポンシブデザイン(メディアクエリ)

 

HTMLとは・・サイト上の文章の骨組み

CSSとは・・それを装飾、デザインする役割

レスポンシブデザイン(メディアクエリ)・・PC、タブレット、スマホと端末によって調整するデザイン

です。

 

実際に使用した教材はこちら

 

マナブさんのプログラミングロードマップ /無料 

プロゲートProgate 1080 /月 

 

HTML,CSSを勉強すると以下の事ができるようになります。

→WEBサイトの見た目をデザインできる

ブログを書く時表示バグなどを直せる。

またHTML,CSS,レスポンシブデザイン(メディアクエリ)に学習を絞り1ヶ月しっかり勉強すれば出来るようになります。

 

マナブさんのロードマップに沿って学習を進めて行く中で、エディタ(sublimetext)を使用しますが、

パソコンが得意でない私のような方は最初に導入の仕方などでさっそく最初の壁に当たります。苦笑

 

そんな困った時に心強いサイトをご紹介。

 

学習の参考になるサイト

 

メモ

サルワカ ※超オススメ

はにわまん

TECHACADEMY

 

といっても初期の頃の疑問は、ほぼサルワカで解決しました。

何か分からない事が出てきたらまずはサルワカで調べて見てください。

 

1ヶ月で【自分のホームページ制作】できると言いましたが、

1から全て、コードを書いてとなるとやはりまだ厳しいです。

なので、ここで私がオススメする方法は1ヶ月×毎日2時間、HTMLとCSSを学習したのち、

ワードプレスで有料テーマを導入し、固定ページや外観をカスタマイズする方法です。

これならコードをほぼ触ることなくサイトを作成する事ができます

 

自分専用のホームページ作成に必要な費用 ワードプレスの場合

自分専用ホームページ制作

 

このサイトのようなブログ付きの、

更新が簡単に出来るサイトを作りたい場合、

かかる初期費用はだいたい3万円程です。

 

メモ

エックスサーバー 約15000円/年

ドメイン代 エックスサーバーはキャンペーン中で2020年430日まで無料ドメイン付き

ワードプレス 無料

アフィンガー 有料テーマ/買い切り 約15000

レンタルサーバーの土地代(エックスサーバー)のみ、毎年継続して支払う必要があります。

またキャンペーンがない場合は別途でドメイン代年間”1000円”程かかってきますので、今がお得です。

 

はてな

【レンタルサーバー】→土地

【ドメイン】→住所

【ホームページ】→家

のようなイメージです。

今回私はブログもやっていきたかったので、ブログに特化したアフィンガーにしましたが他にも有料テーマの種類はいろいろあります。

個人的にすごく素敵だな〜!!と思うのが、

LOTUSという有料テーマで値段は約1万3000円です。

サロンのように洗練されたホームページ制作をしたい方にオススメです。

1ヶ月で自分専用のホームページを作る方法

実際にこのブログのサイトは、

  1. ワードプレスでアフィンガーという有料テーマを導入
  2. ほぼ固定ページ・外観のカスタマイズから【ビジュアル】でデザイン
  3. 細部やレスポンシブデザイン(スマホでの見え方)をカスタマイズ追加CSSで指定する。

 

といった感じで作りました。

なのでほぼコードは書いていません!

ですが全くHTMLCSSが分からないと何かと不具合や表示バグで困るので勉強しておく方がいいです。

プロゲートなどを使い、最低限のHTMLとCSSの学習をしておくことをオススメします。

 

私が作ったサイトの細かい設定の補足

  • タイトルをホームにした固定ページをトップページに指定
  • 問い合わせページにはコンタクトフォームのプラグイン。
  • カレンダーや地図はグーグルマップ・カレンダーの埋め込み。
  • メニューは全て固定ページで作成
  • ブログの投稿などは投稿ページから

 

インスタグラム、地図などの埋め込み方法は

"インスタグラム 埋め込み ワードプレス"などでググって調べると出てきます。

ワードプレスは(WP)は利用者が多いのでグーグルで調べた時欲しい答えが出てきやすいのもオススメのポイントです。

 

うーん、固定ページやら投稿ページってちんぷんかんぷん

 

ワードプレスを触った事がなければ、分からなくて当たり前です!

イメージとしては、初めてスマートフォンを使いはじめた時のような操作感で使えるので、とにかく使って慣れようといった感じです。

 

メモ

実行したいことをググり→真似してみる→使い方に慣れていく

※もちろんオリジナルテーマの作成などは専門の知識がいるのでプログラミング学習が必要となってきます。今回はあくまでも私が作ったようなシンプルなサイトのご紹介です。

 

なおホームページ制作の流れをまとめると、

  1. HTML・CSSを学習
  2. エックスサーバーなどのレンタルサーバーを契約する
  3. ドメインを取得
  4. WPをインストール
  5. SSL化設定をする
  6. エックスサーバーのリダイレクト設定
  7. パーマリンク設定
  8. 有料テーマの導入
  9. 必要なプラグインの導入
  10. ホームページのデザイン開始

 

といった感じで、ワードプレスのサイトを作りました。

分からない箇所は "WP SSL化設定"などでググるとそれぞれやり方は出てきます。

 

ここまで聞いて、でもサイトにそんなお金かけたくないな〜とお思いの方は無料で作ることも可能です。

自分専用のホームページを無料で作りたい場合、

これらのサイトでもプログラミング(コード)が分からなくても制作出来ます。

 

無料で自分専用のホームページができるサイト

自分専用ホームページ制作

メモ

Jimdoジンドゥー

ペライチ

ペライチは1ページのみのシンプルなペラサイトです。近年お教室のサイト制作などに人気です。

まず、学習時間も初期費用も削りたい方は上記のサイトで作ってみるのもありです!

ただなんども言いますがHTMLCSSが分からないと細かいデザインの設定や、表示バグが起こった際に困ることが多々あります。

 

また、無料の場合それなりにデメリットもあって、

注意ポイント

SEO(検索エンジン最適化)に強くない。

ホームページURLjimdofreeのような表記が入ってしまう。

使用できるページ数が限られている

広告が表示される

デザインのカスタマイズがあまりできない

などの点があります。

 

といっても高額なサーバー代などを浮かす事ができるので、

特にブログをやる予定はない

とにかく簡単に無料で作りたい

まずは試しに作ってみたい

といった方にはとっても便利なサイトです。

また、Jimdoなどでとりあえず無料で作ってみて気に入ったら有料プランに切り替えてみるのもありです。

有料会員になると月々1000円で広告非表示や、

ページ数の追加などなど出来ることも増えるみたいです。

もちろん無料のままで使っている方もたくさんいます!

 

その他のホームページ制作で使える便利なツール

 

Penguin Candy *あめざいく体験教室*

実際によく使っているツールがこちらです。

Canvatwitterなどで投稿した時のアイキャッチ画像をつくるのに便利で、

実際に上記のようなテキストをつけた画像が作成できます。

アイキャッチ画像とは・名前の通りユーザーの目を引く画像です。投稿した際、サイトURLのみだとSNSではスクロールされてしまいスルーされがちです

JPEG miniは画像の軽量化するのに使っています。

はじめ何も知らずに軽量化せずバンバン画像を取り込んでいたらサイトが重たくなって開くのに時間がかかるようになってしまいました。。

ユーザーの離脱にも繋がるので、しっかり画像は軽量化しましょう!

O-danは無料で素敵なフリー素材を見つける事ができるサイトです。

 

ホームページ作成の上で一番大事なこと

それは、ググる力です。

サイトのレイアウトで困った時、HTML/CSSなどのコードの勉強をするにしてもこの力があればほぼ解決できます。

プログラミングを勉強すると自然とこのググる力がつくのでオススメです。

 

 

自分が一体なにをしたいのかを明確化し、

目的に沿ったサイトを作ってみてください。〜!

-プログラミング

Copyright© Penguin Candy*ペンギンキャンディー* , 2021 All Rights Reserved.