コータロ| UIデザイナー

都内のシェアリングエコノミー事業を営む会社でUIデザインをしています

コータロ| UIデザイナー

都内のシェアリングエコノミー事業を営む会社でUIデザインをしています

  • UIデザイン分析

    ジュニアUIデザイナーがデザインスキル向上のためにメガサービスを考察します。

  • デザイン表現力向上プログラム

    グラフィック力に課題を感じたため、「デザインのドリル」を行いました。

  • 報酬付きのデザイン案件に挑戦

    お客さんの要望に合わせて、複数のアイデア出しや方向性の確認をしながらデザインをしました。

  • Daily UIのお題をもとにサービスデザインに挑戦

    画面遷移の伴うアプリデザインに挑戦しました。

すべてのマガジンを表示

「第2弾」About Face 3を読んでみた

前回に引き続き、今回は、7章から14章までの内容について書いていきます。 ちなみに、第1弾はこちらになります。 今回は、要件の設定、フロー状態にさせるためのデザイン、優れたビジュアルデザインの定義について整理していきます。 要件の設定適切な要件を設定するためには、いくつかのステップが必要になります。具体的な内容は、以下に記載。 Step1:物語形式に登場した名詞(オブジェクト)の抽出 前回の記事でも登場した物語形式の中で、記載されている名詞を抽出し、どのようなオブジェ

コータロ| UIデザイ…

    • 「第1弾」About Face 3を読んでみた

      伝説の名著である「About Face 3」を先輩デザイナーのおかげで読める機会に巡り会えたので、今回は読書感想文を書きたいと思います。といっても、まだ6章までしか読んでないので、そこまでの感想をつらつら書いていきます。 この本では、ユーザーの視点を重視することが何度も強調されています。今回の記事では、ユーザー目線に立つために、「情報収集」「ペルソナ作成」「物語初案（ユーザーストーリー）」のやり方をまとめます。 情報収集当然のことながら、自分の想像だけでユーザーの立場に立

      コータロ| UIデザイ…

      • Disableボタンの使い方考察

        今回、プロダクト改善する中で、ボタンをDisableにするのか、Activeにしてfeedbackを表示させるのか、悩む機会があったので、参考記事を活用しながら考えをまとめていきたいと思います。 Disableボタンの役割Disableボタンは、ユーザーに対して現在の条件下で利用できないことを伝える役割を担っています。これによって、ユーザーの意図しない操作を未然に防ぐことができます。例えば、ECサイト上で在庫がない商品を購入させないために商品のボタンDisableにする、ネ

        コータロ| UIデザイ…

        • ジュニアUIデザイナーが、Pinterestを分析してみた[ホーム画面編]

          まずは、Pinterestの経営方針を整理していきます。 経営方針Pinterest は、世界中の人々が行動に移すためのアイデアを見つけたり、好みのテイストに合った商品を購入したり、インスピレーショナルなクリエイターを見つけるためのビジュアルインスピレーションプラットフォームです。私たちのミッションは、すべての人に好きな人生を創るためのインスピレーションを与えることです。 収益モデル 広告収入がメインになるので、1ユーザーの記事クリック数が指標になるかなぁ。閲覧される記

          コータロ| UIデザイ…

        マガジン

        • UIデザイン分析
          10本
        • デザイン表現力向上プログラム
          3本
        • 報酬付きのデザイン案件に挑戦
          3本
        • Daily UIのお題をもとにサービスデザインに挑戦
          4本

        記事

          ジュニアUIデザイナーが、タクシーアプリS.RIDEを分析してみた

          経営方針プラットフォーマーとして、どちらかと言うとタクシー事業者側に寄り添った世界観を目指している印象 収益モデル タクシー乗車の利用手数料を収益としている。もしかしたら、タクシー事業者側からも掲載手数料を取っている可能性はある。 とりあえず、アプリ内で見る指標としては、タクシーの利用率が主要KPIとなる。 上記の観点を意識して、S.RIDEを分析していきます 呼び出し前なぜ、ボタンではなくスライドなのか？ そもそも、タクシーを呼ぶという行為は、リクエストした瞬間に

          コータロ| UIデザイ…

          ジュニアUIデザイナーが、タクシーアプリS.RIDEを分析してみた

          コータロ| UIデザイナー

          ジュニアUIデザイナーが、noteを分析してみた[詳細画面編]

          前回の検索画面分析に引き続き、今回は詳細画面について見ていきます。 「FV(ファーストビュー)」重要なアクションは導線が重複しても良い 「いいね」はクリエイターのモチベーションを向上させる役割を持ち。共有は読者数を増やし購買数向上を促す役割を持つ。 このような重要なアクションは追従させつつ、ページ内にも導線を配置することで取りこぼしをなくせる。 本文のLine-heightが200% ブログ記事のような長い文章を読む際には、Line-heightをたくさん設けることに

          コータロ| UIデザイ…

          ジュニアUIデザイナーが、noteを分析してみた[詳細画面編]

          コータロ| UIデザイナー

          ジュニアUIデザイナーが、noteを分析してみた[検索結果編]

          前回の検索画面分析に引き続き、今回は検索結果画面について見ていきます。 「記事」検索バーの下にSecondary tabを配置するのはガイドラインに即した基本設計 検索時の情報階層分けとしてよく使われる。複数選択を意図しない場合は、ChipsではなくTabsの方が適しているのかも。 検索結果のUIリスト内について 検索結果に出てくる情報は、おおよそ読者の興味に近い内容が表示される。 なので、詳細画面に行く際のギャップを防ぐために情報を配置する必要がある。 その際の観点

          コータロ| UIデザイ…

          ジュニアUIデザイナーが、noteを分析してみた[検索結果編]

          コータロ| UIデザイナー

          ジュニアUIデザイナーが、noteを分析してみた[検索画面編]

          前回のホーム画面分析に引き続き、今回は検索画面について見ていきます。 前提として、noteの検索画面の役割は、読者が自分の興味あるコンテンツに効率的にたどり着けること＆検索途中に新しい興味関心を持つきっかけを提供することかなと思ってます。 その観点を踏まえて、「Default」「Focus」「Write」の状態でUIを見ていきます。 「Default」検索のDefaultはカテゴリーとオススメリストを表示することが多い 検索画面の基本パターンとして、「カテゴリー」と「おす

          コータロ| UIデザイ…

          ジュニアUIデザイナーが、noteを分析してみた[検索画面編]

          コータロ| UIデザイナー

          ジュニアUIデザイナーが、noteを分析してみた[ホーム画面編]

          経営方針noteはクリエイターが広告収入に依存することなく自分の発信したい内容を継続できるような仕組みを目指してる感じが伝わりました。 ビジョン だれもが創作をはじめ、続けられるようにする。 ミッション noteがあることで、人々は本当に伝えたいことに専念できるようになる。 収益モデル クリエイターのコンテンツを読者が購入し、その販売手数料を収益とする。 なので、ビジネス的観点だけ考えれば、クリエイターには有料メディアをたくさん作ってもらって、それを読者はたくさん

          コータロ| UIデザイ…

          ジュニアUIデザイナーが、noteを分析してみた[ホーム画面編]

          コータロ| UIデザイナー

          ジュニアUIデザイナーが、Spotifyを分析してみた[再生画面編]

          今回は再生画面について分析していきます。前回までの記事が気になる方はこちらをご覧ください。 再生画面は、「音楽」「ポッドキャスト」でそれぞれUIが異なったのでそれらを確認していきます。 「音楽」なぜ、再生画面は半モーダルなのか？ 音楽アプリでは、主に「検索」と「再生」という機能が必要になる。ただ、「再生画面」では、そこまで必要な情報はないので、わざわざ画面を設けるよりも音楽を聴きながら別の行動が出来るような半モーダルの方が使いやすさが向上すると考えられたのかもしれない。

          コータロ| UIデザイ…

          ジュニアUIデザイナーが、Spotifyを分析してみた[再生画面編]

          コータロ| UIデザイナー

          ジュニアUIデザイナーが、Spotifyを分析してみた[詳細画面編]

          今回は詳細画面について分析していきます。前回までの記事が気になる方はこちらをご覧ください。 詳細画面は、「プレイリスト」「ポッドキャスト」「アーティスト」でそれぞれUIが異なったのでそれぞれ確認していきます。 「プレイリスト」 Navigation barエリアNavigation barの役割に関して スクロールすると、Navigation bar内の要素が、上記のように変化する。これを見ると、Navigation bar内には、「戻る」「タイトル」「Primary

          コータロ| UIデザイ…

          ジュニアUIデザイナーが、Spotifyを分析してみた[詳細画面編]

          コータロ| UIデザイナー

          ジュニアUIデザイナーが、Spotifyを分析してみた[検索画面編]

          前回のホーム画面に引き続き、今回はspotifyの検索画面について分析していきます。検索画面は、入力前・入力中・入力後の３段階に分けて画面を見ていきます。 【入力前】 Navigation barエリアカメラアイコンはどんな役割を持つのか？ こちらはSpotifyコードを読み込むためのカメラになる。Spotifyコードとは、カメラでバーコードを読み取ることで音楽がシェアできる機能になっています。ユーザーストーリーとしては、友達のお気に入りの曲を共有し、より音楽を楽しめた

          コータロ| UIデザイ…

          ジュニアUIデザイナーが、Spotifyを分析してみた[検索画面編]

          コータロ| UIデザイナー

          ジュニアUIデザイナーが、Spotifyを分析してみた[ホーム画面編]

          UIデザイナーとして、６ヶ月ほど働いたけれど、やはりデザインの引き出しの無さをすごく感じる。この課題を改善するために、ユーザー数の多いサービスを分析し、デザインの体験設計を考察したり、コンポーネントの表現を言語化し、自分の血肉にしていく。 というわけで、今回はSpotifyを分析する。ただ、全部やるのは大変なので、主要導線である検索から音楽を再生するところまでを対象にする。そして、今回はホーム画面について考察する。 Spotifyの経営方針ビジョン 収益モデル 収益源

          コータロ| UIデザイ…

          ジュニアUIデザイナーが、Spotifyを分析してみた[ホーム画面編]

          コータロ| UIデザイナー

          UIデザイン作成の考え方

          UIデザイナーは見栄えだけじゃなく使いやすさにもこだわる必要がある。そのために、必要な考え方をBONOというオンラインサロンの動画をもとに整理てみました。 ①サービスの方向性を決めるビジネスで成果を出すための基本は顧客理解。そのために、下記項目を言語化しながらサービスの方向性を決める。また、最終的には、これらの内容を他のメンバーとも共有するために資料にまとめておくのもすごく大切。 ②必要な機能のアイデア出し現在のユーザーの行動フローや心情を整理し、そこから具体的な課題や解

          コータロ| UIデザイ…

          UIデザイン作成の考え方

          コータロ| UIデザイナー

          AirbnbとGoogleTravelをトレースして感じたこと

          ・洗練されたアイコンを創りたいアイコンはサービスの世界観を象徴する。ネットからアイコンをコピペするのは効率的かもしれない。ただ、コピペだけでは表現しきれない瞬間がきっとくる。そんな時に、「全然作れません」ではデザイナーとして残念。美的センスが皆無だったとしても、最低限作れる必要がある。イメージとしては、素人からみても「あ、これはデザイナーが作ったアイコンだな」と思えるくらいは必要。そのために、これからもスキマ時間を活用して、学習を継続する。 ・Shadowを使いこなしたい。

          コータロ| UIデザイ…

          AirbnbとGoogleTravelをトレースして感じたこと

          コータロ| UIデザイナー

          1流のUIデザイナーになるために、フロントエンドは必須

          全くプログラム知識がない状態から、２週間ほど下記の動画教材を通じて学習した。 結果、全然わからん。HTMLとCSSは比較的簡単と言われるけど、それでも全然わからん。改めて、エンジニアってすごいなと思った。そんな中、今回の学習を通じて学んだことを2つまとめてみる。 ①エンジニアへのリスペクト１番はこれ。WEBサイトを作成するだけでもかなり難しいことが分かった。なので、エンジニアに実装をお願いする際には、コーディングしやすいようにデザインデータを作成するように心がける。具体的

          コータロ| UIデザイ…

          1流のUIデザイナーになるために、フロントエンドは必須

          コータロ| UIデザイナー