レスポンシブデザインについて考えてみる

レスポンシブデザインについて考えてみる

今や流行であるしシステムの重要要件となってきたスマホ対応。レスポンシブデザインと言う言葉も様々なメディアで目にする事が多くなってきました。

本屋さんにそのままズバリのタイトル本があるくらいですから、WEBエンジニアでは当たり前の言葉ですよね。

そんなレスポンシブデザインについて現在のシステムを作成する中で思う所があったのでまとめてみます。

そもそもレスポンシブデザインって何？

言わずもがなですが…。

スマホの普及でWEBデザインは大きく変わりました。
その一番の変化は閲覧画面が縦長である事。PCはスクエア型か横長の画面ですよね。
また、スマホは横持ちすれば横長画面になります。つまり切り替えが必要と言う事です。
そこに対応しようと発生した画面サイズによって表示を変えてくれるデザインをレスポンシブデザインと言います。

主には<div>で要素を囲い<div>要素を画面サイズに合わせ横並びにするデザインとして提供されています。

<dl><dt><dd>などでも同様のデザインを行うことが出来るので最近では表設計でもこの『要素の横並びデザイン』を採用する事が多くなってきました。

テーブル設計の良さとレスポンシブ化した時の弊害

<dl><dt><dd>で表を作った時の最大のメリットは画面サイズが変わっても全体が表示されるように位置調整を行ってくれる事です。

これは使う側からすると想像以上に便利です。
でも弊害が無いわけではありません。

データを閲覧する事にはとても長けています。
ただし、データから答えを探す事に関してはやり難さが残ってしまいます。

従来の<table>タグの良さは画面が変わってもブレずズレず設計した表の形状を保ってくれる事です。

レスポンシブ化しない時のスマホ画面の見難さ

<table>タグの最大の問題点は横長の表を作成した時、縦長画面ではすべてを把握できない事にあります。
見れないんだから関係性が見やすいも何もありません。

レスポンシブ化した時、データのすべてが見やすく並べ替えられるので見えないという事案は発生しません。
まぁ横持ちしてあげれば把握はできるのですが、それでも表示されるレコード数は少なくなりますよね。

「スマホでテーブルタグは見難い、レスポンシブ化するべきだ」と言われる理由がこれです。

作業をどこで行うか考えてみる

こんな記事を書いている私も現在のシステムでどう処理しようかとても悩みました。

ネットショップが扱いたい商品データってかなり膨大な量があります。
これをレスポンシブデザインにすると(スマホで見やすくなりますが）他の商品との比較はしにくくなります。

そんな時に考え現在の設計に落とし込んだのが【その作業どこで行う？】という指標です。

商品サイズについて例を挙げてみます。

抽出してまとめてみると次のように判断できます。

• 【寸法の記載】はスマホで書く可能性がある。
• 【サイズの調査】はPCの前で行われる事が多い。

倉庫で採寸してスマホを使いその場で寸法を登録する。

この作業をするために行う検索は商品コードでの検索です。
サイズで検索したり、ジャンルで検索したりと言った事を行う可能性は低いでしょう。

そんな事を考えてあげると、どんな画面を用意してどのように遷移させるか、段々と見えてきますよね。

大切なのは作業の切り分け

先の項目で例を挙げた通り、それぞれの作業にはどんな端末で行うか想定する事が出来ます。
全てスマホで行う可能性はありますが、その頻度がどの程度なのかの推定が出来るわけです。

今回システムを作成していく中で、この作業の切り分けがとても大切であると改めて気づかされました。

テーブルの行と列の関係性を維持したい私としては、スマホの時に特別対応させようとレスポンシブデザインのコードを書いていました。
スマホかPCか判断して表示画面を変えるという仕様です。
でもこの設計はほぼすべての画面で2タイプ以上のビューを用意するというかなり大きな作業量が必要になります。

システムは所詮道具です。
その道具をどんな場所で使うか考え切り分けをする事で、あまり大切ではない作業を切り離すことができます。

スマホで行う可能性のある作業を抜き出す

私のやりたいネットショップ用のシステム。
切り分けをしていくと殆どPCの前で作業するだろうという結論に至りました。

APIでのカート更新システムもありますから、こういった更新指示はスマホから簡単に行いたい。
でもCSVの掃き出しなんかは絶対にスマホで行わないでしょう。

つまるところ、レスポンシブデザインが必要ないシステムもあると言う事が見えてきたわけです。

画面遷移の見直しが必要か考える

それでも一部のシステムはスマホから実行したいのも事実。

スマホでの操作は遷移が短い方が楽です。
PC用の画面が占拠している場所を渡り歩きスマホで更新するなんてことはナンセンスです。

画面をスマホ対応させる意味がないですよね。
なので、作業を切り分けると同時にその作業にアクセスできる最短ルートを用意します。

これだけでシステムの使い易さは格段に上がります。

まとめ

ある程度システムが組みあがってくると悩みが生まれる画面遷移。
今回はレスポンシブデザインについて考察してみました。

PCでの作業がほとんどであれば、それほどレスポンシブデザインに固執する必要が無い事もわかってきました。

さぁ、開発も大詰めを迎えています。
売上アップに貢献できる使い易い良いものが出来る様、頑張ります！