ホームページビルダーを旧バージョンから利用している人であれば、現時点での最新版であるホームページビルダー20を利用した場合でも特に戸惑う事なく利用できると思います。

しかし、ここ最近のホームページビルダーは様々な人に対応できるように『SP』、『クラシック』、『フルCSS』、『WordPress』、『かんたんスタイル』、『スタンダードスタイル』、『どこでも配置モード』などなどホームページを作成開始する段階から選択肢がたくさんあります。そのため、ホームページビルダー20から初めてホームページビルダーシリーズを使用される方は、何を利用すればよいのか? 必ずと言っていい程、迷うことになります。

そこで、本ページでは複数ある選択肢の中から自分に一番適している使い方はどれなのかを選ぶ方法を記載していきます。どの機能を使えばいいのか迷われている方は参考にして下さい。

ホームページビルダー20 機能構成

ホームページビルダー20の各機能の構成について記載します。まず、最も大きなカテゴリとしては、『ホームページビルダーSP』と『ホームページビルダー クラシック』の2つに分かれます。この2つは、機能と言うよりも別々の2つのアプリケーションだと思ってください。実際に別アプリで、起動も別々のショートカットをクリックして起動します。

そして、この2つのアプリケーションには更に下記の様な機能に分かれません。全部で29通りもあります。これをホームページを作成する前にどの組み合わせ行うのかを決める必要があります。「かんたん」スタイル、「スタンダード」スタイル、「エディターズ」スタイルはホームページ作成の途中でも変更することができますが、その他は、ホームページ作成を一旦開始すると変更ができません。

それぞれの特徴を記載しているので、自分に合った組み合わせを選ぶようにして下さい。


[ホームページビルダーSP]
  ┃
  ┣[通常(サイトタイプ)]・・・①
  ┃
  ┗[WordPress(サイトタイプ)]・・・②



[ホームページビルダークラシック]
  ┃
  ┣[フルCSS(サイトタイプ)]
  ┃  ┃
  ┃  ┣[かんたんホームページデビュー]
  ┃  ┃  ┃
  ┃  ┃  ┣[かんたん]スタイル・・・③
  ┃  ┃  ┃
  ┃  ┃  ┣[スタンダード]スタイル・・・④
  ┃  ┃  ┃
  ┃  ┃  ┗[エディターズ]スタイル・・・⑤
  ┃  ┃
  ┃  ┃
  ┃  ┣[ベーシックテンプレート(編集モード:どこでも配置)]
  ┃  ┃  ┃
  ┃  ┃  ┣[かんたん]スタイル・・・⑥
  ┃  ┃  ┃
  ┃  ┃  ┣[スタンダード]スタイル・・・⑦
  ┃  ┃  ┃
  ┃  ┃  ┗[エディターズ]スタイル・・・⑧
  ┃  ┃
  ┃  ┃
  ┃  ┣[ベーシックテンプレート(編集モード:標準)]
  ┃  ┃  ┃
  ┃  ┃  ┣[かんたん]スタイル・・・⑨
  ┃  ┃  ┃
  ┃  ┃  ┣[スタンダード]スタイル・・・⑩
  ┃  ┃  ┃
  ┃  ┃  ┗[エディターズ]スタイル・・・⑪
  ┃  ┃
  ┃  ┃
  ┃  ┣[フルCSSテンプレート]
  ┃  ┃  ┃
  ┃  ┃  ┣[かんたん]スタイル・・・⑫
  ┃  ┃  ┃
  ┃  ┃  ┣[スタンダード]スタイル・・・⑬
  ┃  ┃  ┃
  ┃  ┃  ┗[エディターズ]スタイル・・・⑭
  ┃  ┃
  ┃  ┃
  ┃  ┗[フルCSSスマートフォンテンプレート]
  ┃     ┃
  ┃     ┣[かんたん]スタイル・・・⑮
  ┃     ┃
  ┃     ┣[スタンダード]スタイル・・・⑯
  ┃     ┃
  ┃     ┗[エディターズ]スタイル・・・⑰
  ┃
  ┃
  ┃
  ┣[WordPress(サイトタイプ)]
  ┃  ┃
  ┃  ┣[かんたんWordPressデビュー]
  ┃  ┃  ┃
  ┃  ┃  ┣[かんたん]スタイル・・・⑱
  ┃  ┃  ┃
  ┃  ┃  ┣[スタンダード]スタイル・・・⑲
  ┃  ┃  ┃
  ┃  ┃  ┗[エディターズ]スタイル・・・⑳
  ┃  ┃
  ┃  ┃
  ┃  ┗[WordPressテンプレート]
  ┃     ┃
  ┃     ┣[かんたん]スタイル・・・㉑
  ┃     ┃
  ┃     ┣[スタンダード]スタイル・・・㉒
  ┃     ┃
  ┃     ┗[エディターズ]スタイル・・・㉓
  ┃
  ┃
  ┃
  ┗[白紙(サイトタイプ)]
    ┃
    ┣[どこでも配置]モード
    ┃  ┃
    ┃  ┣[かんたん]スタイル・・・㉔
    ┃  ┃
    ┃  ┣[スタンダード]スタイル・・・㉕
    ┃  ┃
    ┃  ┗[エディターズ]スタイル・・・㉖
    ┃
    ┃
    ┗[標準]モード
       ┃
       ┣[かんたん]スタイル・・・㉗
       ┃
       ┣[スタンダード]スタイル・・・㉘
       ┃
       ┗[エディターズ]スタイル・・・㉙

ホームページビルダー20 2つのアプリケーション

ホームページビルダー19から『ホームページビルダーSP』が登場し、従来のホームページビルダーは『ホームページビルダークラシック』と名称変更され2つのアプリケーションに分離されました。それぞれのアプリケーションがどういったものか、下記に概要を記載します。

ホームページビルダーSP

ホームページビルダーSPは、ホームページビルダー19から新たに追加されたアプリケーション。ホームページビルダー18までは、ホームページビルダーと言えば、ホームページビルダー1つしかなかったのですが、ホームページビルダー19からは、『ホームページビルダーSP』と『ホームページビルダークラシック』の2つに分類されるようになりました。『ホームページビルダークラシック』が従来のホームページビルダーだと思って頂いて結構です。

今後は、ホームページビルダーSPの方がメインになっていくように思います。ホームページビルダーSPは、ドラッグ&ドロップで簡単にホームページが作成できるようになっています。従来のホームページビルダー(現在の名前:ホームページビルダークラシック)の『どこでも配置モード』を更に使い易く機能拡張した様なイメージです。

ホームページビルダークラシック

従来の機能が搭載されています。ホームページビルダーSPが登場したので、名前を明確に分けるために従来のホームページビルダーを名称変更し『ホームページビルダークラシック』となりました。旧バージョンから利用している方や、HTMLやCSSにある程度知識があり自分でも書き替えたい場合は、SPではなくクラシックがおすすめです。

ホームページビルダー20 2つ編集モード

ホームページ作成者の好みに合わせて『標準モード』と『どこでも配置モード』の2つの編集モードが用意されています。

※注意事項
ホームページ作成中、作成後で、編集モードを変更することはできません。

どこでも配置モード

画像や文字をページ上の好きな場所に簡単に配置できます。HTMLやCSSが全く分からないという方はこのモードを利用した方がホームページを作り易いと思います。しかし、機能に制限があったり、実際にブラウザやスマホで見ると表示が崩れる場合があったりと、個人的にはあまりおすすめできません。

標準モード

HTMLやCSSを少しは使えると言う方におすすめ。[どこでも配置モード]よりは、ホームページを作る難易度はあがりますが、自由度も高く使いこなせば見た目が綺麗なホームページも作成できます。個人的にはこちらのモードがおすすめ。

ホームページビルダー20 3つ編集スタイル

ホームページビルダー20には、「かんたんスタイル」、「スタンダードスタイル」、「エディターズスタイル」という3つの編集スタイルがあります。このスタイルは、ホームページ作成途中でも変更できるのであまり難しく考える必要はありません。

自分がどういったスタイルでホームページを作成するかによって、このスタイルを変更します。要は、ツールバーにあるアイコンなどを多用してホームページを作成する人は、ツールバーを強化した画面構成、HTMLやCSSコードをバリバリ書く方はツールバーなど不要なものを非表示にしてエディターをメインとした画面構成といったように作業画面の構成が変わるだけと思って頂いて結構です。

[かんたん]スタイル

グラフィカルで大き目なツールバーやボタンで画面が構成されており、初めてホームページビルダーを使う方でも直感的に分かるような機能配置がされています。ただし、ツールバーのボタンは一などをカスタマイズすることはできません。([スタンダード]スタイルでは可能)。

また、このスタイルでは、HTMLの編集もできません。HTMLの編集をしたい場合は、[スタンダード]スタイルか、[エディターズ]スタイルに変更する必要があります。

[スタンダード]スタイル

メニューバーやツールバーのカスタム配置が可能。また、HTMLの編集もできるので万能なスタイルです。個人的には、このスタイルの使用がおすすめです。

[エディターズ]スタイル

HTMLのソースコードを直接書きたい方におすすめのスタイルです。不要なボタンなどは非表示にされていますが、機能自体が使えなくなっているわけではなく、表示させて使用することも可能です。[スタンダード]スタイルと同様にツールバーやメニューバーをカスタム配置することもできます。

ホームページビルダー20 自分に適した組み合わせ

ホームページビルダーSP
サイトタイプ こういった人におすすめ
通常
  • HTML、CSSの知識が全く無い人
  • 初めてホームページビルダーを使用する人
  • ホームページ作成初心者

※ホームページビルダーSPは、HTML、CSSを直接編集できないのでHTML、CSSを直接編集したい方は、ホームページビルダークラシックを使用する必要がある。
★最もおすすめの組み合わせ

WordPress
  • HTML、CSSの知識が全く無い人
  • 初めてホームページビルダーを使用する人
  • ホームページ作成初心者
  • ブログサイトを作りたい人

※ホームページビルダーSPは、HTML、CSSを直接編集できないのでHTML、CSSを直接編集したい方は、ホームページビルダークラシックを使用する必要がある。

※ホームページ作成後は、WordPressで記事投稿等を行う為、WordPressの知識も少なからず必要になります。
★最もおすすめの組み合わせ


ホームページビルダークラシック
サイトタイプ 開始モード スタイル こういった人におすすめ
フルCSS かんたんホームページデビュー かんたん
  • HTML、CSSの知識が全く無い人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者向き
  • 旧バージョンを使用したことのある人

※ホームページを作成する最初の段階で公開サーバーの用意をしなければならない。公開サーバーは後から用意したい方は、開始モード『かんたんホームページデビュー』以外を選択してください。

フルCSS かんたんホームページデビュー スタンダード
  • HTML、CSSを場合によっては直書きしたい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者向き
  • 旧バージョンを使用したことのある人

※ホームページを作成する最初の段階で公開サーバーの用意をしなければならない。公開サーバーは後から用意したい方は、開始モード『かんたんホームページデビュー』以外を選択してください。

フルCSS かんたんホームページデビュー エディターズ
  • HTML、CSSの直書きをメインとして作業をしたい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成中級者~上級者向き
  • 旧バージョンを使用したことのある人

※ホームページを作成する最初の段階で公開サーバーの用意をしなければならない。公開サーバーは後から用意したい方は、開始モード『かんたんホームページデビュー』以外を選択してください。

フルCSS ベーシックテンプレート(編集モード:どこでも配置) かんたん
  • HTML、CSSの知識が全く無い人
  • 「どこでも配置」の機能が利用したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者向き
  • 旧バージョンを使用したことのある人
フルCSS ベーシックテンプレート(編集モード:どこでも配置) スタンダード
  • HTML、CSSを場合によっては直書きしたい人
  • 「どこでも配置」の機能が利用したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者~中級者向き
  • 旧バージョンを使用したことのある人
フルCSS ベーシックテンプレート(編集モード:どこでも配置) エディターズ
  • HTML、CSSの直書きをメインとして作業をしたい人
  • 「どこでも配置」の機能が利用したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成中級者~上級者向き
  • 旧バージョンを使用したことのある人
フルCSS ベーシックテンプレート(編集モード:標準) かんたん
  • HTML、CSSの知識が全く無い人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者向き
  • 旧バージョンを使用したことのある人
フルCSS ベーシックテンプレート(編集モード:標準) スタンダード
  • HTML、CSSを場合によっては直書きしたい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者~中級者向き
  • 旧バージョンを使用したことのある人
フルCSS ベーシックテンプレート(編集モード:標準) エディターズ
  • HTML、CSSの直書きをメインとして作業をしたい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成中級者~上級者向き
  • 旧バージョンを使用したことのある人
フルCSS フルCSSテンプレート かんたん
  • HTML、CSSの知識が全く無い人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者向き
  • 旧バージョンを使用したことのある人
フルCSS フルCSSテンプレート スタンダード
  • HTML、CSSを場合によっては直書きしたい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者~中級者向き
  • 旧バージョンを使用したことのある人

★最もおすすめの組み合わせ

フルCSS フルCSSテンプレート エディターズ
  • HTML、CSSの直書きをメインとして作業をしたい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成中級者~上級者向き
  • 旧バージョンを使用したことのある人
フルCSS フルCSSスマートフォンテンプレート かんたん
  • HTML、CSSの知識が全く無い人
  • スマホサイトを作成したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者向き
  • 旧バージョンを使用したことのある人
フルCSS フルCSSスマートフォンテンプレート スタンダード
  • HTML、CSSを場合によっては直書きしたい人
  • スマホサイトを作成したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者~中級者向き
  • 旧バージョンを使用したことのある人
フルCSS フルCSSスマートフォンテンプレート エディターズ
  • HTML、CSSの直書きをメインとして作業をしたい人
  • スマホサイトを作成したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成中級者向き
  • 旧バージョンを使用したことのある人
WordPress かんたんWordPressデビュー かんたん
  • HTML、CSSの知識が全く無い人
  • WordPressサイトを作成したい人
  • ブログサイトを作成したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者向き

※WordPressサイト作成後は、WordPressの管理画面で記事作成&投稿するので、WordPressの機能に関する知識も求められます。

WordPress かんたんWordPressデビュー スタンダード
  • HTML、CSSを場合によっては直書きしたい人
  • WordPressサイトを作成したい人
  • ブログサイトを作成したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者~中級者向き

※WordPressサイト作成後は、WordPressの管理画面で記事作成&投稿するので、WordPressの機能に関する知識も求められます。

WordPress かんたんWordPressデビュー エディターズ
  • HTML、CSSの直書きをメインとして作業をしたい人
  • WordPressサイトを作成したい人
  • ブログサイトを作成したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成中級者向き

※WordPressサイト作成後は、WordPressの管理画面で記事作成&投稿するので、WordPressの機能に関する知識も求められます。

WordPress WordPressテンプレート かんたん
  • HTML、CSSの知識が全く無い人
  • WordPressサイトを作成したい人
  • ブログサイトを作成したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者向き

※WordPressサイト作成後は、WordPressの管理画面で記事作成&投稿するので、WordPressの機能に関する知識も求められます。

WordPress WordPressテンプレート スタンダード
  • HTML、CSSを場合によっては直書きしたい人
  • WordPressサイトを作成したい人
  • ブログサイトを作成したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成初心者~中級者向き

※WordPressサイト作成後は、WordPressの管理画面で記事作成&投稿するので、WordPressの機能に関する知識も求められます。
★WordPressを使用したい場合の最もおすすめの組み合わせ

WordPress WordPressテンプレート エディターズ
  • HTML、CSSの直書きをメインとして作業をしたい人
  • WordPressサイトを作成したい人
  • ブログサイトを作成したい人
  • 予め用意されているテンプレートを使用したい人
  • ホームページ作成中級者向き

※WordPressサイト作成後は、WordPressの管理画面で記事作成&投稿するので、WordPressの機能に関する知識も求められます。

白紙 [どこでも配置]モード かんたん
  • HTML、CSSの知識が全く無い人
  • 「どこでも配置」の機能が利用したい人
  • テンプレートを使用せず、白紙状態から作成したい人
  • ホームページ作成初心者~中級者向き
白紙 [どこでも配置]モード スタンダード
  • HTML、CSSを場合によっては直書きしたい人
  • 「どこでも配置」の機能が利用したい人
  • テンプレートを使用せず、白紙状態から作成したい人
  • ホームページ作成中級者向き
白紙 [どこでも配置]モード エディターズ
  • HTML、CSSの直書きをメインとして作業をしたい人
  • 「どこでも配置」の機能が利用したい人
  • テンプレートを使用せず、白紙状態から作成したい人
  • ホームページ作成中級者向き
白紙 [標準]モード かんたん
  • HTML、CSSの知識が全く無い人
  • テンプレートを使用せず、白紙状態から作成したい人
  • ホームページ作成中級者向き

※はっきり言ってこの組み合わせは使用しない方がいい。[かんたん]スタイルはHTML、CSSの直書きができません。白紙状態からの作成で、HTML、CSSの直書きができないのは致命的です。

白紙 [標準]モード スタンダード
  • HTML、CSSを場合によっては直書きしたい人
  • テンプレートを使用せず、白紙状態から作成したい人
  • ホームページ作成中級者~上級者向き
白紙 [標準]モード エディターズ
  • HTML、CSSの直書きをメインとして作業をしたい人
  • テンプレートを使用せず、白紙状態から作成したい人
  • ホームページ作成上級者向き