図解でわかるクリエイティブとマーケティング

【図解】おしゃれなホームページのつくり方!初心者にもわかりやすく解説

おしゃれなHP作り方

あわ丸

ホームページって自分でつくれるのかな?おしゃれで簡単にできる方法があれば知りたい!

そんな方に向けて、ホームページのつくり方をわかりやすく解説します。

今回は低コスト(サーバー&ドメイン、テンプレート代のみ)、コードを書かずに簡単に作れる方法を解説します。

つく蔵

カスタマイズ性に優れているサイト作成ツールを使うので、後々機能を増やしたりデザインをグレードアップすることも柔軟にできるよ!

ホームページ制作のステップ

この記事で解説するホームページの作成手順は次の通りです。

自分でHPを作る方法

①プランニング(サイト構成、デザインのイメージなど)

②サーバーとドメイン、HP作成ツールWordPressの設定

③作成(ページの構成、文章作成、画像やデザインの選定)

④運営(バックアップ、運営のコツ)

初心者の方でも記事に沿って進むことで、自分でホームページを完成させることができます。

それでは詳しく解説していきます。

①プランニング(サイト構成、デザインのイメージなど)

まずはどのようなホームページをつくりたいかを計画します。

計画するポイントは大きく分けて3つあります。

自分でホームページをつくる方法

・サイトのタイプを決める

・必要なページを割り出す

・大まかなデザインのイメージ

サイトのタイプを決める

ホームページにも様々なタイプがあります。どんなホームページをつくりたいのか、ホームページを見た人にどんな印象を持ってもらいたいのかなどを考慮してタイプを選びましょう。

大まかに分けると

・コーポレートサイトタイプ/情報をわかりやすくまとめた一般的なHP

・メディアタイプ/ブログやオウンドメディアなど記事を更新していくタイプのサイト

・ポートフォリオサイトタイプ/作品や活動実績をまとめたサイト

自分がつくりたいホームページはどのタイプなのか、用途や目的にあわせて決めましょう。

つく蔵

複合型のサイトもOKだよ!メディア型にコーポレートサイトの役割があるとか、ポートフォリオサイトに記事を更新していく機能をつけたいとか。

「こんなHPにしたい!」というモデルがあれば、サイトのタイプやどんなページがあるか見てみるといいわね!

うむ子

関連記事

HP設計方法制作費50万円レベル?!集客できるホームページを自分で設計する方法【図解】

必要なページを割り出す

次にホームページ内にどんな情報を載せたいかを書き出します。

書き出した内容を元に必要なページを決めましょう。

ページを決めるときのポイントはページを増やしすぎないこと。

ホームページを訪問した人が、見たい情報にすぐにたどり着けるような設計が理想です。

ページ数が多すぎたり、ページの階層が深すぎないよう、見やすい分類を意識しましょう。

・ホーム

・作品一覧ページ

・プロフィールやコンセプト記載ページ

・サービスや商品の紹介ページ

・コンタクトページ

・記事一覧ページ など

ブログのカテゴリーの決め方なども参考になります!

読者目線SEOブログカテゴリーの決め方【図解】読者心理×SEOで考えるブログのカテゴリーの決め方

大まかなデザインのイメージ

今回はテンプレートをつかってホームページを作成していく方法を解説しています。

様々なテンプレートがあるので事前にある程度イメージを絞っておいたほうが選びやすくなります。

・写真がダイナミックに入るデザインにしたい

・ミニマルで洗練されたデザインにしたい

・幅広い世代に見てもらえるような落ち着いたトーンにしたい

・エッジの効いたクリエイティブな印象にしたい

つく蔵

自分の出したいカラー、見てほしい人の世代や傾向などを踏まえてデザインのイメージを膨らましてみよう!

今の段階でイメージしにくければ、実際にテンプレートを選ぶときにいろんな種類をチェックしてみるといいわね!

うむ子

②サーバーとドメイン、HP作成ツールWordPressの設定

プランニングがある程度できたら実際に作成準備に入ります。

管理しやすくカスタマイズの自由度が高いWordPressを使用します。

WordPressでHPを開設するには、レンタルサーバードメインを契約する必要があります。

HPに必要な3つの設定

WordPress自体は無料で使用できるので、基本的にはサーバー、ドメイン代だけのローコストでホームページをつくることができます。

サーバーとドメインとは

サーバーとドメインの説明を例を用いて簡単に説明します。

インターネット上の仮想空間の中に、サーバーという建物があります。ネット上の家のようなイメージです。

サーバとドメイン

独自でサーバーを持つのは一軒家を所有するようなイメージです。

レンタルサーバーはマンションの一室を間借りする(賃貸)イメージです。

一軒家は管理やメンテナンスの手間がかかるため、サーバー会社がマンション全体を管理してくれているレンタルサーバーを契約してブログを開設します。

通常の賃貸契約の場合、借りた時点で自動的に住所が割り当てられていますが、ネット上では自分で住所を決めることができます。

このインターネット上の住所のことをドメインと言います。

参考記事

WordPressブログ始めかた【図解】2020初心者のためのWordPressブログの始め方

ホームページ作成準備のステップ

HPをつくる方法

1:サーバー契約

2:ドメイン契約

3:WordPressインストール

初めての方は難しそうに感じるかもしれませんが、とても簡単です。

1〜3までのステップを5分で設定することができます。

くわしい設定方法はこちらの記事内で、図解と設定画面の画像をつかって初めての方にもわかりやすく解説しています。

エックスサーバーWordPress始めかたクイックスタート【5分で完了】WordPressブログをエックスサーバーで簡単に始める方法

つく蔵

それぞれ別々で契約すると設定が複雑なので、初めての人は5分でできるクイックスタートがおすすめだよ!

テンプレートを選んでインストール

WordPressでホームページをつくる場合、テーマと呼ばれるサイト全体のテンプレート(機能、デザイン)を使用するのが一般的です。

ホームページのベースとなるテーマを選び、設定していきましょう。

テーマの選び方と設定方法

WordPressでHPをつくる方法

1:テーマを選ぶ

2:WordPress管理画面にログイン

3:テーマをインストールする

1:テーマを選ぶ

テーマは有料・無料、国内外に多数あります。1つ1つ選ぶのはとても大変なので、選び方のポイントや厳選テーマをまとめています。

ホームページ、ブログサイトそれぞれに最適なおすすめテーマをこちらで紹介しているので参考にしてください。

WordPressのテーマ5選【厳選】WordPressのテーマとは?ブログ初心者におすすめのテーマ5選 WordPressホームページテーマホームページに最適!おしゃれで高機能なWordPressテーマ5選!

2:WordPress管理画面にログイン

管理画面へのログイン方法

ログインURL  https://ドメイン(〇〇〇.comなど)/wp-login.php

ログイン画面にユーザー名orメールアドレス、パスワードを入力して管理画面に入ります。

3:テーマをインストールする

テーマのインストール方法はこちらの記事で解説しています。

WordPressテーマインストール方法WordPressのテーマを設定(インストール)する方法

③作成(ページの構成、文章作成、画像やデザインの選定)

次に実際に各ページをつくっていきます。

各ページの作成方法はテーマによって違いますが、簡単にレイアウトを変更できたり、写真や文章を入力する機能が設けられているものがほとんどです。

各テーマのカスタマイズガイドを見ながら、ページを行います。

ページ作成のポイント

HP作成のポイント

・スマホで表示したときの見やすさを意識する(文字サイズ、色、写真など)

・情報を整理して表記する

・全ページ統一感のある雰囲気にする(画像選び、文章の書き方、色)

文章の書き方のポイント

ホームページはオフィシャル感のあるシンプルでわかりやすい文章がマッチします。

ホームページの世界観によってはキャッチーな表現でもいいと思いますが、パーソナルな考えや表現は記事やブログで書くなど、文章の書き方も目的に合わせて分けると読みやすいです。

ブログや記事の書き方はこちらの記事で解説しています。

ブログ書き方テンプレート【図解】初心者でも読まれるブログが書ける文章構成とテンプレート

デザインのポイント

HPデザインのポイント

・テーマカラーを決める

・ロゴやアイコンなどをつくる

・画像や写真のトーンを統一する

テーマカラーの決め方

テーマカラーは多くても3色までにしましょう。

バランスの良い配色の比率は次の通りです。

配色バランスHP

ベースカラー70%、メインカラー25%、アクセントカラー5%

ロゴやアイコン

ホームページにロゴやアイコンがあることで、デザインがグッとしまります。

SNSなどでも共通して使えるようなロゴやアイコン(プロフィールなど)をつくっておくと、ネット上のさまざまな媒体で統一感のあるイメージをつくることができます。

ロゴ、アイコン作成におすすめのサービス

キャラクターデザイン

コクリキャラ

ブランドやSNSアイコンキャラクターのデザインはこちらがおすすめです。

コクリキャラ詳細を見る

ロゴデザイン

コクリロゴ

ロゴデザインはこちらがおすすめです。

コクリロゴ詳細を見る

画像選びのポイント

写真は画質の良いものを選びましょう。写真のトーンを統一するには、明るさ、彩度、コントラストなどが近いものを選びます。

選び方のポイントがわからないという方はこちらの記事を参考にしてください。

おしゃれなアイキャッチ画像の作り方【画像50枚で解説】おしゃれなアイキャッチのつくり方!デザインと画像選びのコツ センスの磨きかた【図解】センスを磨く方法!3つのコツをわかりやすく解説【はじめてのデザイン】

ホームページで使う画像は有料素材がおすすめ!

無料の場合、誰かとかぶる可能性が高いので、Web上での顔になるホームページには有料素材がおすすめです。

こちらの記事で素材サイトを紹介しています。

【厳選】ホントに使える!ブログ用おしゃれな画像フリー素材&有料素材サイト【厳選】もう迷わない!ブログの読者が増えるおしゃれな画像フリー素材&有料素材サイト

ブランディングを意識したデザイン

ホームページのデザインで、ブランドイメージ構築をしたいという方はこちらの記事もチェックしてみてください。

ブログブランディング8つのコツ【図解】知らないと損!ブログでブランディングするための8つのコツ

④運営(バックアップ、運営のコツ)

最後に運営に役立つポイントを紹介したいと思います。

バックアップ

プラグインを使用したり、カスタマイズを行う際にデータが消えるなどのトラブルが起こらないように、バックアップを取るようにしましょう。

おすすめのバックアップ方法

UpdraftPlusというプラグインを使うことで簡単にバックアップ&復元ができます。

WP管理画面のサイドバー[プラグイン]→[新規追加]→検索スペースに「UpdraftPlus」と入力。

[インストール]をクリックして完了したら[有効化]を押します。

 

運営のポイント

HP運営のポイント

・更新頻度はなるべく多く

・少しずつSEOにも力を入れる

・マーケティングやブランディングも意識してみる

・文章やデザインのスキルを磨く

更新頻度

コーポレートサイト、ポートフォリオサイトの場合あまり更新頻度が高くないと思いますが、情報が止まったホームページは良い印象を持たれないのでなるべく最新情報などをアップするようにしましょう。

SEO

ホームページにSEOを取り入れることで検索流入をアップすることができます。

訪問者を増やしたい人はぜひ少しずつ勉強して取り入れてみてください。

【図解・まとめ】SEOとは?超初心者のためのSEOの始めかたガイド

マーケティングやブランディング

Webマーケティングの知識が増えると、ホームページのつくり込みやライティングの質が変わっていきます。

特に集客やホームページから仕事を受注したい方は基本的なWebマーケティングの仕組みを理解しておきましょう。

Webマーケティング【図解・まとめ】初心者のためのやさしいWebマーケティング講座シリーズ

また、ブランディングについて理解を深めると、届けたい相手に的確に情報を届けることができます。印象に残る発信媒体をつくることができるので、ビジネス以外の用途でホームページを運営する場合にもおすすめです。

セルフブランディングの5ステップ【図解】ブランディングとは?ターゲティングとブランド戦略5ステップ【やさしいWebマーケティング講座⑥】

 

以上、初心者でも簡単にできるホームページのつくり方でした。

運営しながらでもカスタマイズできるので、まずは形にしてみてWordPressに慣れていくことをおすすめします。

この記事が皆さんのWebライフのお役に立てたら嬉しいです!