レスポンシブ対応

🧬 S.S.

 私たちは晴れてセミファイナリストに選出されたわけですが、その際、多くの改善点が記された「審査員コメント」を頂きました。その中には、「スマートフォンを含む多様なデバイスにおいてレイアウトが崩れないよう、安定して情報を表示できる設計にすること」とのご指摘がありました。
 これは一言で言うと、「レスポンシブ対応を行うべきだ」ということになります。
 具体的には、特定の画面幅を基準として、それより小さい場合にスマートフォン向けのデザインを適用する、という仕組みになります。言葉にすると簡単そうで、実際やっていることは単純なのですが、細かく確認していくと、要素の配置が微妙にずれていることがあるんです。それを細々と直していくのがなかなか骨の折れる作業でした。

レスポンシブ対応⋯PC・スマホ・タブレットなど、ユーザーが使うデバイスの画面サイズに合わせてWebサイトのデザインやレイアウトを自動で最適化し、見やすく使いやすくする技術・手法

下は、iphone SE の画面幅でレイアウトが崩れないか確認している画面です。

スクリーンショット