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

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

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

Emporium Pies

パイのオーダーフォーム。

レスポンシブデザイン Ver

2カラム構成を1カラムとして1つ落としてます。
時間帯の選択UIは、これ使う必要があるのかなあという印象ですね。
（5時～8時とか、レンジを選べるならこのUIでもいいかも）

Symbolset

アイコンセットのオーダーフォーム。

レスポンシブデザイン Ver

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

Built Things

見積依頼のコンタクトフォーム、ですかね。

レスポンシブデザイン Ver

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

World Meeting Time

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

レスポンシブデザイン Ver

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

Nest

製品の注文フォーム。

レスポンシブデザイン Ver

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