スマートにレスポンシブWebをBiNDで実現!急務が叫ばれるサイトのスマホ化を本気で考えよう - いよいよスマホはPCからのアクセスを凌駕し、Googleも今後PC版よりもモバイル版のインデックスを主とすると発表をするなど、サイトのスマホ対応は無視できない状況にあります。そんな中で企業はどのようにスマホ対応に取り組んでいるのか、国内各所で開催されるマラソン大会を多く手掛け、大会にかかわる情報発信を自社で行っているランナーズ・ウェルネス情報管理部の清水敦子さんにお話を伺いました。今回は、大規模なマラソンイベントとして10年以上の歴史を誇る「湘南国際マラソン」のサイトのレスポンシブWeb化を通し、それを効率的に実現するツールBiNDを紹介します。
スマホをはじめとしたモバイル端末ユーザーに増加に伴い、Webサイトのスマホ対応が叫ばれ始めて久しいですが、新規構築されるサイトは別として、既存サイトでは未だスマホ対応を果たしていないWebサイトも多く存在しています。
しかし、Googleが公表しているモバイル準拠、いわゆる“モバイルフレンドリーアルゴリズム”ではモバイルデバイスへの対応状況に応じてモバイル検索結果に影響をもたらします。そのため、Webサイトの主要なターゲットデバイスによっては、今やモバイル対応は必須と言われる状況にあります。またSEOばかりでなく、Webサイトにおけるユーザーエクスペリエンスを重視するならば、やはりスマホ対応は必須と言えるでしょう。
(株)ランナーズ・ウェルネスの清水さんによれば、ここ数年のスマホユーザーからのアクセスは増加傾向にあり、「第11回 湘南国際マラソン」Webサイトにおいても、すでに半数以上がモバイルデバイスからのアクセス」です。 一口にスマホ対応と言っても、PCサイトとは別にスマホ専用サイトを制作するという手段がありますが、スピーディな情報発信やメンテナンスの効率性を考えれば、マルチデバイス・ワンソースを実現する“レスポンシブ”サイトの構築がより現実的な選択と言えるでしょう。
ただし、レスポンシブサイトの構築には、HTMLやCSS、さらにはJavaScriptなどに関してある程度のスキルを要求されるため“敷居が高い”ことも事実。そこで、レスポンシブサイトを容易に実現できるデジタルステージのBiND for WebLiFE(以下、BiND)のようなツールの活用を検討することも重要な課題となるはずです。すでにバージョン9となっているBiNDでは、スマホ対応を意識することなく、デザイン制作を進めていくだけで最終的にスマホにも対応したレスポンシブサイトを簡単に構築できます。
12月4日に開催された「第11回 湘南国際マラソン」。昨年度は10年目という節目を迎え、さらなる大きな盛り上がりを見せる本大会は多くの市民ランナーも注目のイベント。新たな年を歩み出すにあたり、「すべての人が“HAPPY”になる日~HAPPY for ALL~」のコンセプトを掲げる。フルマラソンからファミリーランまで、総勢2万人規模のマラソン愛好家が集まる本大会は、(株)ランナーズ・ウェルネスによって運営・管理されている。
すでにBiNDの最新バージョンを導入して活用しているという清水さん。「以前はDreamweaverを利用していたのですが、ランナーズ・ウェルネスに来てからはBiNDを利用するようになりました。最初はバージョン7から。自らHTMLで構築していく方法に慣れていたのでテンプレートベースのもので作ることに最初は戸惑いましたが、使い方にはすぐに慣れました」
湘南国際マラソンのWebサイトは、当時レスポンシブに対応していない頃のBiNDで制作し始めたこともあり、一部を除いてスマホ対応はしていないとのこと。そこで今回の取材では、コンテンツの一部を使わせていただき、BiNDでサイトをレスポンシブ化することがどれだけスマートにできるかを編集部が実践。出来上がったサイトを清水さんにご覧いただいきました。
レスポンシブ化したWebページを清水さんに見ていただいたところ、「従来のサイトの世界観を再現していただき、すごくいいですよね。BiNDはデザイン性に優れたサイトを簡単に構築できる点が優れていると思います。しかもHTMLなどの専門知識がなくても、テキストや写真を入れ替えるだけで、思い通りのデザインに仕上り、スマホ表示へも自動で最適化してくれるので、レスポンシブ化も非常に簡単です」
実はすでに他のマラソンサイトでは、清水さんもBiNDでレスポンシブWebを制作しています。「湘南国際マラソンのWebサイトはスマホ対応していないコンテンツがありますが、実は制作環境としてはすでにBiND 9に移行しており、『チャレンジ富士五湖 ウルトラマラソン』や『星の郷八ヶ岳野辺山高原 100kmウルトラマラソン』のWebサイトに関してはレスポンシブサイトとして制作しています」
「BiNDの良いところは、グローバルナビゲーションのフロート固定やイメージスライダー、背景動画の組み込みなどが簡単に実装できる点ですね。もちろんスクラッチでも制作できますが、プラグインの選定やデザインや動きの調整など、自分でやるとなると意外と時間を要します。それがスマホ対応までするとなると、作業もさらに増えるので、仕上がりに不安なく短時間で実装できる点は本当に嬉しいですね」
BiNDでは、常にトレンドを意識したUIの実装機能を充実してきています。これらの機能が、Webデザイナーの制作効率を強力にバックアップ。もちろん、レスポンシブ対応も、Webデザイナーに不安を与えることなく、容易な実装を可能としています。