consim. βMade by @chiharukodama If you have any feedbacks or ideas, please contact me at Twitter. Also, donation is very appreciated!
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom
10 Feb Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom Posted February 10, 2019 by Nolan Lawson in performance, Web. 17 Comments Recently I had some fun implementing an image carousel for Pinafore. The requirements were pretty simple: users should be able to swipe horizontally through up to 4 images, and also pinch-zoom to get a closer look. The finished product l
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート
最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。 ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。 実装は非常に簡単で、応用も利くので、ぜひお試しください。 Stunning hover effects with CSS variables by Tobias Reich 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 インスパイアされた美しいグラデーション グラデーションが変化するエフェクトの実装方法 実装したデモ このエフェクトの可能性 よくある質問と答え インスパイアされた美しいグラデーション Groverにある遊び心溢れる美
![[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/c1b35ec4c552cd9a134d1163d291381be76f2c4e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019030401.gif)
モバイルにおけるステップインジケーターはどうあるべきか
フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
なぜお年寄りはスマホを使えないのか？ - Qiita
はじめに 正月に実家に帰ったとき母親にスマホの使い方を教えていて気づいたことのメモ。 お年寄りにスマホを教える立場になったときにこの記事の内容に目を通しておくとよいです。 お年寄り向けのスマホアプリ開発や、逆に未就学児向けにアプリを作るときなどに応用できるかもしれません。 タップできない まず、そもそもタップできない。何気に一番大きな問題。 タップしようとしたときに以下のような現象が起きる。 爪で押してる 強く押しすぎる、画面に触れている指の面積が大きすぎる 狙ったところを押せない 画面に触れた後に指がズレる 触れている時間が長く、長押しになってしまう 結果的に「画面の正しい場所を押してるつもりなのに何も起きない」ので困惑する。 フリックなどのタップ以外の操作はより難易度が上がるので、できればないほうがいいかもしれない。 指紋認証付き端末だったけど、指の登録（何度も押し付けるやつ）も指紋認
Sortable. No jQuery.
// Simple list var list = document.getElementById("my-ui-list"); Sortable.create(list); // That's all. // Grouping var foo = document.getElementById("foo"); Sortable.create(foo, { group: "omega" }); var bar = document.getElementById("bar"); Sortable.create(bar, { group: "omega" }); // Or var container = document.getElementById("multi"); var sort = Sortable.create(container, { animation: 150, // ms
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
ユーザーを魅了する！UXデザインの正しいアニメーション完全ガイド 2018年版 - PhotoshopVIP
海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、
よりよい検索体験のために改善したい11のポイント | UX MILK
Stephen Moyersはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。 彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 あなたのサイト内のコンバージョン率を低下させている原因は「検索機能」にあるかもしれません。 致命的な問題ではなくても、コンバージョン率アップに役立っていなければ検索機能の意味がありません。サイト内検索を最適化してユーザー体験を向上させれば、Webサイトのユーザビリティと楽しさを大いに向上できます。 ユーザーはWebサイトが楽しいほど頻繁に訪れ、会員、顧客、購読者などの人数増加に繋がります。サイト内検索の改善は簡単ですが、よくある間違いによって検索するときの体験が邪魔されていることが多いです。サイト内検索を適切なものにするやり方を身につけて、競合サイトと同じ落とし穴にはまるのを避けましょう。 見
UXデザインとUIデザインの３つの大きな違い
Alan Smith氏は、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 UXとUIの定義についての論争は、その２つの言葉が現れて以来ずっと続いています。UXはUser Experience（ユーザー体験）、UIはUser Interface（ユーザーインターフェイス）を表しています。 さっぱりわからないですか？ これを理解できる瞬間はおそらくこないでしょう。エンドユーザーへのインターフェイスがユーザー体験に対してどのように影響を与えるかわかるでしょうか？ また、UXとUIという言葉が同じ時期に作られたものでないという事実も、この２つをとりまく混乱の原因のひとつであることは間違いないでしょう。UXとUIは、同時期に考え出された言葉ではなく、当初は明確に定義され
iOSにおける半モーダルビューの解釈｜usagimaru
iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー（Semi-Modal View）」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG（すなわちiOS 13対応版）からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少
邪悪なUIチェックポイント - その先へ
ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール
判別しやすいステータスのデザインを考える｜mamoru kijima
初めましての方もこんにちは、さだこえ (@sadako_a_) と申します。DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しています。 今記事では、主にステータスのデザインに焦点を当てて記事を執筆します。 1. ステータスとステートの違い 2. 色で伝えるステータス 3. アイコンで伝えるステータス 4. 実例 : YOUTRUSTの副業意欲ステータス 5. まとめ1. ステータスとステートの違いまずはステータスの定義について決めます。似たような単語として、ステータス(status)とステート(state)、どちらも状態を表す概念ですが、両者は微妙にニュアンスの違いをもっています。 ステータスは状態を示す箱のような概念で、ステートはその状態の固有要素とであると今記事では定義します。分かりやすく言い換えるとしたら、人間
強度の高いUIをデザインする｜池内健一
デザイナーの池内（@KD6JOE）です。アプリのUIデザインなどをやっています。この記事ではUIをデザインを始めたばかりの人向けに、強度の高いUIをデザインをするための手順をご紹介します。 最低限の品質のUIをデザインできるようになることがこの記事の趣旨です。ここで紹介する手順はあくまで一例で、ガチガチにこの通りに進める必要はないし、ケースバイケースです。自分のやり方に取り入れられるところだけ取り入れてください。 強度の高いUIデザインとは強度の高いUIデザインとは以下のものを指しています。 ・あらゆるUIパターンの検討がなされている ・どのUIパターンを採用するかロジカルに決定している ・仕様漏れがなく開発がスムーズに進む逆に強度の低いUIデザインとは、パターン検討がほとんどされず、ツッコミどころがありまくり、仕様が二転三転するものです。結果開発スケジュールの遅延を引き起こします。 ただ
起業家が犯しがちなデザインについての過ち「デザインは1週間で」
そんな声を、そう珍しくない頻度で耳にします。（先月だけで2度耳にしました。） これはデザイナーにとって明らかに醜悪な話ですが、実はビジネスにとっても最悪な計画です。 言いたいことは分かります。 賢明な彼らには「デザインに凝るよりも、仮説検証が先だ」という意図があるのです。 しかしそんな彼らに伝えたいことがあります。 それは、 「ソリューションやコンセプトが正しく伝わらないと、仮説検証に致命的なノイズが生まれる」 ということです。 「最低限のデザイン」とは？ 先に言っておくと、UIデザインを1週間で形にすることは可能です。それどころか、1日2日で作ることも可能かもしれません。 また、初期フェーズ等においてはデザインが最低限のもので構わないことには大いに同意できます。 最低限というのは、ソリューション検証に耐えられるだけのデザインを指します。 検証のためにはまずきちんとソリューションとコンセプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly
「いい検索」を考える
【翻訳】マテリアルデザイン - モーションデザイン｜Iori Iwaki｜Motion designer｜note
