[B! UI] wirknichtvorausのブックマーク

デザインの参考になる！最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ

最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。デザインのアイデアを探している時に、ブックマークしておくと便利です。

wirknichtvoraus 2023/07/27

ui
web

リンク

ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA

ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような﹁普通のウェブページ﹂でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。この記事ではリッチで使いやすいUIを実装するための選択肢として﹁ヘッドレスUI﹂ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは﹁JSライブラリ利用派﹂に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。ヘッドレスUIとは？　BootstrapやVuetifyとは何が違う？ヘッドレスUIとは﹁デザイン︵見

wirknichtvoraus 2023/04/25

リンク

Explore 3000+ Free UI Elements: CSS & Tailwind

Open-Source UI elements for any projectCreate, share, and use beautiful custom elements made with CSS or Tailwind.Search

wirknichtvoraus 2023/01/21

css
ui

リンク

プロのUIデザイナーに学ぶ！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.15

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。第15弾は、ユーザビリティ・フォーム・ミニマルにデザインする弊害に関するデザインのテクニックです。 UI& UXMicro-Tips: Volume Fifteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. ページ内リンクを効果的に用意する 2. ボタンのラベルは一貫性を保つ 3. 長いフォームは冗長な作業を最小限に抑える 4. 長いフォームは常にラベルを上部に配置する 5. 不要なテキストでフォームのUIを乱雑にしない 6. 特定のUI要素でミニマムな外観を避けるはじめに次のプロジェクト

wirknichtvoraus 2022/07/28

リンク

HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA

ダイアログやハンバーガーメニューといったユーザーインタフェース︵UI︶は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから﹁簡単に作成できる﹂と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ダイアログを表示中に、裏側のコンテンツがスクロールできてしまったダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、

wirknichtvoraus 2022/06/24

リンク

Custom Select Menu

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

wirknichtvoraus 2021/07/20

css
UI

リンク

色々書き比べた結果Tailwind CSSにしたという話 - Qiita

Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えないこだわりが無い場合に向いているは？何いってんの？って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。はじめに以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。その仕事はほとんど筆者が﹁まかせてくださいよーいい感じに作りますよー。デザインそろってない

wirknichtvoraus 2021/06/07

リンク

UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える

デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの﹁Lightning Design System﹂が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム﹁adele﹂では、90個以上︵2019年12月現在︶ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら

wirknichtvoraus 2019/12/24

ui
design

リンク

スマホ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネント -Cuberto

スマホアプリ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネントを紹介します。タップやスワイプなど、ユーザーの操作に反応するアニメーションは、見ているだけでも楽しめます。 GitHub Open Source Collection ここで紹介するUIコンポーネントは、ロンドンの制作会社﹁Cuberto﹂によるもので、MITライセンスで商用のプロジェクトでも無料で利用できます。 Bubble Icon Tab Bar -GitHub 現在位置のアイコンをバブル状にするタブ。 Balloon Picker -GitHub 風船がふわふわ浮かびながら追従するカスタムピッカー。Fluid Card -GitHub タップすると、アニメーションで拡張するカード。 Liquid Swipe -GitHub 流体のアニメーションでスワイプ。 Rubber Range Pic

wirknichtvoraus 2019/07/19

リンク

アニメーションを使った効果的なモバイルなトランジション例

アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。システムステータスの表示何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ

wirknichtvoraus 2018/11/15

リンク

最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ

ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。植物の水やりを管理するアプリ安眠アプリハンバーガーショップのアプリ TODOアプリ料理のレシピアプリベジタリアン用のレシピアプリアラームアプリ家電操作アプリ家計簿アプリ名刺管理アプリバランスアプリファイナンスアプリフィットネスアプリカレン

wirknichtvoraus 2018/06/27

ui
design

リンク

どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。ユニバーサルスライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。互換性 React、VueJS、Angu

wirknichtvoraus 2018/05/18

リンク

http://www.life-is-bitter.com/entry/ui_checklist

wirknichtvoraus 2018/04/27

リンク

グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing

これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i

wirknichtvoraus 2017/12/05

リンク

110+ CSS Menu

Welcome to our updated collection of CSS menus for August 2023. This collection includes 37 new it ems, all hand-picked and free to use. These HTML and CSS menu code examples have been sourced from CodePen, GitHub, and other resources, ensuring a diverse and high-quality selection. Our August 2023 update brings a variety of innovative and aesthetically pleasing CSS menus. Whether you're looking for

wirknichtvoraus 2017/01/30

リンク

ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ

ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめコンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ

wirknichtvoraus 2017/01/25

リンク

最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。

wirknichtvoraus 2016/10/20

リンク

マテリアルデザインのガイドライン（日本語版）

Build beautiful, usa ble products faster. Material Design is an adapta ble system—backed by open-source code—that helps teams build high quality digital experiences.

wirknichtvoraus 2016/10/06

リンク

Web制作者は絶対チェックしておきたい、デザインやコーディングに取り入れていきたい便利なツールのまとめ

Webサイトのデザインやコーディングは、やるべきタスクが年々増えてきました。それらの手間がかかる面倒な事が楽にできるツールやアプリも年々リリースされています。これからのWeb制作にどんどん取り入れていきたいツールやアプリを紹介します。 Adobe Experience Design(Adobe XD) Adobe XDはWebサイトやスマホアプリのデザインやプロトタイプを作成するベクターベースのツールで、PhotoshopやIllustratorともスムーズに連携して利用することができます。以前は「Project Comet」の名称で発表されていた新ツールが、2016年3月に「Adobe Experience Design(Adobe XD)」としてプレビュー版が公開されました。現在はOS X版のみですが、2016年後半にはWindows 10への対応も予定されています。

wirknichtvoraus 2016/05/23

リンク

レスポンシブデザインに相性がいい、カード型コンポーネントの実装アイデアのまとめ

カード型のUIはPinterestから人気が出始め、ここ1,2年の間に数多くのWebサイトで採用されるようになりました。レスポンシブデザインに相性が非常によいのも人気である原因の一つでしょう。次のプロジェクトで使いたくなるような実装アイデアを備えたカード型レイアウトやカード型コンポーネントを紹介します。まずは、アニメーションの動きが気持ちいいカード型UIから。

wirknichtvoraus 2016/03/30

リンク

はてなブックマーク

タグ

関連タグで絞り込む (28)

UIに関するwirknichtvorausのブックマーク (38)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス