HTML／CSS不要で“プロ級”Webサイトってほんと？　「BiND8」で“化石”企業サイトをレスポンシブWeb対応最新サイトにリニューアル

» 2015年10月21日 10時00分公開

[PR／ITmedia]

　企業やサービスの顔になるWebサイト、そこから受ける第一印象はもはや言うまでもなく重要ですよね。しかし、Webのトレンドは日々移り変わっていくもの。美しい写真や動画を使ったリッチなビジュアル、スマートフォン対応もバッチリ――なんて“イマドキ”のサイトはお金がある会社だから作れるんだろうなぁ、なんて思っていませんか？

BiND for WebLiFE* 8

　デジタルステージのWeb制作ソフト「BiND for WebLiFE* 8」は、そんなやさぐれたあなたにも、HTMLやCSSが分からなくても大丈夫、誰でも「プロの技」を使った最先端のWebサイトを作れます！　とうたいます。……とはいえ、そう言われても半信半疑な、疑い深いITmedia ニュース編集部。実在の企業サイトをベースに実力を試したいと思います。

トップページはFlash　10年前からそのままの“化石”企業サイトをリニューアル

　今回の企画にご協力いただく企業、ワンベストは、IT系企業を中心にリアルイベントの企画・制作・運営までを行う会社です。大木一直社長は学生時代にイベント運営のアルバイトをしたことでハマりこみ、今に至るまで情熱を燃やし続ける生粋のイベンター。数人の小さなラウンドテーブルから1000人以上の規模のイベントまで、年間300件以上のイベントを取り仕切っています。アイティメディアも、1年中何かしらお手伝いいただいております。いつもありがとうございます！

　準備と運営が途切れず続く、「毎日が文化祭」のような目まぐるしい日々ですが、社員はなんと8人だそう。それぞれの目の前の仕事に奮闘していると、Webの更新やメンテナンスには手が回らないですよね。当然です。現在のWebサイトはこんな感じ。

超シンプル

　い、いきなりトップページでFlash……！　正直最近見る機会が少なくなっているFlash！　レトロさすら感じるアニメーションにもちょっと感動します。

　中のコンテンツもなんとも簡素なテキストのみ。よく言えばシンプルですがこれは140字にすら届かない文字数なのでは……？　大手のクライアントを複数抱え、10年以上に渡る華々しい開催実績が相当量ある企業なのですから、もっとアピールしてもよい気がします。ちなみに、どれくらいの頻度で更新してるんですか？

iPhoneで見てみた

　「いや～、実はこのサイト、2003年当時に作ったそのままなんですよ。プライバシーマークをトップページに足したくらいで」「スマホ対応どころか、FlashなのでiPhoneから見たら何も見えないですよね、今気付きました（笑）」（大木社長）

　2003年……ということは10年以上前！　この変化の激しいWebの世界で10年なんて言ったら歴史遺産や“化石”レベルなのでは……？　iPhoneから見たら確かに悲しいトップページです。

　正直、どんな風にオブラートに包んで伝えるべきだろう、もしかしたらシンプルさにこだわりがあるのかもしれない……と悩んでここまで来ましたが、勇気を持って言いますね。今なら言えます。

　「社長、もっとイケてるWebサイトにしましょうよ！」

「もっとイケてるサイトを作ろうプロジェクト」、始動

　とはいえ、ワンベストのような小さな会社だと、制作や管理を外注するのはコスト面でも大きな負担になってしまいます。企業のイメージアップにつながるようなかっこいいデザインにしたい、できればスマートフォンに対応してくれればもっといい、でもそうなると個人で作るには限界がある――そんなわがままをかなえるツールこそ、デジタルステージのWebサイト制作ソフト「BiND for WebLiFE* 8」です。

緑のグラデーションがきれいなパッケージ

　ロングセラーシリーズ「BiND」は、HTMLやCSSが分からなくても誰でも“プロ級”の本格的なWebサイトを作れるのが特長です。最新版バージョンではついにレスポンシブデザインに対応！　PC向けのデザインを整えると、スマートフォン向けのデザインに自動で最適化してくれます。

　今回は「もっとイケてるサイトを作ろうプロジェクト」として、大木社長とともに編集部がデジタルステージに赴き、助言を仰ぎながら実際に作ってみることに。果たしてうまくいくのでしょうか……？

豊富なテンプレート、スマホ対応もバッチリ

　ソフトを起動するとまず驚くのがテンプレートの豊富さ。ベーシックな企業サイトはもちろん、ECサイトや飲食店、英会話スクール向けなど、あらゆるジャンルの計200種類以上が並びます。思わず目移りしてしまいます。

テンプレートがたくさん

ブロックごとに編集

　テンプレート内の文字や写真を入れ替えることでサイトを作成していくので、美しさはもちろん、見やすさや情報の伝わりやすさなど隅々までこだわった、プロの技の詰まったデザインをそっくりそのまま土台にできるのです。デザインセンスにまったく自信がなく、ちょっとした資料や画像を作るだけでも色の組み合わせや配置で迷ってしまう私ですが、これからなんとかなる気がしてきました。

　最新バージョンでは、PC／スマホを問わずユーザーの利用している画面サイズに合わせてデザインを調整するレスポンシブデザインに対応しました。現在は対応テンプレートは6デザインでそれぞれ3カラーずつのバリエーションを用意しています。種類は今後追加されていくそうですよ。

画面サイズに合わせてデザインを最適化

　2種のサイズのサイトをゼロから制作するのは2倍以上の労力がかかりますが、BiNDならPCサイトを作るだけで自動で最適化し、スマホ対応も完璧。加えて、PCとスマホでコンテンツの表示／非表示が選べたり、スマホ向けの画面の見た目も細かく調整できます。

　ここで大木社長から「商材が法人向けかつリアルイベントなので、Webからの問い合わせは現状正直ほとんどないです。それでもスマートフォン対応は必要なんでしょうか？」という素朴な疑問が。た、確かに……スマートデバイス対応が重要なのはコンシューマー向けビジネスですか？

　率直に言えば答えは「No」。下降気味のPCとは一転、スマホからのトラフィックがPCを上回って年々増加しているという世の中のトレンドに加え、Googleが検索結果を決める際の要素に「モバイルへの対応度」が加わるなど、ユーザーの利便性だけでなくSEO（検索エンジン最適化）でも重要性は高まっています。つまり、企業サイトは全般的に対応必須！　「今は需要がない」ように見えるのは、そもそも用意していないからかもしれません。

「ビルボード」で写真や動画をリッチに使う

　テンプレートを決めたところで具体的なデザイン制作へ。サイトの第一印象を決めるファーストビューは、やっぱり写真や動画でかっこよく見せたいですよね。

ビルボードで印象的に

　BiNDでは、写真や動画を縦幅いっぱいに表示する「ビルボード」エリアがメインビジュアルとなります。リサイズや調整の必要なく、ファイルを選んでアップするだけでリッチな画面が簡単に作れます。

スライドショーは全40種

　写真を使用する場合は「スライドショー」でカスタマイズ。時間差でスライドさせたり、ズームの動きで動画のように見せたり、iOSでも見られるjQueryベースのモーションパターンを40種類以上の中から選べます。華やかで派手な印象にも、シックで落ち着いた映画のような雰囲気にも自由自在。一口に「スライドショー」というだけでこんなにパターンがあるなんて……！

　「なるほど、こんな風に今まで開催してきたイベントの写真をスライドショーにすると雰囲気を理解してもらいやすいかも。今までWebサイトに写真や動画を……と考えたことがあまりなかったのですが、実際に動いてるのを見るとできること、やりたいことがイメージしやすいですね」（大木社長）

　画像編集ソフト「SiGN Pro」を同梱し、BiND上で写真の加工やトリミングができるのも便利なポイント。別のソフトを立ち上げて、ファイル名を変更して、保存し直して――という手間なく、シームレスに行き来できるのはちょっとしたことですが便利です。

シームレスに「SiGN Pro」で編集できる

　最近のトレンド「背景動画」もBiNDなら簡単。YouTubeにアップロードした動画のURLを指定するだけで、背景が一気にダイナミックに、洗練された印象になります。もちろん動画ファイルを直接入れこむこともできますよ。

カラーもフォントもプロにおまかせ　デザインセンスがなくてもOK

　デザインの基本はテンプレートを選ぶだけ、なのですが、「イメージカラーに寄せたい」「コーポレートロゴをメインに色味を合わせたい」などの要望も出てくるはず。

　そんな時にぴったりな機能が「Dress」です。サイト全体の配色やフォントの書式などを一気に指定し、“ドレスアップ”できます。作りかけのサイトでくるくると色を変えてみると、ずいぶん印象が変わって楽しいです。

「Dress」で雰囲気を一気にチェンジ

　プロの手によるオススメデザインセットを選ぶ以外に、メインに使いたいカラーを指定すると収まりのいいカラーパレットを生成してくれる機能もあります。こ、これは便利……。カラーコードをコピー＆ペーストする必要もありません。

使いたい色を選ぶとサジェストしてくれます

　デザイン性を大きく左右するフォントも圧巻のラインアップ。「BiNDクラウド」プロコースのユーザー、専用サーバー「WebLiFE*サーバー」のプレミアムコースユーザーの場合、「FONTWORKS」による日本語Webフォント316書体をライセンス処理要らずで自由に使えます。「筑紫」「丸明」「iroha gothic」など、いずれもデザイン業界の第一線で使われるフォントばかり。Webフォントなので、環境を問わず美しいデザインで見てもらえます。

フォントもたくさん

　欧文フォントも「Google Fonts」が公開する700書体以上から選べます。なんと計1000書体以上、全部見るだけで一苦労しそう……ですが、ゴシック・明朝・手書き風などカテゴライズされているので安心です。

アンケートフォームにEC決済　何でもできるぞBiND

　企業サイトにうれしい新機能は、無料で使えるフォームサービス「Smooth Contact」。SSLに対応しセキュリティも万全、デザイン性も高いフォームやアンケートを作成・挿入できるデジタルステージの自社サービスです。専用の管理画面で結果をグラフ化し、リアルタイムに確認できるほか、メール転送も可能です。

Smooth Contact

　これまでのBiNDではGoogleフォームを使用していましたが、デザイン的な制約をなくし、より回答しやすいように動的なガイドを付け、Webサイト制作側、訪問者側のそれぞれが使いやすいものを目指して新開発。現在はβ版、冬には正式版をリリース予定です。独立したサービスなので、BiNDで制作するサイトだけでなく、任意のWebサイトやページに埋め込むこともOKになるとのこと。複数のフォームのデータを一括管理できます。

前のめりになる大木社長

　ここまでの説明も熱心に聞いていた大木社長ですが、Smooth Contactに関しては「これ、絶対使えるよ」とさらに前のめりに。イベント運営にあたって告知サイトやアンケートを作成する機会は珍しくなく、そのつど試行錯誤してきたと言います。

　確かにSmooth Contactなら、セキュリティも万全で個人情報収集も安心、設問やデザインをイベントごとのカスタマイズも簡単、複数データを一括管理できる――などメリットも大きそう。

　ブログパーツのように決済機能を埋め込める「BiNDカート」も人気機能です。商品登録や受注管理をWebブラウザ上で行い、サイトに合わせたデザインのボタンで商品を設置し、クレジットカード・コンビニ決済・PayPalでの支払いを導入できます。

　……「Webサイト制作ソフト」というには盛りだくさんのオプションツール、BiND、ちょっと充実しすぎじゃないでしょうか。何でもできるじゃないですか。

「自社はもちろん、クライアントワークにも活用できそう」

　それぞれの機能のレクチャーを受けながら、大木社長と相談し、既存のワンベストのサイトの内容を踏まえてリニューアルした結果がこちら。制作にあたってベースにしたテンプレートのサンプルページはこちらから見られます。

クリックでサンプルページへ

　数多くのイベントを束ねてきた実績の写真を大きめのビジュアルで使っています。コーポレートロゴのグリーンをベースに、アクセスマップもサイトのテイストに合わせたデザインに。やっぱり、視覚的なイメージが与える印象は大きい！

　BiNDを初めて使ってみましたが、これだけたくさんの機能を備えていながら、それぞれの使い方は決して難しくありません。初めてWebサイトを作るのも楽しく作業できそうです。……実際、私も時間を忘れて楽しんでしまいました。

こんなことはできる？　といくつも質問を重ねていました

　大木社長も「自社サイトはこれまでずっと『なんとかしなきゃ』という気持ちでいたのですが、コーディングできる社員もいないし、延ばし延ばしで……。もちろん慣れは必要だと思いますが、大きくつまづく部分も説明を聞いた限りなかったし、これなら社内でも活用できそう」と満足気な表情。

　加えて、大木社長が興味を持ったのは、イベント告知やチケット販売など、イベント運営と関連したWeb施策でのクライアントワークへの活用でした。「テンプレートもオプション機能も豊富で、考えられる限りほとんどのケースで利用できるはず。話を聞きながらすぐに使いたい案件がいくつか頭に思い浮かんでいました」と実感を込めて話します。特に販売機能や決済、セキュリティ性の高いフォームが一気通貫で自由に使えるのは便利！　と感動していました。

　実際、BiNDを使ってWeb制作を請け負っている企業は少なくないそう。HTMLやCSSが分からなくても“プロ級”――というコンセプト、まさにそのままですね。「デザインはできてもコーディングの知識が少ない」「印刷物専門だったのでWebは素人で」というケースでもBiNDを使ってこれまでの知識やノウハウを活用できているケースも多いとのことです。

　スマホ対応でビジュアルに訴えるWebサイト、BiNDを使えば難しいものではありません。お客さんに見せたくなるワンランク上のサイトを作りましょう！