唐突ですが…アイコン・ピクトグラムなどは通勤・レジャーなどで外出した際やテレビ・スマホなどでも日常的によく見かけますので今のご時世では大多数の方々が『そのカタチ』が何を示しているのか直感的に理解できるようになっていると言っても過言ではないと思います
例えば出張・旅行などに行った際に土地勘がない場所であっても
【青地に白くP】であれば『駐車場ね』
【ナイフ・フォーク】であれば『飲食店があるのね』
【走っている人が扉に向かっている】であれば『あーここに非常口があるんだな』
他にも…トイレだったりエレベーターだったり Wi-Fiだったり授乳室だったり喫煙所だったりヘルプマークだったり…数えきれないほどパッと見で理解できる情報伝達記号は世の中に溢れていて助けられることも多いかと思います
当然 Web上でも閲覧者がサイト内で迷子にならないように…
小さな表示エリアでより効率よく『何を意味しているものなのか』を伝えるために補助的にアイコン・ピクトグラムは多く使われます
特に UI / UXデザインとしてボタンにアイコンを使うことがよくあります
一般的に【家】であれば『トップ画面へ戻る』／【下向き矢印】であれば『画面内リンク』／【三本線】であれば『ハンバーガーボタン』／【＋・－マーク】であれば『情報開閉』／【✕マーク】であれば『閉じる』／【手紙マーク】であれば『メール問合せ』などなどなどなど・・・
こんな感じのボタンデザインはよく見ると思います…まぁシンプル過ぎますがｗ
そして前述した通りアイコンがあるだけで『このボタンを押せばどうなるか？』がなんとなく分かりますよね？エスパー能力を使わなくとも読めますよね？
『左：画面遷移／中央：画面内リンク／右：外部リンク』
まぁだいたいこんな感じになるのではないかと推測できます
ですがこのままだとボタンとしてイマイチ感があると思います
もちろん Web慣れしているリテラシーの高い方なら問題ありませんが…やはりボタンである以上マウスを当てた際に何かしらの動きがあった方がより UI / UXデザインとして優れていると思えます
とりあえずマウスホバー時にボタン自体を透過するように設定してみました
閲覧者全員が同じように感じるわけではないとは思いますが
このボタンボタンしているデザインであるならば少なくとも私は…
『分かりにくっ』とか『気持ち悪っ』とか『手抜き！』って思っちゃいます
もちろん個人的な主観であり勝手な意見ではありますがww
マウスホバー時に文字色・背景色をフワっと反転させてみました
これぐらい分かりやすく変化を付けてあげれば大抵の方はハッキリと『このボタンっぽいものを押下すると何かしら画面に動きがあるわね』っと認識できると思います
さて…ようやくここからが本題ですが…
このブログ記事を読んでらっしゃる方の大半は『同業者』もしくは『アイコン』に興味がある方だと思いますが…少し違和感ありませんか？
マウスホバー時にテキストや背景と一緒にアイコンもフワっと色が変化しています
どのような実装が施されていますかね？(即答できる方はこの先読む必要はありませんw)
一昔前なら『アイコン』自体は png や gifなどの画像を使用して表示させていたと思います
ただこの場合には大きさや色に応じて複数の画像を作成・管理する必要がありました
例えば…ボタン大きさ：3種類／ボタン色：5種類／アイコン数：10種類だった場合は最悪150個もの画像を用意する必要があります…
さらにマウスホバー時に色を変えるとなると更に数は増えます…
普通に考えてもありえないですよね( ꒪⌓꒪)
さらにさらに上記ボタンのようにアイコン自体もフワっと色を変化させるには相当な努力と強引なコーディングが必要となります
さてどうしましょう・・・
ファイル管理・汎用性・拡張性・柔軟性などの観点から『svgアイコン』一択です！
svgならその名の通りベクター形式なので拡大・縮小しても崩れたりジャギったりすることはありませんし単色であれば色を可変させることも可能です
さきほど書いたように物凄い数・パターンのアイコンを用意するのではなく使うアイコン数だけ用意すればよいので『ファイル管理』はとても楽になり、大きさ・色は css を少し書くだけで変更が可能ですので『汎用性・拡張性・柔軟性』も圧倒的に担保できます！
しかし…唯一の欠点は…
<svg viewBox="0 0 40 40" width="40" height="40">
<path d="M11.5 16.4131C11.5 16.1369 11.7239 15.9131 12 15.9131C12.2761 15.9131 12.5 16.1369 12.5 16.4131V26.5H23.1279L23.2285 26.5098C23.4563 26.5565 23.6279 26.7584 23.6279 27C23.6279 27.2416 23.4563 27.4435 23.2285 27.4902L23.1279 27.5H12C11.7239 27.5 11.5 27.2761 11.5 27V16.4131ZM27 12.5C27.2761 12.5 27.5 12.7239 27.5 13V23.5869C27.5 23.8631 27.2761 24.0869 27 24.0869H15.8721C15.5961 24.0867 15.3721 23.8629 15.3721 23.5869V13C15.3721 12.724 15.5961 12.5002 15.8721 12.5H27ZM16.3721 23.0869H26.5V13.5H16.3721V23.0869Z"/>
</svg>これです・・・長いっす・・・
さらに svgタグ自体SEO的にとても不透明な要素であることもコーダーとして視野に入れておくべきです…文章構造上『どう解釈させるのか問題』は軽視できません
そしてやはり aタグの中に入れるにはあまりにも面倒です・・・視覚的にもメンテ性も良くないですね
一応 symbol定義をすればもう少し視認性は向上はしますが根本解決にはなりません
さてどうしましょう・・・
やはりインラインではなく『背景画像』として処理するのが一番良さそうです！
理由としてはaタグの中にSEO的不確定要素である svgタグを入れるのは前述したように視覚的にもメンテ性を考慮しても避けるべき気がしますし html文章構造的にも整合性が取れない気がするのでってことですね
と…ここまでイロイロな角度から考慮して『ボタンアイコンは svg！』『svg表示は背景画像として処理！』と結論付けましたが…ここで1つ疑問があがると思います
『背景画像ってフワっと色を変化させられるの？』
まさにその通りで普通の背景処理では色を変化させることは不可能ですね
さてどうしましょう・・・
mask-image:url(path-svgIcon);
background-color:#333;
transition:all 1s ease;mask-image！これで全て解決ですね٩(๑❛ᴗ❛๑)۶
何気にこの子メッチャ使える子です！！
例えば html記述が下記だとすれば
<p class="c-btn">
<a href="">ブログ記事一覧</a>
</p>css記述は下記のようにしてあげれば全てイイ感じになるはずです
.c-btn{
position:relative;
a{
padding:1em 2em;
text-align:center;
display:block;
transition:all 1s ease;
&::after{
content:"";
width:40px;
height:40px;
position:absolute;
mask-image:url(path-svgIcon);
background-color:#333;
right:0;
top:calc(50% - 20px);
transition:all 1s ease;
}
&:hover{
background:#333;
color:#fff;
&::after{
background-color:#fff;
}
}
}
}svg だからこそ成せる業！
まぁブッチャケ『svgアイコン一択！』とか言ってますがそんことはありません・・・
Webフォントアイコンって手もありますし前述した画像を使用する方法だってやり方・設計 1つでイイ感じにできなくもないです
どれもこれも一長一短あり、その時その時でより良い手法・設計をチョイスする必要があるのは明確で、そのためには日頃から様々な角度で検証しつくしてイロイロなやり方を理解しておく必要があるってことに尽きます！
今回の方法だってmask-image と svgの関係性などを知っていなければそもそも選択肢にすら入っていないでしょう
兎にも角にも日々進化する Webの早い流れの中でユラユラとザッパンザッパンと揺られながらさり気なく休むことなく自分の武器を増やし続けましょう！ってことですね！
そしてそれは新しい技術だけではなく古い技術の中から学べることも、基礎をキッチリ学ぶことで発見することもあるというのが面白いところでもあります
なんか最近毎回毎回『根性論』みたいこと書いてますが・・・結局根性って大事よねww
