見出し画像

デザイナーが教える。簡単ノーコードHP制作方法_その１

HANAKANMURI

オリジナルのホームページをもっと簡単に作ってみませんか？

グラフィックデザイナーの筆者が実際に100サイト以上BtoBで制作し、販売してきたホームページの制作方法を一部公開します！

こんな事のしたい方々に読んでほしい記事です。

  • 自分だけのポートフォリオサイトが作りたい人

  • WEBを勉強したいけど何処から初めたらいいか分からない人

  • オリジナルのメールアドレスを持ちたい人

  • ホームページの月額費用を抑えたい人

  • 信用性の高い自社ページを作りたい人

ペライチ等の簡単ホームページ制作ツールを使わずに、ドメインもサーバーも自分で管理する「自分だけのホームページ制作方法」です。

WEBを始める際に専門的な知識はあった方が当然良いのですが、コードを目にすると難しそうに見えるため、やる気が削がれてしまうことも多いです。私自身もそう感じたことがありました。

この記事は「簡単にホームページを作るための手順」を記したものです。この手順は我流ですので、専門家からは「それは違う」と思われる部分もあるかもしれません。ですが、WEBを始める入口としては手を付けやすいはずです。一度自分のアイデアを形にしてみたい方は、ぜひ挑戦してみてください。


1.ドメイン（住所）を設定する

オリジナルのホームページを作るために必要なのは「ドメイン」です。WEBの記事では「家」に例えて説明されることが多いのですが、ドメインは「ネット上の住所」に当たります。
まずは自分のホームページをどのようなドメイン（住所）にしたいかを考えてみましょう。

ドメインの基本知識

  • ドメインとは… URLやメールアドレスの末章に記述される「.com」や「.jp」のような部分を指します。

  • ドメイン名とは… URLの全体「https://example.com」や「example.jp」のように位置を指定する文字列を意味します。

ドメインの決め方

  1. ドメイン会社で、使いたいドメインが使用可能か確認する。（下記にて説明）

  2. 理想のドメインが使用不可能な場合は、文字列を追加して調整する。

オススメのドメイン会社

  • 初心者には「ムームードメイン」が分かりやすく、利用しやすいのでおすすめです。

  • ドメイン使用料は小額なことが多いため、パランスに対応した予算を突き詰めながら選んでください。

ドメイン例

  • .com: 人気が高く、使い勝手の良いドメインです。

  • .jp: 日本企業の信頼性が高いドメインです。

  • .blog: ブログ用に便利です。


ドメインの契約例

ー Step1 ー
ムームードメインで希望のドメインを検索

例として「sample」という名前でドメインを契約してホームページが出来上がるまで順次記事で説明します。
まずはドメイン会社にて希望のドメインを検索します。

おすすめドメイン会社
ムームードメイン

https://muumuu-domain.com/
https://muumuu-domain.com/

「sample」で検索した結果、多くの人気ドメインが契約済みでした。


このように固有名詞や一般的な名称をそのままドメイン登録しようとすると、ドメインは早いもの勝ちですのですでに使われてしまっている場合などがあります。

どうしても使いたいドメインであれば文字を追加するなどで使えるドメインで納得できるものが見つかるまで試してみましょう。

今回別段こだわりが無いという設定で
「sample」は諦めて「sampledayo」で再検索してみました。

ー Step2 ー
希望ドメインを契約
すると今度は.jpなど人気で信頼性の高いドメインが契約できそうだったのでこの中から「sampledayo.jp」を選び契約をしました。

契約の際に
下記のようにムームードメインの「レンタルサーバー」も同時に申し込むことを無駄に強くおすすめされ、最初から「申し込む」にチェックがついていますが、今後のホームページ制作にムームードメインのサーバーだと問題が発生するものなどがあるので筆者のやり方ではここは「申し込まない」にして別会社のサーバーを契約します。

読まずに契約をしてしまい
一緒にムームードメインのレンタルサーバーに
申し込んでしまった方はそのままでも良いですが、
次の工程の別会社でのサーバー契約を重複してしないようにだけ注意ください。

ムームーサーバーは不要

注意事項:

  • ドメイン契約時のメールアドレスやパスワードを忘れないよう、必ず記録してください。

  • 契約したドメインを使わず放置して料金だけ請求されるケースもあるので注意が必要です。

  • 自身で登録される情報の管理は自己責任でしっかりと保管をお願いします。


ドメインの契約が完了したら、これはまだ住所だけを収容した状態にすぎません。以降の階段で土地を用意し、家を建てる必要があります。

2.サーバー（土地）を契約する

ドメイン（住所）の契約ができたら、次はサーバー（土地）を契約します。サーバーは契約したドメインを保管するWEB上の場所であり、ドメインとサーバーを契約することでようやくホームページ（家）を建てることができます。

オススメのレンタルサーバー会社

  • 初心者にはサーバーのレンタル会社は「ロリポップ」が分かりやすく、利用しやすいのでおすすめです。
    URL: https://lolipop.jp/

  • ドメイン会社のムームードメインとも互換性がよく操作がしやすいのと、細かな説明があるので非常にわかりやすいレンタルサーバーです。

法人として利用する場合はさくらネットのレンタルサーバーやmixhostのレンタルサーバーの方がおすすめではありますが、今回の記事はあくまでも「簡単ホームページ制作」がコンセプトなので、その辺は今回の記事を踏み台にご自身で学び使用してみてください。

おすすめレンタルサーバー
LOLIPOP!レンタルサーバー

https://lolipop.jp/


https://lolipop.jp/

レンタルサーバーの契約例

ー Step1 ー
プランを選択して会員登録

  • 個人でブログや簡単なホームページであればライトプランで十分です。

  • 画像や動画を多くアップロードする場合はハイスピードプランがおすすめです。

ー Step2 ー
アカウント情報入力

プランを選択したら次はロリポップに登録するアカウント情報を入力します。

ロリポップ！のドメイン
ここはレンタルサーバーの会員ドメインなのでなんでも良いです。覚えやすいドメイン名を登録してください。
ここで登録したドメイン名とパスワードは今後のサーバー管理に重要なので忘れないよう記録保管しておいてください。

ログインに必要なのは入力するオリジナルのドメイン名とその横の自動表記されているドメインになります。（画像ではcranky.jp)この二つを必ずどこかに控えて保管してください。

ー Step3 ー
SMS認証から申し込み完了まで

これ以降はSMS認証で本人確認を完了して必要情報を入力することで申し込みが完了します。

申し込み内容入力画面では任意のオプションや有料プランの勧誘が多々ありますが全て無視で問題ありません。


今は不要なのでインストールしなくてOK


WordPress同時インストールものちに設定をするので今は不要です。

サーバーの申し込みはこれで完了です。
レンタルサーバー登録が完了すれば次回からはロリポップのホームページ内の自分の会員ページで設定を行います。
最初登録した後は自動的に会員ページに飛びますが、今後再度アクセスする方法がわからなくなったという方もいましたのでログイン方法を記載します。

これがロリポップの管理画面

まずはロリポップのホームページにアクセス

https://lolipop.jp/

右上の「ログイン」の中にある
「ユーザー専用ページ」をクリックする

プラン申し込み時に決めたロリポップのドメインを左側に入力して右側はプルダウンから探して選択します。
あとはパスワードを入力してログインすればOK!

ー Step4 ー
レンタルサーバーにドメインを登録する

無事にロリポップの管理画面に入れたらムームードメインで契約したドメインをロリポップに登録します。
左のメニューから「サーバーの管理・設定」を開き「独自ドメイン設定」をクリックしてください。
設定画面が開いたらステップ1.独自ドメインを取得するはすでにムームードメインで契約済みなので飛ばしてステップ2の独自ドメインをロリポップに設定するの項目「設定する独自ドメイン」にムームードメインで契約したドメインを記入します。

「公開 (アップロード) フォルダ」は空欄で大丈夫ですのでこのまま独自ドメインチェックするをクリック。

登録した独自ドメインが見つかればサーバーにドメインの登録が完了となります。

【必ずチェック！】

ドメインとサーバーを契約した際に、支払い方法をクレジットカード決済に設定された方も多いと思いますが、これらの費用は、WEB上に自分の住所（ドメイン）と土地（サーバー）を持つための「家賃」とお考えください。ホームページ制作会社に外注した場合、毎月の管理費にこの家賃が含まれていることが多く、普段は意識されにくいですが、自分で管理する場合は特に注意が必要です。

家賃を払い忘れるリスク
もし支払いを忘れると、ドメインやサーバーの契約が切れてしまい、結果としてホームページが消えてしまいます。一度消えたホームページを復旧するのは非常に手間がかかり、場合によっては完全に復旧できないケースもあります。そのため、以下の対策を必ず行うことをおすすめします。

自動支払い設定を確認・有効化する

  1. ドメイン会社の管理画面にログインする
    ドメイン契約を行ったサービス（例：ムームードメイン）にログインし、自動更新設定が有効になっているか確認してください。

  2. サーバー会社の管理画面にログインする
    サーバー契約を行ったサービス（例：ロリポップ）でも同様に、自動支払い設定を確認しましょう。

  3. 登録クレジットカードの有効期限を確認する
    自動支払い設定を有効にしていても、登録しているクレジットカードの有効期限が切れると支払いができません。定期的にカード情報を更新しましょう。

  4. メール通知を活用する
    契約更新のタイミングで通知メールが届くように設定しましょう。重要な情報を見逃さないためにも、受信メールを定期的に確認してください。

一度設定を確認すれば安心！
これらの設定を最初にしっかり行っておけば、支払い忘れによるトラブルを防ぐことができます。せっかく作成したホームページを安心して運用するためにも、ぜひ自動支払い設定を行ってください。

■ムームードメインの場合
コントロールパネル＞各種お支払い>自動更新設定

■ロリポップの場合
マイページ＞契約・お支払い>サーバー契約とクレジットカード設定

状態の部分を要確認

この記事ではサーバー(土地)にドメイン(住所)を登録する方法を解説しました。

次回はホームページの具体的な構築手順について解説しますので、お楽しみに！


いいなと思ったら応援しよう！