特別企画

古いWebサイトを簡単にスマホ対応! 「BiND 8」でコードをいじらずにやってみた

今風のレスポンシブデザインへ会社のWebサイトをリニューアル

「BiND for WebLiFE* 8」

 スマートフォンの普及により、Webサイトがモバイル端末から閲覧されることが増えてきている。そうした中、Googleはモバイル向けの検索アルゴリズムを変更する“モバイルフレンドリーアップデート”を4月に実施。Webサイトが“モバイルフレンドリー”であるかどうかが、検索ランキングを決める際の指標として導入された。そのため、検索エンジンからWebサイトに集客したいと考えている企業や店舗にとっても、Webサイトのスマホ対応は重要な課題といえる。

 9月18日に発売された「BiND for WebLiFE* 8」(以下、「BiND 8」)は、スマホ対応サイトの作成にも適したWebサイト制作ソフトだ。同ソフトは、HTMLやCSSなどの専門知識をもたないユーザーでも扱える「BiND for WebLiFE*」の最新版。画面の大きさによってサイトのデザインを最適化できる“レスポンシブデザイン”に対応し、難解なコードを記述することなく統一したデザインでスマホ対応が可能となっている。

 本稿では、スマホ対応していない古いサイトからのリニューアルを想定し、実際に「BiND 8」でレスポンシブデザインのWebサイトを作成しながら、新機能を中心に「BiND 8」の魅力を紹介していきたい。

スマホでは見づらいWebサイトをリニューアル

現在のWebサイトは、スマホの画面に最適化されていない

 今回、スマホに最適化したレスポンシブデザインにしたいと考えているのは、筆者の会社である(株)ライターズハイのWebサイト。現在のWebサイトは約4年前に作ったものだが、スマホのWebブラウザーでアクセスすると、PC向けのページが表示され、ピンチアウトで拡大しないと文字が小さくて読みづらい。画面の下半分に余白が表示されるのも、見た目が悪いといえる。

 「BiND 8」は本格的なWebサイトを作成できるため、現在のWebサイトをリニューアルして、完全に置き換えてしまってもよいが、今回は現状との比較も兼ねて、サブドメインでテストサイトを作成することにした。また、Webサイトの内容は基本的にはコピー&ペーストで、いかに簡単にレスポンシブデザインに移行するかという点を重視している。

 なお、「BiND 8」には、テンプレートを180種類同梱したスタンダード版と、テンプレートを219種類同梱するほか追加のサービスが受けられるプロフェッショナル版の2つのラインナップがあるが、本稿ではプロフェッショナル版(Windows版)を使用している。

テンプレートを選択して簡単にWebサイトを作成できる

 それでは、さっそく「BiND 8」でレスポンシブデザインのWebサイトを作成していこう。前述の通り、プロフェッショナル版の場合、219種類のテンプレートが同梱されており、カテゴリーなどからテンプレートを選択して、簡単にWebサイトを作成可能だ。

“コーポレート”カテゴリーからレスポンシブデザインのテンプレートを選択した

 今回は会社のWebサイトを作成するため、“コーポレート”カテゴリーを選択し、さらにレスポンシブデザインのものに絞り込んで、税理士事務所の紹介サイトを想定した“Certified Tax Accountant Office”テンプレートを選択。同テンプレートは色違いで3種類のものを選べるので、Grayバージョンを選択した。

 なお、「BiND for WebLiFE* 7」など、以前のバージョンのサイトデータを持っている場合、データをインポートした上でコンバートし、レスポンシブデザインにすることも可能だ。

ブロック単位でページを編集でき、ロゴ作成も可能

“スマートモード(簡易)”と“エディタモード(標準)”の編集モードを選択可能

 テンプレートを選択してダウンロードすると、最初に編集モードを選択するダイアログが表示される。編集モードは、比較的簡単に操作できる“スマートモード(簡易)”と、やや上級者向けだが自由なレイアウトが可能な“エディタモード(標準)”を選択可能。今回は、より簡単な“スマートモード(簡易)”を選択した。

 テンプレートの編集画面では、画面上部の[ページを編集する]ボタンから編集モードに移行して、ページの編集を行える。各ページは“ヘッダー”“ビルボード”“コンテンツ”“メイン”“フッタ”などのエリアに分かれており、さらに各エリアがひとつまたは複数のブロックで構成されている。この各ブロックを投稿フォームのような“ブロックエディタ”で編集でき、HTMLなどの知識を必要としないのが「BiND 8」の特徴だ。

“ヘッダー”“ビルボード”などのエリア内にあるブロックを選択して編集を行える
“ブロックエディタ”で各ブロックのメニューやテキストを編集していく

 まずは、最上部のヘッダーにあるメニューから編集を行い、テンプレートにある“私たちの強み”“料金表”といった項目を取り除き、代わりに“お知らせ”“会社概要”“制作実績”の項目を追加した。また、テンプレートは縦長1ページのシンプルなサイトになっているが、これを複数ページに変更。ページの追加は、画面左側のサイドメニューで行うことができ、“News”“Access”“Contact”など、作成したいページに合わせてレイアウトを選択して追加可能だ。ページを追加したら、ヘッダーの各メニューのリンク先として指定することで、メニューをクリックしたときに指定したページを開けるようになる。

 また、ヘッダーの左側にはロゴ画像が配置されているが、ロゴ画像やバナー、ボタンなどのパーツは、「BiND 8」に付属する画像編集ツール“SiGN Pro”で簡単に作成することが可能だ。もちろん、PCに保存してあるロゴ画像を配置することもできる。

編集画面左側のサイドメニューでページを追加することが可能
“SiGN Pro”でロゴ画像などを簡単に作成できる

テーブルや地図・SNSパーツも簡単に配置可能

“お知らせ”ページなどは、元のWebサイトからのコピー&ペーストで編集できた

 不要なブロックを削除したりしながら、各ページのブロックを編集していき、“お知らせ”“業務内容”“制作実績”といったページは、元のWebサイトからのコピー&ペーストだけでほぼ編集が完了。

 また、“会社概要”ページでは“メイン”ブロックにテーブルを配置し、会社情報を入力した。ブロックエディタの左下にある[ブロックテンプレート]ボタンを押すと、ブロックのレイアウトを変更できる[ブロックテンプレート]ダイアログが表示されるので、[一覧/リスト]項目にある[テーブル]を選択して、テーブルを配置可能。さらに、ブロックエディタでテーブルの種類を選択でき、会社概要向けのテンプレートも用意されている。

[ブロックテンプレート]ダイアログからテーブルを配置可能
会社概要向けのテーブルのテンプレートも用意されている

 “アクセス”ページでは、“Googleマップ”のパーツを配置し、会社周辺の地図を表示したが、地図パーツも[ブロックテンプレート]ダイアログから配置できる。[Webサービス]項目から“Googleマップ”を選択して適用し、ブロックエディタに戻ると、外部サービスとの連携機能“SYNC 5”を起動可能。“SYNC 5”の画面では、地図検索したり、会社の場所にマーカーを立てられるほか、配色やサイズを細かく調整して、サイトのデザインに合わせて地図を編集できる。

“Googleマップ”のパーツも[ブロックテンプレート]ダイアログから配置できる
“SYNC 5”を起動して、地図の表示範囲やデザインなどの編集を行える
FacebookやTwitterなどのSNSパーツも“SYNC 5”を利用して配置できる

 このほか、“TOP”ページの下部と、ほかのページのサイドエリアには、Facebookのパーツを配置した。地図パーツと同様に、[ブロックテンプレート]ダイアログからパーツを選択して“SYNC 5”で編集するという方法で配置でき、Facebookのほか、TwitterやInstagramなどのSNSパーツを利用することが可能だ。

“Dress”機能でCSSを設定でき、Webフォントも利用可能

“Dress”機能では、テンプレートを選択したり、細かくカスタマイズして、CSS設定を行える

 「BiND 8」から追加された新機能のひとつが、Webサイト全体の文字や背景色、余白といったデザインを指定するCSSをGUIで設定できる“Dress”機能だ。編集画面の右上にある[Dress]ボタンを押すと、[Dressテンプレート]ダイアログを表示でき、あらかじめ用意されているテンプレートを選択してデザインを一括変更したり、テンプレートをコピーして細かくカスタマイズすることも可能。

 また、[Dress]ボタンの右側にある[T]ボタンからは、“本文”“タイトル”“大見出し”など、要素ごとのテキストにWebフォントを一括で設定可能。“Google Fonts”や日本語のフリーフォントなど700種類以上のフォントを利用できるほか、「BiND」の専用レンタルサーバー“WebLiFE* サーバー”でサイトを公開する場合は、さらに300種類以上のフォントを利用することができる。

 なお、レスポンシブデザインのテンプレートを選択してサイトを作成した場合、編集画面右上のモニター型ボタンとスマホ型ボタンを切り替えて、モバイル画面でのページの表示をいつでも確認することが可能だ。

“Google Fonts”や日本語のフリーフォントなどのWebフォントを適用できる
編集画面では、モバイル画面でのページの表示をすばやく確認可能

 このほか「BiND 8」では、“お問い合わせ”ページなどにSSL対応の問い合わせフォームを設置できるフォームサービス“Smooth Contact”も用意されている。フォームから送られたメッセージを専用の管理画面で確認したり、メールで転送できる無償のサービスとなっていて、さらにプロフェッショナル版であればデザインカスタマイズなどができる上位コースのプロコースを1年間無料で利用可能。

Webサイトをアップロードして公開、SEO対策もできる

[プロパティ設定]ダイアログで背景の画像や動画を設定できる

 元のWebサイトからのコピー&ペーストなどで、レスポンシブデザインのサイトにデータを移行してきたが、最後の仕上げとして、“TOP”ページの“ビルボード”の背景画像を変更した。サイドメニューの右上にある[設定]ボタンを押すと、[プロパティ設定]ダイアログが表示され、[ページ設定]タブの[ページデザイン]項目から背景画像を変更可能。

 PCに保存している画像を背景に設定することもできるが、今回は同梱されている写真素材を背景に設定した。なお、YouTubeにアップロードした動画を背景に設定し、背景で動画がループ再生されるWebサイトを作成することもできる。

 作成したWebサイトをアップロードするには、まず[プロパティ設定]ダイアログの[サイト設定]タブから[サーバー設定]項目を選択し、サーバー情報を入力して適用する。サーバーは、“WebLiFE* サーバー”や「BiND」のクラウドサービス版である“BiNDクラウド”のほか、一般的なレンタルサーバーなどのFTPサーバーを利用可能。今回は、FTPサーバーを利用することにした。

 サーバー情報を設定したら、編集画面の右上にある[サイトを公開]ボタンを押せば、Webサイトをアップロードして公開できる。もちろん、Webサイトの作成途中でもアップロードできるほか、アップロード後も必要に応じて随時更新することが可能だ。

 なお、「BiND 8」では、SEO対策に役立つ“Google Search Console”(旧ウェブマスターツール)を手軽に利用可能だ。“Google Search Console”でWebサイトを登録する際、サイトの所有権を確認するために、通常はHTMLソースを直接編集するなどの複雑な操作が必要になる。

 しかし、「BiND 8」では、[プロパティ設定]ダイアログの[サイト設定]タブから[アクセス解析設定]項目を選択し、“サイト確認用タグ”の箇所に指定されたメタタグを入力し、Webサイトをアップロードするだけで所有権を確認することができる。“Google Search Console”を利用することで、自分のWebサイトがどのようなキーワードの検索結果に表示されているかなどを確認することが可能だ。

[プロパティ設定]ダイアログでサーバー情報を設定しておくことで、編集画面からWebサイトをアップロード可能
“Google Search Console”でサイトの所有権を確認するためのメタタグを入力できる

まとめ

「BiND 8」で作成したレスポンシブデザインのWebサイト

 というわけで、「BiND 8」で作ったレスポンシブデザインのWebサイトが完成した。作業にかかった時間は5時間程度、サブドメインやレンタルサーバーの準備を含めると6時間ほどだが、HTMLやCSSを直接いじることなく、簡単にスマホ画面にも最適化したWebサイトを作成できた。

 今回は、現在のWebサイトからのスムーズな移行を重視したため、シンプルなWebサイトに仕上がったが、もっと時間をかけてブラッシュアップしていけば、よりリッチで洗練されたWebサイトを構築することができるだろう。とくに、レスポンシブデザインを利用した際は、PC用とスマホ用でレイアウトやコンテンツの表示・非表示を切り替えるといった細かいデザインの調整が可能だ。

 会社や店舗を経営していて、Webサイトをスマホ対応にする必要性は感じながらも、大変そうだからと見送っていた人などは、「BiND 8」を使ったリニューアルを検討してみてはいかがだろうか。

元のWebサイト
リニューアル後のWebサイト。スマホの画面にも最適化されている

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

(ライターズハイ:鈴木 友博)