[B! UI][ボタン] ajinorichanのブックマーク

ボタンデザインの歴史と進化から学ぶベストプラクティス

ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。スタイルの進化立体的なボタン昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。

ajinorichan 2016/09/06

リンク

ボタンデザインで押さえておきたい4つのポイント【プロ直伝】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、株式会社LIGでアートディレクターをしている竹原と申します。「デザインとは情報設計」、といわれています。例えばボタンでも、アクションやレイアウトに応じてさまざまな設計をおこなっているんです。今回は、僕が普段ボタンデザインをする際に考えてることをまとめてみました。デザイナーの方にはWebやUIのデザインをする際の考え方の参考に、デザイナー以外の方には、デザイナーって普段こんなことを考えながらデザインしているんだな、と感じていただければ幸いです。独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロの現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料を

ajinorichan 2016/08/26

リンク

Buttons in Design Systems

I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life. That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple through

ajinorichan 2016/05/02

リンク

CSSエフェクトボタンだけをひたすらコード付きで紹介しまくるCssButtonが話題

海外のソーシャルブックマークサイト3つでなんか妙にブクマされていたので気になってみてみると中々面白かったのでシェア。 CSSのエフェクトボタンだけをひたすらコードつきで紹介しているTumblrアカウントのご紹介です。このサイトの特徴このサイトというかTumblrは、ひたすらCodepen.ioで紹介されているコードをタンブっているわけですが、唯一の特徴としては、そのコードがもたらすエフェクト効果をアニメGIFで一つ一つ紹介している点です。実際これだけで、とても価値のあるアカウントになっているわけです。 CSS Buttons - 8-bit Hovers CSS Buttons - Simple Example 2-3D Transf orms For Social-links CSS Buttons - Hover Animated Buttons CSS Buttons - Fau

ajinorichan 2015/09/06

リンク

購入ボタンを押すと美しく梱包してくれる見て楽しい触って気持ちいい購入ボタンの実装

面白いなーと思いまして。購入ボタンをクリックするとまるでそれを包装してくれるかのようにアニメーションして、購入につなげるアクションです。特にこのサンプルで表示されているのはギフトカードの購入なので、まさにギフトカードを包み込むようにアニメーションするのが気持ちいですね。以下サンプルでBuyをクリック！ See the Pen Gift Card UI by David Khourshid (@davidkpiano) on CodePen. HTMLと、SCSSのみ。JavaScriptはつかっていませんので、非常にシンプルな構造になっています。是非お試しあれ。それでは、また。

ajinorichan 2015/08/05

リンク

【CTR300％アップ！】シェア数でお悩みの方は必読！SNSボタンを改修したらアクション率が3倍になった事例

変更前の合計アクション率が0.29%なのに対し、変更後は1.19%と、約3倍の差がついています。特に顕著に伸びたのが「LINE」と「Pocket」で、変更前の10倍近いシェア数を示しました。「シェアする」ボタン表示の場合、「シェアする」をタップし、表示されたSNSボタンの中から好きなものを選ぶ、という流れになりますがが、改修後の場合は「シェアする」ボタンをタップするアクションを省略することができます。その1アクションを省略するだけで、ユーザー行動は大きく変わるようです。前回の事例記事でも解説しましたが、*「ひと目でSNSボタンが認識できる」*状態にしておくことが重要です。「お気に入り」ボタンについては、SNSボタンの表示を優先し、上部にずらしてみましたが結果、使用数は約3倍増加しました。 �K�} V

ajinorichan 2015/06/19

リンク

ソーシャルボタンを自作に変更

B! 40 0 0 0 ソーシャルボタンをそれぞれのサービスのオフィシャルな物を使ってましたが、それぞれ見た目が余り揃ってなくて良くないのと、幅の取り方とかがCSSだけで行うのも難しくて微妙にずれてたりしました。それと読み込みにもそれなりに時間がかかります。ということで、画像とかを呼んでこなくて済むように適当に自分で作ってみましたというよくある話。作り方 Octopress用に追加作り方それぞれのサービスのAPIを使ってカウント数を取ってきます。 Twitterなら 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var url = encodeURI(location.href); socialData = { type: 'GET', dataType: 'jsonp', url: 'http://urls.api.twitter.com/1/urls

ajinorichan 2015/04/22

リンク

[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ

大きな写真画像の背景やMaterial Designなどのフラットなスタイルに合うソリッドなラインでデザインされたゴーストボタンを実装するチュートリアルをまとめました。シンプルなものから、かわいいアニメーションや一味違ったアニメーションなど、さまざまなものが揃っています。

ajinorichan 2015/01/15

リンク

クリック率・コンバージョン率を高めるボタン。3つの大きなポイント

WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。目的を達成へと導くボタンボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在

ajinorichan 2012/08/07

リンク

2万以上もの各種ボタン・アイコン・バーなどのユーザーインターフェースパーツのデザインを検索してダウンロードできる「UICloud」

「Download button」「CSS button」「Music Player」など、テキストボックスに欲しいユーザーインターフェースパーツを記入するだけで、総合計2万個以上のパーツの中から欲しいものを検索してきてくれるのが「UICloud」です。 UICloud | User Interface Design Search Engine, UI Elements, GUI Design, Free Downloads http://ui-cloud.com/ トップページのテキストボックスに探したいパーツの名称を記入して「Search」ボタンを押します。今回は「Download button」で探してみました。すると検索結果一覧が表示されます。色んなダウンロードボタンがずらり。気になったものをクリックします。すると、大きめサイズのイメージが表示されます。画面右端には詳細情報