千客万來! かんたん携帯サイト作成講座 本文へジャンプ

2. ホームページ・ビルダーで携帯サイトを作成する


さあ、いよいよあっこ先生も携帯サイトを作ってみますよ!
皆さんもぜひ一緒に作ってみてくださいね!


さてその作り方ですが、皆さんはホームページ・ビルダーでホームページを作ったことがあるでしょうか? 携帯サイトもホームページを作るときと同じ方法なんです(ただし最近のバージョンのことですよ)。

どういう方法かというと…


ホームページ・ビルダーを起動した後、左上にある ボタンを押すと、次の3つの方法が案内されます。携帯サイトはこの3つの方法のいずれでも作成することができます。

  1. 「かんたんページ作成」を使って、ウィザードで対話式に作っていく方法
  2. 「サンプルテンプレート」を使って作成する方法
  3. 「白紙のページ」から、自分で部品を並べて作成していく方法


上の3つは、最初から携帯サイズの縦長のページを作っていく方法です。

実はですね!

ホームページ・ビルダーには、そのほかにも実はすご〜い機能があるんです。パソコン用に作ったホームページを携帯用のサイズにきゅーっと変換してしまう「携帯サイトに変換」なんていうメニューもあるんですよね。ただ、ちょっといきなり試すには私も勇気がいるかも。。

ですので、ここでは、上記1の「かんたんページ作成」の方法での作り方を説明します。まずは練習と思って、番号に沿ってこのとおりやってみてくださいね。



@ホームページ・ビルダーを起動し、「スタンダード」を選択します。その後、画面左上の(スタート)ボタンを押します。

A「サイトを作成する」を選択します。




Bサイトの内容を表すサイト名を入力して次へ進みます(例:店舗サイトの携帯版 → ここで付ける名前は外部には表示されず、ホームページ・ビルダーの中だけで利用されるものですので、区別がつけばどんな名前でもかまいません)




C以下の画面で「新規にトップページを作成する」を選択し「次へ」をクリックします。




D表示された画面で「参照」ボタンをクリックして作成する携帯サイトの各ファイルを置くフォルダを以下のように選んで「OK」をクリックするか、新しいフォルダを作成します。ファイルを置く場所に特に決まりはありません。



E以下の画面で「完了」をクリックすると、制作準備完了です。




Fここからページデザインに入ります。「かんたんページ作成」をクリックします。




G以下の画面で。ここでは「マルチキャリア携帯」を選択します(注:バージョン14以降で搭載された「プレミアムテンプレート」でプレミアムテンプレートで作る方法については、追ってご説明します)。




Hカテゴリの中から作ろうとする携帯サイトのタイプに近いものを選びます。ここでは旅行代理店の携帯サイトの作成例を示していきます。
「お店」を選んでみましょう。




I以下の画面の「ページ構成」に5つの項目が並んでいます。つまりこの方法で進めるととりあえずひな型をもとに全部で5ページが一度にできるようになります。このまま「次へ」をクリックして進んでください。





Jこの中で好みのデザインを選んで「次へ」をクリックして進みます。ここでは「信頼」を選んでみます。




K以下の画面ではそのまま「次へ」をクリックして進んでください。




L「ページタイトル」とあります。これは、ページを見た人がブックマークをしたときにそのまま登録されるページのタイトルのことです。店舗名や会社名を入れるとよいでしょう。
ここでは「旅行代理店★海たび倶楽部」と入れてみます。

そして次に、下の欄の「文書1」というところをクリックしてから、「文章」の欄に文章を入力してみます。トップページにふさわしく、この携帯サイトを見てくれた方に向けて、何をするお店なのか一目でわかるような、かつ、心のこもったメッセージを書いてみましょう。左のプレビューを見ながら、改行等を使って位置をきれいにしてかまいません。そして「次へ」をクリックして進みます。



M次に、ページの一番下にある「メール」のリンクの設定です。このリンクをクリックすると、決めたメールアドレス宛てにメールが送れるようになります。店舗で問い合わせを受けるためのメールアドレスをここで入力してみてください。そして次へ進みます。



N2ページ目の編集です。

「お勧め商品」となっているページタイトルを「年末年始★おすすめツアー」と書き換えてみましょう。

そして次に下の「写真1」の文字をクリックし、下に表示された写真の中からイルカの写真を選んでみましょう。以下のようになったら「次へ」をクリックして進みます。




O「文書1」をクリックし、Lと同様、下の欄にツアーを説明する文章を書きます。そして「次へ」をクリックして進みます。




Pここからあとは、N〜Oの「お勧め商品」で行ったのと同じ作業を、「店舗紹介」「アクセス」「クーポン」についても行う流れになりますが、ここでは練習ですので何も入れずに「次へ」で先へ先へと進んでいただいてかまいません。そして、最後に以下の画面で「完了」をクリックしてください。

※店舗紹介はお店の紹介、アクセスはお店の場所の案内や地図などの情報を入れるページ、通常は必須と考えてよいでしょう。またクーポンは来店促進目的ですので必要あれば利用するとよいでしょう)




全部終わると以下のように転送設定を聞いてきますが、MSCを利用する際はホームページ・ビルダーの転送設定をする必要がないため「いいえ」を選択します。





Qホームページ・ビルダーの編集画面に、今作成してきたページが現れました。これでデザインは出来上がりです!



R保存するには、画面上部の青いナビバーの中の「ページの保存」をクリックし、上書き保存をしてください。



ここから、ホームページ作成と同様、ご自分の内容に合わせて作り進めていくようになりますが、まずは練習ということで、次の章でこれをMSCに転送してみましょう。

前へ次へ


他のページへのリンク

1.携帯サイト変換サービス「MSC」の申し込みをする
2.ホームページ・ビルダー14以降で携帯サイトを作成する@
3.作成したサイトをMSCに転送する
4.転送した結果を確認する
5.実際に携帯端末で見てみよう!
6.ホームページ・ビルダー14以降で携帯サイトを作成するA
7.携帯版のGoogleマップを貼り付ける
8.パソコンと共通のURLを設定する(独自ドメインをお持ちの方向け)
9.スマートフォンでもサイトをキレイに表示する

トップへ戻る


(c)Ubiquitous Business Technology, Inc.