ふぇい

https://www.shufei.dev/

ふぇい

https://www.shufei.dev/
  • 固定された記事

初めてでも使いやすいUIを設計するためには？ (誰のためのデザインを読んで)

「誰のためのデザイン？」を読みました。 そこで、初めてでも使いやすいUIを設計するにはどうしたらいいのか？2回目以降はもっと使いやすいUIを設計するにはどうしたらいいのか？という観点で、内容をまとめていきたいと思います。 ユーザの目的をちゃんと達成できるUIにするために初めて使うにしても、2回目に使うにしても、ユーザの目的を達成することがUIには求められる。 Amazonアプリだったら、ユーザが欲しいものを購入できるようにしたり、Airbnbだったら、宿泊先を見つけて予約を

ふぇい

    • Puddle: ブックマーク管理サービスを個人開発した

      Puddleというブックマーク管理サービスを個人開発で作りました。対応クライアントはWebブラウザのみです。 Googleアカウントで利用可能ですが、現在は利用できるユーザを絞っているため、許可されていないユーザは利用できません。 ブックマーク管理したいモチベーションそもそもブックマーク管理したいモチベーションがどういうところにあるかから説明します。モチベーションに応じて管理方法が変わってくるためです。 これは個人的なモチベーションなので、他の人にはあまり当てはまらない可

      ふぇい

      • UI設計の中で、改めて提供したいユーザ体験を考える

        前おき：この記事でのUIは、デジタル製品のUIのことを指しています。モバイルアプリやWebアプリのUIなど。 これまでUI設計を行う際には、OOUIの考え方をベースにモデリングしたものを素直に表現するやり方で考えることが多かったのですが、それだけだとダメそうだと実感したのでそこの学びを言語化してみます。 要点前提として、サービスがどういうユーザ体験を提供したいかによってUIが大きく変わってくる UI設計時に、どういう体験を提供したいかを改めて考え、UI設計に反映する必要

        ふぇい

        • UXについて考える 2023

          UXとは何なのかについて言語化してみたいと思う。 ※ここに書いているのはあくまでも個人的な考えです。私はUXの専門家ではないので、間違いや跳躍しすぎなどがあるかもしれません。 サービスは概念そもそもユーザ体験・ユーザにとっての価値を提供するサービスそのものをどう捉えるのか。 サービスは概念であり、サービスには実体はない。 サービス自体を表す目にみえるものはない。 ユーザは、サービスが提供するモバイルアプリやWebアプリ、広告といった、目でみえる・耳で聞こえる・触れるも

          ふぇい
        • 固定された記事

        初めてでも使いやすいUIを設計するためには？ (誰のためのデザインを読んで)

        ふぇい

          UIデザインに関するサイコゥ!サイコゥ!サイコゥ!なアイデア

          はじめにサイコゥ!サイコゥ!サイコゥ!とは： キングオブコント2021で優勝した空気階段 水川かたまりのギャグです。 最高な時に使うと良さそうです。 サムネのイラストはデビルキック伯爵です。 この記事についてエンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendarの15日目の記事です。 Webエンジニアやってる私が、UIデザイン面白いなと思うきっかけになった本や、私をサイコゥ!サイコゥ!サイコゥ!にさせたUIに関するアイデアな

          ふぇい

          UIデザインに関するサイコゥ!サイコゥ!サイコゥ!なアイデア

          ふぇい

          作業時間を見える化して、見積もりの確度をあげる(かもしれない)アプリをつくった

          TL;DR 作業時間をトラッキングするWebアプリを作ったので、よかったらさわってみてください。(すみません、PCのChromeでみてください) https://tasktrack.web.app/ こんにちは。Webエンジニアしてるものです。 突然ですが、わたしは楽しく仕事をしたいです。 そして、楽しく仕事をするためには、計画通りに仕事を進めることが大事だと思います。 仕事が予定より遅れている時などは心理的なストレスがあるので、仕事がしんどくなりますが、逆に予定通り

          ふぇい

          作業時間を見える化して、見積もりの確度をあげる(かもしれない)アプリをつくった

          ふぇい

          iOSアプリ 「Actions」 の UI考察

          iOSアプリの「Actions」というアプリのUIを考察してみました。 AppStoreへのリンク UI考察で得られたこと最後のまとめにも書いてますが、このアプリの考察を通して得られたことをまず書いておきます。 ・一覧画面において、オブジェクトの重要なアクションは何か、一覧画面でもアクションできるようにすべきものは何か、一覧画面ではどういうふうにアクションさせるべきか、を考えて設計する。 ・違和感を感じるような挙動があった時、その違和感を取り払うためのインタラクション

          ふぇい

          iOSアプリ 「Actions」 の UI考察

          ふぇい

          一度にたくさんアラームを設定する人に向けたアラームアプリ

          はじめにまず、わたしが毎日目覚ましとしてセットしているアラームの設定をみてください。(一画面に収まりきらなかったので、横に並べてます) ご覧のように6時から7時40分まで大量にセットしています。 なぜこんなことになっているのかというと、寝ている時にアラームの音がほとんど聞こえないからです！！ ただ、どこかのタイミングで聞こえるタイミングというのはあります。 そのタイミングでアラームがなっていて欲しいのですが、そのタイミングがいつなのかは全くもって予測不可能です。 なので、こ

          ふぇい

          一度にたくさんアラームを設定する人に向けたアラームアプリ

          ふぇい

          Componentライブラリをつくった

          AngularでComponentライブラリを作りました。 こちらでComponent一覧を確認できます。(Storybook) https://fei-components.firebaseapp.com/ ソースコードはこちら。npmで公開してます。 https://github.com/shuufei/fei-system ドキュメントとかは全く用意できてないのでComponent使い方を知ろうとするとコード見るしかない状態です、、 効率よくstyleをあてていく

          ふぇい

          Componentライブラリをつくった

          ふぇい

          自分なりのUI設計ガイドライン

          UI系の本や、デザイン原則系の記事、UI設計の仕事を通して学んだことをここで一度まとめて、自分なりのUI設計ガイドラインとしたいと思います。 主に、大項目ごとにどういうことを考えるとその大項目に対して効果を出せるのか、っていうのを洗い出す感じで書いていきます。 今後UI設計する時にこのガイドラインを元に設計することで、ある程度の品質を毎回保てればいいなと思っています。 また学びがあったタイミングなどで、つどつどアップデートしてけたらなと思います。 優れた概念モデルを用いる

          ふぇい

          自分なりのUI設計ガイドライン

          ふぇい

          映画チケット購入アプリのUI検討

          私は映画を見に行く際に、映画館のアプリなどからチケット購入することが多いのですが、いまいち使い勝手が悪いと思っていました。 なぜ使い勝手悪いと感じるかを考えたときに、鑑賞する映画館、鑑賞する作品が決まっている前提で設計されているからじゃないかと思ったので、その辺を改善できるようなUIを自分なりに検討してみました。(スマホアプリです) ユーザの想定ユースケースユーザの主なユースケースとしては、下記の2点を想定して設計しました。 1. 見たい映画を、自分の予定にあった時

          ふぇい

          映画チケット購入アプリのUI検討

          ふぇい

          インターフェースを設計する際に気を付けたいこと (融けるデザインを読んで)

          「融けるデザイン」を読んで、自分なりに解釈した内容をまとめてみたいと思います。スマホアプリやWebアプリとかの文脈で書いていることが多いです。 1. インターフェースの役割 2. よりよいインターフェースとは 3. よりよいインターフェースにするためには 4. これから新しいものをつくっていく際に考慮したいこと 1. インターフェースの役割まずはインターフェースの役割としては、「ユーザと道具やサービスとを繋げる」という役割が大きいのかなと思いました。 1-1. 新しい価

          ふぇい

          インターフェースを設計する際に気を付けたいこと (融けるデザインを読んで)

          ふぇい

          いつか使えそうな情報を管理する

          こんにちは。 「いつか使えそうな情報を管理する」ツール、#pagを作ったので、その内容をまとめてみたいと思います。 実際のアプリケーションはこちら(テストユーザでしか利用できません)：https://pag-front.firebaseapp.com/ #pagとはいつか使えそうな情報を管理するツールです。 インターネットには有用な情報がたくさんあるので、使えそうな情報を１箇所で管理したいというモチベーションで作りました。 ブラウザのブックマーク機能だとフォルダわけと探す

          ふぇい

          いつか使えそうな情報を管理する

          ふぇい