エンジニア目線によるレスポンシブコーディングに大切なデザイン準備ポイント

こんにちは。アイレットデザイン事業部のフロントエンドエンジニアの鶴若です。
アイレットデザイン事業部では「INSIDE UI/UX」と題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。
今回はレスポンシブデザインをコーディングする際に、デザイン工程で準備されていたことでエンジニア的にありがたかった点や、逆に後から実装修正するのが大変だった点などをまとめてみました。
これによりエンジニア目線によるレスポンシブデザイン時に検討しておくべき点が見えてくると思います。

エンジニア的にありがたかった例

まずは、これが決まっているとありがたいという例をあげていきます。

デザインパーツがアセットとしてブレイクポイントごとにまとまっている

デバイスサイズごとの見た目の変化がアセット集としてまとめてあるとコンポーネント制作の段階で作りやすいです。

過度の装飾や要素の違いがない

レスポンシブの仕組み上、デバイスごとの見た目を制御する要素が少ないほど実装はシンプルで容易になり、保守性にも優れていきます。
サイト全体で一貫性のある設計・デザインがされているとエンジニア的にも質の良いコーディングが可能になります。

特定のサイズ時に違いがある場合明確な指示がある

デザインデータを見たただけでは掴みづらいレスポンシブの要件や検討事項を最初から指示してもらう事で、
この時はこうして欲しかったのだけど・・・という二度手間が減ります。

エンジニア的に大変だった例

次に、こんな場合はちょっと大変という例をあげていきます。

当初レスポンシブさせる想定がなかったサイトに実装する場合

HTMLの構造がレスポンシブを想定したものではない場合、大量のHTMLの修正が発生する事があり、それに伴い既にできている方のブレイクポイントのCSS修正も必要になる場合があります。

装飾が多い

デバイスサイズによって、細かくサイズや位置の指定をしないと、他の要素に干渉したりサイズ感が変になる場合が多くなり、当初予定していたブレイクポイント以外での調整が発生しやすいです。

リキッドレイアウトで中間部分での指示が曖昧

方針が決まっていない状態で作業を開始すると要素の位置や幅や段落ち、画像のサイズなどで、デザインチェック後の直しが多く発生するリスクが高くなります。

PCとモバイルでのコンテンツの内容やレイアウトが大きく異なる

あまりにもPCとモバイルでのレイアウトに差異があると、CSSだけではレイアウトの調整ができなくなり、HTML上でPC用とモバイル用のソースを分けないと実現ができなくなる場合があります。
また、複雑なコンテンツの順序入れ替えなどがあるとその分工数は増えていきます。

特定のサイズ時に挙動が異なる（モーダル、もっと見る、カルーセルになる等）

JavaScriptなどで表示・非表示の制御する必要がある為、CSSだけで実装するより実装が難しく複雑になります。

場所によってサイズ変更時のレイアウト変更ルールが違う（レスポンシブ、リキッド、フレキシブル）

作業が煩雑になり場所によってチェックする内容も異なる事になるので、その分工数が増える事になります。

実現が厳しい例

レスポンシブという部分だけで見ると、基本的に時間と労力をかける事が可能であれば、実現が不可能という物はほぼ無いです。
ただし、それをやる事によって、納期やコストに見合わない為、実装するのが難しいという判断をしなければならない時もあります。
もちろん、最終的にはデザイン性やUXを重視することも大切ですので、そのような大事な部分に十分に時間を使えるように、デザイン工程で考慮しておくべきことはしっかりと押さえておくことが大切であると言えます。

エンジニア的に必要と考えるレスポンシブ考慮点まとめ

以下にエンジニアがヒアリングや忖度しなくても準備しておいて欲しいことなどをまとめてみました。

• PC時の横幅の上限・下限
• PC下限の時の挙動（スクロールバーを出す、縮小する等）
• PCファーストかモバイルファーストどちらを優先するか
• ブレイクポイントのサイズ
• デザインがPC・SPだけの時にタブレットサイズのどちらを表示させるか
• リキッドレイアウトの場合デザインされていない中間サイズでのレイアウトをどうするかの指示
• サイズごとの画像の取り扱いをどうするか（1つの画像を使うか複数画像を出し分けるか）

マイナーなレスポンシブ対応に役立つ「viewport-extra」

デバイスサイズによっては最適なレイアウトを考慮するのが難しくなる場面があります。
そんな時に役立つのが「viewport-extra」です。
https://github.com/dsktschy/viewport-extra
メタタグを書き換える事によって表示サイズを拡大・縮小表示する事を実現するライブラリで実装方法も容易です。
特に主流じゃない320px以下の端末は主流のモバイル表示を縮小表示や、タブレット〜SPまではPCを縮小表示したい時などに役立ちます。

あとがき

デザイン工程での考慮や指示が曖昧になっていると、手戻りが発生したりコストの問題に跳ね返ってきますが、
事前にディレクター、デザイナー、エンジニアを交えてすり合わせをすることによって回避できる事が多いと思います。
また、昨今のwebサイトは多様なデバイスに対応することが求められ制作コストが高くなる一方です。
デザイン工程とコーディング工程がスムーズに受け渡しできるノウハウを高めていく事がますます大切になっていくと思います。
アイレットではデザイナーとエンジニがより良い制作ができるように、このような情報共有を心がけています。

P.S. アイレットでは一緒に働いてくれるエンジニア、デザイナーを募集しています。詳しくは採用情報をご覧ください。