How To Make A Website For Free Tutorial | Website World

How to Make a Website

ウェブサイトの作成方法を学ぶ 無料のウェブサイトビルダー数週間ではなく、数時間で!無料のショッピングカートとPOSソフトウェア、Webデザインウィザード、そして内蔵の一括メール送信機能を備えた、隠れたコストのないオールインワンのWebサイトサービスです。

ウェブサイトを作る5つのステップ

弊社でウェブサイトを作成するには、次の 5 つの簡単な手順があります。

  1. 無料トライアルにサインアップ
  2. ページの追加、削除、名前の変更
  3. コンテンツを追加する
  4. Design your website
  5. ライブ配信

1. 30日間の無料トライアルにサインアップする

サインアップ 無料トライアルウェブサイト による:


  • Selecting a web design template from our continually growing range of pre-designed templates for service and product based businesses. This template can be easily changed later. In this example, we are using the website template Minimal ContentBox (100% Wide) as a demonstration website.


  • Select the type of website you want to build, such as an online shop, a service provider, a blogger, real estate agent etc.This will let us pre-populate your website with the appropriate pages for your chosen industry. In this example, we are choosing the Shop/Retail eCommerce option which includes a built in shopping cart.

  • 無料のウェブサイトトライアルを開始するには、ウェブサイト名と連絡先の詳細を入力してください。

メールアドレスの確認と、ウェブサイトへのログイン方法、そして仮パスワードが記載されたメールが送信されます。ログインすると、新しいウェブサイトを完全に管理できる「ウェルカムダッシュボード」が表示されます。


2. ウェブサイト上のページを追加、削除、または名前変更する

Your new website will come pre-populated with pages which will vary according to the type of template you chose. It is easy to add or/and remove  or rename these pages within your website.

  • 新しいページの追加

To add a new page to your website, click upon the Add Page button which can be found on the left hand side of the Welcome Dashboard, or by clicking on the Web Pages button and selecting Add Page.

次に、追加するページの種類を確認するよう求められます。この例では、「シングルページ(ドラッグ&ドロップ)」オプションを選択します。

次に、メニュー ボタンに表示されるテキスト、ページ見出し、SEO ファイル名など、そのページに関する情報を入力します。

「今すぐ新しいページを追加!」ボタンをクリックすると、新しいページに移動します。また、画面左側のメニュー表示とウェブサイトのメニューバーにも自動的に追加されます。

  1. SEOの観点から、ウェブサイトからページを完全に削除することは推奨されません。代わりに、ページの表示設定を変更して、検索や閲覧をブロックし、メニューから削除してください。削除する必要がある場合は、必ずURLを実際のページにリダイレクトしてください。
ただし、現在ウェブサイトは試験運用中なので、ページを削除しても問題ありません。削除するには、「ウェブページ」ボタンをクリックします。すると、サイトマップページが開き、現在のページがすべて表示されます。この例では、「購読」ページを削除します。まず、隣にある歯車アイコン(赤い矢印)をクリックします。

すると、このページに関するオプション画面が開きます。「このページを削除」ボタンを選択してください。警告メッセージが表示されます。「今すぐページを削除」ボタンをクリックし、画面の隅にある「X」をクリックして画面を閉じてください。

  • Renaming a page is also done via the web pages site map page. Click on the Web Pages button, and select the Shopping page wheel cog icon this time. The area you want to edit are the button text, page heading and SEO filename. Be aware that once your website is live, you should not change any SEO filename as to do so creates broken links on your website, and search engines believe that as it has a new filename, it is a new page. You consquently lose any SEO benefits that page had. You can change your filenames without penalties if your site is still in trial mode however.

To save the changes you have made so far on your website, please click on the green Publish button. This will not make your site live, but will instead publish the changes to your trial site, saving them.

3 - ウェブサイトにコンテンツを追加する

ウェブサイトに追加できるコンテンツには、テキストとグラフィック/写真の 2 種類があります。

  • ページにページタイトル、サブ見出し、段落テキストを追加する

ページを編集してタイトル、見出し、段落テキストを追加するには、画面左側の「Webページ」タブでページ名をクリックします。すると、編集するページが開きます。この例では、Innova Studioのドラッグ&ドロップエディターを使用して、以下に示すように「会社概要」ページを編集します。

「会社概要」ページが開いているので、サブ見出しと段落テキストを追加できます。これは、デフォルトでページ中央にある段落テキストボックス内をクリックするか、右側の列から必要なテキストの種類を含むスニペットを選択することで行うことができます。

既存の段落スニペットボックスにテキストを追加し、その上にある見出しH2スニペットボックスをクリックしてドラッグしました。そして、この画像のように、見出しスニペットにタイトルを追加しました。

ページタイトル、つまり見出し1(h1)を変更するには2つの方法があります。1つ目は、ページ名を変更する前の手順の指示に従うことです。2つ目は、青いメニューから「SEO」タブを開き、「ウェブページのメタタグを最適化」を選択することです。

This will then open a page from where you can edit your SEO meta tags, including your page title (page heading).

  • Upload and Add an Image to a Web Page
既存のテキストブロックに画像を挿入するには、画像を挿入したい場所にカーソルを置き(赤い矢印)、編集バーの「+」記号(紫色の矢印)をクリックします。 - カーソルをテキストの横に置くと、テキストの位置が変わりますのでご注意ください。テキストの横に画像を配置したい場合は、スニペットボックスを使用することをお勧めします。 - 挿入する内容(画像、リンク、フォームフィールド)を選択するボックスが開くので、「画像の挿入」を選択します。デバイスから画像をアップロードするには、「参照」ボタンをクリックしてデバイス上の画像ファイルを開き、画像(JPEGファイルが最適です)をダブルクリックして、青い「アップロード」ボタンをクリックします。

CMSの画像ウィザードが開き、必要に応じて編集できる状態になります。画像の現在のサイズ、既存のファイル名、切り取り、回転、サイズ変更、JPGへの変換などのオプションが表示されます。この画像を「会社概要」ページに収まるようにサイズ変更します。「サイズ変更」ボックスのドロップダウン矢印をクリックし、画像サイズとして「448x448」を選択します。必要に応じてファイル名を変更し、「変更を保存」をクリックします。

別のボックスが開き、画像の位置、枠線、画像の周囲のパディングなど、画像の編集オプションを選択できます。この例では、デフォルトの枠線、配置、パディングを選択し、青い「今すぐ写真を挿入」ボタンをクリックします。

画面右側にあるドラッグ&ドロップウィジェットを使って、画像または画像とテキストブロックをページに追加することもできます。利用可能なオプションから最適な画像の種類を選択し、ページ上の希望の場所にドラッグ&ドロップしてください。画像にマウスを合わせて「画像を変更」アイコンをクリックしてください。

Use the option which suits you best to pick the image:

  • Use an existing image you have previously uploaded
  • デバイスから画像ファイルを選択してください
  • デバイスから画像ファイルをドラッグアンドドロップします
  • すでにウェブサイトにある画像の画像場所の URL を貼り付けて画像をインポートします

4. ウェブサイトをデザインする

当社のDIYウェブサイトビルダーを使えば、ウェブサイトのデザインは素早く簡単に行えます。フォントサイズ、色、書体、そしてウェブサイトのメインカラーを変更する方法をご紹介します。
  • フォントの種類とサイズを変更する

フォントの種類とサイズの変更は、ウェブサイト全体の場合はメニューの「デザイン」オプション、個々のページの場合は各ページの「カラーとフォント」オプションから行うことができます。まずはウェブサイト全体のフォントについて見ていきましょう。「デザイン」メニューから「カラーとフォント」を選択してください。

Scroll down the page until you see the Fonts box options. Here you will be able to edit the: General Font, Heading Font, Font Size and Line Height. 

  • 特定のウェブサイトページのフォントを変更する

フォントを変更したいテキストをハイライト表示し、編集ツールバーの「フォントファミリー」ボックスの横にあるドロップダウン矢印をクリックします。現在使用しているTinyMCE3510以外のエディタを使用している場合は、表示が異なりますのでご注意ください(右上に現在のエディタ名が表示され、新しいエディタモードに切り替えることができます)。

ご希望のフォントを選択すると、ハイライト表示されたテキストのみがそのフォントに変更されますが、ページの他の部分は変更されません。サイズを変更するには、特定のテキストを再度ハイライト表示し、「フォントサイズ」の横にあるドロップダウン矢印をクリックして、ご希望のサイズ(pt)オプションを選択してください。

  • ウェブサイトの全体的な色を変更する

ウェブサイト全体の色を変更するには、「デザイン」タブを開き、「色とフォント」オプションを選択します。「デザインオプション」ページでは、ウェブサイト上の様々なエリアの色を編集できます。

色には16進コードまたは色番号が割り当てられているため、例えば単に「濃い青」という表現よりも具体的な色を指定できます。色を変更したい項目の横にあるボックスに16進コードを入力し、別のボックスをクリックして保存できます。または、「色を選択」ボタンをクリックし、カラーウィザードから手動で色を選択して「色を使用」ボタンを選択することもできます。

私たちが使用することを選択した色は次のとおりです。


Save your work by clicking the Save Changes and then the Publish buttons.

  • 個々のWebページのテキスト色を変更する

Highlight the heading and then select the drop down box next to the Text Colour icon. This will open up a pre-selected range of colours to choose from, as well as giving you and option for others by clicking on the More Colours option.

Click the Save Changes button and then the Publish button to save your work so far.

5 - ウェブサイトを公開する

ウェブサイトが公開されたら、新商品、コンテンツ、画像などを追加し続けることができます。ウェブサイトは生き物のように、変化し成長していくものです。唯一注意すべき点は、商品やページを削除することです。削除した商品はサイト上に残し、在庫切れにして非表示にしておくことをお勧めします。


ウェブサイトを公開するには、「公開」ボタンをクリックし、ドメイン名を割り当て、最初の月のウェブホスティング料金を前払いしてください。毎月の自動支払いを設定することをお勧めします。割引を受けるには、1年分を前払いで購入してください。

もしあなたが ドメイン名 取得は簡単です。青い「ドメイン/メール」ボタンをクリックし、「新しいドメインを検索して登録」オプションを選択してください。すると、選択したドメイン名を入力できるページに移動し、空いていれば購入することができます。購入されたドメイン名はアカウントに追加され、新しいウェブサイトに割り当てることができます。

Our team here at Website World are here to help! Make sure you check out our トレーニングとチュートリアル ウェブサイトの作成と管理に関する無料のサポートをご利用いただけます。 当社がホストするウェブサイトは超高速です あまりにも!