私、福沢諭吉の傍系、IQ130のyamatoFOXと申します。皆様のお役にたてれば幸いです。

yamatoFOXの仕事部屋

スキルアップ プログラミング ホームページ作成 初心者向け

【1時間の作業】プロなみのホームページを初心者が作る最強の方法【誰でもできる】

更新日:

教えられ上手で危険な美女

・初心者だけど、プロなみの綺麗なホームページを今すぐ欲しいな。
・業者にお願いすると高いし、自分でできないかな?
・勉強するの大変なのかな?難しそうだな。

この記事ではそんな疑問にお答えします!

初心者がプロ並みのホームページを作るのは今の時代、余裕です。
勉強も一切不要。断言できます。

この記事の通りやれば、スムーズにいくのでおそらく『1時間の作業』に『プロ並み』のサイトができます!

また、さまざまな、デザインやタイプのサイトも同じ流れで自由自在に簡単に作れます。

パソコンが大好きで、良い夫な男

記事の信頼性

・私は、wordpressを使って、このサイトを含めて、10個ほどのサイトを作成しています。

・私は今では、頭の中に手順書がある感じで、あまり頭を使わず、最低限の新規サイトの立ち上げは、40分以内の作業時間でできます。(実際は反映待ちの時間があるので、作業が済んでから、完成まで2日くらいかかります。)

 

1.全体の流れ

まず全体の流れを説明します。ここでざっくりイメージを掴むと流れがスムーズにできるようになります。覚えなくていいので、ざっと目を通しておいてください。

ちなみに、ホームページより、ウェブサイトの方が言い方としては適切なので、この記事ではホームページではなくウェブサイトという言葉を使います。

流れは大きく分けて、最短7ステップです。

 

1.webサーバーを用意します。

サーバーというコンピューターをレンタルします。月1000円程度です。レンタルは簡単な手続きで、ウェブから5分程度でできます。レンタルといっても、何かが家に届くわけではなく、遠方に設置されているコンピュータの一部をネットを通して使わせてもらうという契約をするということです。そのコンピュータの電源とかメンテナンスとかその他もろもろは、当たり前のようにレンタルさせてくれる業者がやるので気にしなくていいです。

サーバーとクライアントという用語について

私たちがユーザーとして、いつもスマホやパソコンからウェブサイトを見るときは、

ウェブサイトのデータを遠方のコンピューター(巨大なパソコン)からウェブサイトのデータをダウンロードして、自分たちの端末(スマホ、パソコン)で見ています。

つまり、同じコンピューター同士のやり取りなのです。すっきり表現すると以下になります。

 

ウェブサイトのデータを送ってくれるコンピューター・・・・サーバー(server)という名の役割です。

ウェブサイトのデータを受け取るコンピューター(=私たちのスマホ、パソコン)・・・クライアント(client)という名の役割です。

 

サーバー(server)という言い方への理解について

一般的にお店がお客さんに提供する便宜をサービス(service)といいますよね。

『ウェブサイトのデータをあなたにあげる』という『サービスを提供する者』、それを英語でいうとサーバー(server)になりますね。

つまり、サービスを提供しているコンピューターのことをサーバーといいます。

クライアント(client)という言い方への理解について

一般的に、あなたが何かビジネスをしている場合、お客さんのことをクライアントと呼んだりしますよね。

『ウェブサイトのデータをもらうお客さん』だから、クライアントといいます。

つまり、サービスを受けるコンピューターのことをクライアントと呼びます。

2.ドメインを取得する

ドメインは、サイトのアドレスのことです。

例えば、ウェブサイトのアドレスはよく、以下のような感じで入力しますよね。

私のサイトだと以下になります。ブラウザ(ネット見てるウインドウ=画面)の一番上のあたりに私のサイトのアドレスが書いてあるかもしれません。

http://yamatofox.com

今回決めるのは、『yamatofox.com』の部分です。この部分をドメインと言います。

 

ウェブサイトにも、それぞれ、実世界と同じように住所があります。

そして、その住所は実世界と同じで、被ったりしません。つまり、その住所を入力すれば、1つの場所に特定されます。

実際は、システム上その住所は『218.219.62.145』みたいなただの数字の羅列で、IPアドレスと呼ばれる住所を使っているのですが、

それでは、人間が覚えられないので、人間が読めるドメインと呼ばれる単語に置き換えています。

つまり、すっきりさせるとこんな以下になります。

システム上の住所『183.90.240.5』→ 変換 →人間が読める住所『yamatofox.com』

※ちなみにアドレスの始まりは、httpとhttpsがありますが、httpsのsはセキュリティ(Security)のSと覚えるといいでしょう。ようするにhttpsの方が、ユーザーにとって安全なのです。今の時代はhttpsであることが必須で、httpはあり得ません。

3.wordpressのインストール

wordpressという世界的に有名な『ウェブサイト作成プログラム』をサーバーにインストールします。

難しい設定とか全くいりません。初心者でも簡単にできます。

このwordpressをインストールすると、直観的にウェブサイトを作成することができ、このwordpressの管理画面で、ボタンを押したり、メニューを選んだりするだけで、プログラミングなんて使わないであっという間に、プロレベルの美しさ、機能性をもったウェブサイトが作れます。

※wordpress.comという名前のサービスがありますが、そっちは別物で全く違うので、『.comは違う』と覚えてください。

4.記事を書く

ウェブサイトを作ったら、一応、テストでいいので、文章を書いてみましょう。

これは動作確認の一環です。

記事を書く予定の方はここで、がっつり書いてもいいです。

5.デザインを変えてみる

ウェブサイトを作成するといっても、目的や用途により適切なデザインにしたいはずです。

wordpressなら、デザインは簡単に変えられます。ボタン押したりメニューから選んだりすれば、3分程度でデザインを切り替えることができます。

しかも、文章を書いてある程度、ウェブサイトを運営してからでも、いつでもデザインを変えられるというのが、wordpressの素晴らしいところの一つです。

利用できるデザインは世の中にいくつ存在しているのかわかりません。感覚的には無限にあります。

6.プラグインを入れてみる

ウェブサイトの基本が出来たら、いろんな機能を追加したくなります。

例えば、以下の機能とかです。

  1. バックアップ(サイトが壊れてしまったとき、復活させるためのデータの保管)をとる
  2. お問い合わせのフォーム
  3. ウェブサイトの表示をスピードアップする

これらの機能を簡単に追加できるようなものを、プラグインといいます。

上記の例1の話なら、バックアップを取る機能のプラグインを追加すれば、機能を付けられます。

このプラグイン(=機能)の追加は簡単すぎです。初心者でも3分くらいでできます。

このプラグインもいくつ存在しているのか見当もつきません。無数にあります。

 

 

以上で全体の理解のための、大まかな流れの説明は終わりです。ここからは具体的な作業の話をしていきます。

2.webサーバーを用意する

サーバーですが、Xサーバーを使います。私も使っています。

安いし、設定簡単だし、バックアップ機能がついているので、楽ですね。

カスタマーサポートも丁寧で返事も早いです。

実際、私は間違えて、追加のサービスを契約してしまったことがあるのですが、すぐ間違えの旨をお伝えすると丁寧にキャンセルの対応をしてくれました。

(SSLというhttpからhttpsに変更するサービスです)

 

ウェブサイトがアクセス集めて人気になるのは、とてつもなく大変なので、ほとんどの方が当てはまらないと思いますが、

Xサーバーと同じ会社が提供しているWpxというwordpress用のサービスを使うのもいいですね。

 

といいつつも、私は両方使っていますが、簡単だと感じるのはXサーバーの方ですね。

もし、少ないアクセスのサイトから、大量のアクセスが集まるサイトにレベルアップさせていく予定なら、wpxの方が、細かくランクアップできますので、

その点ならwpxがいいかもしれません。

でも、基本的にはそういう人はまずいないと思うし、Xサーバーでも結構十分なので、使いやすさの点でXサーバーを強くお勧めします。

大きくなってから、XサーバーからWpxやまた、それ以外のどこかレンタルサーバーに引っ越しするというの手段もあります。

 

3.ドメインを取得する

ドメインを取得します。これはアドレスの『~.com』みたいなやつですね。私のサイトなら、『yamatofox.com』の部分です。

お名前.comというサイトで取得します。

このサイトを運営しているのはGMOという創業20年ほどの会社で、証券会社などの様々なビジネスを展開している会社なので、大手で信用できますね。

いい加減な対応やトラブルも少ないと思います。

実際にカスタマーセンターに質問したこともあるのですが、とても丁寧に説明してくれました。返事も早いです。(そのときはドメインの所有権に関するお話をしました。)

ドメイン取得する際のポイントは以下です。

覚えやすくて、安いドメインを取得する

ウェブサイトの運営を始めたら、いかにgoogleの検索結果の1ページ目の一番上に載せるかが、重要になってきますが、

中古ではない過去に誰も使っていない、新規のドメインならどのドメインを購入しても、検索結果の順位について、有利か不利かというのは変わらないです。

.comだろうが、.jpだろうが、関係ありません。

人間が見て覚えやすいのがいいです。

もちろん、そのドメインを聞いて、そのウェブサイトの内容がどんなものか想像つくものがいいですね。

※なお、中古ドメインを買った場合は、googleの検索順位について有利になる場合があります。ドメインのもっている力の強さをドメインパワーといいます。他のドメインのウェブサイトと、一言一句同じ内容の記事を書いたときに、ドメインパワーのより強いウェブサイトで書いた記事の方が、検索結果の上位に表示されやすくなります。

whois情報代行サービスを利用する

ドメインを取得すると、基本的には、whois情報という場所に自分の名前が載ってしまって、誰でも閲覧可能な公開状態になります。

whois情報というのは、その言葉の通りで、そのドメインを持ってたり、管理したりしている人はそれぞれ誰ですか?という公開情報で誰しもがウェブ上でその情報を閲覧できるようになります。

それがいやなときに、自分の名前の代わりに、ドメインを購入した会社の名前を書いてもらうということです。

そのサービスを『whois情報代行』といいます。

これを利用すると、自分の名前は公開されませんが、利用しても念のため、公開されてないかwhois情報で検索してみた方が、いいです。

whois情報でドメインの所有権者を自分にする

上述のwhois情報代行サービスを利用すると、そのドメインの所有権はドメインを購入した会社に移るようです。

(所有権について、念のため、お名前.comを運営しているGMOという会社に問い合わせしたら、このような返答でした。)

したがって、そのドメインの所有権を自分に移すために、登録情報を自分に変更しなければいけません。

なお、当然、登録情報を自分に変更しても、whois情報上に公開されている名前は代行してくれる会社のままです。所有権だけが自分に移ります。

これはウェブサイトに価値が出てきて、そのドメインの価値が上がってきたときに、どのドメインは誰のものなのか?という問題になる可能性があるので、しっかり対応するべきところです。

契約を更新することを忘れない

取得したドメインには有効期限があります。

ドメインの有効期限が切れると自分のものではなくなってしまうので、自動更新にしておくか、有効期限が切れる前に更新しておく必要があります。

 

もし大規模ビジネスであれば、他のドメインの取得も検討する

もし、大規模ビジネスになるのであれば、他のドメインたとえば、末尾が『.com』『.jp』『.net』というものも取得しておきます。

理由は、偽物が現れないようにするためです。

4.ドメインをサーバーで利用できるようにする

ドメインを取得したら、そのドメインをエックスサーバーで使えるようにします。

前述の通り、以下のことを行います。

システム上の住所『183.90.240.5』→ 変換 →人間が読める住所『yamatofox.com』

この『変換』部分の設定です。

これはドメインを取得したサイトで設定します。

設定の手順は以下です。

1.サーバーを提供している会社のネームサーバーのアドレスを知る

基本的にサーバーを提供している会社のサイトに書いてあります。

 

2.ネームサーバーのアドレスを、ドメインを取得した会社の管理画面で設定する

上記の1で取得したネームサーバーのアドレスを、ドメインを取得した会社の管理画面でドメインと紐づけます。

これは設定した後、反映するまで時間がかかります。大体1日くらいです。

5.SSLの申し込み

アドレスの『http~』を『https~』に変える作業です。

これは必須です。これがないと、サーバーとユーザー間の通信のやり取りが丸見えになってしまいますし、googleの検索結果でも上位に表示されにくくなります。

無料のSSLで十分です。このタイミングで申し込んでください。

なお、申し込み(設定)から反映まで、時間がかかります。大体1日くらいです。

6.wordpressのインストール

wordpressのインストールです。サーバーの管理画面からできます。一瞬で終わりますね。

7.記事を書いてみよう

とりあえず、記事を投稿してみましょう。

動作を確認したいだけなので、簡単に済ませればよいと思います。

とりあえず、タイトルと本文に『あいうえお』とかでもいいでしょう。

8.デザインを変えてみよう

選べるデザインのテンプレート(パターン)は無数にあります。

このデザインのことをwordpressでは『テーマ』と呼びます。

左メニューの『外観』から変えてみましょう。

9.プラグインを入れる

機能を追加したいので、プラグインを入れましょう。

特に最初に追加したいのは、バックアップの機能です。

なぜなら、wordpressの利点は高度で複雑なウェブサイトを簡単に直観的に作成できることですが、

複雑になればなるほど、システムは壊れやすくなるからです。

プラグインを追加していると、かなりの高確率で、そのうち壊れてしまい、どうにもならなくなってしまうときがあります。

絶対にそのうち壊れるくらいの気持ちで臨んだ方が、身のためです。

実際に壊れてしまい、バックアップデータもないと、絶望的な気持ちになりますよ。

修理がどうしても無理なら、なんとか一部のデータでも取得することを試みた上で、最初から作り直しです。

 

その時に役にたつものが、常日ごろから取得するバックアップデータです。

ウェブサイトが壊れる前に取得したバックアップデータが残っていれば、そのデータから復元し、そのバックアップデータを取得した時点に、ほとんどの場合、状態を戻すことが出来ます。

簡単で使いやすい、バックアップのためのプラグインは以下のプラグインです。

『DropBox』

ワンタッチでバックアップから、復元まで速やかにやってくれます。

※定期的にバックアップをサーバーの会社がやってくれている場合もあるので、サービスの内容を確認してみてください。でも、仮にサーバーの会社がやってくれていたとしても、念のため私はバックアップのプラグインを入れて、自分でもデータを取得しています。

 

10.まとめ

上記で、プロ並みのデザインと機能性を持った、ウェブサイトを作ることができ、最低限の管理もできるようになりました。

これは最低限のものなので、これから自分の求める水準まで、見た目、機能、性能まで、レベルアップする必要があります。

唐突に横を通り過ぎ、話をまとめようとするうちの猫

関連記事も以下で紹介しています。

唐突に横を通り過ぎ、話をまとめようとするうちの猫

関連記事:【初心者向け】5つの言語を習得した私のプログラミングの効率学習【最短でできる】

-スキルアップ, プログラミング, ホームページ作成, 初心者向け

Copyright© yamatoFOXの仕事部屋 , 2024 All Rights Reserved Powered by AFFINGER5.