公開日: 更新日:

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

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

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

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

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

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

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

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

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

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

Web1.0時代(1990年〜2000年中期)

web1.0ボタンデザイン
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でもやってみました。

web1.0

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

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

スキュアモーフィック

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

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

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

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

フラットデザイン時代

フラット2 フラット1

急に単色!

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

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

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

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

マテリアルデザイン時代

マテリアル

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

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

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

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

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

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

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

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

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

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

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

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

まず通常のボタンを作る

ボタンoff作り方

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

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

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

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

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

ボタンon作り方

⌘(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が、めっちゃあります。

ではどうするか。

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

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

ボタンの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>

実際の動作

解説

インラインフレームで、ボタンのhtmlを呼び出しています。

ポイントはbackground-imageを100%表示させて、元画像位置と合わせているところ。

background-imageを横幅100%で綺麗に可変表示させる(レスポンシブ、スマホサイト制作時とかに)@39_isaoさんの記事を参考にさせていただきました。

これでwindow幅に関わらず一定の比率に変化する、レスポンシブになりました。

「任意のクラス名2」でサイズ・位置を指定します。

%で指定しないと、キレイにレスポンシブしないので注意。

ネックはどこのインラインフレームを呼び出して、どこのファイルを使っててというのがわかりにくいことでしょうか。

メモを書いたり社内で共有しておくなど、忘れない仕組みを作っておきましょう。

僕は面倒なので、html内に<style>hogehoge</style>でCSSを書いていますが、

そこはお好みで。

本日のまとめ

マウスオーバーでふわ〜っと切り替わるのが心地良くて、社内で「いいでしょ?いいでしょ?」と言っていたら、

ノンデザイナーの社員に「すぐ押しちゃうからわかんないし、意識したことないです・・・」と言われました(´;ω;`)

まあそんなもんですよね。自己満です。

とはいえ、こういった細かいところができていると最後のひと押しになったりもするので侮れません。

スマホももちろんできますが、PCと違って押した瞬間しか反応しません。

それこそすぐにリンク先に飛んでしまい、あまりユーザビリティに影響しないだろうと思って・・・。

 

今日の格言「困ったら iframeで ほぼできる」

それではまた。

ヤマダ
この記事が役に立ったら、シェアorはてブしてくれるとメッチャ喜びます!

この記事が気に入ったら
いいね ! をお願いします

Twitterでもデザインや日々のことをつぶやいています。

webデザインカテゴリの最新記事