【デザインのこと】掲載終了カードに「ハンコ」をつけました

前に「掲載終了」の表示、文字だけでしたよね
はい。それを、見て分かる形にしましたー

前回、見られなくなったサイトを「掲載終了」と表示するようにした話を書きました。あのときはURL欄に「掲載終了」の文字だけを出していたのですが、今回、一覧のカードそのものにも手を入れました。

見た目はこう変わりました

通常のカード(左)と並べると、違いが分かりやすいと思います。

左は通常のカード、右は掲載終了カード。右上に丸い「掲載/終了」ハンコ、URL欄に打ち消し線が入っている
  • サムネイルの右上に、はみ出す丸い「掲載/終了」のハンコを付けました。少し傾けて、ハンコっぽさを出しています。カードにマウスを乗せると、少し弾みながら水平に戻ります。
  • URL欄は、消してしまわずに打ち消し線を引いて残しました。うしろに「掲載終了」を添えています。URLが長いときは「…」で省略しますが、「掲載終了」の文字は必ず見えるようにしています。
  • サムネイルの色はそのままです(灰色にしていません)。「デザインをさっと見る」も引き続き使えます。

前回の「文字だけの掲載終了」は確実に伝わる一方、パッと見て分かるものではありませんでした。ハンコと打ち消し線にしたことで、一覧をさらっと眺めているだけでも「あ、これは見られなくなったんだな」と分かるようになったと思います。

記録として残す、という考え方

サムネイルの色を変えなかったのは、「デザインのこと」がその時どきのデザインの記録でもあるからです。見られなくなったからといって存在ごと隠してしまうのではなく、「これは過去にあった、いいなと思ったデザインです」ということが伝わる形にしたいと思いました。

このカードは、トップページ・一覧・検索結果・ランキング・記事ページ下の「似たデザイン」「人気デザイン」まで、出てくる場所すべてで共通です。1か所直せば、どこでも同じ見た目になります。

あわせて、トップページのお知らせ文からも「掲載終了について」の説明を外しました。カードを見れば伝わるようになったので、今のお知らせ文は「見どころコメント、少しずつ追加中。」の1行だけになっています。

さいごに

文字だけだった表示を、見て分かる形にできました。ギャラリーを長く続けていくと、こういう「終わりの伝え方」も少しずつ大事になってくるんだなと感じています。

ハンコ、ちょっと傾いてるのがいいですねー
まっすぐより、ハンコっぽさが出るかなと思ってー

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。