はじめに 自分は正直デザインが苦手です...。 なので個人開発で画面のイメージを作ってみたものの、パワーポイントでただ図形をはっつけたような悩ましいもので「なんとかならないものか」と頭を抱えていました。 そんな時に色々調べてく中で出会ったのが、VercelのAIツール「v0」。 なんとなく試してみたら、いい感じになったのでデザイン苦手な人でも大丈夫ですよってことで記事にしようと思いました！ v0とは Next.jsを開発しているVercel社で開発されたAIツールです。 自然言語でUIないしはコードを生成してくれます。 いい感じにしてもらう画面とその概要 まずは、僕がfigmaで作った、こちらの壊滅的なデザインをご覧ください笑 以下のイメージで画面を作りましたが、ここからv0にいい感じにしてもらおうと思います。 コンセプト 身近にふと感じた些細な幸せを気軽に記録できる日記アプリ。 ユーザー
Windows標準の時計をクリックしたら通知一覧が開いて、詳しい時刻もカレンダーも出ない点。 地味にカップラーメンとか作る時に時間を測るのが面倒…。 エクスプローラーの項目に「最新の情報に更新」がなくなってる。F5押せば更新されるけどマウスで完結しないのは面倒。 エクスプローラー絡みで言えば、コピペや削除がアイコンになってて文字表記がないのも一連のWindowsの流れを無視してて使いにくい。 Macワナビーの中央配置とかはどうでもいいけど、そう言う細かいところで使いにくくするのは止めて欲しい。 新OSが出る度に後方互換性を全無視した奇抜なUIを導入しては、信者から絶賛されてるAppleが羨ましいのは分かるが、 Windowsに求めるのは時代時代は意識してUIを今風にしすつつも、一貫した操作性であって、目新しさや新体験ではないんだわ。 お前はどんなに頑張ってもAppleにもMacにもなれない
こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief de
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
チェックボックスなどと同じく、スイッチ UI のデフォルトのスタイルを変更しカスタマイズしたい場合には、appearance: none を指定してデフォルトのスタイルを無効化する必要があります。スイッチがオンの場合のスタイルは :checked 疑似クラスを使って指定できます。 input[type="checkbox"][switch] { appearance: none; background-color: #e5e5ea; position: relative; width: 78px; height: 48px; border-radius: 8px; } input[type="checkbox"][switch]::thumb { width: 42px; height: 42px; margin-top: 2px; margin-left: 2px; border-rad
![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f121bdc3c469d1c54d99740c84676715dade946/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput-type-checkbox-switch.png)
気付かないうちに意図しない判断に誘導される「ダークパターン」と呼ばれるウェブデザインについて、専門家による大規模な調査結果がまとまりました。回答者の半数近くが「不利益を被ったことがある」と回答していて、専門家は、対策を強化する必要があるとしています。 ショッピングサイトで商品を購入する際に、▽定期購入であることが小さく表示されて意図せずに申し込んでしまったり、▽選択肢が「はい」と「あとで回答する」しかなく何度も表示されたりするケースなど、消費者が意図しない判断に誘導されるウェブデザインは「ダークパターン」と呼ばれ、対策の必要性が指摘されています。 こうした中、ウェブデザインのコンサルティングなどを行う企業が「ダークパターン」の実態について大規模調査を行い、このほど結果がまとまりました。 調査はことし8月にアンケート形式で行われ、ウェブサービスの利用者およそ800人から回答を得ました。 その
黒を基調としたレイアウトにする「ダークモード」は、画面を見やすくして眼精疲労を予防したり、端末のバッテリー節約に役立ったりしてくれると考えられているため、OSやブラウザ、アプリなどさまざまなソフトウェアがダークモードに対応しています。しかし、いろいろと調べた結果ダークモードを使うのをやめたという開発者のKev Quirk氏が、なぜその結論に至ったのかを解説しました。 Is Dark Mode Good For Your Eyes? | Kev Quirk https://kevquirk.com/is-dark-mode-such-a-good-idea/ ◆：読みやすさ ダークモードとライトモードに対する視認性を比べた調査によると、正常な視力を持つ人であれば、ライトモードの方がパフォーマンスは高かったとのこと。 人間は日中に狩りをするよう進化しており、これは「明るい背景に暗い物体」を見る
こんにちは。コネヒトでママリアプリのプロダクトマネージャーをしています、おりです。 わたしはユーザーリサーチ大好きマンで、これにおいてはデザイナーの領域にずけずけと入り込むタイプのPMなのですが、 今回は「リモート環境におけるユーザーテスト」の苦悩と実現方法ついてお話ししたいと思います！ ユーザーテストをしたいと思った背景私のチームでは定期的にユーザーのことを理解するため、また、そのときに抱いている仮説を即座に検証できるようにするために、約2か月に1度の頻度でユーザーインタビューを行っています。 その時々の検証したい内容によって、ママリのユーザーが対象になるときもあれば、ママリを使っていない方が対象になるときもあります。 さて、今回検証したかったことは、「検討しているアプリの新規デザインで、ユーザーは実際にどんな体験をするのか」というものでした。 そのため、ユーザーインタビューというよりも
ダークパターンとは、WebサイトやスマホアプリのUIをユーザーに惑わせるデザインにし、ユーザーの個人情報や時間やお金をかすめ取る手法です。 たとえば、知らない間にメール配信が登録されていたり、料金に手数料が加えられていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックしにくいようにデザインされてたり、さまざまなダークパターンが存在します。 最近のダークパターンをはじめ、さまざまなダークパターンを反面教師として学び、制作側として気をつけたいポイントが解説されたデザイン書を紹介します。 ユーザーとして騙されないように知識を増やしておくのにも有用です。 著者は「UXライティングの教科書（紹介記事）」や「ザ・マイクロコピー（紹介記事」などでお馴染みの仲野 佑希氏。これまではライティング主体の解説書を紹介してきましたが、本書はダークパターンの解説書です。デザインによるダークパターンだけで
現在、本業・副業ともにWEBデザイナーとしてデザイン・コーディングをしているゆるけーです。 本業で携わっているWEBサービスが割と高齢者向けのサービスで、ITリテラシーやUIが今の自分と考え方が異なるよなーと思っているなか、『高齢者のためのユーザインタフェースデザイン』という書籍に出会いました。 高齢者関係なく普通にアクセシビリティの観点でも重要な視点がたくさんあり、とてもいい書籍だったので、ざっくり大事だと思った箇所を抜粋しつつ自分で探した事例等をざっと記事にまとめていきますー。 視覚 高齢者になると視力が低下する傾向があります。ただ、視力の低下＝フォントを大きくするだけではありません。 視力の低下は老眼や光覚の減少などより複雑です。 主な視力の低下の具体例は以下のような点。 老眼：近く・遠くのものの焦点が合わない 周辺視野のぼやけ：画面の端に気づきにくい 中心視野の損失：画面の中央が暗
SketchやAdobe XDと並ぶ人気のUIデザインツール『Figma』。 Figmaには多数の革新的な機能が搭載されていますが、そうした機能や使い方に気づかないままFigmaを使っている方もいるはず。 そこで今回は、基本的な説明から、「もっと早く知っておきたかった！」と思うような便利すぎる機能&使い方までご紹介します。 Figmaは、ブラウザ上で利用できるデザインツールです。数あるデザインツールのなかでも、アプリやWebに特化したものとして、多くのデザイナーや企業が使用しています。 Figmaの大きな特徴は、その「共有しやすさ」。クラウド上にデータを作成するため、複数人で同時編集が可能です。また、特別なツール・アプリを導入する必要がなくブラウザ上で動作するため、クライアントへの共有もURLを送るだけで完了します。 多機能性に加え、こういった優れた共有機能が評判を呼び、いまもっとも注目さ
挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ！」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん？」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「
「慣れない」「指が届くようになった」──iOS 15で“検索窓”が下に移動した「Safari」に賛否 旧UIに戻すユーザーも 9月21日に配信が始まったAppleのスマートフォン向けOS「iOS 15」には、通知をフィルタリングする「集中モード」やグループ通話中などに音が来る方向を調整する「空間オーディオ」など、さまざまなアップデートが盛り込まれている。WebブラウザのSafariも「機能拡張」に対応した他、ユーザーインタフェース（UI）が大きく変更された。このUIが賛否を呼び、21日のお昼過ぎごろにTwitterでトレンド入りした。 変わったのは、上から下に移動したタブバー（検索バー）だ。長らく、Safariのタブバーは画面上部に設置されていたが、iOS 15で初めて下に移動した。iPhoneには画面下のエッジ部分を下にスワイプすると画面全体が下がる「簡易アクセス」機能があるものの、筐体
AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う
この記事について 上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います 💪 実装する条件 この記事で実装する処理は以下の条件のもと実装してきます。 サードパーティ製のライブラリを使用しない React Hooks を使って実装する 並び替えするときにアニメーションさせる 簡単に扱えるようにする！ アニメーションは CSS を使って行いますが、今回は簡略化の為に CSS ファイルは扱わずにインライン CSSを用いる事とします。 どのように使えるか考える では早速、「 実装していくぞー 💪 」と行きたい所ですが、今回のような汎用的な処理を自作する時は、「 どういう感じで使いたいか？ 」という所から考えた方が、色々とやりやすいと思っています。なので、今回はそこから考え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
