製作ガイド

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

- 管理者画面の住所は申請されたドメインの後に /adminとなります。
ex) http://m.globalweb.jp/admin
- 申請時に登録したIDとパスワードを入力して接続してください。

- ここに入力した情報はスマートフォンサイトでも適用されるので、正確に入力してください。

- 先に、デザインされたpsdがあるという前提で製作過程を進行していきます。デザインはデザイナーの特性により方法が違いますので、特に言及はしません。
- psd製作時に必須事項ではありませんが、この製作過程を進めるデザイナーは、横320pxを基準に psdファイルを作っていますが、これはコーディング作業がしやすいためです。
- デザインをコーディングする方法は2種類あります。1つ目は、上に見られる画面のように管理者画面ツールから作業する方法と、2つ目はFTPに接続して 既存のホームページ作業のように作業を進めていく方法があります。
- 上の画面の中に { # header } という部分と{ #footer }という部分が見られます。この部分は削除してはならない部分でウェブページの上段と下段に該当する部分です。 この部分にはいつも重複される内容を入れます。そうすれば一箇所を修正することで、すべての箇所に反映されることになるからです。 ex)コピーライトを各ページごとに入れると仮定し、テキスト一箇所を修正しようとしても全ページを作業しないといけない場合が発生します。そのような作業を行うときに便利です。

- layout.htmこのファイルが上段と下段部分のデザイン領域になります。
- 上のサイト、サイト設定でも先に述べたように、ここに入力する情報がサイトでも反映されますが、実際にその例として{_cfg.site.hometitle} { _cfg.site.keyword } のようなコードが見られたら、サイト設定に入力したホームページタイトルとサイトキーワードが反映されていることがわかります。
- { + header }から{ + footer }前までが上段領域となり{ + footer }以後が下段領域となります。- デザインしたファイルの中、各ページごとに反復される箇所があるとしたら、ここにコーディング するようにします。
- IDやclass等のcssファイルはstyle.cssに別に定義してご使用下さい。又は、基本設定されたファイルでstyle.cssを参照すれば、どんなふうにスマートフォンサイトcssが構成されているかが分かります。
- 上の画面のリンク領域<a href=”/privacy”>などを見ると、拡張子なしにそのままリンクすればいいということが分かります。勿論、別のサイトなど外部領域のリンクであれば必ず拡張子を加えなければなりません。

- メニュー作成段階です。スマートフォンサイトのメニューを表現する方法はメインにアイコンの形でメニューを表現するアイコン形と、一般ウェブページのように上段にメニューバーを作ってメニューを表現するメニュー形、メニューページを別に作成して表現する方法が代表的です。上にコーディングされたメニューは、アイコン形で下記に記されている形態となります。

- 上記の方法以外にも上段メニュー形とメニューページ形があります。

- ファイル生成とフォルダ生成の段階です。前段階でリンクをかけた部分に該当するファイルを作ります。上記の赤い枠領域内に新しいファイルをクリックします。
- 参考にレイアーボックスが現れる方法は該当フォルダかファイルにマウスを置いて右ボタンをクリックします。

- 使用するファイル名を記入して確認ボタンを押すと、新しいファイルが作られて、これはftpにファイルを一つ載せるのと同じ効果があり、実際ftpでも生成されたファイルを確認することができます。
- フォルダ生成法も同一でファイル削除やフォルダ削除も上記と同じ方法で行うことができます。

- ファイル生成をしたら、デザインをコーディングします。編集するファイルをクリックした後、上記画面と同じ内容を入力します。 次に保存ボタンをクッリクします。
- 実際にコーディングされた画面を見てみます。

- 上記と同じようにコーディングされたことが分かります。上記画面に停止表示があるのは、イメージスライド機能です。この機能と同じモジュールを作って使用する方法は次のSETPで説明します。
- 上記一連の過程を経て、すべてのページを作成し、それに合わせてメニューを作り、内容を入していけば、サイトデザインが完成することになります。

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

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

- 一般掲示板を生成したので一般掲示板管理をクリックすると、生成された掲示板を見ることができます。
- 次に生成された掲示板を実際のページに挿入してみます。

- デザイン編集を押した後、掲示板を挿入するページを選択します。今回、notice.htmファイルに挿入することにします。
- 掲示板を挿入する位置でマウスでクリックします。

- 左側上段部分のモジュールボックスをクリックした後、上のアイコンボタンの中から掲示板アイコンボタンをクリックします
- 生成された掲示板が左端に現れます。
- notice掲示板を挿入する為にその掲示板をクリックします。
- 右側で先程クリックしておいた位置に、掲示板モジュールが挿入されていることが分かります。

- 生成された掲示板を確認している画面です。このような形態で掲示板が生成され、プログ掲示板、 ギャラリー掲示板、動画リンク掲示板も同一に生成挿入が可能です。
- その他のモジュールもページに挿入する方法は同じです。

- 入力フォーム登録画面です。やはり、掲示板と同じように基本情報を入力します。受信メールを設定して項目を設定した後、確認を押すと入力フォームが完成します。
- ページ挿入方法は上記掲示板挿入と同一ですので、掲示板挿入説明をご参照下さい。

- ページに挿入された入力フォームです。必要事項を入力後、確認を押すと、上記で説明したメールにメールが送信されます。

- QRコード追加をしてみます。QRコード追加ボタンをクリックします。

- QRコードIDを入力してコードタイトルを入力後名刺やURL等の コードタイプを選択します。
- 今回、URLでしてみます。その後、URLを入力してコードの大きさを選択し次のボタンをクリックします。

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

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

- ダウンロードしたQRコードを本社ホームページに載せてみました。これをスマートフォンQRリー ダーアップルで認識すると、本社モバイルサイトにつながる形式です。
- ホームページに移動するだけではなく、名刺ページにも移動し、すぐに電話出来る機能などに活用が可能です。

- 地図API登録画面です。地図ID、地図名、住所、位置表示、サイズなどを設定後、保存ボタンをクリックしてください。

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

- イメージ登録画面です。ID、スライド名等の必要事項を設定してください。
- 基本情報を入力したらイメージ登録をし、タイトルとリンクを入力し確認ボタンをクリックすると、そのリンクへ移動します。
- 掲示板挿入と同一方法でご希望のページに生成したモジュールを挿入します。

- 挿入されたイメージスライドの画面です。停止させて、管理画面の設定を変えることで他の形態にもなります。
- これでモジュール管理に関する説明を終わります。他のモジュールも上記の説明と同一方法で簡単にご活用していただけます。

- 上記で説明したデザイン編集方法はデファルトスキンでホームページを作成する時の方法です。
- スキン管理とは、購入されたスキンで簡単にスマートフォンサイト制作をサポートする機能です。
- 現時点では、デファルトスキンだけです。デザインスキン追加メニューをクリックして下さい。

- smartbuilder.jp サイトには登録された多数のスキンリストがあります。
- この中からお望みのスキンを選んで購入します。
- 上記の管理画面購入内容にリストが現れ、適用ボタンをクリックするとすぐに使用が可能です。

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