マガジンのカバー画像

UI/UX

16
運営しているクリエイター

記事一覧

【基礎知識】WCAG?JIS??アクセシビリティガイドラインの理解を深めよう

【基礎知識】WCAG?JIS??アクセシビリティガイドラインの理解を深めよう

こんにちは、アイルランドからのリモートワークを終えてから2ヶ月経過し、落ち着き出したカイエンデザイナーの伊藤です。

アイルランドのリモート体験が気になる方はこちらの記事をご覧ください。

WEB制作会社に勤めて6年以上になりますが、アクセシビリティのガイドラインは今でも調べながら進めることが多いです。ユーザービリティ?アクセシビリティ?と色々混同しがちなところですが、今回はアクセシビリティにまと

もっとみる
なぜ「実装がわかるUIデザイナー」が必要なのか

なぜ「実装がわかるUIデザイナー」が必要なのか

実装がわかる=「簡単なフローチャートをイメージできる」ジュニアのUIデザイナーが上に上がるための大きな壁が、実装がわかるかどうかです。実装がわかるとは、「プログラミングできる」ことではありません。

プログラミングはできなくていいけど、「ユーザーがアクションした時と結果画面の間に、どんな情報のやり取りがされたのかをイメージできること」をUIデザイナーは求められます。(正確には「フローチャート」と呼

もっとみる
検索結果の絞り込み・並び替えUIの観察

検索結果の絞り込み・並び替えUIの観察

先日、検索結果の絞り込みUIの検討をするために事例を調べたところ、意外にもアプリによって様々な違いがありました。面白いテーマなため観点ごとに違いを整理し、メリット・デメリットや設計意図を考察しました。注目した観点は以下の7つの点です。

これらの観点をもとに以下の条件で12のアプリを調査しました。

1. 絞り込み・並び替えボタンの配置
まずは、絞り込み・並び替えボタンの配置場所について。ボタンの

もっとみる
アプリのヘルプについて考える

アプリのヘルプについて考える

主にモバイルアプリ利用時のヘルプについて、設計上、ヘルプを置くときのルールってどういうものがあるのかを調べていたら、いくつか発見があったのでまとめておきます。

これからアプリを設計するとき、
「どういう観点で、どこにヘルプを置けばいいか?」
悩んでいる人の参考になれば幸いです。

iOSにおけるヘルプの提供についてApple Developer サイトでは、2023年9月12日に「ヒント作成のガ

もっとみる
【Design for VisionOSまとめ】 空間入力 〜目のインタラクション編〜

【Design for VisionOSまとめ】 空間入力 〜目のインタラクション編〜

こんにちは、MESONでディレクターをしているtaka(@takataka530)です。

本記事は、developer向けに公開されたSpatialComputing領域でのデザインのガイドライン(visionOS)について、ナレッジ体系化の一環で記事にまとめてしまおう企画第二弾です。 "知を通わせる"ことをテーマに、チームで進めております!

今回の動画のテーマは「Design for spa

もっとみる
高度なインタラクティブUIを作れるツール「Rive」を使ってみた

高度なインタラクティブUIを作れるツール「Rive」を使ってみた

こんにちは。シフカです。
今回は、インタラクティブに特化したグラフィックツール「Rive」の体験レポートです。Riveを使えば、複雑なことをしなくてもインタラクティブなUIや高度なモーショングラフィックスを生み出すことができます。
実際にゲームなどインタラクティブなコンテンツを作っている人はもちろんのこと、単調に動くプロトタイプや動画によるデモでなく、もっとリアルに操作してもらえるデモを作りたいU

もっとみる
「CTAボタン」のUIを集めてみた|パーツ別デザインまとめ

「CTAボタン」のUIを集めてみた|パーツ別デザインまとめ

こんにちは!株式会社Rabeeでデザイナーをしています、nanamiです。

今回は、LPにおいてCV(コンバージョン)に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。

はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を1つずつ特化して調査をしていきたいと思っています。
今回はその「パーツ別デザインまとめ」シリーズ2本目で

もっとみる
Apple Vision Proの体験をデザインする(実践編)

Apple Vision Proの体験をデザインする(実践編)

Takramの野見山です。デザインエンジニアとしてテクノロジーと人を繋ぐ仕事をしています。

Apple Vision Pro(AVP)は従来のVRと異なり、空間コンピューティングを提唱したデバイスで、今までにない新しい体験を切り拓くことが期待されています。米国で発売されてから2ヶ月が経ち、日本での発売も間近だと噂されています。

本記事では、AVPアプリの企画と開発の経験から得た実践的なデザイン

もっとみる
「4の倍数」でのUIデザインのつくり方 - Figma

「4の倍数」でのUIデザインのつくり方 - Figma

こんにちは、藤崎 猫です。
先日『FigmaでUIデザイン』という本を出版して、ブログでは入りきらなかったデザインノウハウや、Figmaの使い方についてお伝えできればと思っています。
今回のテーマは「4の倍数」でのデザインのつくり方についてです。

<90日間 Kindle Unlimited で無料公開中!>

なぜ4の倍数でつくる?『FigmaでUIデザイン』のナレッジ編(p.32)にて、UI

もっとみる
[BONO] OOUI コンテンツ中心のUI設計

[BONO] OOUI コンテンツ中心のUI設計

BONOというUIデザインのコミュニティで
OOUI(オブジェクト指向UIデザイン)を学習した際の記録です。

OOUIの考え方について

タスク中心 = 何をするにも専用の部屋に入る為、1つのことしかできない。(モード)

オブジェクト中心 = コンテンツが中心の為、柔軟性がある。(オブジェクトを新規作成、オブジェクトを編集/削除)

UIを作成するときは
機能要件を考える際はタスク中心で考える

もっとみる
ワイヤーから生成して修正指示が出せるUIデザインAI「Draw-a-UI」 他 / Catch up on AI 2023.11.15

ワイヤーから生成して修正指示が出せるUIデザインAI「Draw-a-UI」 他 / Catch up on AI 2023.11.15

Pick up実際のワークフローにかなり近いので、現場への導入がとてもスムーズに行えそうなAIツール「Draw-a-UI」

WEBデザインのスキルはこれで大きく変わってきそう。

Catch up on AIキャラクターも変更可能!あらゆるサービスと連携する「TALKING TO AI」

破綻軽減!人物だけを生成AIで変換するダンス動画

Comfy UI / AnimateDiff + Mu

もっとみる
UIデザインで「色」を選ぶためのシンプルな3ステップ【海外記事メモ】

UIデザインで「色」を選ぶためのシンプルな3ステップ【海外記事メモ】

今日はこの記事を取り上げます。なお、画像も以下から引用いたします。

本日もよろしくお願いいたします。

デザインで色を選ぶためのシンプルな3ステップデザインにおいて適切な色の組み合わせを選ぶことは、最も難しいタスクのひとつです。そこで、ここではあなたを助ける簡単な3ステップを共有したいと思います。
私たちはデザインエージェンシーのランディングページで色を選択する際に以下のプロセスに従っています。

もっとみる
UXデザインは終わりの時代かも【海外記事メモ】

UXデザインは終わりの時代かも【海外記事メモ】

今回はこの記事を取り上げたいと思います。

筆者の視点からデザインにおける現在地と、これからを考察したような内容のようです。
ちょっと長い上に、自分のレベルではかなり読解難易度が高い英文なので、何回かにわけて投稿します。
ちょっと今日は筆者の主張の部分までいかず、筆者の背景などの導入部分までになりそうです。

本日もよろしくお願いいたします。

UXデザインの終焉:プロダクトリーダーシップの誕生か

もっとみる
お知らせのタイムスタンプの考え方

お知らせのタイムスタンプの考え方

お知らせやSNSなどで使うエントリーされた記事の時間表示。

これの設定値を考えてみました。
いきなり結論です。

・1H未満 分(例 3分)

・1H以上~24H未満 時間(例 3時間)

・24H以上~ 7日未満 日(例 3日)

・7日以降 日付表示(例 2023年3月31日)

基本は、最近来たお知らせに対して「今さっき来た」という感覚をもたせることが大事かなと思いました。過去は時系列的な

もっとみる