スマホ用の気持ちいいインタラクションを豊富に備えた、オープンソースの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
スマホ向けのナビゲーションにハンバーガーメニューを使うなら、ソーセージリンクを試してみて
スマホ向けのナビゲーションにハンバーガーメニューが使用されるのを多く見かけると思います。ハンバーガーメニューが必ずしも悪いということではないですが、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンクが適しているかもしれません。 スマホ向けのナビゲーションデザインについての考察を紹介します。 Using Hamburger Menus? Try Sausage Links by Bradley Taunt ソーセージリンクは先週公開した記事「テキストだけのボタンは、なぜスマホでのユーザビリティを損なうのか」にも通じるものがあります。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューを使うなら、ソーセージリンクを試してみて ハンバーガーメニューとは、長所と短所 ソーセージリンクとは、長所と短
Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が必要です。 The mistake developers make when coding a hamburger menu by Jared Tong 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューをiOS Safariで機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
Principle - Gallery
Principle Gallery Tutorials Documentation Support Download My Account Coupon By Anna Hofmanova Cosmic Discoveries By Alexander Boychenko Activity Log By Sam Thibault Dropbox Carousel Download By Patrick Wong Date Night By Nimasha Perera Android Tabs By Noodle Webshop By Remco Bakker See more on Dribbble Gallery Tutorials Resources Pricing Documentation Support My Account Discourse Forum Updates
Home - App Animations
Hello! Welcome to App Animations, a collection of iOS animations to inspire your next project. You can sort through the 58 animations by their patterns and style, save your favorites after registering, and embed the them on your own site or inspiration board. And be sure to visit this site on your mobile device for looping full screen animations! Ready to learn how to create beautiful UI animation
スマホサイトのユーザビリティランキング2018、第1位はNTTドコモに【トライベック調査】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
商用利用無料！Webサイトやスマホアプリの美しいサイトマップやワイヤーフレームを作成できるベクター素材
300種類以上のコンテンツ、カード・ライン・アローなど、フローチャートで使用する形もベクターで収録された、サイトマップ・ワイヤーフレームを作成できる無料素材を紹介します。 商用レベルの美しいフローチャートを簡単に作成できる素材セットです。
スマートフォンでのタッチイベントと移動を区別する方法 | スターフィールド株式会社
PCで画像をクリックしてポップアップウィンドウが出てくるhtmlですが、 スマートフォンだとスクリーンが狭いから、普通にページの下部（上部）に行くつもりですが、 画像をタッチしたら、ポップアップウィンドウが出てきて困ったことがあります。 これは、jqueryのtouchstartイベントを使うではなく、 touchstartからtouchmoveイベントがあるかをチェックする工夫で解決できます。 $(function() { $( 'div' ).on( { 'touchstart': function() { this.isTouch = true; }, 'touchmove': function() { this.isTouch = false; }, 'touchend': function() { if(this.isTouch == true){ // popupイベントを発生
スマホ用Webページにおける、タップやスクロールのイベント発火タイミング - Aqutras Members' Blog
こんにちは。id:naosuke2dx です。 梅雨でジメジメがすごい今日このごろ、皆様いかがお過ごしですか。 さて、今日の話はWebページ等でのイベント発火のタイミングについてです。 自分も何度か引っかかってそのたびに調べていたので、メモ的な目的もあります。 そもそもイベントってなんだっけ ｢ユーザを始めとしたあらゆるものが引き起こした、何らかのアクション｣のことをイベントと言います。 例えば、ユーザがクリックをした場合、そのクリックがイベントであるということです。 JavaScriptでは、このイベントをトリガーとして、様々な処理を行うことができます。 例えば、クリックした要素を変える、マウスが要素の上に乗っかったらその要素に影をつけてみるなどなど…。 有名どころのイベントだと、このようなものがあります。 qiita.com 標準イベントの他に、イベントを独自定義することもできます。
Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ
スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホやWebページでよく見かけるUIコンポーネントのデザインと実装コードの無料ライブラリ -Eva Design System
GitHub - capptivateco/capptivate: A kinetic pattern library that captured and preserved delightful iOS animations.
UI Movement - The best UI design inspiration, every day
Appealing | Mobile UI Animations
Mobile Design Inspiration
Mobbin - The world’s largest mobile & web app design reference library
https://www.uipatternhub.com/
スマフォで横スクロールがある場合はその旨をアイコンで明示してくれるスクリプト・「ScrollHint」
レスポンシブ対応の高品質なHTMLのテンプレートのまとめ、商用利用無料で最近のUIデザインが分かる | コリス
