Webギャラリーのサイトをスマートフォン対応させてみました。
今後のデバイスの変化なども読みながら、流動的に対応したいと思います。
そのときWebサイトをスマートフォン対応させる場合、その方法はいくつかあり、
サイトをＰＣ・タブレット・スマートフォン用の複数のサイトのＨＴＭＬに分散するのではなく、全てを兼ねる一つのサイトのＨＴＭＬに統合し、対応するＣＳＳ内でメディアクエリによるデバイス毎の画面サイズでの切り替えが最も良いかと考える。
ＳＥＯ的にもＨＴＭＬとＵＲＬの分散も防げ、修正も一種類のＨＴＭＬだけで済む。
難点が一つあり、あらゆるデバイスに対応させるにはそれぞれのブラウザやデバイスの違い等をひとつひとつ考慮に入れながら、サイト作りを考える必要がある事だ。
条件次第では、修正の手間や複数設計などのコストはあるが、デバイス毎のＣＳＳを用意し切り替える、もしくはそれぞれのＨＴＭＬとＣＳＳつまりそれぞれのサイトを用意したほうが楽かもしれない状況もある。
とはいえ、デバイスの種類が増えこそすれ減りそうにもないので、ページが増えた場合の更新や修正量やそこでの間違いを防ぐ事を考えると、一種類のソースで作るほうが後々良いと考える。人手が充分にあるならそうでもないかもしれないものの。
それでも全ての対応が無理な場合はある程度の見切りを考慮する必要もある。
メディアクエリによる切り替えに加えて、 javascript を使いユーザーエージェントからデバイスを判断して画像のサイズを切り替えたり、ＣＳＳのセレクタやプロパティを切り替えるのも有効である。
近年スマートフォンやタブレットからの利用が増えているので、WebサイトをＰＣ・タブレットで共通のものとして統合し、それをスマートフォン用にもレスポンシブする様に最適化するのが、現段階では効率的と考える。
そのとき、シンプルな構成のデザインにするならば画面サイズによってだけ変化していくシンプルなレスポンシブデザインで良いかもしれないが、文字や画像の並びや大きさはもちろん、各デバイス毎にそのデザインの配置構成の意味合いは変わる。特にスマートフォンでは面積の大きさや縦横の比率や使われ方や使われる場や操作方法がパソコンやタブレットとは大きく異なるので、パソコンやタブレットの縮小版ではなく最適化が必要なのだと考える。全く違うデザイン過ぎてもサイト自体のアイデンティティを損なう事も考慮すると。
スマートフォンサイトは携帯電話用のサイト（以下携帯サイト）のようにならないデザイン設計が必要である。
（なっても悪くはないがユーザー側の受け取るユーザー体験を考慮するならば避けたほうが賢明）
狭い面積なので文字を重視しがちになるとかつての携帯サイトのようになってしまう。テキスト本文やリンクなどの伝えるべき文字は別として、ボタンやその他の操作に関わる部分などにおいて、余白と図形などのフォルムと配色と画像を組み合わせて、せまい面積の中にあっても余裕のある構成をビジュアルをもって前面に押し出しつつ作るほうが良い。見た目はもちろんだが、認識性・識字性などの機能性も考慮しつつ。
その点では携帯サイトも同じではあるが、スマートフォンではより高度な表現が可能なので、そのようなデザインが容易になる。
ブログやニュースのサイトなどの文字が中心のサイトでも考え方は同じだと考える。
とはいえ、できるだけ、例えば世の中のWebがタブレットとスマートフォンに、もしくはパソコンだけに統一されてくれるとありがたいのだけど、
テレビや家電などに広がりそうな勢いと未知なる期待を含む可能性を考えるとそれは無理な願いかと思うので、こちらでできるだけ統一していくのが良策であると考える。
できるだけカンタンに。
より機能的に、そして格好良く。