ホームページの作り方

まず、uWebeeのHTMLパーツ編集画面を開いてみましょう。

画面にはホームページを作成するための様々な「HTMLパーツ」が並んでいます。 お好みのHTMLパーツの上でマウスボタンを押してドラッグを開始すると、「ドロップエリア」が表示されます。 ドラッグ中のHTMLパーツをドロップエリアの中へ持っていき、マウスボタンを放すと、HTMLパーツをドロップエリア内に設置できます。 ドロップエリアにお好みのHTMLパーツを並べていくだけで、ホームページのレイアウトが出来上がっていきます。

ドロップエリア内に設置されたHTMLパーツは、ドラッグ＆ドロップによりドロップエリア内の他のHTMLパーツの上や下に移動させて、順番を入れ替えることができます。 また、ドロップエリア内のHTMLパーツをドラッグ＆ドロップによりドロップエリア外に移動させると、そのHTMLパーツを削除することが出来ます。

今回作成するサンプルサイトは、1ページにまとまっているシンプルなデザインのものです。上から順に下記9個のHTMLパーツを配置します。

• パララックステキスト左
• シンプルテキスト記事
• フェードイン画像左
• フェードイン画像大
• フェードイン画像右
• シンプル一覧（円）
• シンプルテーブル
• フェードイン画像右
• ライトフッター

まずページの最上部には、大きな画像とサイトのタイトルを入れたいと思います。また、簡単なサイトの説明テキストも入れておきましょう。 今回は「パララックステキスト左」というHTMLパーツが良さそうです。まずこのHTMLパーツをドラッグ＆ドロップでドロップエリアに設置します。

その下にはサイトの説明をもう少し詳しく記載するため、「シンプルテキスト記事」をドラッグ＆ドロップで配置しましょう。 ここまでのテキストの量や箇条書き、引用等のスタイルは使わない予定ですが、不要な部分は後で削除します。

続けて、このスイミング教室のコンセプトを説明するため、大きめの写真と短いテキストを入れるHTMLパーツを追加します。 コンセプトを3つに分けて、視覚的に目立つ形で説明したいので、「フェードイン画像左」 「フェードイン画像大」 「フェードイン画像右」を順に追加します。 これらのHTMLパーツは、ホームページをWebブラウザで表示する際、スクロールすると画像が少し下からフェードインして表示されるエフェクトがかかります。

そして、その下にはこの教室のインストラクター紹介のコーナーを作ります。これには「シンプル一覧（円）」を使いましょう。 更に、レッスン時間等の詳細情報を表形式で記載するため、「シンプルテーブル」を追加します。 その下には、所在地の情報を入れるため、ここでは「フェードイン画像右」を設置します。 最後に、一番下に「ライトフッター」を入れて、コピーライトの記載を入れられるようにしました。

以上のHTMLパーツをドラッグ＆ドロップで並べれば、ホームページのレイアウトは完成です。

それぞれのHTMLパーツには、初期状態ではサンプルのテキストが入っています。テキスト編集を行って、HTMLパーツ内部のテキスト内容を変更しましょう。

テキスト編集

画面右上の方に4つのアイコンが並んでいますので、右から2番目の編集ボタンを押してください。 ドロップエリアの左に小さなツールバーが出現し、その中で一番上にあるテキスト編集ボタンが緑色にハイライトされていれば「テキスト編集モード」になっています。 もしハイライトされていない場合は、テキスト編集ボタンをクリックし、テキスト編集モードに切替えてください。

テキスト編集モードでは、ドロップエリア中のHTMLパーツ内のテキストが水色の点線枠で囲まれた状態になっています。水色の点線枠は、そのテキストが編集可能であることを表しています。 水色の点線枠内をダブルクリックすると、そのテキストが編集できます。

今回のサンプルサイトでは、まずページ最上部に配置したHTMLパーツ「パララックステキスト左」のテキストを変更し、サンプルサイトのタイトルや説明を入れます。 また、その下に配置したHTMLパーツ「シンプルテキスト記事」のテキスト部分には、サイトのもう少し詳しい説明文を入れましょう。 なお、「シンプルテキスト記事」は様々な用途に使えるように、日付や複数の段落、引用文や箇条書きなど、様々なスタイルのサンプル文が含まれています。 これらは後で削除しますので、この時点ではそのままとしておきます。 その他のHTMLパーツについても、テキスト部分を編集し、必要な文を書いていきましょう。

リスト編集

サンプルサイトのインストラクター紹介コーナーには「シンプル一覧（円）」パーツが使われています。 このHTMLパーツには円形に切りぬき表示された写真とテキストが4組ありますが、今回は3番目までしか使用しません。 次のような手順で、4番目の要素を削除しましょう。

• ドロップエリア左側の小さなツールバーで上から2番目の「リスト編集ボタン」をクリックしてください。 リスト編集モードに切替わり、「シンプル一覧（円）」の4組の画像とテキストの右下に「－」ボタンが表示されます。
• 4番目の「－」ボタンの上にマウスカーソルを移動すると、4番目の画像とテキストが赤い点線で囲まれた状態になります。 赤色の点線枠は、この部分の要素が削除可能という印です。
• 4番目の「－」をクリックして、削除確認ダイアログで「はい」を選んでください。 4番目の画像とテキストが削除され、3つだけが残ります。

同様に、「シンプルテーブル」についても、リスト編集で行や列を増減させることが出来ます。 今回のサンプルサイトでは、1行目の見出し以外に、3行までしか使用しないので、4行目の一番右側にある「－」ボタンで4行目全体を削除しましょう。 また、各行の4列目も使用しません。こちらは行毎に、4列目のマスの右下にある「－」ボタンをクリックして削除します。

以上で、HTMLパーツ編集画面上での編集は完了です。 画像は後で別ファイルに差し替えますので、この時点での編集はここまでとなります。

HTMLパーツ編集画面での編集を終えたら、画面右上の「確認する」をクリックし、HTMLパーツ確認画面でレイアウトを確認しましょう。 （確認画面へ入るときにはログインしている必要があります。ログイン画面が表示された場合は、メールアドレスとパスワードを入力して、ログインしてください。）

スマートフォンとPCの画面を想定したサイズでの表示が確認できます。 「購入する」をクリックし、購入の手続きが終わると、ダウンロードの画面が表示されます。

編集したホームページ全体のHTMLファイルと、各HTMLパーツで使われる画像やCSS、JavaScriptなどのファイル一式が、ZIP形式でまとめてダウンロードできます。 ZIPファイルを解凍すると、中には以下のファイル／フォルダが入っています。（フォルダについては、使用しているHTMLパーツによって存在しない場合もあります。） Windowsをご利用の場合はエクスプローラーを使用して、解凍したフォルダ内を確認してみましょう。 ダウンロード後は、ファイルの変更や差し替えなど、自由に行っていただけます。

• index.html
  　ドロップエリアに並べて編集を終えた全パーツの内容を一つにまとめたHTMLファイル
• css フォルダ
  　index.htmlに含まれる全パーツで使われるスタイルシートを格納したフォルダ
• images フォルダ
  　index.htmlに含まれる全パーツで使用する画像ファイルを格納したフォルダ
• js フォルダ
  　index.htmlに含まれる全パーツで使用されるJavaScriptを格納したフォルダ

なお、uWebeeは買い切り型のサービスですので、ここでファイルを購入する以外の費用は発生しません。 ホームページの公開には別途Webサーバーやドメインなどをご用意いただく必要がありますが、他社サービスの無料のWebサーバーを利用することもできます。 詳しくは「5.公開」でご説明します。

ダウンロード後にいくつかの変更を行います。 まず、画像ファイルをお好みのものに差し替えましょう。

画像ファイルの差し替え

今回はスイミング教室のホームページをイメージしたサンプルなので、内容に合わせた写真ファイルを用意しました。 ZIPファイル解凍後の「images」フォルダの中の画像ファイルと差し替えます。 例えば、サンプルサイト最上部の画像は「images/28/sample.jpg」です。 画像ファイル名は必要に応じて「index.html」内の <img> タグ等の記述を確認してください。 画像ファイルを削除し、代わりに使用したい写真画像を、同じフォルダに「sample.jpg」として置くことで、画像が差し替わります。 同様にして、他のHTMLパーツの画像ファイルも差し替えましょう。

なお、サンプルサイトの所在地の欄に表示する地図については、「フェードイン画像右」の画像部分にGoogleマップを表示させています。 この方法は後ほどご説明します。

テキストの再編集

ホームページのテキスト内容について、HTMLパーツ編集画面で編集を行いましたが、更に変更したい場合、「index.html」をテキストエディタで開いて編集してください。 今回は、サンプルサイトの説明を書いた「シンプルテキスト記事」パーツの中で、日付や箇条書きなどの不要なサンプル文を削除します。 また、いくつかのHTMLパーツで、テキスト中に改行を入れたい箇所に「<br>」を追加し、改行させます。 本文以外にも、HTMLのメタ情報を追加／変更したい場合は、「index.html」を編集してください。サンプルサイトでは、<title> タグの内容を変更しています。

Googleマップの地図埋め込み

サンプルサイトにGoogleマップの地図を埋め込むために、「フェードイン画像右」パーツの画像部分を地図のコードに差し替えます。 まず、Googleマップの埋め込みコードを取得しましょう。 （Googleマップの操作方法は、2021年3月5日現在のものです。）

• GoogleマップをWebブラウザで開き、サイトに表示したい箇所の地図を表示します。
  　　> Googleマップ　https://www.google.co.jp/maps/?hl=ja
  
• 左上の三本線マークのボタンをクリックしてメニューを開き、「地図を共有または埋め込む」を選びます。
• 表示されたダイアログで「地図を埋め込む」をクリックし、サイズなどを調整して「HTMLをコピー」を押してください。 地図の埋め込みコードがクリップボードにコピーされます。
• uWebeeのダウンロードファイルの「index.html」の中で、地図を入れたい箇所にこの埋め込みコードをペーストしましょう。

今回のサンプルサイトでは、下の方の「フェードイン画像右」に含まれる <img> タグを削除し、代わりにその位置に先ほどの地図の埋め込みコードをペーストします。 これでHTMLパーツのサンプル画像の代わりにGoogleマップが表示されるようになります。

以上で、一通りの編集が完了しました。 ダウンロード後のファイルは自由に改変していただけますので、もちろん、もっと大幅な変更や細かい調整も可能です。

作成したファイル一式をWebサーバーにアップロードして、ホームページとして公開しましょう。 今回は、作成したサンプルサイトを無料のWebサーバーで公開してみます。

uWebeeはファイルのみをご提供するサービスですので、Webサーバーやドメインは、別途ご用意いただく必要があります。 Webサーバーには市中の様々なサービスがありますが、uWebeeで作成するホームページは静的なHTMLファイルとなりますので、静的なHTMLファイル等の公開ができる基本的なWebサーバーであれば、いずれのサービスもご利用いただけます。 Webサーバー上で動作するPHP等のプログラムやデータベースの機能は不要です。

無料で利用可能なレンタルサーバー／ホスティングサービスの例としては、以下のようなサービスが挙げられます（2021年3月5日現在）。 無料での利用時は利用目的に制限があったり、広告が表示されるサービスもありますので、利用条件は各サービスのサイトにてご確認ください。

• XFREE(エックスフリー)
  > https://www.xfree.ne.jp/
• スターサーバーフリー
  > https://www.star.ne.jp/free/
• XREA（エクスリア） Free
  > https://www.xrea.com/
• Google Firebase Hosting
  > https://firebase.google.com/docs/hosting?hl=ja
• Netlify
  > https://www.netlify.com/

今回は「スターサーバーフリー」を利用する例をご紹介します。 （以下の他社サービスに関する情報は、2021年3月5日現在の情報です。）

スターサーバーフリーは、ネットオウル株式会社が運営するレンタルサーバーのサービスで、無料で利用できます。 容量や機能の異なるプランが幾つか用意されていますが、今回は広告無しの「フリープラン」を利用します。 uWebeeで作成できるホームページのファイルは静的なHTMLファイルですので、Webサーバー上で動くプログラム（PHP等）やデータベースは使用しません。 そのため、広告表示が一切されない「フリープラン」が利用できます。

それでは、ここからは、スターサーバーフリーの「フリープラン」を利用したuWebeeで作成したホームページの公開手順をご説明します。

「スターサーバーフリー」の利用登録

まず、スターサーバーフリーのトップページを開きます。「今すぐ始める」という大きいボタンがありますので、そちらをクリックします。

https://www.star.ne.jp/free/

ユーザーログイン画面に遷移しますが、まずは「新規会員登録」をクリックしましょう。 新規会員登録画面が開いたら、利用可能なメールアドレスを入力して「認証IDを取得」をクリックします。 すると、そのメールアドレス宛に認証IDが送信されます。

メールを確認すると、認証IDが書かれたメールが届いているはずです。すぐに届かない場合は、少し待ってから受信してみましょう。 認証IDが届いたら、それを先ほどの新規会員登録画面の認証ID欄に入力し、登録フォームへ移動してください。

登録情報入力の画面では、希望する会員IDや表示名、パスワード等の設定を行います。 入力できたら、登録情報の確認画面へ遷移します。

ここで、「SMS認証・電話認証をする」を選んで先に進むと、SMS認証・電話認証の画面となります。 認証コードを受信する電話番号を入力し、SMSで受信するか、電話音声で受信するかを選択して、「認証コードを受信する」をクリックします。 今回はSMSで受信を選んでみましょう。（SMSが受信できる携帯端末等が必要となります。）

「認証コードを受信する」をクリックすると、入力した電話番号の端末に認証コードが書かれたSMSが届きます。 この認証コードを先ほどのサイト上に入力し、「認証する」をクリックしましょう。

認証が成功すると、ネットオウルの管理画面に入ることが出来ます。

「スターサーバーフリー」の設定

ネットオウルの管理画面に初めてログインすると、最初に表示される「スターサーバー管理」の画面では、有料プランのための管理項目だけが表示されています。 画面の左サイドバーには「新規お申し込み」などのメニューもありますが、こちらは有料プランのための項目なので、決済情報の登録が必要となります。 今回は、無料で利用可能なスターサーバーフリーの設定を行いたいので、決済情報の登録は行わず、一旦スターサーバーフリーのトップ画面に戻りましょう。

https://www.star.ne.jp/free/

ここで再び「今すぐ始める」という大きいボタンをクリックし、次のユーザーログイン画面で、先ほど新規会員登録したメールアドレスとパスワードを入力します。 ログインすると、無料プランのプラン選択画面が表示されますので、一番左の「フリー」の「お申込み」をクリックします。これで無料プランの設定が可能になります。

無料プランの設定を行うと、先ほどと同じネットオウル管理画面の「スターサーバー管理」のサイドバーに「無料プラン管理」というメニュー項目が現れます。 この「無料プラン管理」から、サーバーの管理を行うことができます。 なお、無料プランを継続的に利用するには、3ヶ月毎にこの画面上で更新手続きを行う必要があるようです。 定期的にこの管理画面に入るという手間はかかりますが、無料で広告無しで利用が出来るメリットがあるため、忘れずに更新を行いましょう。 こうした手間を省略したい場合は、安価な有料プランも用意されているようですので、プランのアップグレードを検討されると良いでしょう。

「無料プラン管理」のメニューをクリックすると、サーバーアカウント一覧にフリープランのサーバーが表示されます。 ここで「サーバー管理ツール」をクリックすると、フリープランのサーバーの管理画面に入ることができます。

「サーバー管理ツール」では、必要に応じてドメイン設定などを行ってください。 独自ドメインも設定可能ですが、今回のサンプルサイトでは、スターサーバーフリーの初期ドメインを利用しています。 今回の場合、ドメインに使用する名前として「uwebee」を設定したため、「uwebee.starfree.jp」というドメインになりました。 初期ドメインを利用する場合は、別途ドメインを用意する必要はなく、無料で利用が出来ます。

初期ドメインを利用する場合、ドメインの設定後すぐには利用できません。設定が反映され、利用可能になるまで数時間から最大2日程度かかります。 これはスターサーバーフリーのサービスに限らず、新しいドメインを利用するときには通常必要となる時間です。 ある程度の時間が経過したら、Webブラウザで設定したドメインにアクセスし、ドメインが利用可能になっているか確認しましょう。 今回のサンプルサイトの場合、URLは「http://uwebee.starfree.jp」ですが、ご自身で設定されたドメイン情報に応じたURLをWebブラウザのアドレス欄に入力して開いてください。 以下のような「お客様のホームページがアップロードされていません。」という画面が表示されたら、ドメイン設定が反映され、利用可能になっています。 エラー画面などが表示される場合は、もう暫く待ってから、再度確認してみましょう。

uWebeeで作成したファイルのアップロード

ドメインが利用可能となったら、いよいよ、uWebeeで作成したホームページのファイルをアップロードします。 ファイルのアップロードは、Webブラウザの画面から行う方法と、FTPクライアントソフトを利用する方法があります。

1. Webブラウザの画面から行う方法 「サーバー管理ツール」の画面で、サイドバーの「FTPアカウント設定」からFTPアカウントの管理画面に入り、「WebFTP」の下の「ログイン」をクリックしてください。 WebFTP（ファイルマネージャー）の画面が開き、Webブラウザ上でファイルのアップロードができます。
2. FTPクライアントソフトを利用する方法 専用のソフトウェアを利用してファイルのアップロードを行う方法です。様々なソフトウェアがありますが、フリーのもので問題ありません。

Webブラウザの画面からアップロードする方法は、ファイルを一つずつ指定する必要があり、少々面倒です。 そこで、今回はフリーのFTPクライアントを利用し、「FTPクライアントソフトを利用する方法」でアップロードします。

ここではWindows用の「WinSCP」というFTPクライアントソフトを使った例をご説明します。他のFTPクライアントでも同様の設定で利用可能です。 FTPクライアントソフトのダウンロード、インストールは、各ソフトの配布サイトの説明等を参照してください。

WinSCP　https://winscp.net/

FTPクライアントソフトに設定する内容については、スターサーバーフリーの会員登録に使ったメールアドレス宛てに届いているメールを確認してください。 今回は、「【スターサーバー】サーバー設定完了及び設定情報に関するご案内」という件名でメールが届いていました。 このスターサーバーからの通知メールに、以下のような初期設定ドメインに関する情報が含まれているはずです。

WinSCPを起動し、新しいサイトへの接続設定で、以下のように設定します。

　 　 　 　 　

転送プロトコル	FTP
暗号化	明示的なTLS/SSL暗号化
ホスト名	（メールに記載の 【FTPホスト名】）
ポート番号	21
ユーザ名	（メールに記載の 【FTPユーザー名】）
パスワード	（メールに記載の 【FTPパスワード】）

上記の入力後、設定を保存し、ログインしてください。 ログインが成功すると、WinSCPでは右側の領域に接続先のサーバーのファイルが表示されます。 初期状態で、「index.html」「default_page.png」「.htaccess」の３つのファイルが存在しています。

「index.html」と「default_page.png」は、先ほどブラウザで確認した「お客様のホームページがアップロードされていません。」の画面を表示させているものです。 uWebeeで作成したホームページの表示には不要なファイルですので、削除してください。（ファイルを残す必要があれば、バックアップをとるか、サーバーにあるindex.htmlのファイル名を変更してください。） 「.htaccess」は、パスワード制限（BASIC認証）などを利用する際に必要となるので、そのまま残しておきましょう。

それでは、WinSCPを使い、uWebeeで作成したホームページファイルをアップロードします。 Windowsエクスプローラで、uWebeeで作成した「index.html」ファイルと、「js」「css」「images」等のフォルダをまとめて選択し、 WinSCPの右側の領域へドラッグ＆ドロップすれば、アップロードができます。

正常にアップロードが完了したら、再び、設定したドメインにブラウザでアクセスし、作成したホームページが表示できるか確認してみましょう。 今回のサンプルサイトでは、「http://uwebee.starfree.jp」となっています。

http://uwebee.starfree.jp

表示できました！ これで、uWebeeで作成したホームページを、無料サーバーである「スターサーバーフリー」で公開することができました。

他のWebサーバーを利用する場合は、それぞれの公開方法に従ってください。 uWebeeで作成するホームページは静的なHTMLファイルですので、WebサーバーにはPHP等のプログラム機能やデータベース機能は必要ありません。 お好みのWebサーバー上でホームページを公開してみてください。