【ホームページ:原稿の書き方】WordPress-デザインB

記事
コラム
このページを見つけてくださり、ありがとうございます!
このページは、ココナラで出品している「4万円ホームページ:WordPress-デザインB」をご購入された方、またはご購入をご検討くださっている方に向けて、ホームページ原稿作成のハウツーをまとめました。
ご覧いただけると、嬉しいです。
では、WordPress-デザインBの原稿を作りを始めましょう。
原稿作成用のマイページへのログインは、こちらで紹介しています。
準備はできましたか? 早速、始めましょう!

W-B001.jpg


HTML-デザインAのトップページを作ろう


A-1:タイトルを付ける

w-b-1.png
赤い四角の中に表示される部分を入力します。キャッチフレーズも合わせて入力してください。また、赤い四角の左側にマークを入れることが出見ます。マークを入れたい方は、「A-1:タブに入れるアイコン画像」のところに、画像をアップロードしてください。アイコンを空にしておくと、上記のような「地球」のアイコンが表示されます。

タイトルはgoogleやyahooで索されたときにヒットする一番大切な「キーワード」です。
あなたのビジネスの名前を事前に、google検索でチェックしてみましょう。同名のタイトルが複数ヒットするようでしたら、工夫が必要です。

たとえば「鈴木商店」の場合、「何をしている鈴木商店なのか?」というキーワードを入れてあげれば、その他多くの鈴木商店に埋もれることは減るでしょう。

例)「鈴木商店:東京都港区で創業100年。懐かしの昭和駄菓子店」など

ホームページは「古くからある」「日々更新されている」「ページ数が多い(つまりキーワードが豊富)」「ユーザーに人気がある」などの理由で、ランキングが上がります。

新しいホームページはランキング上位に出ることが難しい場合もあるので、まずは重要なキーワードを盛り込み、タイトルで他のサイトと差をつけていきましょう!


A-2:ドメイン名(URL)を決める

w-b-1.png

ドメインは、有料にするのか無料にするのかを決めます。

てんデザでは初期費用を小さく収めるため、無料ドメインの使用を推奨しています。使用する無料ドメインは「FC2ホームページ」です(広告が出ず、更新が必要なく、SSLが使えるため)。

有料ドメインをご希望の方は、原稿を提出する前に有料ドメインを購入し、この項目に記入してください。

無料ドメインをご希望の方は、「●●.fc2.page/」のように「●●」にあたる部分をこの項目に入力してください。無料ドメインには「fc2.page」が付きます(外すことはできません)。


A-3:サーバーを決める

imgix-klWUhr-wPJ8-unsplash.jpg

サーバーを無料と有料、どちらにするのか決めます。

無料サーバーを選ぶと広告が出ることが多いのですが、てんデザのおすすめする「FC2ホームページ」は、無料を選んでも広告が出なくなりました。

ただし有料サーバー(10G)に比べ、無料サーバー(1G)は容量が少ないので、ブログなどで写真を多数掲載するなどの場合は注意が必要です。


A-4:あなたのホームページの名前

w-b-1 (1).png

赤い四角の部分のタイトルを決めます。A-1に書いたものと基本的に同じになります。


ブログ機能、YOUTUBE埋め込みをご検討ください

w-b-1 (2).png

ブログ機能もYOUTUBE埋め込みも¥0で承ります。

ホームページ納品後、あなた自身が継続して情報を発信する場合はブログ有にしてください。

「news」や「お客様の声」「新商品の告知」などを行う場合に便利です。使い方はマニュアルをご確認ください。


A-5:メニュー(4項目)

w-b-4.png
5つ目以降のメニューはオプションです。オプションは有料のものも、無料のものもあります。オプションを申し込まれた方は、「A-5①:オプション機能のタイトル」の欄にタイトルをご記入ください。

トップページ以外のメニューを4つ決めます。

赤い四角の中がメニューの部分です。

例としては
・代表挨拶やメッセージ
・事業内容や商品の紹介
・お客様の声や体験談
・求人や募集
・社員やスタッフインタビュー
・アクセス(地図や住所、電話番号など)
などがあります。


A-6とA-7:キャッチフレーズ

w-b-6.png

キャッチフレーズを付けます。あなたのビジネスで一番大切なことを伝えましょう!

特徴やこだわりなど、同業他社との違いをアピールしてください。

大きいほうの文字をA-6に、小さいほうの文字をA-7にいれます。
大きい文字は短め文章を、小さい方の文字は多少長文でもOKです。原稿を埋めていきましょう!


ボタンを作ろう

w-b-7.png

ボタンを2つ付けることができます。

ボタンのリンク先は、あなたのホームページの中で一番見てもらいたい部分でもいいですし、外部サイトでもOK。

例えばあなたのホームページ内にある「商品一覧」や「サービス一覧」でもいいですし、外部サイトの「インディード(求人サイト)」「食べログ」または「Instagram」「TikTok」などのSNSでもOK。

必要がなければ、空のままにしておいてもOKです(ボタン表示がなくなります)。


A-8:ヘッダーの画像

w-b-8.png
テキストの背景にある画像をアップロードしてください。

あなたのホームページを印象付ける写真をアップロードしてください。

写真がない場合、フリー素材から対応いたしますが、素材に限りがありますのでご要望にぴったりの写真をご用意できない可能性があります。

その場合は有料素材よりご購入の上、アップロードをお願いいたします。


A-9:タイトルとA-10:原稿を入力してください

w-b-1-1.png


A-8までの部分を、ヘッダーと呼びます。さて、ここからがいよいよ、本文になります!

この部分には、あなたのビジネスについて、メッセージや思いを書きましょう(もちろん、他の物でもOKです)。

ヘッダーの下の、お客様が一番最初に目にする重要なパーツです。

キャッチフレーズでは伝えきれなかったこと、キャッチフレーズに込められたことのすべてを、文字ににしてみましょう。


A11:タイトルとA11-1(画像+項目のタイトル+原稿)

w-b-2-1.png
4ブロック埋めてください。4ブロックも必要のない場合は、無記入にしてください。

この項目に書き込む内容の例としては
・商品紹介
・サービス紹介
・作品事例
・求人情報 など

写真と原稿を組み合わせることができます。

A11-1からA11-4まで「4ブロック」あるので、写真+タイトル+原稿を「4組セット」で入力してください。



A12:タイトルとA12-1:画像

W-B.png

この項目に書き込む内容の例としては
・他社との違い
・自社の強み
・特徴
・こだわり など

あなたのビジネスを力強くアピールします。

もう1段落書きたい場合は、「A12-3:タイトル」と「A12-4:原稿」の入力箇所を用意しましたので、そちらに原稿を書いてください(必要がなければ、空白でもOKです)。


WordPress-デザインBのメニューページを作ろう


メニュー1

w-b-1-3.png
この項目は、ブログ機能を利用しています。てんデザでは3ページまで制作しますが、引き続き更新をするのに便利です。注意点は、ブログ形式のため古いものが常に左にあります。
ですので、最新の情報は赤い四角「B3」に、古い情報は赤い四角「B1」入力してください。

おつかれさまでした。上の項目まででAシリーズ(ヘッダー下に表示される原稿)が終了しました。

ここからはBシリーズ、つまり「メニュー項目」の原稿が始まります。

あなたが「メニュー1(A-5:メニュー1)」に入力した項目がオレンジ色の四角の中に、タイトルとして現れます。

この画像はトップページに「メニュー1」のプレビューとして表示されますが、青い文字「続きを読む」をクリックすると、「メニュー1」の詳細ページに飛びます。


メニュー1の詳細ページ
W-B-2-3.png

このセットを3ページ迄作れます。

トップページのプレビューから、または一番上にあるメニューの項目から、「メニュー1」の詳細ページに入ります。

「メニュー1」は1ページにつき、「B1:タイトル」から始まり、B1の「タイトル」「画像」「原稿」の3要素で1ブロック、それが3段まで入れることができます。


メニュー2

w-b-3-1.png

ここからはCシリーズ、つまり「メニュー2」の原稿が始まります。

あなたが「メニュー2(A-5:メニュー2)」に入力した項目がオレンジ色の四角の中に、タイトルとして現れます。

この画像はトップページに「メニュー2」のプレビューとして表示されますが、青いボタン「もっと詳しく見る」をクリックすると、「メニュー2」の詳細ページに飛びます。


メニュー2の詳細ページ
W-B-4-1.png

トップページのプレビューから、または一番上にあるメニューの項目から、「メニュー2」の詳細ページに入ります。

「メニュー2」は1ページにつき、C1の「タイトル」「画像」「原稿」の3要素で1ブロック、それが8段まで入れることができます。


メニュー3

W-B-5-1.png
この項目は、ブログ機能を利用しています。てんデザでは3ページまで制作しますが、引き続き更新をするのに便利です。注意点は、ブログ形式のため古いものが常に左にあります。ですので、最新の情報は赤い四角「D3」に、古い情報は赤い四角「D1」入力してください。

ここからはDシリーズ、つまり「メニュー3」の原稿が始まります。

あなたが「メニュー3(A-5:メニュー3)」に入力した項目がオレンジ色の四角の中に、タイトルとして現れます。

この画像はトップページに「メニュー3」のプレビューとして表示されますが、「画像」をクリックすると、「メニュー3」の詳細ページに飛びます。


メニュー3の詳細ページ
W-B-6-2.png

トップページのプレビューから、または一番上にあるメニューの項目から、「メニュー3」の詳細ページに入ります。

「メニュー3」は1ページにつき、D1:タイトル①のメイン「タイトル」+「D1画像」「D1-1タイトル(青い文字)」「D1-1原稿」の4要素。このパターンで3ページ迄作成できます。


メニュー4

W-B-7-1.png
W-B-8-3-1024x592.png

ここからはEシリーズ、つまり「メニュー4」の原稿が始まります。

あなたが「メニュー4(A-5:メニュー4)」に入力した項目がオレンジ色の四角の中に、タイトルとして現れます。

この画像はトップページに「メニュー4」のプレビューとして表示されますが、青いボタン「もっと詳しく見る」をクリックすると、「メニュー4」の詳細ページに飛びます。

「E-1:ご住所」に入力していただくと、地図が自動的に表示されます。地図の下に画像を表示させる場合(たとえばお店の外観など)は「E1:画像」に写真をアップロードしてください。


メニュー4の詳細ページ
W-B9.png
トップページのプレビューから、または一番上にあるメニューの項目から、「メニュー4」の詳細ページに入ります。

「メニュー4」は、「E2-1:画像」に対して、「E2-1:タイトル(青い文字)」「E2-1:原稿」のパターンで、画像1点に対し「青い文字のタイトル」と「付随する原稿」が3ブロック迄追加できます。

このパターンで画像3点、3ブロック迄作成できます。

W-B10.png
また、メニュー4には「営業時間」などの簡単な表を組み込むことができます。

さらに、オレンジの四角で囲まれたとこは、先に「E-1」でご入力いただきました住所から、地図を自動で表示します。


最後に

以上、ここまでが「WordPress-デザインB」をお選びいただいた方にお願いしたい、原稿作成の方法でした。

原稿を作成するマイページは、デザインごとに番号が一致するよう、このようになっています。

W-B-8-3-1024x592.png

「原稿作成マイページ」には、一番下の部分に「プロフィールを保存」のボタンが用意されています。

一息に原稿のすべてを書き終わるのはとても大変だと思うので、Wordで原稿を書くように、少しづつ書き足して「プロフィールの保存」ボタンを押し、データを保存しながら作成してください。

どこにどの写真を入れて、どんな文章を書こうかなど、パッチワークを組み立てるように考えてみましょう。きっと楽しい作業になります!

以上、原稿作成、頑張ってください!


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら