UI研究：Amazon fireTVのボタンを真似て実装してみる

   

気になるUIをパクってみました！

以前、Amazon fireTVにすっかりハマってることを書きました。
ハマっている要因は、コンテンツが豊富なことはモチロンなんですが、
UIも良くて、使い勝手が気持ちいいところも気に入っています。

本記事では、HTMLとCSSを使って、
fireTVのボタンのUIを再現してみようと思います。

今回の題材「amazon fireTVの黄色いボタン」

本記事で再現するのは、こちらの動画の黄色いボタンです。
まずはこちらの動画をご覧ください。

上記動画の黄色いボタンの動きを分解すると、こんな感じです

  1. 黄色い大きな丸いボタンが表示される
  2. 黄色い丸が小さくなる
  3. 黄色い丸が少し大きくなり、矢印が表示される
  4. 黄色い丸が大きくなり、矢印が回転する
  5. クリックすると、黄色い丸が白くなり小さくなる。同時に矢印が消える。

 

HTML/CSS での実装

fireTVのリモコンとパソコンでは操作に違いがありますので、
HTML化するにあたっては、下記のような動きにすることにしました。
 
  1. mouseoverのとき
    •  黄色い丸のサイズが変わる（大きくなり→その後小さくなり→そして原寸に戻る）
    • 矢印が透明から表示され、同時に回転する
  2. ボタンをクリックしたとき
    • 黄色い丸が白くなり、少し小さくなる
    • 矢印が白っぽくなる

デモと合わせてご覧ください。

いざ、実装

それでは実装していきましょう。

まずはHTML。
こちらはかんたんに矢印の画像をaタグで囲んだだけです。
<a href="#" class="amazon_video_btn">
 <img src="img/allow_gray.png">
</a>

 

続いてCSSです。

まずはデフォルト時のCSS

/* ボタンの黄色背景部分 */
a.amazon_video_btn {
 display: block;
/* ボタンのサイズ */
 width: 160px;
 height: 160px;
/* ホタンの背景画像 */
 background-image: url(../img/yellow_circle.png);
 background-repeat: no-repeat;
 background-position: center;
 -webkit-background-size: 160px auto;
 background-size: 160px auto;
}
/* ボタンの矢印部分 */
a.amazon_video_btn img {
 position: absolute;
 margin: auto;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 width: 33px;
 height: 39px;
 display: block;
}
「黄色い背景」と「矢印」を別々に動かすために
「黄色い背景」と「矢印」を1つの画像とするのではなく、
別々の要素として準備しています。

 

mouseover時のCSS

それではmouseover時のCSSを書いていきます。
アニメーションを加えたいのですが、
「大きくなり→その後小さくなり→そして原寸に戻る」
という3段階の動きなので、キーフレームという技術を使って実装してみます。

黄色の丸のアニメーションを指定。

/* ボタンにhoverした時のCSS*/
a.amazon_video_btn:hover {
 animation-duration: 0.5s; /* アニメーションの処理時間を設定*/
 animation-name: size; /* 「size」というアニメーション名を付ける*/
}

/* アニメーション名「size」の処理*/
@keyframes size {
 /* まずは大きくなる*/
 0% {
 background-size: 300px auto;
 width: 300px;
 height: 300px;
 opacity: 0;
 }
/* 途中、小さくなる*/
 50% {
 -webkit-background-size: 40px auto;
 background-size: 40px auto;
 opacity: 1;
 }
/* 最後はデフォルトと同じ大きさに*/
 100% {
 background-size: 160px auto;
 opacity: 1;
 }
}

 

矢印画像のアニメーションを指定。

/* ボタンにhoverした時のCSS（矢印部分）*/
a.amazon_video_btn:hover img {
 animation-duration: 0.5s;
 animation-name: rotate; /* 「rotate」というアニメーション名を付ける*/
}
/* アニメーション名「rotate」の処理*/
@keyframes rotate {
 /* まずは画像を非表示にする */
 0% {
 opacity: 0;
 }
 /* 画像を-100度回転させる */
 50% {
 opacity: 0;
 transform: rotate(-100deg);
 }
 /* 画像を0度に戻しながら、表示されるようにする */
 100% {
 opacity: 1;
 transform: rotate(0deg);
 }
}

 

クリック時のCSS

最後にクリック時のCSSです。

背景画像の処理に「filter」を使用しています。

/* 黄色い背景部分 */
a.amazon_video_btn:active {
 filter: opacity(40%);
 /* ボタンの背景の透明度を上げて白っぽくする */
 -webkit-background-size: 130px auto;
 /* ボタン背景のサイズを小さくする */
 background-size: 130px auto;
}
/* 矢印画像 */
a.amazon_video_btn:active img {
 opacity: 0.2;
}

以上です！

 

まとめ

今回のポイントは、
3段階アニメーションに使った「キーフレーム」と
背景画像処理に使った「filter」あたりでしょうか。

ずっとCSSアニメーションが来る！と言われてきて、
キーフレームの登場で随分とアニメーションが実装しやすくなりました。
今後もっと使いやすくなることでしょう。

最後にもう一度、デモへのリンクとCSSと貼り付けておきますね。

Amazon fireTVのようなボタン（デモ）

CSS

/* デフォルト
==============================================*/
/* ボタンの黄色背景部分 */
a.amazon_video_btn {
 display: block;
/* ボタンのサイズ */
 width: 160px;
 height: 160px;
/* ホタンの背景画像 */
 background-image: url(../img/yellow_circle.png);
 background-repeat: no-repeat;
 background-position: center;
 -webkit-background-size: 160px auto;
 background-size: 160px auto;
}
/* ボタンの矢印部分 */
a.amazon_video_btn img {
 position: absolute;
 margin: auto;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 width: 33px;
 height: 39px;
 display: block;
}
/* mouseover時
==============================================*/
/*== 黄色の背景部分 ==*/
/* ボタンにhoverした時のCSS*/
a.amazon_video_btn:hover {
 animation-duration: 0.5s; /* アニメーションの処理時間を設定*/
 animation-name: size; /* 「size」というアニメーション名を付ける*/
}
/* アニメーション名「size」の処理*/
@keyframes size {
 /* まずは大きくなる*/
 0% {
 background-size: 300px auto;
 width: 300px;
 height: 300px;
 opacity: 0;
 }
/* 途中、小さくなる*/
 50% {
 -webkit-background-size: 40px auto;
 background-size: 40px auto;
 opacity: 1;
 }
/* 最後はデフォルトと同じ大きさに*/
 100% {
 background-size: 160px auto;
 opacity: 1;
 }
}
/*== 矢印画像部分 ==*/
/* ボタンにhoverした時のCSS（矢印部分）*/
a.amazon_video_btn:hover img {
 animation-duration: 0.5s;
 animation-name: rotate; /* 「rotate」というアニメーション名を付ける*/
}
/* アニメーション名「rotate」の処理*/
@keyframes rotate {
 /* まずは画像を非表示にする */
 0% {
 opacity: 0;
 }
 /* 画像を-100度回転させる */
 50% {
 opacity: 0;
 transform: rotate(-100deg);
 }
 /* 画像を0度に戻しながら、表示されるようにする */
 100% {
 opacity: 1;
 transform: rotate(0deg);
 }
}
/* クリック時
======================================*/
/*== 黄色い背景部分 ==*/
a.amazon_video_btn:active {
 filter: opacity(40%);
 /* ボタンの背景の透明度を上げて白っぽくする */
 -webkit-background-size: 130px auto;
 /* ボタン背景のサイズを小さくする */
 background-size: 130px auto;
}
/*== 矢印画像 ==*/
a.amazon_video_btn:active img {
 opacity: 0.2;
}

こちらの記事もおすすめです

 - UI研究 , ,