WD Online

特別企画 [PR] Web Designing 2015年12月号

BiNDを使って、1日でWebサイトを公開する●小企業や個人経営者のためのWeb運営講座 時代は「効率的なサイト運営」と「積極的な自社アピール」

「すぐにサイトを用意しなければならない」場合、総合的なサービス対応が可能なデジタルステージの「BiND for WebLiFE*」(以下BiND)を選べば、現実的に解決できるだろうか? 今回は、実際にBiNDを使って1日でどれほどのサイトをつくれるかを検証した。

STEP 1 要件を整理し、案件に合致したテンプレートを選ぶ

AM09:00 始業(制作スタート)

今回は3、4人で運営するゲストハウスのサイトをつくる想定で、話を進めてみよう。すでに本サイトは外注で用意し自社で運用中だが、昨今の外国人観光客の急増を受けて、英語版サイトの必要性に迫られているという設定だ。

理想は本サイト同様の外注だが、予算や制作日数を考えると厳しい。一方で、自社でのカスタマイズは技術的な困難が伴う。このような「早急なサイト制作と公開」は普遍的に存在する課題だ。

そこで、総合的なサービス力を提供するBiNDで短時間かつ効率的なサイト実装を試みることに。前日までにサイトの条件やコンテンツを整理しておき(01)、始業とともに案件のイメージに近いテンプレートの選択からスタート。選択さえできれば、サイトのベースが確保できたことになる(02)。

79bb6893ab42e6faba87433198d9d1aa.jpg
01 作例サイトの条件やコンテンツ
e927fbdccaf0b97ba31ff333d65ef377.jpg
02 イメージに近いテンプレートの選択

STEP 2 新機能「Dress」を使って、見せ方を簡単に編集する

AM10:00 テンプレートの編集

次にベースとしたテンプレートの各箇所について、画像やテキストを入れ替えていく。BiNDは各ブロック単位で編集できる「ブロック編集」機能を搭載。各ブロックの移動や追加、削除が簡単にできるため、レイアウト変更がしやすい。

文字色や背景色、余白などの調整/変更には、BiND8から採用された新機能「Dress」が便利だ。本来はCSSを記述して変更するところを、Dressなら簡単な操作画面でサイト全体、ページ、ブロック単位でそれぞれのデザインルールを詳細に調整することができる(03)。

c0ec89c170e35b7929aebc9aa9e5568f.jpg
03 新機能「Dress」の操作画面
見出しや本文の文字色や文字の大きさ、各スペースの色や背景などサイトイメージを一括して変更できる

また、BiNDには画像編集ツール「SiNG Pro」も搭載されているため、画像加工もBiND上で行うことが可能。画像制作のために別途ソフトウェアを用意する必要がないことも、手ばやく作業を進める上では有利だ(04)。

be68c2af5f935cecd570e1316218f972.jpg
04 画像編集ツール「SiNG Pro」の操作画面
レイヤー機能も備えており、簡単な画像加工が可能

STEP 3 短時間で予約フォームを実装する

PM01:30 フォームの機能を実装

昼食後は、予約専用のフォームの用意に着手。宿泊予約では個人情報を扱うので、SSL対応のセキュアなフォームを実装しておきたい。

ここでは、BiND発のフォームサービス「Smooth Contact」を利用し、簡単な選択画面経由でサイトにフォームを設置することにした(05上)。Smooth Contactには、SSL対応サーバ環境や管理画面も無償で用意されており、管理画面を使った顧客管理や分析も可能だ。

外部のWebサービスとの連携がしやすいのも特徴だ。たとえば、各種SNSボタンの設置をしたり、Googleマップをデザインカスタマイズした上で埋め込むことが可能(05下)。このほか、Instagramの投稿写真のリアルタイム表示なども、BiND上の操作画面経由で簡単に実装することができる。

a5b8d4cff05df0e3d7215b85d149fe55.jpg
05 フォーム機能やWebサービスの連携が可能

STEP 4 スマートフォンサイトも短時間の作業で簡単に準備可能

PM03:30 モバイル対策

いよいよ終盤。特に旅先で宿泊先を検索するお客様のために、スマホサイトも用意したい。だが今回は、レスポンシブWebデザイン対応のテンプレートを使っているため、すでに自動でスマホサイトに対応していることになる(06)。

66e69337420508276cf2044ded05c785.jpg
06 自動でレスポンシブWebデザインに対応

つくりながらスマホ版のプレビューが確認できるため、レイアウトチェックをしながら要素の表示/非表示や、段組みの変更などを行うといいだろう。スマホから利用しやすいように、より適切な構成にカスタマイズしていけばいい。

以上で、終業時間までに一通りの機能を実装することができた。あとはサーバの設定を済ませれば公開が可能となる。

PM05:00 終業(サイト完成!)

WD176_ds_finish.jpg
PCの完成した状態。サーバへのアップロードもBiND上で可能だ

デジタルステージ「BiND for WebLiFE* 8」
スタンダード版:1万9,800円
プロフェッショナル版:2万9,800円
BiNDクラウド(プロコース):2,980円(月額)※すべて税別

[PR]企画協力:株式会社デジタルステージ

掲載号

Web Designing 2015年12月号

Web Designing 2015年12月号

2015年11月18日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

動画マーケティング時代の成功法則/SSLを理解する

サンプルデータはこちらから

■ 特集:動画マーケティング時代の成功法則
 ネット動画で変わる集客・販促・ブランディング

■ 集中企画:SSL導入実践ガイド
 Webディレクター/マーケターは、もう知らないでは済まされない!

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
西尾維新公式サイト/G・U・M PLAY/株式会社モリサワ コーポレートサイト/Wonderwall/開かずのウェブサイト/ロレアル パリ EMOTIONAL ROUGE/くつろぎ族-金麦〈琥珀のくつろぎ〉-/UNIMEDIA/TryMore Inc./Andrew Harzog/「G展」スペシャルサイト「MEETinG」/NIGHT WAVE

■ ビジネス・EC
 □ ECサイト業界研究
 動画コマース:近くて遠い、EC向け動画の作成・活用法

 □ 月刊店舗設計
 ネコリパブリック:熱い思いやストーリーを伝えることで顧客の共感を呼ぶ

 □ モバイルビジネス最前線
 Anyca:個人間カーシェアリングで新しいクルマの持ち方・乗り方が生まれる?

 □ 知的財産権にまつわるエトセトラ
 著作権の保護期間「戦時加算」って知っていますか?

 □ Bay Area Startup News
 自分のクルマを使わないときにシェアするサービス「Getaround」

■ マーケティング・プロモーション

 □ サイト改善基礎講座
 閲覧開始ページの直帰率改善に取り組む

 □ ハギハラ総研
 PCに匹敵するスマートフォンからの動画視聴

 □ デジタルプロモーションの舞台裏
 広告を望まない商品ブランドが展開したコミュニケーション

 □ 行動デザイン塾
 人が動きたくなる「手段が目的化した行動」

 □ 課題解決のためのUI実装講座
 待ち時間のストレスを軽減するプログレスバー

 □ 解析ツールの読み方・活かし方
 アクセス解析とユーザーヒアリングの両輪でPDCAを回す

■ クリエイティブ・コラム

 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]モテ女子の秘密♡:五五七二三二〇 眞鍋海里
 [デジタルプロモーション]美味しいを環境でつくる:THE EXTREME LATTE 試飲会 築地 Roy 良
 [Webサービス]複雑性と汎用性の狭間:Formlets 仲暁子
 [IoT]自動車産業に切り込む:DriveOn 神谷憲司

 □ モノを生むカイシャ
 RIDE MEDIA&DESIGN:サスティナブルな会社の在り方

 □ 清水幹太の「Question the World」
 Rafaël Rozendaal:ネット超大好き人間から学ぶ、自由との付き合い方

 □ ツクルヒト
 榊原澄人:「フレーム」を超えて動き出す世界

 □ 最果タヒの「詩句ハック」
 第18回 いまなん詩゛?

 □ デザインにできることMonologue
 Vol.143 デジタル回帰

 □ エキソニモのドーン・オブ・ザ・ボット
 ロボットがロボットを作る時代がもうすぐ? 人間の呪縛から逃れたロボットの家族観

■ インフォメーション
 □ Topics
 ヨコかな?(AI EMOJI©)/2015年度グッドデザイン賞

 □ Movement&News
 謎に包まれた天才写真家ヴィヴィアン・マイヤーとは何者か/オンライン動画コンテスト「BOVA」、作品募集を開始/湖畔にある美術館で巨匠・浅葉克己の個展/驚きと発見と感動をもたらす建築家フランク・ゲーリーの2つの個展 ほか
 東京モーターショー2015/経済産業省「Innovative Technologies」/総務省、IoT向けに「020」番号を割り当て/minne、積極的な拡大戦略を発表/YouTube向けショッピング広告施策を発表/「縦書きWebデザインアワード」作品募集開始

この記事を見た人はこんな記事も見ています