レスポンシブデザインがちゃんと理解できていないWEBデザイナーの話

薄っぺらい知識の人が偉そうにしていると、どうしてもイラっとしてしまう、下駄です。 この間、仕事でとある大手企業のランディングページをお願いされたのですが、 チェックが完了したデザインを送るので1ページだけコーディングして欲しいというオーダーでした。 この手のオーダーでよくある事なのですが、パソコン用とスマホ用のデザインがaiやpdfやパワポ資料で作られていて、2種類のデザインが送られてきます。 ここまでは、特に問題は無いのですが、問題はその資料の中にありました。

レスポンシブデザインを勘違いしている人は以外に多い

スマホファーストとして、スマートフォンデザインから入るシステム設計は、今のブラウザスタイルで考えると非常に有効で効率的なのですが、 そもそもHTMLコーディングというwebの基本を知らないデザイナーがあまりにも多すぎて、そうした人は「レスポンシブデザインは、スマホとパソコンのデザインをサイズで別々に作る」という認識でいて、コーディングする時に、もはや1ソースに2パターンのデバイス表示の記述をして、実質無駄な容量を持つ構成になるページになってしまうケースが多々あります。 そもそも、レスポンシブデザインは、サイズが変わっても同じ要素を表示サイズに適した状態で表示することを目的にするデザイン方式なのですが、 どうしても、スマホサイズ、PCサイズという認識で作業を進めてしまうようです。

実際の不都合

具体例を交えて、５つの不都合を見ていきましょう。

1. 文字の扱い

同じテキストデータだけど、改行コードを決めてしまう不都合。

あいうえおかきくけこさしすせそたちつてとなにぬねの

こんな、長文（※文字はサンプルです）があった場合に、 スマーフォトンでは、 あいうえお かきくけこ さしすせそ たちつてと なにぬねの と、表示して、PC表示では、 あいうえお かきくけこ さしすせそ たちつてと なにぬねの という風に表示させたいという指示の場合、この違和感に気がつけるでしょうか？ スマホ表示の改行がパソコン表示では、半角スペースになっています。 要するにテキストが同じではないという状態になってしまうんですね。 ただ、この程度の文字の違いであれば、cssのwhite-spaceを使って、なんとか指示通りに持っていくことができますが、スマートフォン表示は幅320pxを最小として考えればいいのですが、PC表示は、ブラウザサイズが一定ではないという事を理解していないため、改行ポイントを、任意の箇所で行ってしまった場合、意図しない改行なども発生してしまうので、いざ実装した跡で「こんなはずではなかった・・・」となってしまいがちです。

2. 画像の扱い

画像トリミングではなく、別画像にしてしまう不都合というのがあります。 この画像をパソコンブラウザで表示した場合、スマートフォンでは、ロボット１つずつの画像をカルーセル処理したいという仕様でしたが、送られてきた素材は、元の画像1枚と、ロボットそれぞれに切り取られた画像4枚でした。 もちろん、このレベルであれば、トリミング処理をしたり、色々と調整をして元画像1枚で実装することは可能なのですが、少し入り組んだ画像で、デザインされてしまっていては、もはやお手上げです・・・

3. 余白の扱い

画面が広いパソコン画面と、狭い不マートフォン画面では、余白の取り方は違ってくるのは理解できますが、 以下のような指示の場合、コーディングするときに、どうすればいいか、迷ってしまうでしょう。 タイトル 余白10px あいうえお 余白5px かきくけこ 余白5px さしすせそ 余白5px たちつてと 余白5px なにぬねの タイトル 余白20px あいうえお かきくけこ さしすせそ 余白10px たちつてと なにぬねの これも、tag構造を無視した指示になっているため、別の構造として用意して出し分けをする以外に方法はありません。 このレベルの文章だけであれば、同じタグ構造にすることはできるかもしれませんが、文面に応じて余白仕様が頻繁に変わる場合は、その後に文章変更が発生した場合に、大きな作業工数がかかってしまうことになり、効率的な状態に持っていくには「分ける」事が最善となるでしょう。

4. 並びの扱い

レスポンシブ思考の最も肝になる点ですが、メニュー項目や、横並び画像などを、縦一列にして、表示バランスを取るという場合、そもそもの並び自体が無視されたデザインで設計されるケースがあります。 意図的にパソコンとスマートフォンで並び順が変更されるケースですね。 これは、並び順に色々な意味がある場合が多いのですが、最もコーダーが困るケースとしては、なんとなく、見た目がいいから・・・という理由で、並び順を変えられてしまうケースです。 orderプロパティを使って並び替えをしてもいいのですが、動的表示などの場合は、もはや手がつけられなくなります。

5. ブラウザサイズの扱い

デザイナーの人が最も意識できていない点として、パソコンのブラウザサイズは、一定ではないという点です。 スマートフォンは端末ごとに横幅などのサイズがまちまちですが、端末ごとの表示は一定になります。 それとは比例して、パソコンブラウザは、表示ウィンドウのサイズが固定化していることは、ほとんどありません。 それを考慮せずに、横幅1000pxとして、デザインした際に、800pxのサイズになった場合の考慮が全くされていないというような場合 そのままコーディングしてしまうと、必ずやり直しをするハメになります。

webデザイナーに求められる事

上記のような、レスポンシブデザインをキチンと理解していないデザイナーが構築したデザインは、もはやレスポンシブではなく、別ページ扱いと考えたほうが良さそうです。 言われたとおりにコーディングしたのに、思考が足りていなかったせいで、余計な作業を（恐らく無償で）請け負うことになる事を考えると、やはりデザイナーがしっかりとした知識を持って置かなければいけません。 コーダーは、そこまでの技術翻訳を請け負う必要もなく、業界で必要な知識はプロとして学習して然るべきなのです。 具体的には、以下のような事を理解していないデザイナーは、webの仕事をしてはいけません。

1. レスポンシブデザインにおける、一定の共通ルールが作れない（理解できない） 2. タグ構造が理解できない 3. cssの知識が無い

htmlとcssレベルの簡単なフロントコーディング知識がないデザイナーと一緒に仕事をすると、それをサポートする事に倍ぐらいの時間を取られてしまうので、コーディングする人は、そうした見極めスキルも必要なのかもしれませんね。