16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
Nicelydone
Design better user experiences Browse the #1 web app design library and design examples from the real SaaS web apps
UI・UXデザインでやるべきこと、やってはいけないこと10選 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
via Flickr by “Serge Kij“. Licensed under CC BY-SA 2.0. ピックアップ | 10 do’s and don’ts of UI and UX design ユーザーの視点に立ち、良いユーザー・インターフェイス（UI）とユーザー・エクスペリンス（UX）を追求することは、アプリケーションを開発する企業にとって絶対外せないポイントだ。いくら技術力が高くても、それがユーザーの求めるものに一致しなければ自己満足に終わってしまう。敢えて余計なもの取り除きデザインのシンプルさを追求することでユーザー獲得に成功した事例もThe Bridgeでは紹介してきた。 以前紹介した「日本のウェブデザインはなぜこんなにも世界と違うのか？」という翻訳記事も話題を呼んだが、日本のウェブデザインは欧米のデザインと比べると「とにかく情報量が多すぎて、ごちゃごちゃしている」と
UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
Gooey 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-
Elastic SVG Sidebar Material Design
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-
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
ゲームUIブログ
Search for: Cancel 異世界グルメ食堂 異世界転生×モンスター飯 超次元彼女: 神姫放置の幻想楽園 ビックリマン・ワンダーコレクション 星になれヴェーダの騎士たち テンペスト 機兵とドラゴン サバイバーガールズ パンドラノヴァ 熱戦少女 ウォッチャー・オブ・レルム プリストンテールM デーモンスクワッド 異世界傭兵団のそだて方 ダークオリンポス：闇の女神 ファントム オブ キル -オルタナティブ・イミテーション- 1 of 87123…87次へ »
アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ - Qiita
業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UI が混ざってたりしますが、インスピレーションを働かせる良い刺激になります。 tumblr 多めです。 Behance https://www.behance.net/ Adobe のポートフォリオサイトです。 モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。 このサイトでは Creative Field という名前でカテゴリ分けされており、アプリ開発においては Interaction Design や Web Design あたりが参考になります。 Pinterest https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%A
カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと
HOME Contentsquare カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと 皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 大きくきれいな画像を横並びに使い、視覚に訴えるサイトデザインを実現できる「カルーセル」。見るからにカッコいいデザインなので、サイトのクオリティを上げるため「カルーセルパネル」を導入したサイトも数多くあるでしょう。 とは言え、この「カルーセルパネル」を使用するか否かという議論がカルーセルが普及していくにつれて盛り上がってきました。ということで、今回はこの「カルーセル」の是非について、Clicktale社のアナリストが調査した結果を報告したいと思います。 (※2020/8/21更新) カルーセルパネルとは？ そもそもカルーセルパネルって何？ ここ数年多くのサイトに導入されているカルーセルパネル
スマホアプリのユーザビリティ向上に絶対に参考になるサイト7選 | coromos
優れたユーザビリティとは？スマホアプリの開発、デザインをしている時にUI/UXデザインの事例が見れると便利です。アプリの画面推移などが画像や動画でまとめてあり、ユーザビリティの高いアプリを制作するのに参考になる海外Webサービスを紹介します。Webサイト、スマホアプリのデザイン、ユーザビリティは最近になってさらに重要度が増してきています。デザイナーの方はもちろんのこと、開発者の方もユーザーが使いやすいように工夫する必要性が出てきています。 Webやアプリのデザインのトレンドには毎年様々なトレンドがあり、そのトレンドに応じて優れたデザインのWebサイトやアプリが出てきます。しかし、そういった変化は表面的な変化が中心です。優れたサイト、アプリの見た目だけを参考にしても、それによってUX（ユーザーエクスペリエンス）が高められるとは限りません。 もちろん、表面的な見た目もとても重要です。ですが
UXArchive - Made by Waldo
Introducing Sessions: the latest product from Waldo!
User Onboarding | A frequently-updated compendium of web app first-run experiences
User Onboarding is the process of radically increasing the likelihood that new users become successful when adopting your product. Teardowns Let's learn some lessons from how popular web apps do it! Here's the latest: And here are some other recent ones: WordPress QuickBooks Bitcoin » See all teardowns Onboarding Design Articles Never Mix Up Features with Benefits Ever Again… Bulletproof User Onbo
モバイル向けUI/UXデザイン10のポイント デザイン会社 ビートラックス: ブログ
日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル
デザインするレイヤーの話とUXDの話 : void chachaki::Blog::main()
最初に結論を書くと、デザインのレイヤーを揃えて話をしないといけないし、何でもかんでも「UXデザイン」と言ってしまうのは問題の矮小化が起こるからやめた方がいいと考えます。 セブンカフェのUI論について を読んで、「UIやオペレーションには確かに改善点はあるものの、ユーザーに対して新しいコンビニの価値提案ができたことは、とても素晴らしいことではないか」という結論には同意しつつも、デザインの失敗の烙印を押されているのは仕方がないことなのではないかと思っています。 そもそも、佐藤可士和さんは何のデザイナーかと言うと、wikipediaによれば肩書は「クリエイティブディレクター、アートディレクター、グラフィックデザイナー」で、プロダクトデザイナーではないと思います。いわゆるコンセプトワークと言われるような、企画に相当するところを仕事として、ビジネスをつくる仕事をしているように思えます。 このような佐
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました！（たぶん） | BtoBサービスキューレーション Boxil（ボクシル）まとめ！
アプリUI勉強会 in ネットイヤーグループ
ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ
UX/UIデザイン - OHAKO | 企画～実装をご支援
