【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選｜Goodpatch Blog グッドパッチブログ
知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse
Webサイトを訪れたユーザーが、もっとも重要視するのはUIデザインです。 ユーザーが直感的に操作でき、使いやすく、美しくデザインされたWebサイトは、長期的な成功につながります。 しかし、どんなUIデザインを作成したらよいか分からない、という声もよく聞きます。 そこで今回は、コピペで利用できるUIデザインライブラリ UIverse をご紹介します。 1200を超えるUI要素が公開されており、HTML/CSSをコピペするだけで、だれでも手軽に利用できます。 これらを押さえて、あなたのWebサイトをユーザーにとって魅力的で、使いやすくしてみましょう。 UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse UIverseではあらゆるプロジェクトに対応できる、HTML/CSSで作成されたオープンソースのUI要素を作成、共有できるウェブサイトです。 すべてのコードはM
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
【React】daisyUIを触ってみた！かなり楽しいw
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
プロのUIデザイナーに学ぶ！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.13
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第13弾は、配色とユーザーエクスペリエンスに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Thirteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 色彩理論を知らなくてもデザインに統一感を与えられる 2. ユーザーが選択したアイテムを目立たせる 3. 細いフォントは暗いカラーにする 4. 最も重要な要素をより目立たせる 5. 次のステップの情報を提供する 6. CTA用にカラーを1つ確保しておく はじめに 次のプロジェクトのために効率的で美しいUIを作成
Windows PowerShellからスクリプトの完了をトースト通知で知らせる (1/2)
Windows 10でそういうときに便利なのが、トースト通知だ。トースト通知は、表示したときにフォーカスを持たないため作業を邪魔しないし、アクションセンターに履歴が残るため、あとで確認もできる。 Windowsのトースト通知は、ToastNotificationと呼ばれ、かつてはUWPアプリケーションだけが利用できたが、その後、Windows PowerShellからも利用できるようになった。なお、通知の表示時間などトースト通知に関する設定については、以下の記事を参照してほしい。 ●Windows 10で結構表示される通知を整理してアクションセンターをスッキリ https://ascii.jp/elem/000/001/114/1114188/ まずは簡単なところから試してみる 以下のリストは、Windows PowerShellからトースト通知をするスクリプトだ。残念ながら、このスクリプ
iOS ヒューマンインターフェースの原則 — Medium
iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴から情報設計の原則、それぞれ何のための部品なのか、という解説がされています。なぜこうなったのか、なぜこれが良くてあれが駄目なのか、Apple の UI デザイナーは何を考えてこのような設計にしたのか、HIG ではそのようなところまでは説明されていないことがあります。いくら内容を丸暗記したとしても「 なぜ 」がわからなければ本質から理解したとは言えません。 よくある UI デザインにおける誤り、『磨りガラス効果がかっこいい』『アニメーションしておくとかっこいい』『ボタンは右配置の方が押しやすい』『色が綺麗』『流行っているから優れている』…などがありますが、そういうことではない
OSF/Motifスタイル・ガイド(DECwindows追補版)
本書は『OSF/Motifスタイル・ガイド』に対する補足版です。 本書では，『OSF/Motifスタイル・ガイド』で説明されていない，OSF/Motif ユーザ・インターフェイスのスタイルに関する追加情報を提供します。 また，本書では日本語DECwindows Motif V1.2で提供されるウィジェットに関するガイドラインについても説明します。 日本ディジタル イクイップメント株式会社 1994年6月 本書の著作権は日本ディジタル イクイップメント株式会社(日本DEC)が保有しており， 本書中の解説および図，表はコンパックの文書による許可なしに， その全体または一部を，いかなる場合にも再版あるいは複製することを禁じます。 また，本書に記載されている事項は， 予告なく変更されることがありますので，あらかじめご承知おきください。 万一，本書の記述に誤りがあった場合でも，日本DECは一切その責
レスポンシブWebデザインで成功するUI／UXのポイント5つ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUI／UX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで対象を動かしたりする動作がメインになります。 UI／UXで言えば、ボタンをクリックするにしても、マウスでカーソルを移動させればボタンの色が変わったり、カーソルの矢印が人の指に変わったりするマウスオーバーアクションと言われるものです。 テキストリンクであれば、カーソルを対象に持って行くと、テキスト下線が消え、カラーが変わるなどの変化が当たり前になっていました。すべてはマウスでの移動させることが中心に
Google、Android用のUIテスト自動化フレームワーク「Espresso」公開
アプリケーションの画面に対してボタンを押したり入力を行い、正しい結果や答えが返ってくるか？ ユーザーインターフェイスを含むテストコードの開発は一般に手間がかかり面倒であり、テスト用のライブラリやフレームワークが欠かせません。 Googleは、Android用のUIテスト自動化のためのフレームワーク「Espresso」をテクノロジープレビューとして公開しました。 Espresso - android-test-kit - a fun little Android UI test API - Testing Tools For Android - Google Project Hosting EspressoはこれまでGoogle社内で、Google DriveやGoogle Maps、Google+など30種類のアプリケーションのテスト自動化に使われてきました。 特徴は、軽量でシンプルな記述
伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから（前編）～Salesforce Developer Conference Tokyo 2013
伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから（前編）～Salesforce Developer Conference Tokyo 2013 いま多くの開発者が取り組もうとしているモバイルアプリケーションの開発は、経験の面でも技術の面でも、コンシューマ向けの開発現場が大きく先行しています。 9月6日開催されたSalesforce Developer Conference Tokyo 2013のセッション「B2Cからみたモバイルアプリケーション開発のいまとこれから」では、コンシューマ向けサービス開発の現場に身を置いてきた伊藤直也氏が、モバイルアプリケーション開発を成功させるための方法を、これまでの経験や現在の開発現場で得たノウハウなどを基に語っています。 試行錯誤の回数を増やす、iOSとAndroidは同じように作ってはいけないなど、モバイルアプリケーション開発に関わるエンジ
PCサイトでもスマホサイトのようにサイドバーを実装するデモ:phpspot開発日誌
Sidebar Transitions PCサイトでもスマホサイトのようにサイドバーを実装するデモ 画面のサイドにメニューを出すのが一般的になってきましたが、タブレット等でも同様のインタフェースを実装したい場合に使えそうな様々なエフェクト付きデモが公開されています サイドバーを出すといっても出し方が色々とデモされており、カッコイイだけでなく勉強になります。 Safariなどでみてみましょう 関連エントリ フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ 複数階層のサイドメニューを実装するデモ＆サンプル CSSアニメーションでページを紙芝居の様に切り替えるデモ フラットで小気味よく動くボタンスタイルのデモ＆サンプル
Googleがデザインするときに大切にしている10個の原則 - GIGAZINE
Googleのユーザーエクスペリエンスチームに所属するSue Factor氏が、Googleの公式ブログにて「Googleらしいデザイン原則」について、10個の原則を提示しています。デザインというか、ネットサービスの設計自体に関する原則となっており、さまざまな場面で応用できそうなものとなっています。 詳細は以下から。 Official Google Blog: What makes a design "Googley"? Googleのデザイン原則は以下の通り。 1.人々に焦点を当てろ――彼らの生活、彼らの仕事、彼らの夢に 2.すべてはミリセカンド単位で数えろ 3.シンプルにすると強力になる 4.初心者ユーザーを引き込み、上級者ユーザーを魅了しろ 5.革新に挑め 6.世界に通用するデザインを 7.今日と明日のビジネスのために計画せよ 8.気を散らさず、目を楽しませるようにしなさい 9.人々
ユーザーをだますのが目的のデザイン「ダークパターン」いろいろ
by Thomas Guignard インターネットを利用していると、自分の意図しない予想外の操作がなされてしまい戸惑うことがたまにありますが、それはそもそも人をだますことを目的としたデザインかもしれません。そんな人をだますことを目的とするユーザーインターフェースは「ダークパターン」と命名され、その手法がまとめられています。 Dark Patterns - User Interfaces Designed to Trick People http://darkpatterns.org/ ダークパターンとは人をだます目的で作られたユーザーインターフェースであり、決してミスデザインではありません。それらは人間の心理をよく理解して注意深く作られていますが、ユーザーの利益はまったく考えられていません。 ロンドンのデザイナーであるHarry Brignullさんは、ダークパターンについてまとめたサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
Windows アプリのスタイル - Windows apps
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
マイクロソフト、『Windows 8.1 UX ガイドライン』日本語版を無償公開
これからのUIデザインのヒントになるDribbbleのアートワークのまとめ