a-masuda

事業会社のデザイナー。WebのUIデザインをメインに、フロントエンドのこともちょこっと… もっとみる

a-masuda

事業会社のデザイナー。WebのUIデザインをメインに、フロントエンドのこともちょこっとやったり。 🦑 スプラトゥーン｜💫 Sky｜🧸 ハンドメイド雑貨｜🌈 Figma

  • Design

    • 17本

    マネーフォワードエックスカンパニー所属デザイナーの共同マガジンです。デザインの取り組みを始め、各メンバーが日々考えていることを発信します。デザイナー募集中！ 応募はこちらから：https://hrmos.co/pages/moneyforward/jobs?category=1666322478647443459 デザイナーサイト「Money forward Design」：https://design.moneyforward.com/

  • UIデザイン考察

    勝手にUIデザイン考察してみたシリーズ

  • Daily Cocoda!やってみた　まとめ

    自分のDaily Cocoda!の成果物をまとめたマガジンです。

    • Design

      • 17本

    • UIデザイン考察

    • Daily Cocoda!やってみた　まとめ

求人サイトの管理画面をオブジェクト指向UIデザインで設計する

こんにちは。UIデザイナーのマスダです。 OOUIデザイン（オブジェクト指向UIデザイン）で要件から画面遷移図を作成するということを最近行いました。 なんとなーく流れがわかってきたので、自分が実践しているOOUIデザインのやりかたを書いていきたいと思います。 1. タスクの書き出しユーザーのやりたいことを付箋に書き出します。 しっかりとユーザーの業務フローを理解して、どれだけ具体的に行動をイメージできているかが鍵になってきます。 具体的にイメージできていないと、あとで設計

a-masuda

    • わたしのUIデザイン制作フロー〜情報設計からビジュアルデザインまで〜

      こんにちは、UIデザイナーのマスダです。 この記事では、私のUIデザイン制作フローの紹介と、各段階での勉強に役立つ記事や本などを紹介しています。具体的なUIデザインの手法は紹介していません…！ わたしなりのUIデザインの制作フローを紹介することで、UIデザイナーの仕事が少しでもイメージしやすくなればいいなと思います。これからUIデザイナーを目指そうと思っている方、UIデザイナーになりたての方にとってお役に立てる記事であれば幸いです。 わたしのUIデザイン制作フロー私の場

      a-masuda

      • 行動デザイン、はじめの一歩〜自分の行動について分析してみる〜

        こんにちは、UIデザイナーのマスダです。 私の所属するゴーリストのデザイン部では、毎週1時間デザトレ！を開催しています。デザトレとは、デザイントレーニングの略。毎回チームメンバーの1人がトピックを用意して、ナレッジの共有を行っています。 今回、私が用意したトピックは「行動デザイン」。 人が行動するときのメカニズムの紹介と、自分の行動を分解してみるワークを行いました。 どうして行動デザインをトピックに選んだのかこのトピックを選んだ理由は、私がUIデザイナーとしてユーザーの

        a-masuda

        • 『Design Systems』で学ぶ、デザインシステムの基本

          こんにちは。UIデザイナーのマスダです。 ずっと気になっていた『Design Systems』という本を読みました。 この記事は『Design Systems』の読書メモです。出典と記載された部分以外は私個人の解釈が含まれています。 デザインシステムとは？デザイン原則やデザインパターン、その使用方法などが含まれます。明確な定義はなく、達成したい目的などによってデザインシステムに含まれる内容は様々になるみたいです。 『Design Systems』では、デザインシステムの構

          a-masuda

        求人サイトの管理画面をオブジェクト指向UIデザインで設計する

        a-masuda

        • わたしのUIデザイン制作フロー〜情報設計からビジュアルデザインまで〜

          a-masuda

        • 行動デザイン、はじめの一歩〜自分の行動について分析してみる〜

          a-masuda

        • 『Design Systems』で学ぶ、デザインシステムの基本

          a-masuda

        マガジン

        マガジンをすべて見る すべて見る
        • Design
          マネーフォワード エックスカンパニー公式note 他
        • UIデザイン考察
          a-masuda
        • Daily Cocoda!やってみた　まとめ
          a-masuda

        記事

        記事をすべて見る すべて見る

          求人キープリストのブランク状態を比較してみた

          こんばんは。UIデザイナーのマスダです。 どの求人媒体でもだいたい求人のキープ機能があります。 でも、もちろん自分が求人をキープしないとキープリストに求人は表示されないよな🤔 キープ求人がない時のキープリストにはなにが表示されているのだろう？媒体ごとになにか違いがあるのだろうか？ そんな疑問をもったので、キープ求人がない時（ブランク状態）のキープリスト画面を調べてみました。 そもそもブランク状態って？表示するコンテンツがない場合をブランク状態と呼びます。 一般的に、ブラン

          a-masuda

          求人キープリストのブランク状態を比較してみた

          a-masuda

          アルバイト系求人媒体の求人キープ機能を比較してみた

          こんにちは、UIデザイナーのマスダです。 求人媒体って、求人のキープ機能があるのが標準的だけど…なにか違いあるのかな？そんなことをふと疑問に思ったので、アルバイト系求人媒体のキープ機能を比較し、違いについて考察してみました。 キープという機能ひとつをとっても、媒体によって情報の伝え方や機能の設計が異なるのが面白いなと思います。 キープをうながすデザインキープボタンのラベルや、ボタンの周りにはキープをうながすようなデザインが見られました。 工夫ポイント① 「とりあえず」

          a-masuda

          アルバイト系求人媒体の求人キープ機能を比較してみた

          a-masuda

          求人媒体で使われているアイコンまとめてみた

          こんにちは。UIデザイナーのマスダです。 今回の記事は…！求人媒体のアイコンをまとめてみた〜です👏 仕事では人材業界のサービスを扱うことが多いのですが、求人サイトめぐりをしていると、いろんなデザインテイストがあることに気づきます。 そこで、今回はビジュアルデザインの要素のひとつであるアイコンに着目してみました。へぇ〜と言ってもらえたら嬉しいな、と思い書いています。笑 それではいってみよ〜〜〜 こちらはアルバイト系求人媒体で使用されているアイコンです。 スマホのアイコン

          a-masuda

          求人媒体で使われているアイコンまとめてみた

          a-masuda

          【engage】人の心を動かすUIデザインの工夫

          こんにちは。UIデザイナーのマスダです。 今回は、engageのUIデザインに見られる工夫を、心理的な効果とともに考察していきたいと思います。 人の行動メカニズム 人は、なにかしらの情報をインプットして頭の中で判断してから行動を起こします。一見シンプルのように見えますが、頭の中での判断するときには、無意識のうちに周囲の状況や過去の経験などに影響を受けています。 無意識のうちに影響を受けて非合理な判断をしてしまう心理現象を「バイアス」と言います。 バイアスの種類にもいろい

          a-masuda

          【engage】人の心を動かすUIデザインの工夫

          a-masuda

          【engage】ログイン前後でのトップページUIデザインの変化

          こんにちは、UIデザイナーのマスダです。 今回のUIデザイン考察の対象はengageです。 2016年にリリースされたサービスで、求人媒体の中でも新人さんではないでしょうか。 engageを触っていると、ログイン前後でトップページのレイアウトが大きく異なるな〜ということに気づいたので、今回はログイン前後でのUIデザインの変化に着目したいと思います。 ログイン前後でのユーザーニーズの違いログイン後とログイン前のユーザーがしたいことは異なりそうです。 大きく違うところは、求

          a-masuda

          【engage】ログイン前後でのトップページUIデザインの変化

          a-masuda

          【エン転職】求人応募フローでのUIデザイン考察

          こんにちは。UIデザイナーのマスダです。 前回の記事に引き続き、エン転職の求人応募フローについて見ていきたいと思います。 前回の記事はこちら👇 求人応募のユーザーフロー エン転職では、求人を気になる登録する・応募するには会員登録が必須になっています。つまり、会員登録というハードルを超えてきたユーザーのみが利用する機能ということです。 特徴①求人一覧から気になる求人リストへの導線を常に表示スマホでは、求人一覧画面の上部に気になる求人リストへの導線が常に表示されていました

          a-masuda

          【エン転職】求人応募フローでのUIデザイン考察

          a-masuda

          【エン転職】会員登録フローでのUIデザイン考察

          こんにちは、UIデザイナーのマスダです。 前回の記事に引き続き、エン転職の会員登録フローについて見ていきたいと思います。 前回の記事はこちら👇 会員登録のユーザーフロー こちらはエン転職のWebサイトで会員登録をするときのユーザーフローです。エン転職では、求人を気になるリストに保存したり、求人に応募したりするには会員登録が必須となっています。 特徴①ユーザーが目にしやすい場所に会員登録のボタンを設置 パソコン版では、トップページや求人一覧に会員登録のボタンや訴求メッ

          a-masuda

          【エン転職】会員登録フローでのUIデザイン考察

          a-masuda

          【エン転職】求人閲覧フローでのUIデザイン考察

          こんにちは。UIデザイナーのマスダです。 求人サイトの勝手にUIデザイン考察シリーズです。 今回のUIデザイン考察の対象はエン転職です。 エンエンエエン♪エン転職〜♪のCMでおなじみの求人媒体です。 求人サイトを利用するときにまずはじめにユーザーが行う行動である、求人検索のフローに着目してUIデザインを見ていきたいと思います。 下記の図が求人を検索するときのユーザーフローです。 求人一覧を軸に、いろいろと検索条件を変更しながらたくさんの求人を見て自分にあった求人を探しま

          a-masuda

          【エン転職】求人閲覧フローでのUIデザイン考察

          a-masuda

          ベトナムのグループ会社採用ページを作った話

          こんにちは、UIデザイナーのマスダです。 先月、弊社のグループ会社であるゴーリストベトナムの採用ページがリリースされました🎉 制作期間は約3ヶ月でした。この記事では、採用サイトを作ると決まってから、どのように制作していったのかをご紹介できればと思います。 長文になりますが、気になるところをかいつまんで読んでもらえるだけでも嬉しいです。これから採用サイトなど、なにかしらのWebサイトを作ろうと思っている方のヒントとなるような記事になっていれば幸いです😊 ビジュアルのデザインとい

          a-masuda

          ベトナムのグループ会社採用ページを作った話

          a-masuda

          【マイナビバイト】ユーザーの行動とUIデザイン

          こんにちは、UIデザイナーのマスダです。 先日は転職系の求人媒体である、リクナビNEXTのUIについて考察してみました。今回は、アルバイト系の求人媒体であるマイナビバイトのUIについて考察をしていきたいと思います。 結論から言うと、マイナビバイトの「好きを、バイトに。」というコンセプトが最も感じられた画面設計は、トップ画面の検索UIでした。 自分の好きを具体的に検索できるよう、テキスト検索が一番目立つように配置されているのが特徴的だなと思いました。 トップ画面以外にも、

          a-masuda

          【マイナビバイト】ユーザーの行動とUIデザイン

          a-masuda

          【リクナビNEXT】ユーザーアクションとUIデザインの考察

          こんにちは、UIデザイナーのマスダです。 求人媒体のUIを考察をしたいと思います。 題材に取り上げるのはリクナビNEXTです。 リクナビNEXTは転職系の求人媒体です。求人媒体の役割は、採用をしたい企業と、いい企業を見つけたい求職者をマッチングすること。 求人媒体ビジネスを成功させるには、採用したい企業と求職者をたくさん集めてくる必要があります。さらに、求人媒体に集まった企業と求職者をできるだけ最適な形でスムーズにマッチングさせることができれば、企業・求職者双方の満足度が

          a-masuda

          【リクナビNEXT】ユーザーアクションとUIデザインの考察

          a-masuda

          OOUIデザインの準備運動をやってみる

          こんにちは、マスダです。 デザイナー3年目で、そろそろ真面目にUIデザインの手法を勉強しはじめています。私の所属するデザインチームでたびたび話題に上がるのがオブジェクト指向UIデザイン（以下、OOUIデザイン）という考え方。 最近、本も出版されてデザイナーさんだと知っているという方も多いのじゃないでしょうか。 ユーザーの関心の対象物を手掛かりにUIデザインを行っていくのがOOUIデザインです。そのOOUIデザインに取り掛かるのにソシオメディアさんが準備運動を用意してくれ

          a-masuda

          OOUIデザインの準備運動をやってみる

          a-masuda