見出し画像

投稿カードのUXを良くするための工夫

えび🍤

僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善できる箇所を見つけたりナレッジの共有をする「このデザインどうマークアップする？」シリーズの第二弾です！

このデザインどうマークアップする？

早速ですが、このデザインどうやってマークアップしますか？

画像1

仕様としては「CSS」や「HTML」ラベルをクリックするとカテゴリーページに飛び、画像やタイトルをクリックすると詳細画面に飛ぶというよくある投稿カードです！
僕の場合このようにマークアップします。

正しい文章構成を意識したHTML

前回の記事でも書きましたが、コンテンツの順序として正しいHTMLを記述しましょう。

見た目としての順序は「画像」→「タイトル」→「ラベル」となりますが、正しい順序としては「タイトル」→「ラベル」→「画像」となるかと思います。

画像2

今回はdisplay:flexを利用してHTMLの並び順を変更します。
HTML構成は以下の通りです。

  <article class="card">
   <h2 class="card_title"><a href="#">投稿のタイトル</a></h2>
   <ul class="card_label labelList">
     <li><a class="label" href="#">CSS</a></li>
     <li><a class="label" href="#">HTML</a></li>
   </ul>
   <a class="card_img" tabindex="-1" aria-hidden="true" href="#"><img src="https://source.unsplash.com/400x200/?kitty" alt="サムネイル画像" width="400" height="200"></a>
 </article>

HTMLの並び順を変更するCSSは以下の通りです。

.card {
 display: flex;
 flex-direction: column;
 &_title {
   order: 1;
 }
 &_label {
   order: 2;
 }
 &_img {
   order: 0;
 }
}

まずは、display: flex;とflex-direction: column;で縦並びにします。
orderプロパティを利用すると、HTMLの記述順ではなく任意の並び順にすることができます。単純に数字の小さい順で並んでくれます！
Flexboxについてもっと詳しく知りたい方は以下の記事がオススメです。

grid-template-columnsを使った2種類の横並びレイアウト

投稿カードを横並びにするコード、ラベルを横並びにするコードはそれぞれ以下のように記述しました。

// 投稿カードを横並びにするコード
.cardUnit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

// ラベルを横並びにするコード
.labelList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

CSS gridを利用して横並びにしています。そして、repeat()関数のauto-fit、auto-fillという値が今回のキーワードです！

auto-fitを使った横並びは以下のような動きをします。
親要素にスペースがある場合、スペースを埋めるように幅が伸びていきます。

シーケンス 01_2

auto-fillを使った横並びは以下のような動きをします。
親要素にスペースがある場合、スペースを埋めるように空のグリッドが生まれます。

シーケンス 02_1

そして、どちらもメディアクエリを書かずとも画面幅に合わせて要素がカラム落ちしてくれているのが分かるかと思います。

投稿カードのようにスペースが余った際には、幅を伸ばして埋めて欲しい場合にはauto-fit。
ラベルリストのように、最大幅を守りつつ左揃えになって欲しい場合にはauto-fill。
このような使い分けができます。

さらに詳しく知りたい方は以下の記事がオススメです！

ただし、このauto-fitとauto-fillはIE11では対応していません…🥺
それに加えて最新のFireFoxでも少しバグが残っているようです。（今回の記述であれば問題無しです）
IE11は対象外の案件でFireFoxのバグを踏まないように気を付けていれば、問題なく使えますので是非使ってみてください！

スクリーンショット 2020-06-16 3.10.16

本題！UX改善の為の工夫

今回の投稿カードはカテゴリーへ飛ぶボタンがある為、全体をaタグで囲うことができませんでした。
そうすると、クリック可能範囲が「画像」「タイトル」「カテゴリー」のように3つ存在することになりますよね？
これによって、Tabキーで選択した時に「タイトル」→「カテゴリー」→「画像」と3つを選択することになってしまいます。

画像6

「詳細ページへのリンク」→「カテゴリページへのリンク」→「詳細ページへのリンク」のように同じリンク先へ2度フォーカスされています。
投稿の一覧でこれが起きてしまうと不要なTabキー操作が増えてしまいます。

不要なフォーカスを削除するためにこのようなコードを記述しました。

<a class="card_img" tabindex="-1" href="#"><img src="https://source.unsplash.com/400x200/?kitty" alt="サムネイル画像"></a>

特筆すべきは以下の属性です。

tabindex="-1"

tabindex属性はTabキーでフォーカスが当たる順序を指定できるものですが、こちらに-1を指定することでTabキーでのフォーカスが当たらなくなります。

これで以下のように、「タイトル」→「カテゴリー」→「タイトル」→「カテゴリー」…と不要な操作無くスムーズに記事の選択が可能になりました！

画像7

おまけ

コーディング中にダミー画像をどうしようか悩んだことありますよね？
今回、僕が使ったダミー画像はUnsplash Sourceというサービスを利用しています。

<img src="https://source.unsplash.com/random" alt="ランダム画像" />

上記のようにsrc属性に対して、Unsplash Sourceが提供するURLを入力するだけで高クオリティのダミー画像が挿入可能です。
こちらのダミー画像はリロードの度にランダムに切り替わります。
特定にヒットする画像を使ったり（今回のデモでは猫画像だけ出るようにしています）、横幅と高さの指定を行ったりなど柔軟な指定が可能なのでオススメです。

まとめ

以上が投稿カードのUXを良くするための工夫していることでした。

grid-template-columnsにauto-fit、auto-fillを掛け合わせたレイアウトはIE11非対応で、実務で即採用できるような方法ではないかもしれませんが、IE11を言い訳に新しい技術を学ばないのは大きな機会損失なので是非押さえておきましょう！

それでは最後まで読んでいただきありがとうございました！
少しでも参考になりましたら、是非いいねとフォローをよろしくお願いします🍤
いいねをすると、世界一可愛い猫（うちの飼い猫）の写真がランダムで見れるようになっています。

ここまで読んでいただきありがとうございました！ もし気に入っていただければ投げ銭よろしくお願いします🍤 投げ銭でエビフライを食べに行きます