当連載記事では、「レスポンシブWebデザイン」に対応した、全国の栄養士会Webサイトの増加に寄与することを主な目的としています。しかしながら、これまで、なぜ「レスポンシブWebデザイン」が必要なのか？そもそも「レスポンシブWebデザイン」とは何か？ということを十分に説明していませんでした。当サイトは、2018年2月にリニューアルし、それ以降のアクセスログも1年以上蓄積されてきました。そこで、今回の記事では、「山梨県栄養士会Webサイト」のアクセス状況を公開すると共に、なぜ今、「レスポンシブWebデザイン」が必要なのかを、改めて概説したいと思います。
記事の最後では、WordPressを用いた「レスポンシブWebデザイン」対応サイトの作り方に関する秀逸記事も紹介しています。当連載が、何らかの役に立ちましたら幸いです。
この連載記事に関して
山梨県栄養士会Webサイトのアクセス状況
まず、山梨県栄養士会Webサイトのアクセス状況を紹介いたします。今回は、「Googleアナリティクス」を用いて収集した、2018年3月1日～2019年8月31日までのアクセスログを用いました。なお、収集した情報には、特定の個人を識別できる情報は含まれておりません。
関連：当サイトにおける情報収集について（サイトポリシー）
よく利用されている主なOS
まず、どのようなOSで当サイトが閲覧されているかを調べてみました（図1）。結果は、利用率の高いOSから順に、Windows OS、iOS、Android OS、macOSの並びとなっていました。全てのデバイスには当てはまりませんが、Windows OSはパソコンに、Android OSは、スマホやタブレット等のモバイルデバイスに搭載されていることが多いOSです。詳しくは後述しますが、当サイトがパソコンからだけでなく、スマホやタブレットから多く閲覧されていることが見えてきました。
図1. OS（2018年3月～2019年8月）TOP 4
よく利用されている主なウェブブラウザ
続いて、当サイトがどのようなブラウザで閲覧されているかを調べました（図2）。その結果、利用率トップのブラウザはSafariで、全体の約35%を占めていました。これは、iOSとmacOS利用率の合計とほぼ等しいため、iPhoneやiPad、Macユーザーのほとんどは、ブラウザとしてSafariを利用していると推測されます。意外だったのは、約27%というInternet Explorer利用率の高さでした。Windows10から、標準ブラウザがMicrosoft Edgeに変更されましたが、まだまだ、Internet Explorerを使われている方が少なくないということです。この結果から、Internet Explorer11による動作確認（主にCSSの描写ズレ等が無いか、ビジュアル面でのチェック）を、定期的に実施するようにしました。
図2. ブラウザ（2018年3月～2019年8月）TOP 4
よく利用されているデバイス
以下のグラフが、このページで最も伝えたかった結果です（図3-1）。解析の結果、当サイトでは約半数が、スマホ等のモバイルデバイス、及びタブレットから閲覧されていることが分かりました。当サイトだけが特殊とは考えにくいため、他の栄養士会Webサイトでも、約半数が、パソコンと比べると横幅の狭いモバイル・タブレット端末からアクセスされている可能性があると言えるのではないでしょうか。なお、Googleアナリティクスでは、モバイル・タブレットデバイスの解像度も記録されています。その情報によると、当サイトはiPhoneから多く閲覧されているらしいことも分かりました（図3-2）。
図3-1. デバイス（2018年3月～2019年8月）
図3-2. モバイルデバイスの種類（2018年3月～2019年8月）TOP 5
ここまでのまとめ
「レスポンシブWebデザイン」の必要性
「レスポンシブWebデザイン」とは、「閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法」とのことです。Wikipedia（2019.9.10）に分かりやすくまとめられていたので引用しました。この手法を用いてウェブサイトを作成することで、媒体によってコンテンツのレイアウトが調節され、ユーザーの利便性が向上するとされています。それでは、「レスポンシブWebデザイン」によって、実際にどのようにページが変化するのか、本当に利便性が向上するのか、当サイトを例に挙げて説明していきます。
山梨県栄養士会Webサイトの場合
まず、スマホで当サイトのトップページを開くと、以下のように表示されます（図4-1）。スマホはパソコンと比べると画面の横幅が狭いので、その横幅に合わせて、自動でコンテンツのレイアウトが調整されています。スマホとパソコンで同時に当サイトを閲覧していただくと、その違いがわかりやすいと思います。
図4-1. 現状の山梨県栄養士会Webサイトの表示（イメージ図）
一方、当サイトが「レスポンシブWebデザイン」でなかったとすると、以下のように、スマホでもパソコンと同様のコンテンツレイアウトで表示されます（図4-2, 図4-3）。一見問題ないようですが、図4-2のように、ページ全体を表示しようとすると文字やリンクが小さくなりすぎて、指でクリックすることが困難となってしまいます。文字が小さすぎて、文字自体が読めないということもあるかもしれません。そのため、図4-3のように、画面を拡大することになるのですが、この拡大した状態で、縦スクロールと横スクロールを組み合わせてウェブサイトを閲覧していくことは相当なストレスとなります（図4-3の状態で、親指だけで操作することを想像してみてください）。
図4-2. もし、「レスポンシブWebデザイン」でなかったら（その１）
図4-3. もし、「レスポンシブWebデザイン」でなかったら（その２）
なお、近年は、「レスポンシブWebデザイン」であることはWeb標準となりつつあり、それを前提として、過度なスクロールを伴う縦長なウェブサイトを、より使いやすくする（UXを高める）工夫が検討されているようです。
私が当ウェブサイトのリニューアル作業に取り組み始めた2017年6月時点で、少なくともトップページが「レスポンシブWebデザイン」となっている全国の栄養士会サイトの数は約「13」でした。その数は、2018年8月時点で約「18」となり、2019年8月現在約「22」となっています。つまり、まだ半数を超えるウェブサイトが対応できていないということです。以前の連載でも記載しましたが、ウェブデザインはあくまでコンテンツを入れる箱に過ぎないため、この箱を取り繕うよりも、コンテンツ、サイトの中身を良くすることのほうが大切です。ただ、「レスポンシブWebデザイン」を導入すること自体は超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超簡単であり、簡単な割に得られるメリットが大きく、導入しない理由はほとんどないと思います。ぜひ、今後ますます、「レスポンシブWebデザイン」に対応した栄養士会ウェブサイトが増加することを望みます。最後に、私の書いた記事ではありませんが、「レスポンシブWebデザイン」に対応したウェブサイトの作り方が記載されている秀逸記事を紹介いたします。
「レスポンシブWebデザイン」対応サイトの作り方
「レスポンシブWebデザイン」対応サイトを作る！というと難しく感じてしまうかもしれません。もちろん１からオリジナルのサイトを作る（プロのウェブデザイナーとして食べていく）となると、難しい部分も多いと思いますが、よほどデザインに強いこだわりがないのであれば、その必要はありません。無料のブログ・ウェブサイト作成ツールであるWordPressを用いて、「レスポンシブWebデザイン」に対応しているデザインテーマを選択することで、HTMLやCSS等の知識はほとんど必要なく、かつ、専門業者に高価なウェブサイト作成・管理料を払うことなく、サイトを作成することができます。
以下のシンノユウキ氏のブログでは、ウェブサーバーに「wpXクラウド」、WordPressテーマに「Cocoon（わいひら氏作成の無料テーマ）」が選択されており、当サイトも全く同じ方法で作成されています。これ以上ないほどに、丁寧に手順が示されており、参考になる部分が多いと思います。
このwpXサーバーでは、一般的には有料であることが多い、Webフォント（フォント数限定版）が基本料金に組み込まれています（このWebフォントの魅力は、後日あらためて紹介したいです）。さらに、高速動作、無料常時SSL化などの利点も多く、WordPressを用いてウェブサイトを作成する際には、非常におすすめのサーバーといえます。一番下のプランでは、月540円と、その価格も魅力的です。
「wpXクラウド」の新規申込みが、2019年10月24日にて終了される旨が告知されました。詳細は以下の記事をご参照ください。
なお、この記事とは関係ありませんが、シンノユウキ氏のブログでは、管理栄養士ということもあり、栄養関連の話題も扱われています。興味深いページも多く、それらの記事についても、ぜひ閲覧してみてください。「みんな栄養に頼りすぎてる」というブログタイトルも、なかなか考えさせられるものがあります。
まとめ
ウェブサイトの作り方の部分はシンノユウキ氏の記事に丸投げしてしまったのですが、それだけ秀逸な記事ということです。複数枚のスクショをとって画像加工して、文章執筆してと、相当な時間がかかっているはずです。ぜひ、多くの方、特に全国の栄養士会Webサイトを業者に委託せずに、副業的に作成されている方々に閲覧していただけたらと思います。なお、当サイトのデザインも細々と調整しており、今後ますます、よりよいUXを提供できるように励みたいと思います。
今後も、半年に１記事程度のペースで、全国の栄養士会Webサイトの更なる質向上につながるような情報を掲載していきます。本業次第で、更新ペースが大幅に遅れる可能性もありますが、何卒、よろしくお願いいたします。最後までお読みいただき、ありがとうございました。
文責：青木慎悟（管理栄養士）
その他、ウェブサイト作成に関する記事をチェックする