2019.2.4
Webサイト改善メモとして、このサイトで改善した点を記録しておきます。SNS各種シェアボタンの変更点とsvgタグによる実装方法についてです。
このサイトにLINEシェアボタンを実験的に設置するにあたり、各種SNSシェアボタンのUIデザインを以下のように変えました。
以下はマウスオーバー時の表示サンプルです。
主な変更理由は、デザインの統一感を高めるためです。元のデザインだとSNSシェアボタンがやや強調された状態になっていますが、SNSシェアボタンの強調度を抑えて、全体のデザインに合わせました。マウスオーバー時にSNSごとのブランドカラーに変わるようにすることで、少しわかりやすくしています。
※通常時(マウスオーバーをする前)の状態で色分けをしたほうが、さらにわかりやすくなります。ですが現時点ではできるだけ色数を増やさないようにしておきたかったので、通常時は白背景と境界線のデザインとしました。
ボタンのデザイン変更に伴って、実装方法はsvgタグおよびuseタグを用いる方法に変更しました。実装方法の変更理由は、マウスオーバー時にCSSのトランジション(移り変わりのアニメーション)効果を付けたかったためです。
※SVGとはScalable Vector Graphicsの略で、拡大縮小時に画質が劣化しない画像形式です。色数の限定されたアイコンやロゴの表示に適しています。
元々はアイコン画像のsvgファイルを、ボタンの背景画像として表示していました。この場合の問題は、アイコン自体の色を変化させる場合にアニメーションが効かなくなることです。問題解決のため、アイコン画像はsvgファイルではなくsvgタグとして定義して利用できるようにしました。
svg要素はfill属性によってCSSで色を変えられます。さらにfill属性はCSSのトランジション効果が反映されるため、アイコンの色と背景色のをアニメーションさせながら同時に変えられるようになりました。
SVGを画像ファイルとして読み込む場合と比べて、svgタグを使うことのメリットとデメリットを簡単にまとめました。
長期的に見るとメリットがデメリットを上回ると感じます。特によく使うアイコンやサイトロゴなどはsvgタグで定義してuseタグで表示できるようしておくと、改善や機能追加がしやすくなります。
以下がsvgタグおよびuseタグを用いてアイコンを表示しているコードです。一部を抜粋しています。使用頻度の高いアイコンをsvgタグとして用いる場合、複数の箇所で使用できるようにシンボルとしてsvgを定義しておくと良いと思います。実装手順には大きく分けて「svgの定義」と「svgの呼び出し」があります。
<!-- HTML -->
<svg display="none">
<!-- 該当箇所のみを抜粋 -->
<defs>
<symbol id="icon-twitter" viewBox="0 0 15.868 12.896">
<g>
<!-- pathの数値はアイコンの形状によって変わります -->
<path d="M15.868,1.527A6.508,6.508,0,0,1,14,2.039,3.265,3.265,0,0,0,15.43.238a6.518,6.518,0,0,1-2.067.79A3.259,3.259,0,0,0,7.815,4,9.243,9.243,0,0,1,1.1.6,3.259,3.259,0,0,0,2.112,4.942,3.242,3.242,0,0,1,.638,4.535v.041A3.258,3.258,0,0,0,3.249,7.768a3.264,3.264,0,0,1-1.47.056A3.259,3.259,0,0,0,4.82,10.085,6.532,6.532,0,0,1,.777,11.479,6.627,6.627,0,0,1,0,11.433,9.215,9.215,0,0,0,4.991,12.9a9.2,9.2,0,0,0,9.263-9.263q0-.212-.009-.421A6.617,6.617,0,0,0,15.868,1.527Z" />
</g>
</symbol>
</defs>
</svg>
<!-- HTML -->
<a class="sns-box__anchor is-icon--twitter" href="https://twitter.com/share?url=https://yuyakinoshita.com/blog/2019/02/01/typography-201901/&related=twitterapi%2Ctwitter&text=実験的タイポグラフィのツイートまとめ(2019年1月分)" onclick="window.open(this.href, 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;">
<svg class="c-icon-twitter is-post-detail--footer" x="0" y="0">
<!-- useタグで定義したsvgを呼び出しています(xlink:href="#icon-twitter"の部分で呼び出すsvgのidを指定します) -->
<use class="c-icon--twitter__use" x="0" y="0" xlink:href="#icon-twitter"></use>
</svg>
</a>
大まかに以下の流れで進めました。
実装時に以下の記事を参考にしました。
SNSシェアボタンの改善を事例として、デザインと実装方法についてまとめてみました。今後も改善した点はメモしておきたいと思っています。