![見出し画像](https://assets.st-note.com/production/uploads/images/125753200/rectangle_large_type_2_2c3dd86a9055a2b3d7b1a2f7c6380be4.png?width=800)
【よくあるUIパーツ収集】パンくずリスト
💡 このnoteは、自分でUI画面を設計する際に「一般的なUIのパーツは、どんなものがあるか?」をインプットするためにまとめた内容になります! (キャプチャを取ったサイトは、メガサービスを中心に、たまたま開いていたページも含みます👀)
初回はパンくずリストです。
当初、自分で画面を考えているときに、「パンくずリストの一部って大体リンクになってるし、メインカラーとかで色を置いておけばアクション出来るって分かりやすいかな?」と考えていました。
そのため、リサーチする際は「地の色がメインかorそれ以外か」という観点でまとめてみました。
(最後にもまとめていますが、メインカラーを使ったパンくずリストはほぼなかったです…。)
地がテキストカラーと推測されるもの
Sony
![](https://assets.st-note.com/img/1703657864550-4CG28rouLG.png?width=800)
カラー:グレー系
アクション:ホバー時にライトカラーに変化
ユニクロ
![](https://assets.st-note.com/img/1703657865451-iCCEOxksQw.png?width=800)
カラー:ブラック系
アクション:ホバー時に下線がなくなる
Amazon
![](https://assets.st-note.com/img/1703658261854-grmQtZFXVC.png?width=800)
カラー:グレー系
アクション:ホバー時に下線が表示される
東京都都立図書館(本サイト)
![](https://assets.st-note.com/img/1703657932676-IzMparnWX4.png?width=800)
カラー:ブラック
アクション:ホバー時に下線がなくなる
地がメインカラー(サービスカラー)と推測されるもの
freee会計
![](https://assets.st-note.com/img/1703657008717-hvdQh1pUKe.png?width=800)
カラー:ブルー系(単にリンクカラーだけの可能性もあり)
アクション:ホバー時に濃紺に変化
都立図書館(蔵書検索ページ)
![](https://assets.st-note.com/img/1703654820790-In559JhFJH.png?width=800)
カラー:グリーン
アクション:ホバー時に下線がなくなる
ホバー時にテキストカラー→メインカラーに変化するもの(ハイブリット型)
楽天西友
![](https://assets.st-note.com/img/1703659058324-LmfRIOySmq.png?width=800)
カラー:ブラック系
アクション:ホバー時に赤+下線に変化
ITmedia
![](https://assets.st-note.com/img/1703659059183-BesU0rJQyn.png?width=800)
カラー:ブラック系
アクション:ホバー時に赤+下線に変化
結果と気づき
今回調べた範囲では、
地の文はテキストカラーを使用しているサービスが多い傾向。(8件中6件が該当)
アクションは下線の表示/非表示を使用しているサービスが多い傾向。(8件中6件)
テキストカラーが多く利用されていることを根拠に、「パンくずリストはアクションを主目的としてものではなく、ナビを主目的としている=地のカラーとしてアクションカラーを置かずにテキストカラーを利用している」ということなのではないか、と推測しました。
この記事が気に入ったらサポートをしてみませんか?