これは便利で簡単！ モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons
Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。 100 Modern CSS Buttons 100 Modern CSS Buttons -GitHub 100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。 ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソース
デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント｜Tomoyuki Arasuna
webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は
Googleマテリアル・デザインから学ぶ４つの重要ポイント + 参考UIデザイン、無料素材まとめ
[fancy_box]海外デザインブログDesignModoで公開された「Lessons Learned From Analyzing Material Design Components」の著者 Paula Borowskaより許可をもらい日本語抄訳しています。Thank you so much as always![/fancy_box] Googleのデザインガイドライン「マテリアル・デザイン（英:Material Design）」に目を通したひとは、どれだけ広範囲にわたって細部まで気を配って作成されているのか気付いたのではないでしょうか。 ガイドラインに目を通してみることで、たくさんのことを学ぶことができます。その中でも、複雑なビジュアル・スタイルガイドの作成が可能だということは大きい収穫でしょう。「簡単に」という意味ではありませんが、Googleのように複雑にサービスが入り組んで
CSS3アニメーションでつくるインターフェイス表現 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」 | co-jin
CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイトをご紹介。 CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」です。 CSSボタンに実装されているアニメーションのデモも合わせて紹介されているため、使い勝手がとてもいいサイトになっています。 WEBデザインの参考にどうぞ。 「CSS Buttons」は、CSSでつくられたボタンのコードが100以上コレクションされているサイトです。 ソース元はすべてCodepenから。 ですから、ソースコードはそのままコピペして利用することが可能です。 CSSボタンに実装されているアニメーションも合わせて紹介されていますので、視認性にすぐれて、使い勝手のよいとても参考になるサイトです。 具体的には以下のようなボタンが紹介されています。 WEBデザイン制作で参考になる
センスで語るのはナンセンス--UI/UXを評価する（前編）
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます ここまで、ユーザーインターフェース（User Interface：UI）やユーザー体験（User eXperience：UX）を設計するにあたってのさまざまな要素について論じてきた。設計し、作ったものは、なるべく客観的に評価し改善・改良につなげたい。 UIやUXの良し悪しを「何となく」語るのは誰でもできるであろうし、「デザインのセンス」という言葉だけで済ませてしまうことも簡単だが、きちんと評価するにはどうすれば良いだろうか。 今回はUIの評価方法や評価する目の養い方について論じる。 定量的評価 何らかの計測により数値化した尺度で定量的評価ができれば、それは確実に客観的な評価といえる。まずはUIを客観的に評価する方法をいくつか紹介する。
当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン | Digital experience University
当たり前を当たり前だと思ってはいけない！スマートフォンUIデザイン Konomi Kawaharada デザイナーの川原田です。主にWebデザイン・スマフォアプリのUIやインターフェイスのデザインをしています。 スマートフォンが当たり前になってきた今、さぁスマフォ媒体の制作に入ろう！と思っても、何気なく使っていて、見落としがちなことってありますよね。 コンテンツを制作する際に、ちょっと気をつけるだけでぐんとUXがあがる方法をご紹介したいと思います！ UIとは？ UIとは“ユーザーインターフェース”の略です。インターフェースのグラフィックのデザインのことです。 グラフィックはもちろんですが、アクションや画面遷移などもふまえた設計のことを言います。 コンテンツ作成時に重要な5W1H コンテンツを制作する前に、ユーザーはそのコンテンツを、どのように使用するかを、5W1Hにそって具体的に想像して
クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
「いいね！」ボタンを設置しよう │ facebook-japan
Tweet 「いいね！」ボタンを設置しよう 「いいね！」ボタンをフェイスブック外部のホームページやブログに設置することで、よりたくさんのつながりをもつことができます。 これはソーシャル・プラグインと呼ばれる仕組みです。 Facebookが「いいね！」ボタンのソーシャルプラグインを 2010年4月に公開した直後、24時間以内に10億回以上もクリックされたといわれています。 たとえば、あなたのブログに「いいね！」ボタンを設置し、それを見た人がクリックした場合、ブログとFacebook内の両方で「○○さんがいいね！と言っています」と表示されましす たくさんの人にクリックしてもらえれば、それがきっかけであなたのブログへのアクセスが爆発的に増える可能性もあります。 「いいね！」ボタンがクリックされると、その都度そのWEBサイトへのリンクが張られます。 つまり、みんなが「いいね！」といってい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
