ペパボのデザイナーが書きました

本

GMOペパボ株式会社のデザイナーが note に書いた記事をまとめています

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

#UI

選ぶというのは大変だ - 選択で困らないUIを考える

こちらはGMOペパボデザイナー Advent Calendar 2023、12/2の記事になります。この記事は？何かを選択させるUIを設計するとき、利用者が困らないよう意識する基本的なポイントをまとめてみました🤷🏻‍♂️ 選択UIとは「どういった軸で選びたいのか・選んでほしいのかの提案」です。サービスに何を求めているのか、何を提供しようとしているのかをしっかり整理した上で利用者に提案しましょう。前段：選べないUIに出会ったいつも行っている歯医者がアプリから予約でき

規模の大きめなデザイン組織に入った。それもデザインシステム担当みたいな感じで。

もう半年前なので今更になってしまったけど、6月にGMOペパボ株式会社へ入社した。 2018年から2022年まで所属した株式会社スペースマーケットでは自社ソフトウェアのUIをデザインしてて、自主的に学んだり仕事をする中でいくつもの面白い経験と視野を獲得できてきたように思っていたところで「今も面白いけど、もっと色々なデザイナーと刺激し合いながら仕事したら今以上に面白い感じになるのでは」となったのが転職の理由だった。ペパボには以前からWebの分野を中心にデザイン組織として骨太

ルナルナもイルミネートもペアケアも続かなかった私が、Appleの「周期記録」を毎日使うようになったのはなぜか？分析してみた

女性に頻繁に訪れる生理。その記録や管理ってどうしてますか？めんどくさくないですか？私は数年前、ルナルナというサービスを知ってから記録をつけようと試みたものの、気づいたら忘れ、思い出した時に記録、といったことが頻発して数ヶ月おきに飛び飛びで記録していました。そしてお知らせか何かで「生理周期が乱れてます」と言われ、「記録するの忘れただけなんじゃ！！！」と心のなかでツッコミ、意味ないから使うのやーめた、という経緯があります。そして数年後、イルミネート、ペアケアという類似サ

CSSの設計に関する雑記

CSSはとても壊れやすいです。この問題を克服するための手段として、クラス名やディレクトリ構造に対して運用ルールを設けるといった手段が取られてきました。機械的なルールの限界時に、運用ルールは、UI（ユーザーインターフェース）から離れた、機械的なルールを採用してしまうことがあります。この例は、CSSのクラス名の命名規則の中に見ることができ、連番や過度な省略表記といった符合的なクラス名を生み出します。 /* 例:クラス名に連番を当てる */.btn-01 {}.btn-0

除外キーワード検索UIのベストプラクティス

「保護カバーじゃなく本体が欲しいのに...」とあるウイルスの影響で、外に出られない。せめて「どうぶつの森」で友達と会いたい。そんなあなたは、とあるCtoCのフリマアプリで、Nintend Switchを探している。しかし「価格の安い順」でソートした時に出てくるのは、保護カバーばかりである。「Nintendo Switch 本体」で検索してもなお、保護カバーが出てくる。うんざりする…その時に有用になるのが検索オプションの「〜を含まない検索」機能（除外キーワード）だ。「除

「購入完了」ページにアニメーション追加までの流れ

ユーザーさんに丁寧な印象を与えたり、使ってて楽しいと感じてもらえたり、メンテナンス中で使えない時の不快感を減らしたり、など、アニメーションで解決できそうなことがありそうなので、アプリにアニメーションを入れていきたいなと思っています。今回はアイコンではなく購入完了ページにアニメーションを追加したいと思いました。購入したとき気持ちよくしたい買ったとき「注文完了しました」文言だけではなくアニメを入れるともっとワクワク感UP ☝️目的でした。 1.アイデア/ストーリー

消えるUX

議事録に書かれた幸福な落書き社内の会議で、ひとりがGoogleDocumentで議事録をとり、リアルタイムでみんながそれを手元で読みながら話し合うことが良くある。会議が煮詰まってくると、誰からともなく議事録の末尾にくだらないことを書く。お腹が空いたとか、意味のない絵文字とか。それでくすくす笑い、温かい空気を作り、話し合いの本題へ戻る。会議が終わる頃にはそんな落書きも消して、真面目に話し合ったような顔で綺麗な議事録が残る。チームに奇妙な連帯感が残る。その空気の心地よさは

トイレの鍵のサインデザイン

こんにちは。GMOペパボ株式会社でデザイナーをしている、anegonといいます。最近会社で、姉御って言われることが増えたので、anegoにしようと思ったら案の定アカがすでにあるので、わりとウルトラマンの怪獣っぽくなりました、アネゴンanegonです。さて、今回はトイレのドアに貼ってある、鍵の使い方のサインデザインについて小話したいと思います。世の中の妄想の8割は担ってるんじゃないかというトイレ。嘘です。言い過ぎました。でも一生のうちトイレに人は三年くらいいるらしいの

見えない時間を見せるデザインその2

前回の記事では「期限」および「記憶」の時間の見せ方について述べた。今回は「所要時間」について考えてみようと思う。例えば、GoogleMapGoogleMapでは、出発（到着）時刻or終電を設定すると、距離・運賃・時間を合わせて、ルートをいくつか提案される。人はなぜ所要時間を知りたいのだろうかそれは以下を知りたいためだ。 - 自分が何時に家を出ればいいか - そのためには、あと何分で手持ちのタスクを片付ければいいのか - それが達成できなかったとき、どういう結果にな

見えない時間を見せるデザイン

アプリケーションにおける時間の表現はさまざまであり、人間の欲求と、置かれている状況を常に意識してデザインすることが求められる。 DBに入っているからと言って日付をそのままYYYY/MM/DDで出すということは、冷蔵庫に入っているトマトを洗わずに食卓にのせるようなものだ。時間は目に見えない時間というのは、人間が勝手に決めた決まりごとである。人類が平和に暮らすために明示的にした、ただの共通認識だ。「期限」の見せ方「期限」を知りたい時、時刻は重要でなく、自分がいま何をする

ユーザーに優しいマニュアルを作る5つのヒント

この記事は、「マニュアルのUXはどうあるべきか？」の後編です。前編はこちら >> 例えばこんなことはないだろうか。あなたは、カレンダーアプリを開いている。家族とイベント情報を共有したくなったが、どう操作すれば分からない。膨大なマニュアルの中を探し、たくさんのページを開いたら、詳細なシステム仕様の中にほんの少しだけ「どうすればいいか」が書いてあった。やれやれ、10分も使ってしまった。これなら家族にはLINEで伝えたほうが早かったよ。マニュアルは資産であるマニ

マニュアルのUXはどうあるべきか？

あなたはいま、フリマアプリを開いている。家の不用品を売るためだ。出品したリュックが売れて、購入者に送付しようとしたが、その配送方法を変更したくなった。画面を探しても説明が書いていない。できるのか、できないのか。マニュアルがどこにあるのか、お問い合わせが必要なのか。よくわからない。購入者からは「明日には配送してほしい」とメッセージが来ている。あなたは焦ってしまう。出品額たかが1,000円のために、頭を抱えてしまう。はて、一体どうしたものか... UIデザイナー

忘れていいUX

突然だが、「Evernote」の価値とは何だろう。こう聞くと「何もかも記憶すること」と答えが返ってきたりする。いいえ。Evernoteの最大の価値とは「そこに書けば何もかも忘れていい」ということだ。 Elephants never forget - 象は忘れない人間の脳はそこまで多くのことをずっと覚えておけない。Evernoteを生活のデータベースとして使うことで、人間は「覚えておく」というプレッシャーから解放され、いま目の前にある生活にさらに集中することができる。