全国の栄養士会ウェブサイト作成者の皆様へ ④山梨県栄養士会Webサイトのアクセス状況からみるレスポンシブWebデザインのススメ

ウェブサイト作成
この記事は約13分で読めます。

この連載記事に関して

カテゴリー「ウェブサイト作成」に該当する記事は、主に「全国の栄養士会Webサイト作成者」向けの内容となっています。そのため、専門用語を詳細な説明を行わずに用いる場合があります。なお、ウェブサイト作成を外部業者に委託している場合は、これらの情報は参考にならないことが多いと思います。
ウェブサイト作成
「ウェブサイト作成」の記事一覧です。

なさんこんにちは。前回の記事に引き続き、主に「全国の栄養士会Webサイト作成者(ウェブサイト作成を業者に委託せずに、副業的に取り組まれている方々)」に向けた、記事を作成しました!

当連載記事では、「レスポンシブ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

  • Windows OS
    46%
  • iOS
    34%
  • Android OS
    17%
  • macOS
    2%

よく利用されている主なウェブブラウザ

続いて、当サイトがどのようなブラウザで閲覧されているかを調べました(図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

  • Safari
    35%
  • Internet Explorer
    27%
  • Google Chrome
    26%
  • Microsoft Edge
    6%

よく利用されているデバイス

以下のグラフが、このページで最も伝えたかった結果です(図3-1)。解析の結果、当サイトでは約半数が、スマホ等のモバイルデバイス、及びタブレットから閲覧されていることが分かりました。当サイトだけが特殊とは考えにくいため、他の栄養士会Webサイトでも、約半数が、パソコンと比べると横幅の狭いモバイル・タブレット端末からアクセスされている可能性があると言えるのではないでしょうか。なお、Googleアナリティクスでは、モバイル・タブレットデバイスの解像度も記録されています。その情報によると、当サイトはiPhoneから多く閲覧されているらしいことも分かりました(図3-2)。

図3-1. デバイス(2018年3月~2019年8月)

  • パソコン
    49%
  • モバイル
    46%
  • タブレット
    5%

図3-2. モバイルデバイスの種類(2018年3月~2019年8月)TOP 5

  • iPhone 6~8?
    40%
  • Android系デバイス?
    26%
  • iPhone SE?
    10%
  • iPad等のタブレット?
    5%
  • iPhone 6~8 Plus?
    4%

ここまでのまとめ

当サイトの場合、スマートフォンによるサイト閲覧者の割合は4~5割だった。ウェブデザインにおいて、パソコンだけでなく、スマホ利用者を想定する必要がある

「レスポンシブWebデザイン」の必要性

「レスポンシブWebデザイン」とは、「閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法」とのことです。Wikipedia(2019.9.10)に分かりやすくまとめられていたので引用しました。この手法を用いてウェブサイトを作成することで、媒体によってコンテンツのレイアウトが調節され、ユーザーの利便性が向上するとされています。それでは、「レスポンシブWebデザイン」によって、実際にどのようにページが変化するのか、本当に利便性が向上するのか、当サイトを例に挙げて説明していきます。

レスポンシブウェブデザイン - Wikipedia

山梨県栄養士会Webサイトの場合

まず、スマホで当サイトのトップページを開くと、以下のように表示されます(図4-1)。スマホはパソコンと比べると画面の横幅が狭いので、その横幅に合わせて、自動でコンテンツのレイアウトが調整されています。スマホとパソコンで同時に当サイトを閲覧していただくと、その違いがわかりやすいと思います。

図4-1. 現状の山梨県栄養士会Webサイトの表示(イメージ図)


一方、当サイトが「レスポンシブWebデザイン」でなかったとすると、以下のように、スマホでもパソコンと同様のコンテンツレイアウトで表示されます(図4-2, 図4-3)。一見問題ないようですが、図4-2のように、ページ全体を表示しようとすると文字やリンクが小さくなりすぎて、指でクリックすることが困難となってしまいます。文字が小さすぎて、文字自体が読めないということもあるかもしれません。そのため、図4-3のように、画面を拡大することになるのですが、この拡大した状態で、縦スクロールと横スクロールを組み合わせてウェブサイトを閲覧していくことは相当なストレスとなります(図4-3の状態で、親指だけで操作することを想像してみてください)。

図4-2. もし、「レスポンシブWebデザイン」でなかったら(その1)

図4-3. もし、「レスポンシブWebデザイン」でなかったら(その2)


なお、近年は、「レスポンシブWebデザイン」であることはWeb標準となりつつあり、それを前提として、過度なスクロールを伴う縦長なウェブサイトを、より使いやすくする(UXを高める)工夫が検討されているようです。

長すぎるスマホサイトをスマートにリデザインする6つのコツ - WPJ
スマホ対応していないWebサイトはもはや少なくなりましたが、あなたのサイトはよいUXを提供できていますか? 「長すぎるページ」を解決するデザインのコツを紹介します。

私が当ウェブサイトのリニューアル作業に取り組み始めた2017年6月時点で、少なくともトップページが「レスポンシブWebデザイン」となっている全国の栄養士会サイトの数は「13」でした。その数は、2018年8月時点で「18」となり、2019年8月現在「22」となっています。つまり、まだ半数を超えるウェブサイトが対応できていないということです。以前の連載でも記載しましたが、ウェブデザインはあくまでコンテンツを入れる箱に過ぎないため、この箱を取り繕うよりも、コンテンツ、サイトの中身を良くすることのほうが大切です。ただ、「レスポンシブWebデザイン」を導入すること自体は超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超簡単であり、簡単な割に得られるメリットが大きく、導入しない理由はほとんどないと思います。ぜひ、今後ますます、「レスポンシブWebデザイン」に対応した栄養士会ウェブサイトが増加することを望みます。最後に、私の書いた記事ではありませんが、「レスポンシブWebデザイン」に対応したウェブサイトの作り方が記載されている秀逸記事を紹介いたします。

「レスポンシブWebデザイン」対応サイトの作り方

「レスポンシブWebデザイン」対応サイトを作る!というと難しく感じてしまうかもしれません。もちろん1からオリジナルのサイトを作る(プロのウェブデザイナーとして食べていく)となると、難しい部分も多いと思いますが、よほどデザインに強いこだわりがないのであれば、その必要はありません。無料のブログ・ウェブサイト作成ツールであるWordPressを用いて、「レスポンシブWebデザイン」に対応しているデザインテーマを選択することで、HTMLやCSS等の知識はほとんど必要なく、かつ、専門業者に高価なウェブサイト作成・管理料を払うことなく、サイトを作成することができます。

以下のシンノユウキ氏のブログでは、ウェブサーバーに「wpXクラウド」、WordPressテーマに「Cocoon(わいひら氏作成の無料テーマ)」が選択されており、当サイトも全く同じ方法で作成されています。これ以上ないほどに、丁寧に手順が示されており、参考になる部分が多いと思います。

wpXクラウドでWordPressブログを作成する方法をゼロから紹介します
wpXとCocoonでWordPressブログをゼロから始める方法を紹介します.今回はWordPressでブログを始めるための第一歩を紹介します.具体的にはサーバーの契約,独自ドメインの取得,WordPressのインストール,Cocoonのインストール,WordPressの初期設定まで紹介します.

このwpXサーバーでは、一般的には有料であることが多い、Webフォント(フォント数限定版)が基本料金に組み込まれています(このWebフォントの魅力は、後日あらためて紹介したいです)。さらに、高速動作、無料常時SSL化などの利点も多く、WordPressを用いてウェブサイトを作成する際には、非常におすすめのサーバーといえます。一番下のプランでは、月540円と、その価格も魅力的です。

WordPress専用の高速クラウドサービス【wpX(ダブリューピーエックス)クラウド】
wpX(ダブリューピーエックス)は、圧倒的な高速性能を誇るWordPress専用レンタルサーバーです。

なお、この記事とは関係ありませんが、シンノユウキ氏のブログでは、管理栄養士ということもあり、栄養関連の話題も扱われています。興味深いページも多く、それらの記事についても、ぜひ閲覧してみてください。「みんな栄養に頼りすぎてる」というブログタイトルも、なかなか考えさせられるものがあります。

みんな栄養に頼りすぎてる
みんな栄養に頼りすぎています。栄養だけで全てが解決するわけではありません。

まとめ

記事はいかがだったでしょうか?ウェブサイトの作り方の部分はシンノユウキ氏の記事に丸投げしてしまったのですが、それだけ秀逸な記事ということです。複数枚のスクショをとって画像加工して、文章執筆してと、相当な時間がかかっているはずです。ぜひ、多くの方、特に全国の栄養士会Webサイトを業者に委託せずに、副業的に作成されている方々に閲覧していただけたらと思います。なお、当サイトのデザインも細々と調整しており、今後ますます、よりよいUXを提供できるように励みたいと思います。
 今後も、半年に1記事程度のペースで、全国の栄養士会Webサイトの更なる質向上につながるような情報を掲載していきます。本業次第で、更新ペースが大幅に遅れる可能性もありますが、何卒、よろしくお願いいたします。最後までお読みいただき、ありがとうございました。

その他、ウェブサイト作成に関する記事をチェックする

ウェブサイト作成
「ウェブサイト作成」の記事一覧です。

ウェブ制作に関するお問い合わせ

タイトルとURLをコピーしました