レスポンシブな、スマートフォンサイトでのフォームデザイン

Nest_01

スマートフォンサイトのデザイン時には、UIにも色々と気を使うことが多いかと思います。
各サイトでは、コンタクトフォームや注文フォームなど、フォームというUIは欠かせないものになっていますね。

レスポンシブ対応サイトで、フォームのUIデザインをどんな風に扱っているのか、
参考になるようなサイトを紹介します。


Emporium Pies

パイのオーダーフォーム。
EmporiumPies  01 レスポンシブな、スマートフォンサイトでのフォームデザイン

レスポンシブデザイン Ver

EmporiumPies  02 レスポンシブな、スマートフォンサイトでのフォームデザイン 2カラム構成を1カラムとして1つ落としてます。
時間帯の選択UIは、これ使う必要があるのかなあという印象ですね。
(5時~8時とか、レンジを選べるならこのUIでもいいかも)



Symbolset

アイコンセットのオーダーフォーム。
sympleset 02 レスポンシブな、スマートフォンサイトでのフォームデザイン

レスポンシブデザイン Ver

sympleset 01 レスポンシブな、スマートフォンサイトでのフォームデザイン これも2カラムだったのを1つ落とすタイプですね。
Users/Items/Priceの部分はTableでのマークアップ。
で、レスポンシブにしてもそのままです。
Itemsの名前があんまり長くならない事が前提になってるっぽいから、これでいいのかなー。
Tableのマークアップは、スマートフォン向けサイトだと悩む事が多いですよねえ。


Built Things

見積依頼のコンタクトフォーム、ですかね。
builtthings 01 レスポンシブな、スマートフォンサイトでのフォームデザイン

レスポンシブデザイン Ver

builtthings 02 レスポンシブな、スマートフォンサイトでのフォームデザイン
これは横並びのinputは維持、フォームの幅のみを変えるパターンです。
フラットデザインサイトだと、inputは枠を付けずに下線のみが多いなぁ。


World Meeting Time

ワールドワイドなミーティングスケジュールを設定するサイト。
その時間帯の設定フォーム。
*これはレスポンシブじゃなくて正確には別サイトですね。

WorldMeeting Time 01 レスポンシブな、スマートフォンサイトでのフォームデザイン

レスポンシブデザイン Ver

WorldMeeting Time 02 レスポンシブな、スマートフォンサイトでのフォームデザイン もう全然、まるっきりデザインも異なるタイプです。
PC版だと地図でも場所を設定できますが、スマートフォン向けサイトでは地図のインターフェースはありません。
見せるコンテンツをきっちり分けてる良い例ですね。
フォームデザインもそれに伴って最適化できます。



Nest

製品の注文フォーム。
Nest 01 レスポンシブな、スマートフォンサイトでのフォームデザイン

レスポンシブデザイン Ver

Nest 02 レスポンシブな、スマートフォンサイトでのフォームデザイン こちらもちょっと変則的。
PC版では存在していたSummary(カートの中身)が、スマートフォン向けコンテンツとしては表示されていません。
代わりに、画面上部にアイテム数の表示となっています。
フォーム自体は縦に並べつつも製品画像は保持させているので、画像は絶対に見せておきたい、というのが最優先事項なのかもしれません。



Yellow Marshmellow

デザイン会社のコンタクトフォーム。
yellowmarshmallow 01 レスポンシブな、スマートフォンサイトでのフォームデザイン

レスポンシブデザイン Ver

yellowmarshmallow 02 レスポンシブな、スマートフォンサイトでのフォームデザイン
一部、3つ並んでいたinput要素はすべて縦に並べなおしています。
コンタクト情報もすべて縦レイアウトです。
デザイン自体も美しいですが、マークアップも一番参考になる辺りかと思います。


また、スマートフォンサイト向けに良いUIがあればご紹介したいと思います。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>