最終更新日: 2025年6月17日
HTML-デザインBの原稿を作りを始めましょう。
まずは、HTML-デザインB用 原稿のテンプレートを開きます。
準備はできましたか? 早速、始めましょう!

目次
HTML-デザインBのトップページを作ろう
A-1:タイトルを付ける

赤い四角の中に表示される部分を入力します。キャッチフレーズも合わせて入力してください。また、赤い四角の左側にマークを入れることが出見ます。マークを入れたい方は、「A-1:タブに入れるアイコン画像」のところに、画像をアップロードしてください。アイコンを空にしておくと、「地球」のアイコンが表示されます。
タイトルはgoogleやyahooで索されたときにヒットする一番大切な「キーワード」です。あなたのビジネスの名前を事前に、google検索でチェックしてみましょう。同名のタイトルが複数ヒットするようでしたら、工夫が必要です。
たとえば「鈴木商店」の場合、「何をしている鈴木商店なのか?」というキーワードを入れてあげれば、その他多くの鈴木商店に埋もれることは減るでしょう。
例)「鈴木商店:東京都港区で創業100年。懐かしの昭和駄菓子店」など
ホームページは「古くからある」「日々更新されている」「ページ数が多い(つまりキーワードが豊富)」「ユーザーに人気がある」などの理由で、ランキングが上がります。
新しいホームページはランキング上位に出ることが難しい場合もあるので、まずは重要なキーワードを盛り込み、タイトルで他のサイトと差をつけていきましょう!

A-2:ドメイン名(URL)を決める
ドメインは、有料にするのか無料にするのかを決めます。有料と無料の違いはこちらで紹介していますので、ご確認ください。
有料にする場合は、原稿を提出する前に有料ドメインを購入し、この項目に記入します。
無料ドメインをご希望の方は、「tendeza.fc2.page/」のように「tendeza」にあたる部分をこの項目に入力してください。無料ドメインには「fc2.page」が付きます(外すことはできません)。

A-3:サーバーを決める
サーバーを無料と有料、どちらにするのか決めます。
無料サーバーを選ぶと広告が出ることが多いのですが、てんデザのおすすめする「FC2ホームページ」は、無料を選んでも広告が出なくなりました。
ただし有料サーバーに比べ、無料サーバーは容量が少ないので、ブログなどで写真を多数掲載するなどの場合は注意が必要です。
詳しくは「サーバーについて」にまとめましたので、ご覧ください。

A-4:あなたのホームページの名前
赤い四角の部分のタイトルを決めます。A-1に書いたものと基本的に同じになります。

A-5:メニュー(5項目)
トップページ以外のメニューを5つ決めます。
赤い四角の中がメニューの部分です。
例としては
- 代表挨拶やメッセージ
- 事業内容や商品の紹介
- お客様の声や体験談、組織図やグループ会社紹介
- 求人や募集
- 社員やスタッフインタビュー
- アクセス(地図や住所、電話番号など)
などがあります。

A-6:キャッチフレーズ
あなたがのビジネスについて、キャッチフレーズを入力します。インパクトの強い、大きな文字で表示するので、なるべく短い文章にしましょう。

A-7:キャッチフレーズ(ミニ)
「A-6」に入れたキャッチフレーズを補足する文章を入れます。ここは多少長文になってもOKです。
じっくり考えましょう!

A-8:ボタン
ボタンに入れる文字と、そのリンク先のURLを入力します。
ボタンのリンク先は、あなたのホームページの中で一番見てもらいたい部分でもいいですし、外部サイトでもOK。
例えばあなたのホームページ内にある「商品一覧」や「サービス一覧」でもいいですし、外部サイトの「インディード(求人サイト)」「食べログ」または「Instagram」「TikTok」などのSNSでもOK。
必要がなければ、空のままにしておいてもOKです(ボタン表示がなくなります)。

A-9:ヘッダーの画像
あなたのホームページを印象付ける写真をアップロードしてください。
写真がない場合、フリー素材から対応いたしますが、素材に限りがありますのでご要望にぴったりの写真をご用意できない可能性があります。
その場合は有料素材よりご購入の上、アップロードをお願いいたします。
また、HTML-デザインBのヘッダーは、横に3ページスクロールします(参考:ラーメン田中)。
そのため、上記「A-6」から「A-9」と同様に、「A-10」から「A-17」までを埋めてください(必要がなければ空欄でもOK)。

動き方がわからなくなったら、動作確認「ラーメン田中」でチェックしてみましょう!
A-18以降の原稿
2ブロックに分かれたページの内容を入力しましょう。
この部分は写真下にある矢印で、画像が3点まで追加できます。ラーメン田中では「A-18」の題を「新商品」としましたが、wordpress版と違い、更新にはHTMLの知識が多少必要になります。可能であれば、更新しなくても大丈夫な内容にしておくと、使いやすいでしょう(例:店の外観や内観、主なサービス内容、職場風景など)。
「A-20」の画像のタイトルを「A-19」に入れます(写真のタイトル)。この部分は写真下の矢印で3パターン入力できます(不要でしたら空でOK)。
また、2ブロック目にも「A-25:題」と「A-26:本文」が入ります。
HTML-デザインBのメニューページを作ろう

メニュー1
おつかれさまでした。上の項目まででAシリーズ(ヘッダー下に表示される原稿)が終了しました。
ここからはBシリーズ、つまり「メニュー項目」の原稿が始まります。
あなたが「メニュー1(A-5:メニュー1)」に入力した項目がオレンジ色の四角の中に、タイトルとして現れます。
タイトルに沿った内容を、「B:原稿」に入力してください。
さらに、赤い四角の「B-1」の「画像」「題」「本文」3点セットで入力します。「B-2」から「B-4」まで、4ブロック入力が可能です。

メニュー2
ここからはCシリーズ、つまり「メニュー2」の原稿が始まります。
あなたが「メニュー2(A-5:メニュー2)」に入力した項目がオレンジ色の四角の中に、タイトルとして現れます。
黄色い四角のタイトル下の原稿を「C:原稿」に入れてください。
「C-1」の欄には「画像」「題」「本文」が入力できます。「題」と「本文」は、画像の上に触れると表示される文章です。
動作確認は「ラーメン田中」でご確認ください。
以下、同じように6セットまで追加できます。

メニュー3
ここからはDシリーズ、つまり「メニュー3」の原稿が始まります。
あなたが「メニュー3(A-5:メニュー3)」に入力した項目がオレンジ色の四角の中に、タイトルとして現れます。
「D:背景画像」にテキストの下になる画像をアップロードします。
「D-1」シリーズは「画像」「題」「本文」の3要素を入力します。このブロックは3つまで追加できます。

メニュー4
ここからはEシリーズ、つまり「メニュー4」の原稿が始まります。
あなたが「メニュー4(A-5:メニュー4)」に入力した項目がオレンジ色の四角の中に、タイトルとして現れます。
「E:原稿」にはこのメニューに関する説明文を付けることができます。
「E-1」は上から順に「題」「題2」「画像」「本文」を入力することができます。この4つの要素を1ブロックとして、3ブロックまで増やすことができます。

SNSや広告を掲載する
ここにはあなたが使っているSNSや、広告を掲載することができます。
「F-1」にキャッチフレーズを入力します。その下に「F-2」キャッチフレーズの説明をします。
「F-3」にSNSや広告を掲載します。SNSの場合は、その種類(FacebookやInstagramなど)とリンク先のURLを入力してください。
広告を掲載したい場合は、「F-2」コメントの部分に広告の内容を入力してください。

メニュー5
ここからはGシリーズ、つまり「メニュー5」の原稿が始まります。
あなたが「メニュー5(A-5:メニュー5)」に入力した項目がオレンジ色の四角の中に、タイトルとして現れます。
「G一言」は青い文字部分がリンクになっていて、お問合せFORMに飛ぶ設定になっています。ですのでここには「お問い合わせはこちら」などの文章を入れてください。お問合せFORMの送信先は、基本的にご登録いただいたメールアドレスに設定しますが、違うメールアドレスを希望される場合は、こちらに()付けでアドレスをご入力ください。また、お問合せFORMが不要な場合も()付でメール不要とご記入ください。
「G-1」は基本的にご住所等の連絡先になります。不要の場合は空欄にしてください。
下の地図は、ご入力いただいた住所より、自動的に作成されます。
「G-2」はSNSボタンです。表示を希望するSNS名と、リンク先のURLをご記入ください。
最後に
以上、ここまでが「HTML-デザインB」をお選びいただいた方にお願いしたい、原稿作成の方法でした。
「原稿作成マイページ」には、一番下の部分に「プロフィールを保存」のボタンが用意されています。一息に原稿のすべてを書き終わるのはとても大変だと思うので、Wordで原稿を書くように、少しづつ書き足して「プロフィールの保存」ボタンを押し、データを保存しながら作成してください。
以上、原稿作成、頑張ってください!




