レスポンシブWebデザインのWebサイト構築

はじめに

スマートフォンとタブレット端末の所有率、Webサイトへのアクセスがパソコンのこれらを2014年に抜きました。
スマートフォン、タブレット端末からのアクセスを中心としたWebサイトの構築と運用が求められています。
機器の主役がパソコンから変わった事で、事業者においては、事業、商品、サービスの訴求方法や展開方法の熟慮や変更、事業の成否に直結する事態となっています。

私の特徴は、開発だけではない総合的なレスポンシブWebデザインによるWebサイト構築を行っていることです。
企画、設計、開発、運用支援、顧客教育などの一貫した工程をしっかりとしないと、レスポンシブWebデザインは成立しません。

次に列挙する依頼者には、私がお役立ちできるはずです。

レスポンシブWebデザインを推進する理由

私がレスポンシブWebデザインを開始してから、いろいろな依頼者とお付き合いをしてきました。

依頼者に共通するのは、本業の片手間にWebサイトの更新、保守業務をすることです。
依頼者にてHTMLやCSSがわかる場合は稀で、殆どはいません。
かつ、依頼者がインターネットのことを熟知していない場合が多いです。

依頼者の実業に直結する手段で、本業に支障がなく、スマートフォンやタブレット端末からのアクセスを取り込む手段としては、レスポンシブWebデザインしかないという結論に達しています。

また、GoogleがデザインパターンとしてレスポンシブWebデザインを推奨しています。

総合的な対応ができることの優位性

レスポンシブWebデザインは、市場の動向やデータを踏まえた顧客への提案、訴求方法、開発方法、知識、技能、企画、設計、コンテンツの提供、運用方法など、多種の要素が求められます。
現在まで、いろいろなレスポンシブWebデザインによる構築案件に従事してきましたが、何一つ欠けても成立しないことを何度も痛感しました。

「レスポンシブWebデザインができる」と主張する同業者がいますが、開発しかできない業者、作って終わりの業者が多いです。
2005年前後の知識、情報で時間や思考が停止し、レスポンシブWebデザインの案件に対応できない同業者が外に丸投げをする場面があります。
何一つ案件の制御ができない、コンテンツやレイアウト設計ができない、レスポンシブWebデザインができる外注先と話が噛み合うことがない、といろいろな悪態を晒します。
私は外注先としてレスポンシブWebデザインの構築案件を受けた時に、何回か嫌な経験をしました。

御用聞きしかできない業者に依頼するより、総合的に対応できて最初から案件の話ができる人に依頼したほうが、依頼者にとって有益なことばかりです。

海外の最新情報に注視していること

レスポンシブWebデザインは、登場当時から現在に至るまでに、考え方や求められることが変容してきました。そして、将来へも変化していきます。情報収集や勉強は常に欠かせません。
私は海外のレスポンシブWebデザインに関する最新情報(書籍、動画、ブログの記事など)の注視、日本や海外のレスポンシブWebデザイン関係のイベント参加で、その時々で最新の技能を身に着けています。

残念ながら、日本発でインターネット関係の新しい考えや技術が発信されることは少ないです。
欧米発で発信された時から3年遅れでようやく浸透し始めます。
次々と生まれて洗練される、海外の新しい技術や考えを日本で浸透し始めるのを待っていたのでは命取りです。
この現状を踏まえるなら、海外標準の情報収集をしないと顧客に最新の考えや解決法を提供できません。

英語ができない同業者には、元々の情報発信者が発した情報や知識を持っていないことが多いです。
日本人が発信したレスポンシブWebデザインに関する情報を解釈し、謝った情報をブログの記事として投稿、仲間内での共有により、さらに別の人がその情報を見て拡散という悪い意味での伝言ゲームを繰り広げてきました。

元々の情報発信者が発した情報とは全く意味や脈絡が違うことをWebサイトやシステムの開発依頼者が見たり、Webサイトやシステムの開発依頼者に伝達や提案されたら、どうなるでしょうか。
Webサイトやシステムの開発案件の要件が変なものになりかねません。
Webサイトやシステムの開発案件を成功させ、結果を出すには、正しい情報や知識が必須です。

Webサイトの高速表示の重要性

Webサイトの表示速度は、現在ではWebサイトの開発や運用の重要指標の1つで、Webサイトの運営者、その組織の経営層が注意を求められます。
Webサイトの表示に時間がかかると離脱率が上がり、コンテンツを見ない、商品を買わないなど、運営者にとっては実業の成否にも直結する事態になります。
見た目の良さ以外に、低速通信でも早くWebサイトを表示するためのコンテンツの考慮、コードの開発も必要で、私はこれらを意識をしています。

欧米圏では2012年から、Webサイトの高速表示に関する啓発が始まりました。
この啓発の影響で、海外の企業では表示速度に対する認識が深まり、Webサイトの品質項目の1つとなっています。
Googleの検索エンジンの評価では、Webサイトのファイルサイズが軽量で高速表示されることが重要視され、対応しているWebサイトは有利になります。
Googleが提供するパフォーマンス測定ツール『PageSpeed Insights』では85点以上が望ましいとしています。
もし海外の企業のWebサイトの構築で、PageSpeed Insightsの結果が悪い場合は、検収が通らない場合もあります。

私の最近の実績は90点台後半を目指す構築を行います。
知名度がない事業者にとって、既存の高名な個人や組織と比べて知名度の差があり、この差を埋めていくために、いかに利用者に確実にコンテンツを配信できるは生命線であります。

レスポンシブWebデザイン対応をしている日本の上場企業、大企業、官公庁、地方自治体などのWebサイトでは、PageSpeed Insightsで点数が低いところが多いのが現状です。
Webサイトやシステム構築を行う同業他社は、レスポンシブWebデザインの実績を掲示します。
彼らにとって、いかに高名な顧客の実績であっても、PageSpeed Insightsで点数が低いところが多いのです。
確かに素晴らしい実績なのでしょうが、重用な品質項目の1つが落ちているのは、非常にもったいないことです。
「なぜ対応しなかったのだろう?」「技術液なディレクションはどうなってるのか?」と点数を見るたびに私は感じています。

日本では高速通信網が整備されているために、Webサイトの見た目の良さしか考慮しないWebサイト運営者やWeb制作者が多いです。表示速度に対する認識や配慮のなさが総じて多いでしょう。
海外では、高速通信網が整備されていない地域、ネットワークの従量課金制の地域があります。
日本での常識は世界での非常識の1つがネットワークの通信網です。

いくらお金をかけて見た目がいいWebサイトを構築しても、表示が遅ければそもそも利用者には見られません。
動作が重たいWebサイトは、従量課金制なら利用者の使用料金を上げ、低速通信の地域なら利用者から表示が遅いことへの不満を発生させます。

昨今、日本以外から日本へ観光やビジネスを目的として来日する外国人、日本の情報、商品、サービスを求める人が増えています。
日本の法人、個人、官公庁、地方自治体が、日本国外に向けての情報発信の頻度、重要度は昔に比べて増えます。
インターネット上での商取引の件数は、昔と比較にならないくらい増えます。
情報発信や商取引をするなら、日本での高速通信網の常識が通用しない地域の人々への配慮が必要です。結果として、おもてなしの心に繋がるはずです。 

中途半端な表示対応は一切なし

開発環境と開発の前提にて掲示の通り、私は、スマートフォン、タブレット端末、パソコンを保持しています。
主要端末における表示確認は行い、中途半端な表示対応は行いません。
レスポンシブWebデザインの案件の要件で、不足や不備がある場合は、依頼者に対応ないし考慮を求めています。

現在まで私は、いろいろなレスポンシブWebデザインによる案件を見ています。
スマートフォンとパソコンでの表示は考慮しても、その中間のタブレット端末や、スマブレットと言われる筐体が大きいスマートフォン端末での表示が欠落、考慮していない要件を散見します。
残念なことですが、日本でのWeb制作者や依頼者が、レスポンシブWebデザインを理解していないか、その解釈を捻じ曲げています。

確かにスマートフォンの利用者は多いですが、タブレット端末やスマブレット端末の利用者も存在します。
タブレット端末やスマブレット端末の利用者の利便性を損なうことは、利用者の立場を考えていません。
中途半端な表示対応は、レスポンシブWebデザインとはいえません。

レスポンシブWebデザインとは、フューチャーフォンを除くあらゆる端末で、コンテンツを可変表示させ、差別なくコンテンツを配信しようとする考え方です。
レスポンシブWebデザインの提唱者はイーサン・マルコッテ氏です。
氏によるレスポンシブWebデザインの本氏によるレスポンシブWebデザインの寄稿記事では、「スマートフォンとPCの間の端末ことは考慮しなくてもいい」とは一言も言っていません。
同様に、レスポンシブWebデザインに関する書籍でも同様です。

完全独自設計

インターネット上では、レスポンシブWebデザイン向けのフレームワーク(Bootstrapなど)や雛形テンプレートが存在します。
しかし、私は今までは採用をしませんでした。

理由は下記の3つです。

実際の事業でもそうですが、存在しないなら自分で独自のものを創出するしかありません。
今までレスポンシブWebデザインのWebサイト構築を行ってきた中で、独自設計が依頼者の意図するものを創出する近道であるという結論に達しています。

高速表示対応

私がWebサイトの構築をする時、高速表示対応は下記を行います。

コード

HTML、スタイルシート、JavaScriptはなるべく最小限に近づけたきれいなコードで、Webサイトを開発しています。
スタイルシートはJavaScript関係は、なるべく1つファイルにまとめて圧縮し、HTMLファイルからは外部読み込みします。

画像

画像作成ツールで書きだした後に画像の圧縮ツールを使い、画質の劣化なしで更にファイルサイズを落とします。

サーバーの設定

最近のレンタルサーバーでは、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理ができる機能を標準で持ったものがあります。
また、サーバー内のディレクトリに配置できる設定ファイルを使い、ファイルの圧縮設定を行うこともします。
一度に多くのアクセスが集中してパンクすることが無い限り、最近のレンタルサーバーの処理能力は高度でサーバーに負荷がかかることがないので、どちらかの設定を行います。

パソコン向けの内容をレスポンシブWebデザイン対応する場合

HTML、CSS、JavaScript、画像、コンテンツ設計、情報設計などを再構築、再作成を前提とした進め方をさせてもらいます。
理由は、パソコン向けに特化した見せ方や挙動と、スマートフォンやタブレット向けの見せ方や挙動は全く違うからです。

パソコン向けの内容を踏まえて、スマートフォン対応をして欲しいという案件の要望が存在する場合があります。
単純な意匠やコンテンツ構成ではない限り難しいです。

構築料金

レスポンシブWebデザインによるWebサイト構築の料金は、安くはありません。
この主な要因は、スマートフォン、タブレット端末、パソコンに搭載されているブラウザでの実機検証、検証に伴う修正が多く発生し、手間がかかるからです。

どの案件でも、開発段階では検証や手間による負荷は発生します。
しかし、開発を終えれば運用工程だけになり、開発段階で発生していたような負荷は殆ど発生しません。
長い目で見れば、初期開発費用を回収することができます。

スタイルシートの開発環境、前提

2014年より、Sassを導入し開発における効率化を行っています。
2016年9月より、運用を見据えた品質担保のためにFLOCSSの設計手法を導入しています。