特別企画
ホームページ作成サービス“BiNDクラウド”で店舗Webサイトができるまで
代々木上原の日本料理店“初代割烹高橋”がホームページ作りに挑戦！
（2014/9/11 12:27）
（株）デジタルステージが8月19日に正式版の提供を開始した“BiNDクラウド”は、Webブラウザー上で簡単にWebサイトを制作できるオンラインホームページ作成サービス。HTMLやCSSなどの専門知識を持たないユーザーでも扱えるWebサイト制作ソフト「BiND for WebLiFE*」のクラウドサービス版となり、ホームページ作成機能に加えて、ページを公開するためのホスティング機能を備えている。
“BiNDクラウド”は、ソフトウェア版の「BiND」と同様に、簡単な操作で見た目の美しいWebサイトを制作できるため、個人用途だけでなく、店舗や企業のホームページ制作にも向いている。また、入門者向けの“エントリー”コースは初年度無料で利用できるため、まだホームページを持っていない店舗などが、ホームページを開設したいときに試してみるのにもちょうどいい。
今回、都内にある日本料理店“初代割烹高橋”が、“BiNDクラウド”を使って、初めてのホームページを制作する現場に立ち会えたので、同サービスの機能を紹介しながら、制作の模様をお届けしよう。
“BiNDクラウド”のサービス概要と料金
まずは“BiNDクラウド”のサービス概要について簡単に紹介しておこう。
Webサイト制作ソフト「BiND for WebLiFE*」のクラウドサービス版である“BiNDクラウド”では、最新バージョンの「BiND 7」が搭載する機能をほぼ網羅するだけでなく、その使い勝手までも忠実に再現。Webブラウザー上で、バナーやボタンを作成できる“SiGN Pro”や、ホームページをWebサービスと連携させる“SYNC 5”、“jQuery”ベースの美しいスライドショーが簡単に作成できる“SHiFT2”を利用できる。さらに、無料で利用できるショッピングカート機能なども備えている。
ホームページを作成する際は、豊富に用意されているテンプレートから好みのデザインを選択し、テキストや画像を組み替えることで見た目の美しいサイトを作ることが可能。また、ホスティング機能も備えているため、レンタルサーバーなどを別途用意することなく、Webブラウザー上から作成したホームページをアップロードして公開できる。
料金プランは、“エントリー”“プロ”“ビジネス”の3コースを用意。入門者向けの“エントリー”コースでもショッピングカートや日本語Webフォントなどの機能が利用可能で、初年度は無料で提供される（2年目以降は月額480円、税抜き）。“プロ”コースは独自ドメインの利用やメールサービス、FTP機能などがサポートされたプロフェッショナル向けとなっており、月額2,980円（税抜き）。“ビジネス”コースは月額9,800円（税抜き）で、20ライセンスまで利用できる。
日本料理店“初代割烹高橋”がホームページ制作に挑戦
今回、“BiNDクラウド”を使ったホームページ制作を取材させていただいた“初代割烹高橋”は、小田急線・千代田線の代々木上原駅から徒歩約5分の場所にある日本料理店。広島の地酒や地魚を使った日本料理を提供しており、店主の高橋豊和さんが料理長、妻の克さんが女将を務めている。
お店のオープンは2012年10月で、これまでは“アメーバブログ”やFacebookページで情報発信を行ってきたという。ブログ更新を担当しているのは、おもに女将の克さんで、更新ペースはほぼ毎日。『そろそろホームページが必要かも』と思っていたときに“BiNDクラウド”を知り、ホームページ作りに挑戦することになったとのこと。
今回の“BiNDクラウド”でのホームページ制作でも、店主の豊和さんの指示を受けながら、克さんが作業を進めていた。
会員登録からテンプレート選択まで
“BiNDクラウド”を利用するには、まず最初に会員登録が必要となり、“BiNDクラウド”の公式サイトのトップページから氏名、メールアドレス、パスワード、希望するURLを入力して仮登録できる。なお、無料で公開できるWebサイトのURLは、任意の文字列にサブドメインと“bindcloud.jp”を付加したURLとなり、サブドメインは“moon”“sun”“mercury”など12種類から選択可能。
仮登録後、入力したメールアドレス宛に送られてくるメールに記載されたURLにアクセスすれば、登録が完了する。以降は、トップページからログインすることでコントロールパネルを表示できるので、画面右側の［BiND Cloudを起動］ボタンを押せば、“BiNDクラウド”のサイト管理画面を表示可能だ。
“BiNDクラウド”のサイト管理画面では、最初に作りたいWebサイトの種類を選択する。モバイル専用サイトを作ることも可能だが、PCとモバイルの両方に対応したWebサイトを作成したい場合は、“BiNDサイト”を選択しよう。
次にテンプレート選択画面が表示され、好みのデザインを選択できる。カフェやサロンなどの店舗サイト、イベント予告サイトやニュースサイトなどを想定したテンプレートが用意されている。今回、“初代割烹高橋”では、民宿のホームページを想定したテンプレート“MINSYUKU/XL”が、もっともイメージに近いとして選択した。
また、各テンプレートの選択後には、背景色などのテーマを選べるようになっている。“MINSYUKU/XL”の場合、“Beige”“Purple”“Brown”の3パターンが用意されているが、今回は背景色が薄茶色の“Brown”を採用した。
ページを編集する
テンプレートを選択すると、編集モードの選択ダイアログが表示される。編集モードは、比較的簡単に操作できる“スマートモード（簡易）”と、やや上級者向けだが自由なレイアウトが可能な“エディタモード（標準）”を選択可能。今回は初めてのホームページ制作となるため、“スマートモード（簡易）”を選択した。
編集画面では、画面左側にページ一覧が表示されている。一覧から編集したいページを選択し、画面下部の［このページを編集する］ボタンを押せば、編集モードに移行して編集を行える。各ページは、“ヘッダ”“ビルボード”“コンテンツ”“メイン”“サイド”“フッタ”などのエリアに分かれており、さらに各エリアがひとつまたは複数のブロックで構成されている。
テキストや画像などを編集する際は、ブロックごとに編集を行うことになる。各ブロックをクリックすると右上に現れるメニューから［編集］項目を選択すると表示される“ブロックエディタ”で、ブロック内のテキストや画像を変更することが可能。
まずは、“トップ”ページのヘッダから編集を行った。ヘッダのブロックにはメニューボタンとロゴの画像が配置されているが、メニューボタンはブロックエディタから“SiGN Pro”を起動することで編集可能だ。“SiGN Pro”の画面ではテキストを編集するだけでメニューボタンを作成でき、テキストのフォントや文字色、サイズなども変更することが可能。今回は“御品書き”“アクセス”“ブログ”といったメニューボタンを作成すると共に、フォントを“TB行書”に変更した。
また、メニューボタンのリンクの設定もブロックエディタから行える。リンク先はWebサイト内のページ一覧から選択できるほか、外部サイトのURLを直接入力して指定することも可能だ。
ヘッダのロゴ画像は、今回作業したPCのローカルに保存してあった店のロゴ画像へ変更した。ブロックエディタで“画像パーツ”を選択し、画面右側の［画像変更］ボタンをクリック。次に表示されるファイル選択ダイアログで［画像をアップロード］項目を選択すれば、エクスプローラからのドラッグ＆ドロップで画像をアップロードすることが可能だ。アップロードした画像は、ファイル選択ダイアログの［ユーザーフォルダ］に格納されていて選択できる。
画像の選択後、“SiGN Pro”を起動して画像編集ができるほか、縦横のピクセルを指定して表示サイズを調整することが可能。ブロックエディタ右下の［適用］ボタンを押せば、画像の変更がページに反映される。
背景画像の変更などを行う
ヘッダ以外についても、画像が配置されたブロックの編集方法は同様で、“SiGN Pro”で作成されたパーツはテキストなどを編集可能。ローカルの画像を使用したい場合は、アップロードして差し替えられる。
また、画像に加えて、テキストも配置されているブロックのブロックエディタを開くと、入力エリアが表示されてテキストを編集可能。さらに、テキストのフォントや文字色、サイズを変更したり、装飾やリンクの付加なども行える。
なお、“MINSYUKU/XL”テンプレートの場合、ヘッダ部分にページ全体の背景画像が表示されていたため、背景画像の変更を行った。編集画面左下の［設定］ボタンを押すとプロパティ設定ダイアログが表示され、［ページ設定］タブの［ページデザイン］項目から背景画像を変更することが可能。今回は、店内の壁面を写した写真を背景画像に設定した。
地図やFacebookのパーツを配置する
“アクセス”ページでは、テンプレートで使用されていた“Google マップ”の代わりに“Yahoo!地図”のパーツを配置し、店周辺の地図を表示した。ブロックエディタの左下の［ブロック選択画面を開く］ボタンを押し、次に表示されるブロックテンプレートダイアログでジャンル別一覧からブロックのテンプレートを選択すると、レイアウトを変更したり地図やSNSなどのパーツを配置することが可能。
“Yahoo!地図”のパーツは、ブロックテンプレートダイアログの［MEDIA］項目から選択して適用できる。ブロックエディタに戻り、“Yahoo!地図”のパーツを選択すると、画面右側の［Syncを起動する］ボタンから“SYNC 5”を起動可能。“SYNC 5”の画面では、地名や住所を入力して地図検索ができるほか、店の場所にマーカーを立てたり、縮尺を変更するなどの地図の編集を行える。地図の編集が完了したら適用を行い、ページに反映することが可能。
同様に、ブロックテンプレートダイアログからパーツを選択し、“SYNC 5”で編集するという方法で、“トップ”ページの下部のブロックにFacebookパーツ、サイドバーに店の“アメーバブログ”のパーツを配置した。また、“トップ”ページのサイドバー上部にも“Yahoo!地図”のパーツを設置してある。
制作したホームページをアップロード
5時間ほどの作業でひとまず完成したWebサイトは、“トップ”“ごあいさつ”“御品書き”“アクセス”という全4ページのシンプルな構成になった。また、不要なページは、編集画面左側のページ一覧から削除した。
最後に、編集画面右下にある［アップロード］ボタンを押せば、作成したWebサイトをアップロードして公開できる。特にFTPなどの設定をする必要がないため、操作に迷うことはない。もちろん、Webサイトの制作途中でもアップロードできるほか、アップロード後も必要に応じて随時更新することが可能だ。
“BiNDクラウド”を使ってみた感想
今回、“BiNDクラウド”を使ってホームページ制作に挑戦した“初代割烹高橋”の女将、高橋克さんに感想を聞いたところ、『慣れるまでは難しかったが、作業するうちにコツが掴めてきた』とのこと。また現在、お店の予約は電話のみで対応しているが、『今後、体制が整えば、ホームページからの予約にも対応したい』と語っていた。