Mobbin - The world’s largest mobile & web app design reference librarySave hours of UI & UX research with our library of 100,000+ fully searchable mobile & web app screenshots.
Predix UI – Learn From Scratch
A web application has become an inevitable part of every business. With the huge rise in smartphone users, web apps have been providing great opportunities. But how to build a web application? This is a question many business people raise. Even though there are developers and web designing companies to do the job, it is good if you know some basics. Here are ten steps that will help you to create
Twitterのハートマーク機能こと「いいね」のエフェクトがどうなっているのか調べてみた
Twitterハートマークのエフェクト 僕はまた、ハートマークのエフェクトは、アイコンフォントなどに何かしらのエフェクトをかけているのかと思っていました。 けれど、調べてみたら、背景に画像を使って、アニメーションをしているだけでした。 画像の場所は以下。 https://abs.twimg.com/a/1457681967/img/t1/web_heart_animation.png 以下がその画像です。 で、上の画像を用いてCSSでアニメーションをしたのが以下になります。（トリガーはマウスオーバーになっています） .heart { width: 100px; height: 100px; background: url(https://nelog.jp/wp-content/uploads/2016/03/heart_animation.png) no-repeat; backgroun
1年間1185回のABテストから見えたスマホUI最適化の落とし穴｜MarTechLab（マーテックラボ）
「スマホのCVRが上がらない、、、」 そんなご相談を特にこの1,2年で多く頂くようになりました。 Criteo社の調査によれば、ECサイトにおけるモバイルからの売上シェアは健康/美容系で69％、平均でも55％とすでにPCを上回っており、我々のクライアント様でも90%以上がモバイル経由の売上という会社も決して少なくありません。そのため、モバイルサイトでCVRを上げることは非常に重要になってきています。 そんな状況の中、我々はOptimizelyというABテストツールを日本で提供しながら、去年1年間で述べ1185回のABテストに携わってきました。 本日はその経験の中で、実際に感じたモバイルサイトのUI/UXを確認する上で、 特に見落としがちなポイント3点と、その改善事例についてご紹介したいと思います。 それではいってみましょう。 目次 1.スマホはスクロールされる。だが見てない。 2.「実機」
Pixateに変わるプロトタイピングツールとは？５つのツールを徹底比較！ | CyberAgent Developers Blog
みなさん、初めまして。AbemaTVデザイナーの竹原です。 AbemaTVは、無料で楽しめるインターネットテレビ局として、スマートフォンやPC、AppleTV、AndroidTVなど様々なデバイスで提供している動画サービスです。今回は開発現場でUIを制作する時に使用する【プロトタイピングツール】についてまとめます。 デザイナーの役割とプロトタイピングツールの必要性 ネイティブアプリの開発現場では、デザイナーは静的なデザインを作るだけでなく遷移や動きのイメージをエンジニアやプロデューサーと共有する事が求められています。プロトタイピングツールを使うことで、全体のストーリー設計を早い段階からメンバーと共有でき課題を洗い出せることで、制作の効率をあげることに繋がります。2010年Sketchが登場して以来、新しいプロトタイピングツールも次々と登場しています。ここ数年のプロトタイピングツールの変化と
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック(Adobe MAX JAPAN 2018発表資料) - ICS MEDIA
イマドキのUIデザインには欠かせない! マイクロインタラクションを作るための ズルいAdobe CC活用テクニック （Adobe MAX JAPAN 2018発表資料） ウェブやアプリで、マイクロインタラクションの需要が高まっています。ボタンタップ時やページ遷移時に、小気味よい演出を加えるのが粋というもの。UIにインタラクションとして動きを加えることで、操作方法を理解するヒントを与えられます。 2018年11月20日（火）に開催されたAdobe MAX JAPAN 2018（場所：パシフィコ横浜）にて、「マイクロインタラクションを作るためのズルいCC活用テクニック」と題して登壇してきました。本記事では、スライド資料をフォローアップとして共有します。 アーカイブビデオ 公式サイトにてアーカイブビデオも公開されています。50分の内容ですが、スライド資料から読み取れないことも解説してますので、公
Espresso テスト レコーダーで UI テストを作成する | Android デベロッパー | Android Developers
テストデバイスでアニメーションをオフにする Espresso テスト レコーダーを使用する前に、予期しない結果が発生するのを防ぐため、テストデバイスでアニメーションをオフにします。手順については、単一アプリの UI をテストするページの「Espresso をセットアップする」セクションをご覧ください。ただし、Espresso ライブラリへの依存関係の参照を手動で設定する必要はありません。記録を保存すると、テスト レコーダーによって自動的に設定されるからです。この手順は、1 つのプロジェクトにつき 1 回だけ必要です。 Espresso テストを記録する Espresso テストは、UI インタラクションと、ビュー要素に対するアサーションという 2 つの主要コンポーネントで構成されます。UI インタラクションには、アプリを操作するためのタップ アクションや入力アクションがあります。アサーショ
アプリのUIデザイナーとして働き始める時に覚えておくと便利な用語（基本編） | DevelopersIO
こんにちは。2016年もあと3週間を切り、迫る年の瀬にしんみりとしている宮嶋です。 クリスマス？知らない子ですね……。 はじめに 私がUIデザイナーになって5ヶ月、iOSとAndroidどちらの作業をしていてもよく出てきた用語の中でも 覚えておくと周りとの認識の共有がスムーズになるかな？と思うことについて書いていきます。 用語集 UI ユーザーインターフェース（User Interface） 機器やシステムと利用者間で情報をやり取りするための仕組み。 ここではよくアプリやWEBの画面構成として使われている……ような気がします。 UX ユーザーエクスペリエンス（User Experience） ユーザー体験とも言います。システムやサービスを利用したことにより、利用者が受ける影響を 動作や感情、知覚など様々な面から予期したものであったり、実際に利用者が体験したことであったり、定義が広いです。
デザインの参考に！モバイルアプリUIのギャラリーサイト13個まとめ | 日本VTR実験室
どうもこんにちはJBです。 アプリデザインの引き出しを増やす手っ取り早い方法として、ギャラリーサイトを眺めたり…なんてことがあると思います。そんなわけで、今回はモバイルアプリのギャラリーサイトを集めてみました。 ギャラリーサイト一覧 普段から色々なタイプのUIを見ておけば、いざという時「このコンセプト・機能ならあんな感じかな？」みたいな目安が付けやすいです。パクっちゃダメですけど。 あまり日本のアプリのギャラリーがないもんで、英語のアプリばかりですが…。それでは行ってみましょう！ Inspired UI iPhone、iPad、Androidと切り替えられて便利なギャラリー。 Inspired UI Mobile Design Inspiration モバイルUIのコンセプトなどを集めたTumblrページです。GIFアニメーションなんかもあって楽しいですね。 Mobile Design I
Adobe XDの自動アニメーションとドラッグジェスチャー機能を使って、UIのインタラクションを実装したまとめ
Adobe XDの2018年10月のアップデートで使えるようになった新機能「自動アニメーション」「ドラッグジェスチャー」を使用して、Webサイトやスマホアプリで見かけるUIのさまざまなアニメーションやインタラクションの実装を紹介します。 Adobe XDの「自動アニメーション機能」はかなり簡単にさまざまなエフェクトやトランジションが短時間で実装できます。さらに「ドラッグジェスチャー」を加えることで、タッチデバイスのドラッグ操作をシミュレートでき、自動アニメーション機能をさらに一歩進めることができます。 Adobe XD: putting auto-animate to the test 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ここで紹介したAdobe XDのファイルは、記事の最後でまとめてダウンロードできます。 また、こ
これでばっちり！知っておきたいWebとUIデザインの人気トレンド17個まとめ【2019年版】
新しい年がはじまり、ウェブデザインのトレンドについて昨年を振り返り、今後改善し変更したいことを検討するのに、最適な時期と言えるでしょう。 2018年の後半にかけて人気だった多くのデザインは、2019年の人気トレンドとして、継続して利用されるでしょう。トレンドには配色にはじまり、タイポグラフィーや書体の使い方、音声やVRインターフェース、UXデザインなど多岐にわたります。 現在、ウェブデザインでは非常に多くのスタイルが登場しているため、それを細かく分類するのは大変ですが、この記事では、2019年のウェブデザインとUIデザインの人気トレンド厳選17個をまとめてご紹介します。 コンテンツ目次 1. 鮮やかな配色カラーパレット 2. エモーショナル・デザイン 3. 奥行き感とリアルなデザイン素材 4. 目的のあるアニメーション 5. シュールで抽象的なデザイン 6. ボイスコマンド 7. 単一ペー
UI設計の必需品。Adobe XDのフォーム素材集 - Adobe XDを使い倒そう
Webサイトやネイティブアプリのワイヤーフレームを作る時に避けられないのがフォーム設計。 問い合わせフォーム、検索UI、オンボーディングフローなど、入力項目を把握しておかないとプロジェクトが佳境に入ったときに「アレが足りない、コレが欲しい」という状況に陥ってしまい、手戻りが増えてしまいます。少なくとも僕はそうです。 ということでAdobe XDのフォーム素材を集めました。 Bootstrap 4 UI Bootstrapのフォーム要素をAdobe XDでサクッと配置する時に使える素材。 なるべく時間をかけずに管理画面を設計する時に使っています。 Basic Form Elements ものすごくベーシックなフォームUI素材。Bootstrap感が無いのと、余計な装飾が無いので重宝しています。 フォーム設計はお早めに どんなワイヤーフレームを作る時でも、入力項目をキッチリ網羅して手戻りを未然
Adobe XD Templates, UI kits and Freebies - Top resources on XDGuru
Adobe XD Resources, UI kits & Templates The biggest collection of free & premium resources for Adobe XD Please have a look at this massive new premium XD UI kit carefully crafted by the amazing guys at KL-Webmedia. WunderUI is a collaborative, advanced XD UI kit and design system which is created to boost your performance and productivity. With a close look into scalability, accuracy and consisten
ウェブデザインの前線に居続ける。小山敬介のデザイナーとしての心構えやで | A.C.O. Journal
Page not found.
ビジネス構造 , 実装方法まで探る徹底したUI/UXトレース分析 〜Ubereats編〜｜yusuke
今年ももうすぐ終わりですね。 昨日が仕事納めで落ち着いたので、noteを更新したいと思います！ 今回は、入社直後の会社の研修でやらせていただいたUI/UXトレース分析についてです。この研修をやらせていただいたことで個人的に凄く知見が増えました。 そこで、会社にnoteで発信していいか聞いたところ快く承諾してくださったのでまとめてみました。 私が就職前にやっていたUIトレースでは、画面のトレースをして、UIデザインの考察で終わっていました。しかし、このトレースではUXの部分や実装する上での知識も学んでいけるようになっています。 分析手順 1. 画面数と遷移を確認 2. コンセプトメイキング 3. リーンキャンパス 4. メイン画面をトレース 5. デバイス間での変化を確認 6. UI/UXの特徴を考察 7. ダウンロード数で現状の人気をチェック 1. 画面数と遷移を確認最近特に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Solid Vs. Outline Icons: Which Are Faster to Recognize?
使いやすいにはワケがある！最新スマホアプリUI分析4選 | ajike switch
【無料】UIデザイナー必見！AdobeXD用のモバイルアプリワイヤーフレームテンプレート！
Radio en direct et balados | QUB radio
コカコーラのアプリ: むりやりハリボテェ