ワードプレス自作ホームページ例【初心者でもココまでデキます!】

ワードプレス自作ホームページ例【初心者でもココまでデキます!】

ワードプレス自作ホームページ例【初心者でもココまでデキます!】

この記事は、

  • ワードプレスで自作したホームページ例を見てみたい
  • ワードプレスで自作するホームページはダサくならない?
  • 初心者素人がワードプレスで自作ホームページでどこまでデキる?

といったような疑問・質問にお答えしていきます。

この記事を見ることで、

  • ワードプレスで自作したホームページの例を見れます。
  • ワードプレスで自作するホームページのレベル感が分かります。
  • ワードプレスで自作する際の各種表示例等が確認できます。

➡︎「ホームページ自作【初心者入門ガイド】」のトップに戻る

ワードプレス自作ホームページ例

ワードプレス自作ホームページ例(WordPressテーマ例)
例:WordPressテーマより

ワードプレスで自作するホームページやブログの例は探せば山ほどあります

なぜならば、検索結果に出てくる30%〜40%は、ワードプレスのウェブサイト(ホームページやブログ)だからです。

WEBサイト作成方法でワードプレスが占めるシェア率

  • WordPress 37.2%
  • その他600種以上 62.8%
ホームページ自作で使われるツールはワードプレスがシェア率37.2%(グラフ)

その他600種類以上もあるサービスやツール(WixやJimdoなど)で作成したウェブサイト、昔ながらの制作方法(HTMLコーディング等)で作成したウェブサイト、全て合わせると62.8%ですが、ワードプレスは、たった1ツールで37.2%です。

なので、検索結果に出てくるサイト(ホームページやブログなど)の約4割はワードプレスです。

ワードプレスのシェア率について詳しく知りたい方は、下記の記事も参考になります。

➡︎CMSシェア率ランキング

ですが、一見、見ただけだと、どのホームページが自作で、どのブログがワードプレスかは分かりません。

なので、ワードプレス+自作(初心者)のホームページやブログについて実例をいくつか紹介していきます。

ワードプレス自作ホームページ3例

大量…ではないのですが、3例ほど、ワードプレス+自作(初心者)のホームページやブログを紹介していきます。

教え業(例:コンサルタントなど)の自作ホームページ例

まずは、今見ていただいてるページこのサイト。これは、私が、ワードプレスで自作しているホームページです。iPad(たまに+スマホ)だけで作成しています。

トップページ例

➡︎トップページへ

  • 作成者:筆者(プロフィール
  • レベル:初心者(当時)、パソコン苦手(今も)
  • 端末機:iPad(+iPhone)
  • HP内容:ホームページの自作および集客に関する情報提供サイト。初心者の方の誤ちを防ぐことと、見込み客の集客が目的。

自作ホームページでも、多くの検索キーワードで検索結果1位表示されます。以下は、ほんの一部ですが、その証拠です。

検索結果順位状況(2020年6月時点)

ワードプレス自作ホームページ(コンサル業等)SEO効果例

アクセス数も以下のグラフのように伸ばしていくことができます。

アクセス数の伸び状況(2020年6月時点)

ワードプレス自作ホームページ(コンサル業等)アクセス数アップ効果例

実は私も、ホームページに関しては初心者でしたが、その後、ホームページの自作や集客ができるようになったので、今は、自作ホームページ集客のノウハウを、多くの人に教える活動をしています。

なので、あなたも、この私のホームページ程度のものであれば自作できるということです。私はデザインセンスも無いので、あなたの方が、もっと見た目の良いホームページになる可能性ありです。

注:見た目でホームページ集客はできません。デザイン性が高いほど集客力は低下していきます。また、集客へ向けては、WEBマーケティング等のノウハウが必須です。

その他、ランディングページやブログなどのページ例は下記の通りです。

ランディングページとブログページ例

ワードプレス自作ホームページ(コンサル業等)ランディングページとブログページ例

パソコンを一切使わず、iPadだけでも、このように、ワードプレスで自作ホームページは作ることができます。

関連記事

➡︎iPadだけでホームページは作成できるのか?【実録自作レビュー】

施術業(例:美容師やトレーナーなど)の自作ホームページ例

ワードプレス自作ホームページ例(施術業等)

続いては、美容師として独立された方のホームページです。これも、ワードプレスを使用してオーナーが1人で自作されたものです。

トップページ例

ワードプレス自作ホームページ(施術業等)トップページヘッダー画像例

➡︎美容室メルシー(神奈川県横浜市青葉台)

美容師という仕事柄ということもありますが、私のホームページよりも数倍オシャレなホームページになっています。

  • 作成者:加藤さん(美容師)
  • レベル:初心者(当時)、パソコン苦手(今も)
  • 端末機:iPad(+iPhone)
  • HP内容:いわゆる美容室のホームページ。ブログも積極的に執筆。

検索で上位表示されるキーワードも沢山あります。たとえば、以下の検索キーワードで検索すると、ホットペッパービューティーというオバケサイトを除けば、1位や2位に表示されます。

  • 〔髪質改善 美容院 青葉台〕
  • 〔大人女性 美容院 青葉台〕
  • 〔ヘアケア 美容院 青葉台〕
  • 〔白髪染め 長持ち 美容院〕

加藤さんも、ホームページ作成は完全な初心者で、パソコンも苦手でした。ですが、本業が忙しい中、このレベルのホームページをほぼ1人で作り上げました。

加藤さんは、私のクライアントさんでもあったのですが、私が教えたことに加えて、ご自身でもWEBマーケティングなどをコツコツ勉強されていてるので、今も着実にアクセス数を伸ばしています。

加藤さんが1人で独立した時から、私もお手伝いしていますが、お客様もどんどん増え続け、わずか数年で、10人以上のスタッフ、複数店舗を経営するまで成長しています。

これは、もちろん、ホームページだけではなく、加藤さんの、経営・マーケティング・接客サービス力、そして、美容師としての高い技術と人間性、これら全てが長けていたから成せたということです。もちろん、様々な努力も凄いしています。素晴らしいですね。

ブログページとその他ページ例

ワードプレス自作ホームページ(施術業等)ブログページとその他ページ例

新しく美容院を探している方には、おすすめです。最高の技術と最高の接客です。ヘアケアに関しては、ヘアケアマイスターという資格まで取得したプロ中のプロです。お世辞ではありません。きっと満足されるはずです。(所在地:神奈川県横浜市青葉台「美容室メルシー」)

シニアかつ初心者の自作ホームページ例

ワードプレス自作ブログ例(シニアの方)

もう1例、紹介します。こちらはホームページではなく、ワードプレスで自作したブログです。

尚、このブログを作成したのは現在80歳(2020年6月時点)の方です。ワードプレスでブログを自作したのは70代も終わりの時です。雑記ブログで収益を!とGoogleアドセンスも自分でやられています。

トップページとプロフィールページ例

ワードプレス自作ブログページとプロフィールページ例例

➡︎ハマじぃブログ

  • 作成者:ハマじぃ(80歳)
  • レベル:初心者(当時)、パソコン苦手(当時)
  • 端末機:パソコン
  • HP内容:ウォーキング、ランニング、健康関連の情報発信。シニアに元気を与えることと、将来的にブログから収益を上げていくことが目的。

「ハマじぃ」さんも、数回だけですが、私の方でご指導させてもらいました。私のクライアントさんは、30、40、50代の方が多いのですが、同じレベルの話しをしても、理解力・吸収力・行動力、全く問題無しです。むしろ、良いくらいでした。

それでもって、頑固でなく、素直で、しかも優しい。こんな年下の私の指導も素直に聞き入れて、すぐ実行に移せる素敵な大先輩です。

繰り返しますが80歳です。もちろん、ITとかWEBの経験は今まで無し。ワードプレスによるホームページの自作なんて当然初めてです。そのチャレンジ精神、カッコいいというか、凄くないですか。

ちなみに、普段は普通に守衛としてのお仕事もされてます。その上でのブログ自作です。毎日欠かさず何年もウォーキングを続けています(これが元気でいる一番のポイントとのこと)。だから、見た目も驚くほど若い!

ブログ記事ページ例

ワードプレス自作ブログ記事ページ例

「ハマじぃ」さんについては、もっともっと語りたいのですが、この記事の目的と離れてしまうので、この辺で終わりにします。ぜひ、「ハマじぃ」ブログをご覧ください。

ワードプレス自作ホームページ例(初心者でもできること)

ここからは、
ワードプレスで、ホームページやブログを自作した場合、その中で、できることには何があるのか?
といったような観点で説明していきます。

ワードプレスで普通の会社のホームページは自作できますか?

  • 普通の会社のホームページはできますか?
  • ➡︎できます。

但し、普通の会社のパンフレットレベル(概要、サービス、理念、社長の言葉、アクセス、問い合わせページ…)のホームページでは、100%集客はできません。気をつけてください。

集客できるホームページにするには、情報発信型、見込み客獲得型のホームページにしていく必要があります。

集客できない自作ホームページ例

集客できないホームページ構成例

集客できるホームページ例

集客できるホームページ構成例

あと、スマホに最適化されていないホームページは致命的です(見込み客がパソコンしか使わないターゲットであればまだ大丈夫ですが…)。

スマホ最適化されていないホームページ例

↑左側の例は文字が小さすぎて、読者はイラついて瞬時にブチっと閉じます。

ワードプレスでホームページとブログを一緒に作れますか?

  • ブログも一緒に作れますか?
  • ➡︎できます。

ワードプレスは元々はブログ向けのツールです。ホームページ内にブログも普通に一緒に書いていけます(前述の集客できるホームページ例の図を参照)。

ブログ投稿は、集客に非常に効果的です。ぜひ、ブログ投稿するようにしてください。但し、日記的な投稿は全く効果につながりません。また主語が「私は!」「私達は!」という内容は基本的に誰も読みません。「あなたは…」で書いていきましょう。

ワードプレスで自作するホームページに問い合わせフォームを入れることはできますか?

  • 問い合わせフォームを入れられる?
  • ➡︎入れられます

フォーム例(1)

「Contact Form 7」という無料プラグインを使えば、ホームページ内に問い合わせフォームを入れることが可能となります。

コンタクトフォーム7というプラグインを使用した入力フォーム例

フォーム例(2)

また、メール配信システムなどを契約している場合、そのサービスの機能を使用して、ホームページ内に問い合わせフォームを設置することが可能です。

メール配信システムを使用した入力フォーム例

フォームの入力項目が1つ増える毎に、成約率(お問い合わせ率や登録率)は下がっていきます。多くの情報を入力してもらいたくなりますが、可能な限り入力項目は減らしてください(率だけで言えば1つが一番良いです)。

ワードプレスで自作するホームページに地図は入れられますか?

  • 地図は入れられますか?
  • ➡︎Googleマップを入れられます

実際に例として、このページに地図を入れておきます。東京タワーの地図です。

東京タワー地図表示例

地図の設定方法については下記の記事で詳しく説明しています。

➡︎ワードプレスホームページ編集【70枚の画像付き手順】→「地図(Googleマップ)の設定編集」

ワードプレスで自作するホームページ内にランディングページは作れますか?

  • ランディングページ(LP)は作れますか?
  • ➡︎LPも作れます。

使用するワードプレスのデザインテーマによっても異なりますが、ランディングページも普通に作れます。

見込み客獲得型(リスト獲得型)のホームページで、ランディングページが無いと、出口の無いホームページとなります。これだと、何の成果も得られません。ランディングページは必ず用意してください。

ランディングページを用意するには、質の高いアクセスを呼び込む情報コンテンツ(ブログなどで発信)と、魅力的なオファー(リスト登録との交換条件(例:無料プレゼントなど))が必須です。

ランディングページ例(私の場合)

➡︎ホームページ【無料】自作ホームページ集客講座(7つの特典付き)

ワードプレスで自作するホームページ内に動画は埋め込めますか?

  • 動画は埋め込めますか?
  • ➡︎埋め込めます。

動画を直接ホームページに取り込むと、容量も大きく動作も重くなるので、YouTubeにアップロードした動画にリンクさせて埋め込むという感じで実現できます。

下記は、実際にこのページに、YouTube動画を埋め込んだ例です。

動画の埋め込み方法については下記の記事で詳しく説明しています。

➡︎ワードプレスホームページ編集【70枚の画像付き手順】→「地図(Googleマップ)の設定編集」

ワードプレスで自作するホームページ内に画像はどのように表示させることができますか?

  • 画像はどのように表示させることができますか?
  • ワードプレスでは画像のサイズやスタイルを以下のように表示することができます⬇︎

オリジナル:1920×1280(JPEG)

大サイズ指定

ワードプレス画像大サイズ時の表示例

中サイズ指定

ワードプレス画像中サイズ時の表示例

スタイル(フォトフレーム)

ワードプレス画像スタイルフォトフレーム表示時の例

スタイル(丸マスク)

ワードプレス画像スタイル丸マスク表示時の例

サムネイル指定

ワードプレス画像サムネイルサイズ表示時の例

画像の設定の方法は下記の記事で詳しく説明しています。

➡︎ワードプレスホームページ編集【70枚の画像付き手順】→「地図(Googleマップ)の設定編集」

ワードプレスで自作するホームページ内に表は作れますか?

  • 表は作れますか?
  • ➡︎作れます

簡易的な表しか作成できませんが、以下のような表であれば作成できます。

CMSシェア率シェア率2019シェア率2020
WordPress61.8%63.4%
Wix2.3%2.3%
Jimdo0.2%0.1%
合計64.3%65.8%

表の入れ方は下記の記事で詳しく説明しています。

➡︎ワードプレスホームページ編集【70枚の画像付き手順】→「地図(Googleマップ)の設定編集」

ワードプレスで文字や画像にアニメーションを付けることはできますか?

  • 文字や画像にアニメーションを付けることはできますか?
  • ➡︎できます。

たとえば、こんな感じ⬇︎

アニメーションさせる方法は下記の記事で詳しく説明しています。

➡︎ボタンが動くアニメーションの作り方ワードプレス編

その他

ここまで説明してきたこと以外でも、ワードプレスで出来ることは沢山あります。普通に必要となる表示は、ほぼ全てワードプレス(+プラグイン(オプション機能))で行うことができます。

重要】例をそのまま真似てもダメ

競合他社などのホームページを調べて、「あぁ素敵なホームページだなぁ」「私もこんなホームページにしたいなぁ」と、真似したくなる気持ちは分かります。

ですが、ホームページは見た目ではありません(集客目的のホームページやブログの場合)。見た目を真似するのは大間違いの始まりです…。

見た目やコピーライティングを、単純に真似ても、残念ながら結果は何も得られません

真似をするのであれば、成功している競合他社のホームページから読み取れる、戦略を真似してください

但し、その戦略は、あなたではなく、そのホームページの運用者に最適化されています。そのまま戦略を真似すると失敗します。必ず、今のあなたの状況に合わせて真似(応用)するようにしてください。

参考)

ホームページから集客していきたい方は、下記の無料講座を学んでおくと、失敗を未然に防げます。おすすめです。

➡︎【完全無料】ホームページ集客講座(7つの特典つき+α)※初心者向け

まとめ

ここまでの例を見てきて分かるように、初心者でも、パソコン苦手でも、シニアでも、誰でもワードプレスでホームページを自作することは十分可能です。そして、色々なデザイン、色々な形、色々な表現をしていけます。

例を参考にすることは、悪いことではなく良いことです。著作権や常識的なモラルは十分に意識して欲しいのですが、真似することは成長へ向けての最良最速のコツです。

ですが、もし、集客目的があるのであれば、見た目は全く重要ではありません。単純な真似も上手くいきません。内容です。戦略です。自分にどう合わせるかです。マーケティングノウハウや努力も必要です。それを忘れないようにしてください。


ホームページ自作ガイド

⬅︎第5章『自作ホームページ作り方手順【失敗しない重要ポイントも解説!】』

➡︎第7章『会社のホームページ自作【中小企業や個人事業7つの活用ポイント】

⬅︎『ホームページ自作ガイド』のトップに戻る