特別企画

業者に頼らず自社サイト構築にトライ!「BiNDクラウド」ならブログやSNSとの連携もラクラク

クラウドなのにオフライン編集も可能。サイトをローカルに保存することも

Chromeでデジタルステージのクラウド゙型Webサイト制作ツール「BiNDクラウド」を利用している画面

 規模の大小を問わず個人が経営するショップやオフィスでも、ホームページを作成するのはもはや特別なことではない。しかし、ただでさえ忙しい起ち上げ時やリニューアル時に困ったり迷ったりするのが、このサイト制作を「誰が」「どのような手段で」「どれぐらい手間をかけて」行うのかということだろう。当然デザイン事務所に依頼すれば一件落着ではあるのだが、頻繁な打ち合わせから始まり、以後の更新をどうする? スマホサイトは? ブログやSNS連係は? SEO対策は? などなど依頼作業も勢い増えてくる。自分や同僚、もしくは上司が思い描いていた通りに完成するとも限らない。更新することを考えるなら、できれば空き時間に自分でやってしまったほうがいいと思うことも多いだろう。

 Webサイトは情報の鮮度を保ったり、読者とのコミュニケーションを頻繁にとるといった更新作業がとても重要となってくる。この更新作業を、現場に一番近い人が自らの思いを込めて行うサイトが、一番ウケが良いのは当然だ。Webサイトは個別の新製品やサービスのランディングページ、個人のポートフォリオやプロモーションページなど利用方法はさまざまだが、更新作業の重要性はすべてに共通する。

クラウドでWebサイトを手軽に作り込める「BiNDクラウド」

 このように“自力でなんとかしたい”と考えている人に特にお勧めしたいのが、デジタルステージのWeb制作ソリューション「BiNDクラウド」だ。その名のとおりクラウド上でサイト制作のすべてが完結するサービスで、クラウド゙のサイト構築サービスでありがちな、パーツを組み合わせてとりあえずサイトができましたというレベルではなく、HTML5対応のモダンなデザインのサイトを細部までキッチリと作り上げることができる。

 すでに利用が推奨されていないレガシーな技術、たとえばFlashを使わずに、動きのあるサイトも制作できる。背景画像にはYouTubeの動画を取り入れることも可能だ。Google推奨のサイト構造にしたり、SNS連携も可能なほか、レスポンシブWebに対応させることもでき、スマホからのアクセスも考慮されている。旧来のFlashを多用したスマホ未対応の古いサイトデザインをリニューアルするという用途にももってこいのソリューションだ。


クラウドサービスでありながらローカルでの作業が可能

 そもそもこのクラウドサービスは「BiND for WebLiFE* 10(BiND10)」というPCのローカルで動作する高機能なWeb制作ソフトがベースになっていて、機能はほぼ同一だ。PCローカルにソフトをインストールしてからサイトをアップロードする「BiND10」、最初から「Google Chrome」などのWebブラウザーを使ってクラウドで作る「BiNDクラウド」という違いでしかない。

 「BiND10」には、1年間「BiNDクラウド」のプロコースが利用できる権利も付いているので、作ったサイトをそのままクラウドに読み込ませることもできる。逆に「BiNDクラウド」で作成したサイトをエクスポートしてローカルへバックアップしたり、他サーバーにサイトデータを公開することも可能だ。クラウドベースだとサイト移行が困難になるサービスも多いが、この点将来を考えても安心して使い始められる。他社サーバーと連係し、たとえばショッピングカートのみ使うといったことも可能で柔軟性は高い。

 ただし高機能がゆえ、クラウドとは言っても制作はスマホではなく基本的にPCで行う。クラウド上のブログ記事更新のみがスマホでも可能となっている。Webサイト構築作業はPCで行い、SNSやブログでの記事更新、アクセス数のチェックなどを随時スマホで行うというスタイルになる。

「BiNDクラウド」で編集中

 また、後述する「BiNDクラウド」の“プロ”コース以上には、ローカルで動作しクラウド同等の機能を持つ「BiNDクライアント」が2ライセンス提供される。これであれば、オンラインでは「BiNDクラウド」、オフラインでは「BiNDクライアント」(もしくはBiND10)という使い方で、随時同期させつつ作業ができる。モバイル回線で反応が遅い環境でも快適に作業ができる。

「BiNDクライアント」でも画面は「BiNDクラウド」とまったく同じ。違いは[BiNDクラウドで編集]ボタンのみ
「BiNDクライアント」の環境設定で“BiND Box”の同期機能を有効にして同期させる

 料金は、サポートが付かず試用向けで初年度無料2年目以降月額480円の“エントリー”、小さめのショップなどに向く年契約で月額換算2,480円(月契約では2,980円)の“プロ”、複数人での編集ができ年契約で月額換算8,166円(月契約では9,800円)の“ビジネス”の3コースがある。エントリーでも最小限の運営は可能だが、独自ドメインを設定するなど、しっかり使うならプロ以上がお勧めだ。300GBの容量(ビジネスは1TB)、1,000商品(ビジネスは商品数無制限)のカートが利用できるほか、サイト数も無制限になる。本稿はプロコースの利用を前提とした機能を解説する。(表記はすべて税別)

 細かな機能の違いは、下記URLを参照してもらいたいが、編集の基本機能は同じなので、とりあえず使い始めてみて、機能の必要に迫られたら徐々にアップグレードしていくというスタンスがお勧めだ。他社のサイト編集機能が無いレンタルサーバー料金と比較してみても、さほど差はない。自分でデザインした上で内容更新して運営していくことを考えると、とてもリーズナブルだと思う。運営しやすさを考えCMSを導入したりすると、初期コストは意外と高くついてしまうものだから。

 この「BiNDクラウド」は、2017年9月末に大幅なアップデートが加えられていて、さらに画像編集機能のアップデートも予定されている。

 それでは、実際のサイト制作過程を見ながら代表的な機能をチェックしていこう。


まずは豊富なテンプレートをベースに始める

 BiNDシリーズの特徴とも言えるのが、完成度の高いデザインのテンプレートが豊富に用意されていて、これをもとに作業が始められること。このテンプレートをベースに作っていけば、誰でも一定のクオリティを保ちつつ、検索エンジン対策もされたモダンなサイトを作り上げられる。

 200サイト以上あったテンプレートが、今回のアップデートでさらに10種×3バリエーション加わっている。1ページ完結のシングルページデザインが゙増えている印象だ。テンプレートは、ハイセンスでありつつ奇をてらったデザインではなく、目的別に割と汎用的に使えそうなものが多い。ここから自前の画像やWebフォントを加えていくスタンスで十分オリジナルなサイトになる。

「BiNDクラウド」の画面を開くと、最初に新規サイトの作り方を選択する画面になる。[テンプレートから作成]を選んでみた

 「BiNDクラウド」にログインして画面を開くと、まず最初に新規サイトの作り方を選択する画面になる。テンプレートをもとに制作することをお勧めするが、それ以外にも、質問に答えていくと、作りたいイメージのサイトを自動生成してくれる方法や、Webデザイナー向けに白紙の状態から構築する方法を選ぶこともできる。デザインに自信があるならトライしてみて欲しい。

 ここでは[テンプレートから作成]を選び、オンラインショップの[KATO INTERIOR]のバリエーション[Mono]をチョイスしてみた。選択するテンプレートは、スマホ画面に追従するレスポンシブWebデザインに対応し、ブログ機能である“BiND Press”があらかじめ設定されていることを確認しておくと良い。特に“BiND Press”は、後から追加しても良いが、スマホでのニュースや記事投稿を考えているならば必須だ。

テンプレートはオンラインショップの[KATO INTERIOR]のバリエーション[Mono]をチョイス
編集方法は[スマートモード]と[エディタモード]が選べる。本稿では[エディタモード]を使っている


ページ内の編集はブロック単位で行う

テンプレートから作成したサイトが開かれた状態。上部[ページを編集する]ボタンで編集モードに入る

 編集はソースコードを見ること無く、ほぼ見た目のままできてしまうのでわかりやすい。左ペインにはサイトのページ構造が表示される。ここで編集したいページを選ぶほか、複製してページを増やす作業をする。編集モードに入ると、破線で描かれたブロック単位のパーツが表示される。不要なブロックがあれば削除してしまおう。マウスを近づけるとブロック左上にメニューが表示され、[編集]を選ぶことで“ブロックエディタ”が開き、内容を編集できるようになる(ブロックのダブルクリックでも可)。失敗してもテンプレートから何度でも作り直せるし、ブロックは自由に再配置できるので、失敗を恐れず作り込んでいける。

ブロック単位で編集する。ブロックはPCとスマホで表示・非表示を決められるのはありがたい。不要なブロックは削除する

 ブロックの編集の例をあげると、各ページを行き来するグローバルメニューの編集では、ページへのリンクパーツが表示されるので、適宜必要なページの名前に編集したり、ページへのリンクを設定し、不要な項目は削除する。メニューは[メニューのスタイル]から、デザインを変えることもでき、ここで動きのある[モーションメニュー]を3種のテンプレートから使うことができる。アイコンフォントも利用できるので、メニューを飾ってみよう。

グローバルメニューのブロック内容を編集する。パーツに表示されるテキストを変更できる
[設定]タブではブロック全体の設定をする。背景色と背景画像を変えてみた。PCとスマホで別の設定にできる

 また、ページタイトルに自社ロゴを読み込ませたり、テキストで社名やブランド名を表示させるといいだろう。ロゴが未定なら後述するWebフォントを活用するのもひとつの手だ。

[編集を終了する]ボタンで元に戻って表示を確認してみる
PCとスマホの表示は、右上のボタンで切り替えて確認しながら編集できる


ページの印象を大きく変えるWebフォント

 左カラム上部の右にある[設定]アイコンからサイトの設定ができる。ここでサイト名やFavicon(Webブラウザーのタブ表示で使われるアイコン)などを設定しておこう。サーバーは「BiNDクラウド」が最初から設定されているので設定は不要だ。ここではGoogle Analyticsのトラッキングコードなども埋め込むことができる。

 このテンプレートの場合、一番大きなビルボード画像は、ここの[ページ設定]タブにて設定されているので、この画像をオリジナルの写真に変更しよう。使いたい画像は、画像を指定するダイアログで[ユーザフォルダ]にドラッグ&ドロップして指定しよう。

サイトの設定をする[設定]アイコンで設定プロパティを開き、[ページ設定]タブを開く。ここでビルボード画像を指定されている
オリジナル画像の指定は、[ユーザフォルダ]にて行う。ここに画像をドラッグ&ドロップする

 ちなみに、BiNDのサービスを使うユーザーは、「materials」という素材ダウンロードサービスが利用できる。契約しているコースに応じて利用できるポイント“マテポ”が付与され、このポイントにて、ゲッティ イメージズと提携した1,000万点以上の素材からダウンロードできる。ビルボード画像や背景などのイメージ写真にうまく利用してほしい。

“ブロックエディタ”でWebフォントにしたい文字を選択し、“ウェブフォント1~10”を選択。タイトルなどを変更したい時は、適宜そちらのスタイルで選択する

 このビルボード画像にかかるタイトル文字では、Webフォントを使って飾ってみたい。Webフォントはサーバーから読み込んで表示するフォントだ。ページを開く端末がWindowsなのかMacなのか、スマホなのかなど環境によって本来は異なるフォントが使われるが、Webフォントを利用することでサイト制作時に指定したフォントがどの環境でも使われる。これまで、変わったフォントを使うには画像として埋め込む必要があったが、Webフォントであれば簡単な設定のみで好みのフォントを利用可能だ。複数ページでの使い回しや後の編集も簡単になる。

好みのWebフォントを選ぶ。種類やウエイトなどで絞り込みができる
右上の[ウェブフォント]アイコンから指定した“ウェブフォント1~10”を選択

 「BiNDクラウド」では、FONTWORKSの書体を中心に日本語を含めたWebフォントを541書体も揃えていて、プロとビジネスのコースでは、これらを自由にデザインに組み込める。テンプレートでは明朝系だったので、ゴシック系のフォントに変更してみた。1サイトにつき20書体まで登録可能だ。Webフォントを使うことで、ページの印象を大きく変えることができる。

画像を変更し、Webフォントを適用してみた


柔軟なカスタマイズができるマップとフォーム

 ショップやオフィス紹介ページに無くてはならないのが、道順を示す案内地図だろう。これにはGoogle マップを埋め込んで活用されることが多い。もちろん「BiNDクラウド」にもマップの埋め込み機能が用意されている。そのまま埋め込むとデザイン的にカラフルで浮いてしまうケースがあるが、これにオリジナルデザインのカスタマイズをして埋め込むことができる。

Google マップのデザイン変更。まずは手軽にテンプレートから選ぼう

 実はこれは特別な機能ではなく、GoogleマップのAPIキーを取得すればできるのだが、「BiNDクラウド」を使わず自力でやろうとすると、ソースにJavaScriptのコードを記述するなどなかなか面倒な作業になるので助かる。デザインテンプレートも用意され、カスタムも簡単に設定できるようになっている。APIキーに関してはGoogleのサイトから取得する必要があり、設定内で記入するようになっている。キーを取得しなくても、BiNDユーザー用の共有キーを使えるので、テスト用にはこちらを使えばいいだろう。本格運用後にでも取得し設定しておこう。

デザインを細かくカスタマイズして埋め込むことができる
GoogleマップのAPIキーは、BiNDユーザー用の共有キーも用意されていて手軽に使える

 問い合わせをしてもらうために使うフォームも重要な機能だが、高機能でとても良くできている。フォームはパーツを配置すると“Smooth Contact”という機能を使って管理するようになる。ここで、簡易なフォームから、資料請求、問い合わせなど用途別のテンプレートを選び作成する。項目は自由に増減でき、入力タイプや必須項目、指示など細かく設定可能だ。デザインはカスタムモードにすることで、フォームにフォーカスが移った時やボタンのアニメーションやWebフォントなども含め、細かく設定することもできる。

フォームの作成は“Smooth Contact”機能を使う。テンプレートから選び、追加や変更があれば編集する
カスタムモードにするとさらに細かく編集できる。Webフォントの使用も可能

 “Smooth Contact”は、編集画面とは別にコントロールパネルなどから“https://smoothcontact.jp”にアクセスして、公開・非公開の切り替え、デザイン編集や送信された内容の確認ができる。このため出先でのスマホでの確認と返答も容易だ。もちろんフォームを受信した時にメールで受け取る設定も可能。

フォームが作られたところ
“Smooth Contact”の管理画面。ここで[公開]にすると使えるようになる。問い合わせがあるとここに表示される


ブログやSNSとの連携も可能

 読者との交流にブログやSNSの活用は欠かせない。これらの機能を見ていこう。

ブログをページに配置したい場合、“ブロックエディタ”のブロックテンプレートから選択できる

 選択したテンプレートにはブログ機能“BiND Press”のページが含まれているため、記事を投稿すれば、すでに配置されているブログのブロックに反映される。そのまま使えばOK。記事をスマホから投稿することもできる。新たにブログを組み込みたい場合には、ページを作成する要領で[追加]から[ブログコーナー]を選択して追加し、その後表示用のブロックやページを用意する。ブログのブロックは、“ブロックエディタ”のブロックテンプレートに用意されている。デザインを決めた後、“ブロックエディタ”の[インデックス]タブで、出力するブログを追加すると、該当のブログの内容が反映されるようになる。

 テンプレートのブログとは別に、ニュースや告知表示用に記事タイトルテキストのみ表示されるブログを追加してみた。この告知目的には、Twitterを活用し埋め込んでもいいだろう。

“ブロックエディタ”の[インデックス]タブで、出力するブログを追加して表示させる
ブログの投稿は、“サイトシアター”で[記事を編集]を選択して表示する“記事エディタ”から行う
ブログのブロックに記事が反映されている
テンプレートに用意されていたブログとは別に、告知用のテキスト表示ブログを配置してみた

 SNSとの連携パーツも豊富に用意されている。今回のアップデートでは、Instagramとの連携が強化された。新規にブロックを追加し編集モードに入り、[ブロックテンプレート]から[スマートモード]の[ソーシャル]にある[Instagram]を選ぶほか、右カラムの[ソーシャル系パーツ]からも選べる。その後は、[Syncを起動する]ボタンから外部連携を設定する“SYNC”の画面を開き、Instagramのアカウントにログインしてアクセスを許可すれば参照されるようになる。そのまま、表示方法などの設定画面になるので好みで設定する。ここでは[カルーセル]という横に流れて表示されるデザインを選択してみた。「いいね」やコメント数、キャプションの表示設定もできる。

“ブロックエディタ”の[ブロックテンプレート]もしくは、右カラムの[ソーシャル系パーツ]にSNS連携用のブロックが用意されている。[Instagram]を選ぶ
外部連携を設定する“SYNC”を使ってアカウントを認証する
表示方法などの設定をする。[カルーセル]を選択
Instagramに投稿した写真がページに表示された


自社サイトの管理を自分でしたい人にお勧め

 できあがったサイトは、[サイトを公開]をクリックするとネットに公開される。かゆいところに手が届く設定が用意されていて、デザインコンシャスなサイトが手軽に作れることがわかる。作成したサイトは、レスポンシブWebデザインなのでスマホ画面にもフィットして表示される。煩雑になるなどの理由でスマホ側に表示させたくない内容は、ブロック単位で非表示に設定することも可能だ。別途スマホサイトを構築することなく、サイト編集作業は一元化できる。

 スマホからはブログ記事のみ更新ができ、サイト自体の編集はできないが、忙しい外出先では近況や情報を更新するといったように、割り切ったワークフローにしておくなど工夫をするといいだろう。今回は解説していないが、SEO関連やアクセス解析やフォーム集計、ショッピングカート機能も充実していて、規模の大きなショップ運営も問題なさそうだ。アクセス集計などはスマホで確認できる。また、「BiNDクラウド」のサーバー機能でサイトを公開すれば、URLが“https://”で始まるSSLに対応する(ただし独自ドメインである必要がある)。SEOに有利だという以前に、ChromeなどのWebブラウザーではもはや常時SSL対応が必須とされているため、早めに対応しておきたい。

 始めてサイトを構築する必要にかられている人はもちろん、やや古いデザインのページデザインの刷新や、現在使っているサイトの使い勝手や機能に納得がいかないなど、自社サイトの問題の自力解決を考えているなら、この「BiNDクラウド゙」はうってつけだ。

今回作成したショッピングサイトのトップページ(クリックすると縦長のサイト全貌を確認できます)
スマホでページを表示したところ。スマホに対応したページで表示される(クリックすると縦長のサイト全貌を確認できます)

[制作協力:デジタルステージ]