楽天商品ページでも使える、マウスオーバーで「ふわっ」とへこむリッチUIなボタンの作り方。

先日、予約販売が始まった商品が楽天市場でめちゃくちゃ売れております。

そのLPを制作した際に、「ボタンデザインって深いな・・・」と思ったので、その作り方についてご紹介。

こんなの↓を作ります。（マウスを乗せてみてください）

恐らく様々なやり方があると思いますので、一例として参考になれば幸いです。

さて、普段どんなことを考えてボタンのデザインをしているか。

まずはボタンデザインの歴史から探っていきましょう。

UIデザインにおけるボタンの歴史
まだまだLPでは必須！Illustratorでのボタンデザインの作り方
通常のサイトでコーディングする方法
- HTML・CSS
- 解説
全画面表示にしている楽天商品ページでコーディングする方法
本日のまとめ

UIデザインにおけるボタンの歴史

歴史と言ってもwebが普及したのは、ここ十年くらいなのでさほど長くはないですが。

Web1.0時代（1990年〜2000年中期）

Geo for Bootstrap, a Timeless Theme by Divshot様より引用（http://code.divshot.com/geo-bootstrap/）

Yahooジオシティーズでサイト作ってた人には超懐かしいこの感じ。

僕もジオシティーズで作ってました・・・。http://www.geocities.jp/vandalism_kt/（現在は削除されています）

2005年くらいにジオシティーズのドメインが変わったので、その際放置されているサイトは全て削除されているようです。

あーもったいないことした。取っておけばよかったー。

この頃は、テーブルレイアウトでボタンっぽくしていましたね。

URLを入力すれば、昔懐かしいweb1.0っぽくしてくれるサイトもあります。

The Geocities-izer（http://www.wonder-tonic.com/geocitiesizer/index.php）

当Rinkai-designでもやってみました。

すげー！この謎の動くgif・・・一番下の記事キャッチが呪いの画像みたいになってるのが笑えます。

スキュアモーフィックデザイン時代

スキュアモーフィックとは、ギリシャ語のskeuos（容器、実装）morph（フォーム）から作られた造語。

初期iPhoneのUIに代表される、人工物のようなリアルな質感のことです。

Appleが推奨するSkeuomorphic Designとそのメリットデメリット（Design Spiceさん）に詳しく書かれています。

ボタンデザイン的に言うと、キラッとした感じですね。

フラットデザイン時代

急に単色！

そう、フラットデザインですね。

フラットデザインはシンプル・平面・記号が特徴。

光と影の表現はなく、単色で濃い色を使います。

その上に白抜きで記号や文字が置かれることが多いです。

マテリアルデザイン時代

そして2014年にGoogleにより発表されたのがマテリアルデザイン。

フラットデザインに影を付けたようなイメージ。

ですが、実際にはGoogleが定めたレギュレーションが様々あります。

マテリアルデザインを基礎から学ぶのであれば、サルワカさんが非常に詳しいです。

マテリアルデザインとは？作り方とガイドラインまとめ（サルワカさん）

手軽に実装したいなら、下記で紹介されているCSSフレームワークを使うといいでしょう。

マテリアルデザインをサクッと実装できるCSSフレームワーク6選【2017年版】(JDNさん)

まだまだLPでは必須！Illustratorでのボタンデザインの作り方

AdobeXDやsketch、CSSだけでデザイン作業している人は別ですが、

いわゆるコテコテのランディングページにおいてはjpgやpngなどの画像でボタンを作る作業がでてきます。

まぁ別にCSSでもいいんですが。

ランディングページ自体をIllustratorで作るのでついでに、という感じでしょうか。

まず通常のボタンを作る

まず、ふつうにボタンをデザインします。

フラットデザインよりマテリアルデザインのほうが、影などの関係でマッチします。

スキュアモーフィックなら、さらにリアルな表現ができるでしょうが、そこは他の部分のデザインとの兼ね合いで。

あんまりゴテゴテしてても押されないですしね。特に最近は。

押されたイメージのボタンを作る

~~⌘（WinはCtrl）＋Oで~~Shift＋O（2018年5月16日訂正）でアートボード編集モードにして、アートボードごとボタンをコピーします。

そして、コピーペーストした作ったもう一つのボタンの影や色を調整します。

影を内側にしたり、色を上下反転させるといい感じに。

テキストも影つけたりとか。

書き出しは同じサイズ感で

できたものはpngで書き出します。

⌘（WinはCtrl）＋option＋Eなら、一括で書き出せるので便利。

これで、押される前と押された後のボタンができました。

通常のサイトでコーディングする方法

通常のサイトなら簡単です。

画像を2枚重ねて、マウスオーバーで上の画像を消して下の画像を消すイメージ。

HTML・CSS

See the Pen 通常ホバーボタン by Kaito Yamada (@kaito68) on CodePen.

解説

imgをdivで囲って、:hoverでバックグラウンド指定した画像が出てきます。

ポイントはtransitionでふわ〜っと画像を消している所。

全画面表示にしている楽天商品ページでコーディングする方法

楽天の商品ページは使えないHTMLやCSSが、めっちゃあります。

ではどうするか。

楽天商品ページはこれだけあれば、ほぼ全ての問題が解決するんじゃないか、と思えます。

そう！インラインフレームです！スマホでも大活躍しますね。

・楽天RMSで禁止されたHTMLコードを使う裏技

ボタンのHTMLをGOLD上にアップして、インラインフレームで呼び出します。

ただ商品ページを全画面表示にしていたりすると、半分レスポンシブな感じになっている（幅が固定されていないため、ウィンドウサイズによって変わる）状態。

ボタンのdiv幅を固定してしまうと、ボタンだけサイズが変わらないので、一工夫が必要です。

GOLD側のHTML・CSS

<style>
.hover_w {
    width: 100%;
}
.hover {
    width: 100%;
}
.hover a {
    background: url(https://rinkai-design.com/wp/wp-content/uploads/2018/02/on.png);
    height: 0;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 56.25%;
    background-size: contain;
    background-repeat: no-repeat;
}
.hover a img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    opacity: 1;
}
.hover a img:hover {
    opacity: 0;
}
</style>
<div class="hover">
<a href="hoge"><img src="https://rinkai-design.com/wp/wp-content/uploads/2018/02/off.png"  class="hover_w" alt=""></a>
</div>

RMS商品ページ上のHTML・CSS

<style>
   .任意のclass名1 {
       position: relative;
  }
  .任意のclass名2 {
    position: absolute;
    top: hoge;
    left: hoge;
    text-align: center;
    width: hoge;
}
</style>

<div class="任意のclass名1">
<iframe src="任意のhtml"  frameborder="no" scrolling="no" width="100%" class="任意のclass名2"></iframe>
</div>