ボタンデザイン | Button Interaction Ideas

主にHTMLとCSSでボタンデザインしたものを公開しています。

もしも、気に入ってくれたものが見つかったら、そのままコピペして利用していただければ幸いです。

テンプレート的なパターンのボタンデザインからアイデアボタンまで、実際に自分で運用しているWebサイトに利用して色々と試してみたりした様々なボタンデザインを扱います。

筆者自身は、公式ブログとしてWordPressを用いたユニコブログ®︎を運営しています。

CMSには主にWordPressを利用していて、多くのWebメディアやブログ型のWebサイトを運用しています。

そんな背景もあって、記載している内容の前提としては、CMSにWordPressを利用している人向けということをご理解いただければ幸いです。

利用規約

詳細な利用規約については、公式ブログのユニコブログ®︎内にある利用規約にまとめておりますが、当サイトで記載しているコードを利用して生じた損害や問題については保証できないことを改めて明記いたします。

基本は有料のWebサイトデザインテンプレートやテーマを推奨します

筆者の運営するWebメディアは、ほとんどがWordPressというCMSで運用されています。

そして、基本的には自分でコーディングしてWebサイトのデザインをするよりも、有料のWordPressテーマを購入することをオススメしています。

その理由はすごくシンプルで、筆者の場合、自分で最初からWebサイトデザインをしていくのも楽しいのです。

しかし、効率的に運用するWebサイトを増やしていくとなると、やはりプロが開発したWebサイトデザインのテンプレートや、有料のWordPressテーマなどを利用した方が、素早くWebサイトを完成させられます。

個別のWebページコンテンツ制作に集中できる環境がすぐに整うかどうかは、筆者のような小規模のWebメディア運営者にとってすごく重要です。

その中でも、このWebサイトやボタンデザインを色々と試しながら、それを自分でも備忘録として残していくようなテーマのWebサイトであることをご了承ください。

CSSでボタンデザインをするメリットは何といっても静止画像フォーマットで作成したボタンよりも軽量化できるという点です。

現在、日本においては通信速度などを機にする必要はないと言っても良いのですが、筆者の個人的な考えとしては、「軽くて早い」というのは、優先すべき事項として高いと考えています。

有名なものとしては、2018年7月9日に全てのユーザーに対してロールアウト（リリース）された、「ページの読み込み速度をモバイル検索のランキング要素に使用します｜Google検索セントラル」という文献があります。

例えば、一例としてGoogle検索の場合、検索ユーザーが探しているものに対する最適な答えや情報の提供がなされているコンテンツか？のほうが重要視されていて

これを「Speed Update」と呼びますが、対象となるのは、ユーザーがかなり遅いと感じるようなページのみで、ごくわずかな割合のクエリにしか影響しません。
ページの読み込み速度をモバイル検索のランキング要素に使用します｜Google検索セントラル

とあるので、Webページ内の情報品質を高めることが重要ではあります。

とはいえ、検索結果として自分が選んだWebサイトが高速に表示されることにマイナスなことはないので、自分好みのWebサイトデザインが完成したら、そのあとは高速に表示できるようにできたら良いなと考えて、筆者自身、多くのWebサイトを運用しています。

このほか、ボタンデザインをCSSで指定しておけば、デザインを変えたいと思った時に、指定のボタンデザインを一括変換させることができるので効率的という面もあります。

HTMLやCSSで指定できる大きさの単位は、px(ピクセル)であったり%(パーセント表示)、emやremなどがありますが、このサイトでは、「em」「rem」を使用しています。

とはいえ、Webサイトの運営環境などによってHTMLやCSSで扱える多くの単位は変わってくると思いますので、御利用時には適宜、差し替えていただければと考えています。

各ボタンデザインのページに記載するHTMLとCSS、またJavaScriptなどを用いてコーディングおよびプログラミングしたコードは以下の3種類にして記載します。

既存の利用しているWordPressテーマで定めているクラス名と干渉したりするのを避けるため、加えて、JavaScriptなど、他の言語を利用するコンテンツを本サイト内で紹介することを想定し、クラス名にはハイフンではなくアンダーバーを使用しています。

この辺りは、いろいろな考え方があると思いますので、特に「こうあるべき」とは考えておりません。

現在も含めて、色々試しながら一生懸命に作っています。

何卒よろしくお願いいたします。

(*ᴗ͈ˬᴗ͈)⁾⁾⁾ ﾍﾟｺ