ウェブサイト構築

はじめに

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

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

明快な理論や考え方を持ち、しっかりとやってくれるウェブ制作者を探している依頼者
スマートフォンとタブレットの利用者を取り込み、結果を出すウェブサイトを構築したい依頼者
中規模や大規模、難易度の高いレスポンシブウェブデザインのプロジェクトに、広範囲な知識や技能を持つウェブ制作者を探している依頼者

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

レスポンシブウェブデザインは、市場の動向やデータを踏まえた顧客への提案、訴求方法、開発方法、知識、技能、企画、設計、コンテンツの提供、運用方法など、多種の要素が求められます。私は現在まで、多くのレスポンシブウェブデザインによる構築案件に従事してきましたが、何一つ要素が欠けても成立しないことを私は確信済みです。私は顧客に総合的な対応行い、今までに多くの案件に従事して蓄えたノウハウや経験を提供いたします。

「レスポンシブウェブデザインができる」と主張する同業者がいますが、開発しかできない業者、作って終わりの業者は、今でも多いです。 2000年代の開発手法を続ける業者は、レスポンシブウェブデザインの案件に対応できないため、外に丸投げをする場面が多々ございます。結果、

何一つ案件の制御ができない
コンテンツやレイアウト設計ができない
レスポンシブウェブデザインができる外注先と話が噛み合うことがない

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

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

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

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

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

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

ウェブサイトの高速表示の重要性

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

欧米圏では2012年から、ウェブサイトの高速表示に関する啓発が始まりました。この啓発の影響で、海外の企業では表示速度に対する認識が深まり、ウェブサイトの品質項目の１つとなっています。 Googleの検索エンジンの評価では、ウェブサイトのファイルサイズが軽量で高速表示されることが重要視され、対応しているウェブサイトは有利になります。

レスポンシブウェブデザイン対応をしている日本の上場企業、大企業、官公庁、地方自治体などのウェブサイトでは、高速化対応を意識していない場合が未だにが多いです。また、ウェブサイトやウェブシステム構築を行う同業者で、レスポンシブウェブデザインの実績を掲示しますが、いかに高名な顧客の実績であっても、高速化を考慮していない場合が多いです。素晴らしい実績であっても、、重用な品質項目の１つが落ちているのは、非常にもったいないことです。

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

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

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

高速表示対応

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

コード

HTML、スタイルシート、JavaScriptはなるべく最小限に近づけての綺麗なコードで、ウェブサイトを開発しています。スタイルシートとJavaScriptのコードは、ウェブサイトの規模の応じて、1つのファイルにまとめるか、複数ファイルに分割するか、HTML直書き出しにするかを私が判断いたします。ファイルにする場合は、内容を圧縮し、HTMLファイルからの遅延読み込みを行います。

画像

画像作成ツールで書きだした後に画像の圧縮ツールを使い、画質の劣化なしで更にファイルサイズを落とします。表示する画像で優先度の低いものは、HTMLコードのIMG属性で遅延読み込みを必ず設定します。

サーバー側の設定

.htaccessファイルが有効にできるサーバーでは、キャッシュ設定とファイル圧縮設定を行います。

表示速度の測定

WebPageTestとGTmetrixを使い、ウェブサイトの表示及びファイルの読み込みで、目立つ問題がないかどうかを私が確認いたします。

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

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

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

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

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

完全独自設計

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

理由は下記の3つです。

汎用性があるゆえに、結局はウェブサイトのコンテンツに合わせたものに修正が必要であること。
無駄なコードが多くてファイルの大きさが重いこと。
使えないものが多く、これはと思えるものが見つからないこと。

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

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

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

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

構築料金

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

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