ページごとに違うボタンを、役割からそろえる方法

トップページでは丸いオレンジ、設備ページでは四角い黒、料金ページでは細い文字だけ。同じ予約ページへの入口を、ページごとの気分で作っていませんか。見た目を直す前に、押した後の行動を並べると、そろえる対象を決められます。

題材は架空の貸しスタジオの案内サイトです。この記事ではデザイン案の整理を扱い、CSSの実装は行いません。三ページに置かれた操作を調べ、同じ役割へ共通の見た目を割り当てるためのルールを作ります。

スクリーンショットに、押した後の行動を書く

まずトップ、設備、料金の画面を並べ、ボタンのように見える箇所を囲みます。その横へ、表示文言と移動先、または起きる操作を書いてください。色だけを見て同じ仲間にしないのが出発点です。

この模擬案件では、各ページの「空き状況を確認する」は同じ予約案内へ移動し、「設備を詳しく見る」は設備紹介へ移動します。一方、「入力を消す」はフォームの内容を消す操作とします。最後の操作まで予約への入口と同じ見た目にまとめるのは、今回の整理には合いません。

行き先が不明なものは、実際のリンク先や設計メモを確かめてから分類します。言葉が似ていても、片方が確認画面へ進み、もう片方が申し込みを確定するなら、同じ動作と扱わないようにしましょう。

主な行動と、補足を読む行動に分ける

今回の案内ページでは「空き状況を確認する」を主な行動、「設備や料金の補足を読む」を補助の行動と決めます。主な行動とは、そのページで特に案内したい次の一歩です。主と補助は、この模擬案件の設計上の分類であり、どのサイトにも同じ二種類で足りるとは限りません。

比較案Aは、すべて同じ塗りのボタンにする方法です。形をそろえる判断は単純になりますが、補足へ進む入口も同じ強さになります。比較案Bは、主な行動を塗り、補助を枠線にする方法です。今回は予約案内への入口を区別するため、Bを仮採用します。

ここで補助の文字を極端に薄くする必要はありません。また、色だけに役割を背負わせず、文言と配置にも理由を持たせます。「空き状況を確認する」を料金説明の後に置くなら、利用条件を読んでから日程を調べる流れを想定した、と記録できます。

共通にする項目を、一枚のルールに書く

「全体的に統一する」では、次のページを作るときに再び迷います。デザイン案には、共通にする項目と、使う場面を具体的に残しましょう。今回の練習なら、次の程度から始められます。

• 主な行動：同じ塗り、角の形、文字の太さを使い、予約案内へ進む箇所に適用する。
• 補助の行動：同じ枠線、角の形、文字の太さを使い、設備などの補足へ進む箇所に適用する。
• 共通の確認：長い文言でも欠けずに読め、周囲の文章と重ならないことを各画面で見る。

余白を決めるときは、情報のまとまりを余白で伝える記事を参考にできます。同じボタンでも、近くの説明との距離は情報の関係から考えます。すべての場所で機械的に同じ位置へ置く必要はありません。

例外は、ページ名ではなく理由で残す

「料金ページだけ黒にしたい」という希望が出たら、そのページだけ役割が変わるのかを確認します。役割が同じなら、まず共通案を当てて比べましょう。装飾上の好みで例外を増やすと、最初のばらつきへ戻ってしまいます。

一方、入力内容を消す操作は、今回の主・補助の分類から外して別途検討します。「消す」を予約へ進む操作と取り違えないよう、文言や配置も含めて考える必要があるからです。例外をなくすことではなく、例外の理由を言える状態を目指します。

なお、この記事の「ボタン」は見た目を整理するための呼び方です。実装するときのHTMLは動作から選びます。リンクとボタンの役割を分ける記事で、要素の使い分けを確認してください。

三ページの予約入口に共通案を当てる

三ページから予約や問い合わせへの入口を拾い、表示文言と行き先を記入します。同じ役割のものに共通案を当て、変えたくなった箇所にはその理由を一文残してください。画面がまだなければ、紙に描いた案でも取り組めます。

最後に、長い文言の例と狭い画面の案を一つずつ作り、文字が収まるかを見直します。これで実機の操作まで確認したことにはならないため、実装後の確認も別に残しましょう。強調の付け方を練習するなら、UIデザインの無料レッスンも利用できます。