レスポンシブとデバイスの不具合の形式の設計方法

Sep 13, 2025

操作方法

それが登録フローまたはマルチビューステッパーであるかどうかは、フォームはデジタル製品設計の最も重要なコンポーネントの1つです。そのため、モバイルデバイスで効果的に動作するようにそれらを設計する必要があります。

ここでは、簡単に見て、モバイルデバイス用のフォームを設計する方法です。 FlexBoxの使用方法。

01.垂直スクロールの設計

A single column layout works better — 単一の列レイアウトがうまく機能します

デバイスサイズに関係なく、フォームを完成させる最も簡単な方法は線形的な方法です。複数の列はユーザーの勢いを破壊します（ユーザーは使いやすさの点でマイナスの要因であるフィールドを解釈する可能性があります）、ユーザーが水平スクロールに頼る必要があります。

フォームをレイアウトすることになると、1つの列にエントリを設計する必要があります。フォームが単一の列にある場合、完了へのパスはページの直線です。

02.ラベルを上に置きます

Place labels above form fields — 上のラベルをフォームフィールドに配置します

ラベルは、対応する入力フィールドが意味するものをユーザーに指示します。ラベルをどこに配置するかを選択するときは、左揃えまたはトップ整列を2つあります。

フォームがデスクトップまたはタブレットで完了している場合は、左揃えラベルが機能します。しかし、それらはスクリーンエステートが限られているモバイル機器にとってひどい解決策です。左揃えラベルはフィールドの前に座る必要があるため、狭い画面はフィールド自体のスペースをほとんど残しません - 特にデバイスが縦モードになっている場合。これにより、2つの深刻なユーザビリティの問題が発生します。

フォームフィールドは、ユーザーの入力を表示するのに十分なほど広くなりません。それらは自分の反応を間違ったり、より誤ったフォームを提出する可能性が高いです。
ユーザーが誤った情報を入力したことを通知されると、それらは無効な入力全体を見ることができないので、それらは苦労して問題を解決することができます。

ユーザーがモバイルデバイスから閲覧しているときに[フォーム]フィールドの上にラベルを上に配置すると、ラベルの任意のものを使用する必要がないため、ユーザーが詳細を入力するようにユーザーが最大限の幅を確認できるようになります。

入力フィールドの上にラベルを書くと、1つか2つの単語に限定されないように、明確で意味のあるフィールドラベルを書くことができます。

03. TAPターゲットを使用します

タップターゲットは、どのサイズのデバイスに表示されても使用が簡単な必要があります。ターゲット（入力フィールドとボタン）が大きくなると、それが永続的な状態であろうと環境によって引き起こされる一時的なものであろうと、より低いユーザーがより簡単です。

現時点では、最大の目標サイズはタッチデバイス用ですので、タッチファーストを設計する必要があります。これにより、ユーザーはテキストを入力するかオプションを選択するためにズームインする必要がなくなります。クリック可能な領域は太い指の規則に従い、周囲の領域に侵入しないでください。平均的な人間の指のパッドは10 x 14 mm、平均指先は8~10 mmです.10 x 10 mm

しかし、タップターゲットを適切にサイズ設定するだけでなく、複数のタップターゲット間に十分なスペースがあることを確認する必要があります。実際、モバイルSEOツールで「ターゲットサイズ」エラーが発生している場合は、実際のタップターゲットが小さすぎるのではなく、タップターゲットが互いに近すぎるためです。

モバイル機器でコンテンツを読み込むのが難しい可能性があるので、入力を100％にすると、テキストを少なくとも16px（1em）に設定されます（1em）。そのようにして、必要な情報を読み取るには、ピンチズームや追加のスクロールは必要ありません。

04. HTML5フォームフィールドを使用します

モバイルデバイスは、さまざまな入力タイプ用のカスタムソフトウェアキーボードを提供し、HTML5フォームフィールドは、フォームのユーザーエクスペリエンスを向上させる最も簡単な方法です。これらの入力タイプは、オンスクリーンキーボード用のキーボードレイアウトの種類についてブラウザにヒントを表示します。

の入力タイプを含めます数、 Eメール 、 tel 、 URL そして日付そして、モバイルデバイスのキーボード入力は、ユーザーがフォームに記入するのを容易にするために更新されます。スタイルフォーム入力に追加のクラスを追加する必要はありません、あなたがする必要があるのは有効なHTML5入力タイプを使用することです。

<input type="email" id="input-email">

05. FlexBoxを使用してください

それに直面しましょう - HTMLで応答的なレイアウトを作成するのは難しいです。私たちのほとんどはこれに苦労しています。特殊な技術を使用して予想されるようにレイアウトの振る舞いをすることは常に可能でしたが、このプロセスは決して簡単ではありませんでした。

構造化レイアウトに対処するための技術が来て、何年も経過しています。開発者は、HTMLフレーム、HTMLテーブル、フロートベースのレイアウト、および最近では、次のようなCSSフレームワークによって普及したさまざまなグリッドシステムを使用しました。 ブートストラップ 。

しかし、HTMLフレキシブルボックスモデルの出現（または フレックスボックス ）HTMLは、HTMLフォームを含む複雑なレイアウトに対処するリッチボックスフォーマットエンジンを最後に獲得しました。

FlexBoxは、美しいフォームを素早く構築するための素晴らしい柔軟性を与えます。 FlexBoxについて理解するための重要なことは、それがコンテナ操作ツールであるということです。それらのサイズが知られていなくても、コンテナ内のアイテムの間でスペースをレイアウト、整列させ、配布することがより効率的な方法を提供することを目的としています（したがって単語「Flex」）。

面白いのは、FlexBoxがメディアクエリを使用せずにフォームをすばやく構築するための大きな柔軟性を与えることです。さらに、現在のブラウザはすべてサポートされています。

our Web DesignerのFlexBoxのガイド 記事はあなたにもっと話しますが、今のところ練習をして、FlexBoxを利用して応答フォームを作成する方法を学びましょう。最初に、私たちの形式のHTML構造を定義しましょう。

 <帳票＆gt;
＆lt; ULクラス= "Flex"＆Gt。
＆lt; li＆gt; = "first-name"＆gt; first name＆lt; / label＆gt;＆lt;入力型= "テキスト" id = "first-name" placeholder = "ここにあなたの名を入力してください"＆gt; / Li＆GT;

フォームの各リスト項目には、クラスがあります。 フレックス 。このクラスは私たちの形式のFlexコンテナを識別します。 FlexBoxの大きな利点の1つは、そのコンテナと要素を定義するために任意のHTML要素を使用する機能です。

FlexBoxスタイルを任意のHTML要素に適用できます。つまり、要素を簡単に互いに独立して簡単にリフローすることができます。 FlexBoxは単なるスタイリングメカニズムであることに注意してください。つまり、それはあなたがその意志でそれを追加して削除することができることを意味します。

CSSのFlexコンテナを識別しましょう。さらに、フレックスアイテムを十字軸に向けて垂直に中心にしたいです。それを指定するのは簡単なことで、単純なCSSルールを設定する必要があります。

 .Flex LI {
表示：Flex;
フレックスラップ：ラップ;
整列品：中央;

次のステップは、Flex項目の幅を指定することです。主な要件：

ラベルは少なくとも100ピクセル以上で200ピクスでなければなりません
ラベルの後に来るフォーム要素は少なくとも200px以上であるべきです

これは私たちに何を与えますか？フォームの幅が少なくとも300ピクセルの合計（ここでは右揃えラベルを使用しています）の場合、各ラベルとその関連するフォーム要素は単一の水平方向の行に表示されます。

 .flex＆gt。 LI＆GT;ラベル{
フレックス：1 0 100ピクセル;
最大幅：200ピクセル。
}
.flex＆gt; LI＆GT;ラベル+ * {
フレックス：1 0 200ピクセル;

最後に、Flexアイテムでもある送信ボタンの場合、いくつかの基本スタイルを定義します。

 .Flex Liボタン{
マージン：自動車;
パディング：22px 46px;

あなたが見ることができるように、最小限のマークアップとFlexBoxの電源では、応答形式を構築しました。

モバイルデバイスを運ぶより多くのユーザーが、あらゆるデバイスにユーザーフレンドリーな経験を提供することが重要です。キーポイントは、ユーザーのニーズとデバイスの両方の機能に適応することです。

この記事はもともと発行287に発行されました ネットマガジン 、プロのウェブデザイナーと開発者のための雑誌 - 最新の新しいWebトレンド、技術とテクニックを提供しています。 ここでネットを購読してください。

関連記事：

応答的な形や表を作成します
Webアクセシビリティを始めましょう
あなたのレスポンシブWebデザインをテストするための7つの素晴らしいツール

レスポンシブとデバイスの不具合の形式の設計方法

01.垂直スクロールの設計

02.ラベルを上に置きます

03. TAPターゲットを使用します

04. HTML5フォームフィールドを使用します

05. FlexBoxを使用してください

操作方法 - 最も人気のある記事

より良い文字アニメーションを作成するための10の方法

ステップバイステップ：Corel Painterでの油絵を模倣する方法

鉛筆の図面にデジタル色を追加する

ユーザーフレンドリーなWebフォームを作成するための10の規則

すぐに手をスケッチする方法

Blenderで複雑な3D SCI-Fiシーンを構築する

映画館4Dで彫刻する方法

センサーデータを収集するアプリを作成する

カテゴリ