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

レスポンシブサイトの構築方法について、ポイントを整理したいと思います。

ポイントは大きく分けて3つ
1、サーバサイドスクリプトによるコンテンツ出力の振分け
2、CSSによるレスポンシブ仕様
3、検索エンジン対策

Googleのモバイル対策

3つのポイントを見る前に、Googleのモバイル対策を理解した方が良いと思います。
Googleによると、彼らの検索エンジンが対応するモバイルサイトとして取り得る選択肢は、以下の三つ、
A、レスポンシブ ウェブ デザイン
B、動的な配信
C、別々のURL
があります。
A、レスポンシブ ウェブ デザインは、CSSによる端末画面の横幅によるデザインの振り分けで対応することです。これがいわゆるレスポンシブ ウェブ デザインです。
B、動的な配信は、サーバサイドスクリプトを用いて、HTTPリクエストのユーザーエージェントを判別して同一URLで異なるHTMLやCSSを配信することです。
C、別々のURLは、モバイル用とPC用の異なるページを用意して、これらが同一のページであることをlink rel=”canonical”やlink rel=”alternate”のタグで示すことです。その上で、ユーザーエージェントの判別によるHTTPリダイアレクト、補助的にJavaScriptリダイアレクトが推奨されます。
参考ページ:モバイル SEO

サイト構築時の条件によってどのような手段を用いるのが最善かは異なりますが、自由な環境でレスポンシブサイトを構築するのであれば、私はA、レスポンシブ ウェブ デザインとB、動的な配信を組み合わせるのが良いと思います。A、レスポンシブ ウェブ デザインだけで十分かとも思いますが、htmlの大幅な変更やコンテンツ量の調整はB、動的な配信の方がシンプルに片付きます。特に広告を貼り付けたりしたい場合には、display=”none”を使ってはいけない規約になっていたりするので、B、動的な配信が必須となる場合もあります。

1、サーバサイドスクリプトによるコンテンツ出力の振分け

1、サーバサイドスクリプトによるコンテンツ出力の振分けは、phpには管理されたライブラリがあるようです。例えばMobile Detect。ライブラリがない場合には、基本的なモバイルとタブレットのユーザーエージェントを判別してそれ以外をPCとし、抽出漏れが分かり次第、更新していくことになると思います。Javaであればタブレット系をUserAgentで判別する などを参考にしました。

2、CSSによるレスポンシブ仕様

2、CSSによるレスポンシブ仕様は、用心するのであれば1、サーバサイドスクリプトによるコンテンツ出力の振分けによって判別洩れした「小さ過ぎるPC」「大きすぎるモバイル/タブレット」を含めてデザインすると良いと思います。こうすることで1、サーバサイドスクリプトによるコンテンツ出力の振分けの欠点を2、CSSによるレスポンシブ仕様で補完することができます。レスポンシブデザインの作り方は「レスポンシブデザイン 作り方」などで検索すると解説ページがたくさん出てきますが、これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方などを参考にしてみてはいかがでしょうか。

余談ですが、先日、モバイルファーストのレスポンシブデザインでは訴求力のあるPCページができないので、C、別々のURLでモバイルサイトを構築した方が良いとアドバイスされたことがありました。確かに、2、CSSによるレスポンシブ仕様だけのページをPCでみるとどうしても内容の少ないページになってしまいます。かと言って、これだけモバイルの普及した時代にモバイルに最適化されていないページを作ることは得策でないし、C、別々のURLでサイトを構築するのも管理がいかにも非効率です。そこで、効率的でモバイル対応もできたサイト運営を行うには1、サーバサイドスクリプトによるコンテンツ出力の振分けが必要になってきます。どのようなサイトを作るかによりますが、一からサーバサイドスクリプトでコンテンツを管理していくのは小さなサイトを作るには無駄があります。そこで、CMSの活用が以前にもまして増え、サイト作成の必須のツールになりつつあると感じています。

3、検索エンジン対策

3、検索エンジン対策は、C、別々のURLの場合には、タイトルにスマホ用などと入れたりすることでGoogleが勝手に検索結果を最適化してくれたりしていますが、少なくともLinkタグでの関連付けはしておいた方が良いと思います。できれば.htaccessやJavaScriptでもよいので転送を行い、転送をした場合にはHTTPヘッダーにVaryを設定することでGoogleのクローラーやプロキシサーバーがモバイルサイトとPCサイトを判別しやすくなるようです。Vary HTTPヘッダーの設定方法は、スマホ向け表示を分けているときはVary HTTPヘッダーを使うこと など10+4記事(海外&国内SEO情報)などを参考にしてください。B、動的な配信の場合もVary HTTPヘッダーを設定した方が良いとのことです。ちなみに、Googlebotを検出しての振り分けはご法度になります。

アプリのデザインについて

先日投稿した「WEBサイトやアプリのデザイン」の続きです。前回は、WEBサイトのデザインの話までで終わってしまったので、今回は、アプリのデザインについて考察したいと思います。

アプリには、WEBサイトとは違い、それ自体に機能が備わっているので、デザインはその機能をユーザーが操作するためのインターフェースの役割を担います。さらに、デザイン自体がその機能の一部になりえます。

アプリの機能

そもそも機能とは何でしょうか。簡単に言えば、「機械の利益を生む能力」と定義できるでしょうか。利益(目的/効果)は機械の存在価値であり、デザインもこれを最大化するよう目指す必要があります。

WEBサイトで、まずコンテンツを明確化することが必要だったのと同じように、アプリもデザインの前に、機能の目的と効果を明確化する必要があります。その明確化の手法を学ぶことが大切になります。例えば、機能の核心/主役を考える。重要度を付ける。主役と補助を分ける。カテゴリに分ける。関係度を付けるなどです。

基本的には、機能が明確化されれば、それをそのまま出す手法を身につけることが大切だと思います。例えば、核心/主役の機能を常時前面に置く、優先度の低い機能、補助的な機能は隠したり割愛したりする、カテゴリを分けてメニューを作るなどです。

ユーザーの熟練度

ここで、一つ考えるべきなのが、ユーザーの熟練度です。
ユーザーの能力を無視したデザイン(さらに機能)の構成を考えることは無意味です。ユーザーが利益を得ない機械は、価値がないからです。従って、ユーザーの能力に合わせた機能、デザインを考えるべきで、もしもユーザーが使いこなせない機能があると考えるのであれば、その機能は割愛するべきでしょう。
ただ、ユーザーの能力は通常、さまざまです。初心者もいれば熟練者もいるのが普通です。私見ですが、結論から言いますと、複雑/補助的な機能は割愛しないのであれば、どんどん隠すべきです。
初心者にとっても熟練者にとってもアプリを使う最大の目的は、その主役の機能にあります。補助的な機能は、熟練者にとっては主役の機能をより豊かにするかもしれませんが、初心者にとっては確実に主役の機能を隠すマイナス効果が生まれます。
初心者は補助的な機能を隠すことができませんが、熟練者は補助的な機能を表示することができます。熟練者は、隠された機能も見つけることもできます。さらに、初心者を熟練者にするのも主役の機能があるからです。したがって、どんなに補助的な機能を追加したとしてもそれは隠すべきだと考えています。(補助的な機能の強化と主役の機能の強化、どちらに資源を投下すべきかもこれで理解できます。重要なものをより重要にしていくべきです。)

機能としてのデザイン

もう一つ、アプリのデザインで大事なことは、デザイン自体が機能になりえるということです。言い換えれば、デザイン自体が新たな利益(効果)を生み出しうるということです。それは、アプリにとってデザインは、「一番外側にある機械」であるとも言えるからです。
例えば、何かを一覧するインターフェースを考えたときに、
カテゴリを分ける。
ランダムに並べる。
重要度で並べる。
複数の重要度で切り換える。
左から右へ、上から下へ並べる。
ページに分ける。
スライドにする。
スクロールにする。
スムーススクロールにする。
などと、さまざまな一覧機能を考えることができます。
最適な機能をデザイン(インターフェース)に持たせるのためには、アプリの機能の構築と同じくらいのアイデアと考察が必要になります。

アプリの世界観

アプリの持つ機能を最大限発揮するデザインを作れたら、あとは真っ白なアプリを公開すればそれで良いのでしょうか。いえ、アプリの持つ魅力、世界観をユーザーにデザインとして伝えるべきだと私は考えています。それは、アプリの持つテーマ、時代性、個性、嗜好などをデザインに反映させてこそ、ユーザーと共感することのできるアプリが完成すると考えているからです。
確かに、世界観を出すことで一部のユーザーに嫌われるリスクはあります。しかし、ただの道具には、道具以上の価値は与えられません。万人は、万人に受けそうな没個性を望んでいるのではなく、万人の注目に値する個性を望んでいると、私は思います。
もちろん、機能としてのデザインの追及をやめたり、機能を邪魔するような装飾を付加したりするなどは問題です。また、機能としてのデザインを追求することは、往々にして新奇で個性的なデザインを生み出すことも確かです。

WEBサイトやアプリのデザイン

WEBサイトやアプリのデザインについて、一般論から考察をまとめておきます。

デザインとは、具現化された創作物の外形と定義したいと思います。

創作物とは、作成者の意思によって創作された物です。

したがって、作成者の意思の明確化こそ、創作物、引いてはより良いデザインの前提になります。

作成者の意思とは、例えば、作成者が感じた世界観、考えた思想、発見した機能などです。
良いデザインとは、これらの作成者の意思をその外形にしっかりと具現化したものと言えます。

WEBサイトとアプリ

WEBサイトとアプリは、コンピュータ画面上に表現されるわけですから、一つの枠組みとしてその構成要素を、
形、大きさ、色、位置、変化に分けられます。この形、大きさ、色、位置、変化を意識しつつ、WEBサイトとアプリで表現したい世界観と機能をより高めるデザインを追求すれば良いわけです。

WEBサイトの話に入ります。
WEBサイトの作成の前には、何をユーザーに伝えたいのか、その伝えたいことを徹底的に明確化する必要があります。伝えたいこととは、つまりコンテンツですが、コンテンツを明確化して初めて、それをデザインに反映することができ、ユーザーにデザインを通してコンテンツを伝えることができます。

コンテンツを明確化するとは、コンテンツを感じ、理解し、解釈し、分析/整理することです。
たとえば、コンテンツの核心となる魅力は何なのか、考え方は何なのか、どのような側面があるのか。コンテンツを分割することはできるのか、構成する要素は何か、カテゴリーはあるか、階層はあるか、重要度/順序関係はあるか、などなどです。感じ方/捉え方/考え方の手法や経験、直感を磨くことが大切です。物事を感じる感受性、整理する論理性と言ってしまっては簡略化しすぎかもしれませんが、、。

その後で、明確化されたコンテンツをユーザーに伝えるデザインの話に入ることができます。
ただデザインの段階と言っても、何かを新しく付加する作業ではなく、すでに明確化されたコンテンツをそのまま反映させる、そんなデザインこそが最良のデザインではないでしょうか。抽象的なコンテンツを具体的なデザインで表現するのですから、「そのまま」ということはありえませんが、デザインによってユーザーが抽象的なコンテンツをできる限り「そのまま」受け取れれば、それは最高のデザインと言えます。

たとえば、重要なものは、奇抜な形で、大きくし、目立つ色で、位置もトップにして、目につくような変化を加える。
コンテンツにカテゴリーがあれば、同じカテゴリーを位置的にまとめる。
同階層のコンテンツは同じ表現形式にする。
象徴するモチーフがあれば、バックグラウンドやヘッダーイメージに使う。
などなどで、明確化したコンテンツを、象徴的/比喩的/補助的にデザインとしてどう表現するかが大事で、その手法や経験、直感を磨くことが大切です。物事を置き換える表現力と言ってしまっては簡略化しすぎかもしれませんが、、。

具体的には、家具屋さんならそのビビっとくる商品をバックラウンドやロゴに使い、優先順位の高い商品ごとに並べ、カテゴリーごとに色分けし、商品情報と店舗情報の位置を分け、店舗名を大きなフォントでトップに、リードで店の客観的情報と主観的情報を出す、などなどです。

その上で、ボタンの押しやすさであったり、読みやすさであったり、全体に規則性を持たせるなどWEBサイトとしての機能性を付加することが必要です。

アプリの話に入ります。
アプリにはそれが実現しなければならない機能があるので、その機能を最大限に発揮できるデザインを求める必要があります。WEBサイトの機能性をより徹底的に追求することと言っても良いかもしれません。一方で、そのアプリが持つ世界観も魅力ですから、それを掴めずに公開、ということでは良いデザインとは言えません。

アプリの機能性とデザインについては、後日考察を行いたいと思います。
後日追加: アプリのデザインについて