【125naroom】記事のさいごに、シェアとフォローを
記事のさいごにある、著者のカードとシェアのボタンを新しくしました。
web の記事と works の記事、どちらも同じ形です。
これまでは、アイコンが6つ
これまでは、著者のカードの下に、タグ・日付と、シェアのアイコンが6つ並んでいました。
X、Facebook、Pinterest、はてなブックマーク、LINE、Feedly です。
ロゴやナビを「まるとせん」にしていくなかで、気づいたことがありました。
125naroom でアイコンを使っているのは、もうほとんどここだけだったんです。
ほかのところは、ほぼ全部文字にしています。
アイコンをやめて、文字に
そこで、シェアのボタンも文字だけにしました。
「share」の前に、ロゴと同じ黄色い小さなまるを置いています。
マウスをのせると、文字の下に黄色い線が引かれます。
蛍光ペンで、そっと線を引いたような感じです。
本文の中の外部リンクの印も、あわせて「↗」の文字にしました。
これで、125naroom からアイコンがなくなりました。
読む人に合わせて、シェア先を選びました
シェア先は、6つから3つにしぼりました。
ぜんぶ同じにするのではなく、記事の種類で変えています。
point
- web の記事：X ／ はてブ ／ リンクをコピー
- works の記事：X ／ Pinterest ／ リンクをコピー
- スマートフォン：「共有する」ひとつ
web の記事は、Web 制作やデザインの記事なので、はてなブックマークを残しました。
works の記事は、つくったものを見てもらう記事なので、Pinterest にしています。
「リンクをコピー」は、Slack や Notion にはりたいときのためです。
押すと「コピーしました」に変わります。
スマートフォンでは、ボタンを「共有する」ひとつにまとめました。
押すと、スマートフォンの共有メニューがひらくので、LINE やメッセージにもそのまま送れます。
著者のカードに、フォローを
いちばん迷ったのは、どこに置くかでした。
シェアのボタンを大きくする案や、ボタンをひとつにまとめる案も考えました。
最後に選んだのは、著者のカードの中にまとめる形です。
カードの下を2つに分けて、左に share、右に follow を置いています。
記事を読んで「いいな」と思ってくれた人が、そのまま X や note、Pinterest をのぞきにきてくれたらうれしいな、と思っています。
新しい欄を足さずに、入り口をひとつ増やせたのも、よかったところです。
タグと日付は、1行に
タグ、カテゴリー、日付は、これまで右寄せで縦に並んでいました。
今回は、カードの上に1行で並べています。
タグは墨色の点線、日付は Jost です。
さいごに
アイコンがなくなって、記事のさいごが少し静かになりました。
読み終わって、コーヒーをひと口飲んで、気が向いたらシェアしてもらえたら、それでじゅうぶんです。
デザコトauthor
あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。
