昨今レスポンシブ・ウェブデザインを採用するウェブサイトがかなり多くなっています。 レスポンシブなデザインの場合、フォームのユーザビリティを確保するには一手間工夫が必要です。 本日は、異なる画面幅でもフォームを使いやすく工夫しているウェブサイトを勝手にピックアップし、そのポイントをお伝えしていきます。 パターン1: あらかじめ横幅を狭くレイアウトする まずは、フォームのページのみ、他のページに比べて横幅を狭く作っておく方法でモバイルデバイスに対応している例を紹介していきます。 このとき多くの場合、横幅を狭くした分左右の余白が大きくなります。 採用例 住友商事 住友商事様のコーポレートサイトでは、他のページのコンテンツ(上)は920pxでレイアウトされているのに対し、フォームのページ(下)では横幅670pxとなっています。 横幅を狭めた場合、ナビゲーション類はレスポンシブ向けにコンパクトに収ま
![レスポンシブデザインを採用するとき参考にしたいフォーム実例まとめ | UI改善ブログ by f-tra](https://cdn-ak-scissors.b.st-hatena.com/image/square/5911465890214dfa70a48d4f9bcc74a1b4d24247/height=288;version=1;width=512/https%3A%2F%2Ff-tra.com%2Fja%2Fblog%2Fwp-content%2Fuploads%2F2015%2F05%2Fmain.png)