まず完成したものを見ていただきましょう。制作過程に従って作業を進めていただければ、下記のようなホームページを作ることができます。

- 管理者画面住所は申請されたドメインになり/adminと同じ形態になります。
ex) http://m.globalweb.jp/admin
- お申し込みの際に入力したIDとパスワードを入力して接続します。

- サイト管理 → ホームページ情報管理からサイト名と基本情報、運営者情報、会社情報等を入力します。ここに入力した情報は、後に制作したスマートフォンサイトでも連動的に適用されるので、正確に入力して下さい。
- イントロ/ログイン管理項目でモバイルウェブサイトのタイトルを設定することができます。

- デザインしたPSDがあるという前提で制作過程を進行します。デザインはデザイナーの指向と特徴に従い方法が違うので別途言及は致しません。
- PSD制作時必ずそうしなければならないという事ではありませんが、この制作過程を進めるデザイナーは横320ピクセルを基準に PSDファイルを作っていますが、これはコーディングをしやすくするためです。
- デザインをコーディングする方法は２つがあります。一つ目は上に見られる画面のように管理者画面ツールで作業する方法です。２つ目はFTPに接続して既存ホームページで作業するように作業を進める方法です。
- 上の画面を見ると{＃header}という部分{＃footer}という部分が見られます。その部分は削除してはいけない部分で、ウェブページの上段と下段に該当する部分です。この部分に反復しなければならない内容を入れます。そうすれば一箇所を修正することで全ての箇所に反映することができます。
もし反映する部分、例）コピーライトを各ページに入れたと仮定して、文字一字を修正する場合、ページごとに一字づつ修正しなければいけない場合が発生するので、このように作業すると便利です。

- layout.htmがファイルの{＃header}に該当する上段部分と{＃footer}に該当する下段部分のデザイン領域です。
- 上記でサイト設定へ入力する情報が実際スマートフォンサイトに連動適用されると言及したように、実際この例｛＿cfg.site.hometitle｝｛＿cfg.site.keyword｝のようにコードを利用し、サイト設定に入力したホームページタイトルとサイトキーワードが読み込まれ反映しているという事がわかります。
- {+header}から{+footer}の前までが上段領域となり、{+footer}の後が下段の領域となります。
- デザインしたファイルの中のページごとに重複する部分があれば、ここにコーディングして入れるようにします。
- IDやclassなどのCSSファイルは style.css へ別に定義して使用します。また基本設定されたファイルにstyle.cssを参照すると、どのようにしてスマートフォンサイトの CSSが構成されるかが分かると思います。
- 上の画面のリンク領域<a href="/privacy">などを見ると拡張子（.htm）なしに、ただファイル名だけでもリンクをかければいいという事がわかります。もちろん他のサイトなど外部領域のリンクであれば当然<a href=http://~.html>の形式の経路を正確に入れれば良いのです。

- メニュー作成の段階です。スマートフォンサイトのメニューを表現する方法はメインのアイコンの状態でメニューを表現するアイコン型と一般ウェブページのように上段にメニューバーを作成してメニューを表現するメニュー型、そしてメニューページを別に作り表現する方法が代表的だと言えるでしょう。上のコーディングしたメニューの例題は、すでに準備しておいたメニューアイコンを入れてコーディングしたアイコン型で下のような形態となります。

- 上の方法以外にも上段メニュー型とメニューページ型があります。コーディング方法はデザイナーによって違うこともあります。

- ファイル作成及びフォルダー作成の段階です。左側のファイルリストで、ファイルを追加したいフォルダーにマウスを持って行き右クリックします。レイアーボックスが現れたら新しいファイルメニューをクリックします。

- 新しく追加するファイル名を付けて確認ボタンをクリックすると新しいファイルが生成されます。これは、 ftpにhtmlのファイルを一つアップロードする効果があり、実際ftpでも生成されたファイルを確認することができます。
- フォルダーの生成方法も上記と同一で、ファイルの削除やフォルダーの削除も上のような方式で行います。

- ファイルを生成したらデザインをコーディングしなければなりませんね。左側のリストで編集するファイルをクリックすると右側にクリックしたファイルの内容が現れます。上の画面と同じファイルに追加する内容を入れます。そして保存ボタンをクリックすると修正した内容が保存されます。
-実際コーディングした画面を見てみましょう。

- 上のようなコーディングになったことが分かります。上の写真に停止表示があるのは、イメージスライド機能です。この機能の様にモジュールを作り使用する方法は次のSTEPで見てみましょう。
- 上記の一連の過程を通して全てのページを生成し、そこに違うメニューをつくり入れると、サイトデザインが完成されます。

- モジュール管理では会員管理、掲示板管理、入力品管理、QRコード管理、イメージスライド管理、地図API管理、外部コンテンツ管理、表作成、バナー管理などが可能です。
- モジュール生成およびページ挿入の一例で掲示板を一つ生成して、ページに挿入する一連の過程を通じて使用方法を説明します。
- モジュール管理左側項目の中の掲示板生成ボタンをクリックします。

- 掲示板ID、掲示板名、掲示板タイプ、スキンなどを入力して確認ボタンを押せば、掲示板生成が完了されます。
- 画面で見られるように基本設定、権限設定、表示設定、カテゴリー設定、アップロード設定、項目設定などを簡単に作成できることがわかります。

- 一般掲示板を生成したので、一般掲示板管理に移動すると生成された掲示板を見ることができます。
- 次に生成した掲示板を、実際にページへ挿入する方法を説明します。

- 上段のデザイン編集をクリックした後、左側ファイルリストで掲示板を挿入するページを選択します。今回はnotice.htmファイルに挿入をしてみます。
- 該当ファイルnotice.htmをクリックして開き、掲示板を挿入する場所 にマウスをクリックします。

- 左側上段のファイルリストのそばにあるモジュールボックスをクリックすると、上段にモジュールアイコン ボタンが現れます。 掲示板を挿入するので掲示板アイコンボタンをクリックします。
- 生成された掲示板が左側部分に現れることが確認できます。
- notice掲示板を挿入するので、左側の掲示板の中にnotice掲示板をクリックします。
- 右側の先程クリックしておいた場所に掲示板モジュールが挿入されます。

- 生成された掲示板を確認した様子です。 こういう形態で掲示板が生成され、ブログ掲示板、ギャラリー掲示板、動画リンク掲示板も同じ形態で生成挿入されます。
- 残りの他のモジュールもページに挿入する方式は同一なので別途説明はしません。

- モジュール管理→入力フォーム登録画面です。 掲示板と同じように 入力フォームIDなどの基本情報を入力します。 受信メールを設定し項目を設定した後、確認を押せば入力フォームが完成されます。
- ページ挿入方法は上の掲示板挿入と同じなので、掲示板挿入説明を参照して下さい。

- ページに挿入された入力フォームの様子です。 入力内容を入力して確認を押すと、上に説明したメールにメールが送信されます。

- QRコードを追加してみましょう。モジュール管理→QRコード→コード管理へ入ってQRコード追加ボタンをクリックします。

- QRコードIDを入力して区分できるコードタイトル入力後、名刺や電話番号URLなどのQRコードタイプを選択します。
- 今回はURLで見てみます。 タイプを決めてコードで生成するURLを入力し、QRの大きさを選択した後次のボタンをクリックして下さい。

- 生成されたQRを確認することができます。 保存ボタンをクリックします。

- QRコードは他のモジュールとは違うようにスマートフォンサイトに使うのではなく、外部広報用です。
- QRリストで生成されたQRをダウンロードします。 pngイメージでダウンロードされます。

- ダウンロードしたQRコードを本社ホームページに付けてみました。これをスマートフォンQRリーダーアプリで撮影すると本社モバイルサイトにつながる形式です。
- ホームページへの移動だけでなく、名刺ページへの移動やすぐに電話等への活用も可能です。

- モジュール管理→地図API管理→地図API登録画面です。やはりIDと地図名住所を入力し、表示の有無大きさなどを設定した後、保存ボタンを押して下さい。

- 地図APIをページに挿入した画面です。 挿入方法は掲示板モジュール挿入と同一です。
- 上下左右移動も可能でGoogleマップが使用されているのが見られます。
- やはりサイト設定で入力した住所と会社名、電話番号、メールが連動されているのが確認できます。

- モジュール管理→イメージスライド→イメージスライド登録画面です。やはりIDとスライド名スライド効果、大きさなどを設定して下さい。
- 基本情報を入力したら、イメージを登録してタイトルとリンクを入れ、リンクもかけられるので入力後確認ボタンをクリックしてください。
- 掲示板挿入と同じ方法でご希望のページに生成されたモジュールを挿入します。

- 挿入されたイメージスライドの画面です。停止もできて、上の管理画面で指定した効果によって他の形のスライド形態が現れます。

- ツイッターリンク方法
- モジュール管理→外部コンテンツ管理→ツイッターリンクでお客様のツイッター内容をモバイルウェブに送ることができます。
- 右側のツイッター登録ボタンを押してツイッター情報を入力します。

- ページ挿入法は上の掲示板挿入と同一なので、掲示板挿入説明を参照して下さい。

- ツイッターを挿入したページの様子です。
- これでモジュール管理に対する説明を終えます。 その他モジュールも上記の説明通りに作業すれば、簡単に活用することができると思います。

- 上で説明したデザイン編集の説明はデフォルトスキンを用いてホームページを制作する時の方法です。
- スキン管理はデフォルトスキンの他に新しく購入したスキンを使えるようにする機能です。
-現在はデフォルトスキンだけあります。 デザインスキン追加メニューをクリックして見ましょう。

- smartbuilder.jpサイトに登録された多くのスキンリストが出てきます。
- この中からスキンを選択し購入します。
- そして上の管理画面購入内訳にリストが出てきたら、適用ボタンをクリックするとすぐに使用が可能になります。

- ここまでデザイン編集とモジュール使用法に対して 簡単に説明しました。
- 既存ホームページデザインをした方なら、少しの練習で難しくなく、スマートフォンサイトを制作することができる便利なツールです。
- その他問い合わせ事項は本社ホームページやメール、電話でお問い合わせいただければ誠意を持って対応させていただきます。





- モバイルウェブのアドレスと連動したいサイトの<head>と</head>間に次のスクリプトを挿入します。

<script type="text/javascript">
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');
for (var word in mobileKeyWords){
if (navigator.userAgent.match(mobileKeyWords[word]) != null){
location.href = "モバイルウェブアドレス";
break;
}
}
</script>

- スマートフォンで該当サイトのアドレスを入力すれば自動でモバイルウェブアドレスに変更接続されます。

- PC用サイトの掲示板のRSSを利用し、スマートフォン最適化サイトの掲示板で連動することが可能です。
- モバイルウェブ管理者モジュール管理→外部コンテンツ管理→外部コンテンツURL登録に入ります。

- RSSにチェックして、掲示板で連動させるウェブサイトのRSS経路を記述します。
- 作成完了ボタンを押すと、該当掲示板と連動された掲示板が生成されます。
- RSSで連動した掲示板は、該当PC用サイトの掲示板に新規で文字が載ってくる場合、生成時指定した時間単位で内容を自動アップデートします。
- 比較) htmlをチェックしてhtml掲示板を連動する場合:この方式はhtmlコードを呼び起こして修正した後適用させることで、PC用サイト掲示板の内容を呼び入れてモバイルウェブ用新規掲示板を生成します。 この場合、自動更新はできず、連動したPCサイトの掲示板をいつもチェックして新しく連動掲示板を生成しなければなりません。

- RSSを利用して連動掲示板が生成された様子です。

- 連動掲示板を挿入したページの様子です。

- スマートフォンでパターン画面のアイコンをクリックすると、モバイルウェブサイトにすぐ接続することが可能です。
（参考: iPhone, iPod, iPod touch（アップル）でのみ利用可能な機能です。）
- サイト管理→運営設定→アイコン登録をクリックします。
- 登録するアイコンを選択してアップロードし、使用をチェックした後修正ボタンを押します。
- アイコン使用者の場合、スマートフォン下段の（＋）押すと使用者ホームへ登録したアイコンを設置することができます。