初心者でもできる!ホームページ作成の流れ【2022年完全版】

インハウスでのサイト作成に必要なツールをご紹介します。知識ゼロの私(50歳)が2年間調べて作成できましたので、Stepの順番に一度試してください。

Step1 Googleアカウントの作成・Gmailの設定をする。

Google Chrome(無料)
グーグルクローム

Google Chormeをインストール。いろんなソフト取得するためのアカウントを作成します。1つ目はアカウント用で、もう1つはメールフォームのお問いわせ用に使用します。https://www.google.co.jp/intl/ja/chrome/

Step2 デモソフトでWordpressを実装体験する。

local

local Flymeel(無料)
ローカル・フライミール

ドメイン、サーバーが不要でWordpressを使える開発用CMS。

Local
Local WordPress development made simple…

Step3 テーマを選ぶ

Cocoon(無料)
コクーン

たくさんある有料、無料のテーマの中からいろいろ調べてみてCocoonにしました。選んだ理由は、内部SEO施策、フォーラムが充実など
Cocoon内部SEO施策についてはこちらをhttps://wp-cocoon.com/internal-seo/

Step4 プログラミングを学習する。

さあここで本番さながらのWordpressで作るサイトの準備ができたと思います。
しかしながら、カスタマイズをするときにプログラミング知識があった方がいいので学習がおすすめです。

ドットインストールとProgate/プロゲートでは、テキストの入力、画像の配置など今後必要な簡単なコードを実践形式で無料で学習できます。回が進むにつれて有料になるので、無料のところまで十分ですが、必要と感じたなら、ドンドンいきましょう。

Step5 自分でプログラミングをやってみる。

ドットインストールやプロゲートで体験した後、実際にテキストエディタをインストール(無料)使ってコードを作ってみよう。他にいろいろなエディタがあります。昔からプログラミングをしている方はatom(アトム)を使っている方が多いそうです。

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

Step6 ドメインの取得

お名前ドットコム

ドメインの取得です。家で言えば住所みたいなものです。お名前.com、ムームドメイン、Xドメインなど、HPに詳しく設定も載っていますし、YOUTUBEなどで利用者の動画配信もありますので初心者の方も簡単に設定ができます。
https://www.onamae.com/

Step7 レンタルサーバーの取得

Xserver
エックス・サーバー

家で言えば土地みたいなものです。
サーバーの場合は、利用者の多いサーバーを使った方がいいです。電話サポートがあるのも魅力です。
https://www.xserver.ne.jp/

Step8 WordPressをインストール

WordPress
ワードプレス

ホームページ作成を作成するには、大きく分けて2つあります。『CMS(Wordpress)』と『HTMLコードを使って作るサイト』です。Wordpressのダウンロードは各サーバーで簡易インストールがあるので初心者はそちらで利用
https://ja.wordpress.org/download/

Step9 テーマをインストール

Step10 WEB解析ソフトのインストールする。

Google search console
グーグルサーチコンソール

グーグル検索したキーワードなどの解析が可能です。アナリティクスとの連携して分析をしていく必須アイテム。ただ、グーグル検索のみの解析で、Yahho、Bingなどは除外です。

Google Search Console

Microsoft Clarity
マイクロソフト・クラリティ

Clarityは、ヒートマップツール(Heatmap)。サイト上のコンテンツでユーザーがどのように行動したかを、色の濃淡によって表したグラフです。

ホームページ準備のまとめ

基本的には、Stepごとにチャレンジしてすれば、自社で運営が可能です。ドメインとサーバー以外が全て無料でGoogleのアカウントがあれば取得が可能です。あとは、画像の問題ですが、スマホのカメラで十分です。

Adobe XD
アドビ・エックスディ

画像サイズの編集はアドビのXDを使用しています。サイトレイアウトや画像処理など、初心者でも使いやすいツールです。体験で7日間であれば無料で使えます。https://www.adobe.com/jp/products/xd/pricing/individual.html

切り抜き画像や合成などは、Adobe Illustrator(イラストレーター)やPhotoshop(フォトショップ)などを使えば自由自在に画像処理ができます。

アドビのコンプリートプラン(月/6480円)XD/Illustrator/Photoshopを含む20種類以上のサイトデザインで必要なソフトが使えます。利用度合で取得を検討してもいいと思います。

初めは、画像はまとめておいて『ココカラ』で画像処理を頼むのもいいと思います。

弊社でも画像処理ができますのでご相談ください。

タイトルとURLをコピーしました