このワイヤーの特徴
閉じたままでも、何の項目かが分かる
カードにアイコンと1行の説明を添えているので、開く前におおよその中身が分かります。
名前だけでは伝わりにくいサービスでも、自分に関係があるかを判断できます。
開いたカードだけが伸びる
PCでは2列に並べていますが、開いたカードだけが縦に伸び、隣のカードの高さは変わりません。
閉じた項目の並びが崩れず、見渡しやすさを保てます。
開いた中に、次の行き先を置く
中身には含まれる作業を短く並べ、最後に「料金と事例を見る」のリンクを置いています。
概要を確かめた人が、そのまま詳しいページへ進めます。
開いたカードは、枠の色で分かる
開いているカードは枠を濃くしています。
2列に並んでいても、どのカードが開いているかをすぐ見分けられます。
制作時のよくある失敗
カード全体をリンクにして、開閉と混ぜる
カードを押すと開くのか、別のページへ移るのかが分からなくなります。
開閉はボタン、ページの移動は中のリンクと、役割を分けます。
2列のまま、隣のカードも伸びる
同じ行のカードの高さをそろえる作りだと、1つ開くと隣にも大きな空白ができます。
開いたカードだけが伸びるように並べます。
閉じた説明と、開いた中身が同じ
閉じた説明と同じことを開いた中で繰り返すと、開いた意味がありません。
閉じた状態は概要、開いた中は具体的な作業や条件と、書き分けます。
アイコンだけで、項目を見分けさせる
アイコンは、それだけでは意味が伝わらないことがあります。
項目名と説明の文字を必ず添え、アイコンは飾りとして扱います。
よくある質問
カード型のアコーディオンと、普通のカードの違いは何ですか?
普通のカードは押すと別のページへ移りますが、カード型のアコーディオンは押すとその場で中身が開きます。
概要を確かめてから詳しいページへ進んでほしい場合に向いています。
カードは何列に並べるとよいですか?
PCでは2列にすると、開いた中身を読みやすい横幅を保てます。
3列以上にすると、開いた中身の横幅が狭くなり、文章が読みにくくなります。
SPでは1列にします。
カードのアイコンは必要ですか?
必須ではありません。
項目が多い場合に見分けやすくなりますが、アイコンだけで意味を伝えようとせず、項目名と説明の文字を添えます。
