楽天商品ページでも使える、マウスオーバーで「ふわっ」とへこむリッチUIなボタンの作り方。リンカイ-デザインEC/D2Cと二拠点生活「リンカイ-デザイン」PRホームデザインデザインTIPS楽天商品ページでも使える、マウスオーバーで「ふわっ」とへこむリッチUIなボタンの作り方。2021.11.24デザインTIPSCSSHTMLrakutenRMSデザインネットショップフルスクリーンボタンレスポンシブ商品ページ楽天楽天市場歴史この記事は約8分で読めます。先日、予約販売が始まった商品が楽天市場でめちゃくちゃ売れております。そのLPを制作した際に、「ボタンデザインって深いな・・・」と思ったので、その作り方についてご紹介。こんなの↓を作ります。(マウスを乗せてみてください)恐らく様々なやり方があると思いますので、一例として参考になれば幸いです。普段どんなことを考えてボタンのデザインをしているか。ボタンデザインの歴史から探っていきましょう。歴史と言ってもwebが普及したのは、ここ十年くらいなのでさほど長くはないですが。Divshot様より引用(http://code.divshot.com/geo-bootstrap/)Yahooジオシティーズでサイト作ってた人には超懐かしいこの感じ。僕もジオシティーズで作ってました・・・。http://www.geocities.jp/vandalism_kt/(現在は削除されています)2005年くらいにジオシティーズのドメインが変わったので、その際放置されているサイトは全て削除されているようです。あーもったいないことした。取っておけばよかったー。この頃は、テーブルレイアウトでボタンっぽくしていましたね。URLを入力すれば、昔懐かしいweb1.0っぽくしてくれるサイトもあります。Geocities-izer(http://www.wonder-tonic.com/geocitiesizer/index.php)当Rinkai-designでもやってみました。すげー!この謎の動くgif・・・一番下の記事キャッチが呪いの画像みたいになってるのが笑えます。スキュアモーフィックデザイン時代スキュアモーフィックとは、ギリシャ語のskeuos(容器、実装)morph(フォーム)から作られた造語。初期iPhoneのUIに代表される、人工物のようなリアルな質感のことです。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枚重ねて、マウスオーバーで上の画像を消して下の画像を消すイメージ。CodePen.解説imgをdivで囲って、:hoverでバックグラウンド指定した画像が出てきます。ポイントはtransitionでふわ〜っと画像を消している所。楽天の商品ページは使えないHTMLやCSSが、めっちゃあります。楽天商品ページはこれだけあれば、ほぼ全ての問題が解決するんじゃないか、と思えます。!インラインフレームです!スマホでも大活躍しますね。・楽天RMSで禁止されたHTMLコードを使う裏技ボタンのHTMLをGOLD上にアップして、インラインフレームで呼び出します。商品ページを全画面表示にしていたりすると、半分レスポンシブな感じになっている(幅が固定されていないため、ウィンドウサイズによって変わる)状態。ボタンのdiv幅を固定してしまうと、ボタンだけサイズが変わらないので、一工夫が必要です。解説インラインフレームで、ボタンのhtmlを呼び出しています。ポイントはbackground-imageを100%表示させて、元画像位置と合わせているところ。background-imageを横幅100%で綺麗に可変表示させる(レスポンシブ、スマホサイト制作時とかに)@39_isaoさんの記事を参考にさせていただきました。これでwindow幅に関わらず一定の比率に変化する、レスポンシブになりました。「任意のクラス名2」でサイズ・位置を指定します。%で指定しないと、キレイにレスポンシブしないので注意。ネックはどこのインラインフレームを呼び出して、どこのファイルを使っててというのがわかりにくいことでしょうか。メモを書いたり社内で共有しておくなど、忘れない仕組みを作っておきましょう。僕は面倒なので、html内に<style>hogehoge</style>でCSSを書いていますが、そこはお好みで。́;ω;`)まあそんなもんですよね。いえ、こういった細かいところができていると最後のひと押しになったりもするので侮れません。スマホももちろんできますが、PCと違って押した瞬間しか反応しません。それこそすぐにリンク先に飛んでしまい、あまりユーザビリティに影響しないだろうと思って・・・。できる」それではまた。お願いしますシェアするツイートするTwitterでもデザインや日々のことをつぶやいています。slash_kaitoリンカイ-デザインリンカイ-デザインこちらの記事もおすすめデザインTIPSまだ間に合う!2019年賀状デザインのアイデア・考え方。デザイナーの制作実例もご紹介!デザインTIPSコピペでOK!楽天RMSでスマホ追従バナーを設定する方法デザインTIPS楽天RMSでPC・スマホ共通の固定グローバルメニューを設置して回遊性アップ!デザインTIPS楽天RMSで禁止されたHTMLコードを使う裏技デザインTIPS広告デザインの「シーン別」参考サイトで、状況に応じたインプットをデザインTIPS【無料DL】Illustratorでjpgに書き出すと、1pxズレる問題を5秒で解決します。デザイナー仕様のMac風に変更する方法。コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取るプロフィールヤマダカイトD2C企業のマネジャー。通販検定1級所持の元デザイナー。リンカイ-デザインという屋号でデザインしたりブログを書いています。2021年4月に東京→長崎移住しました。長崎と東京、それぞれの良いところを見つけていきたい。詳しいプロフィールはこちら。Reserved.ホーム検索シェアXFacebookはてブPocketLINEPinterestLinkedInコピーコメントトップメニュータイトルとURLをコピーしました。