さかい

食品ECのWebデザイナー／UIデザイン勉強中／23.04育休から復職／地図屋さんの営…

さかい

食品ECのWebデザイナー／UIデザイン勉強中／23.04育休から復職／地図屋さんの営業職からWebデザイナーへ、職種も業界も未経験でキャリアチェンジしました

  • 読書メモ

    読んだ本のメモや考察をします。

  • Daily UI

    UIデザインのスキル獲得のために「Daily UI」に挑戦中。考察や参考事例をまとめることで、今後も使えるテーマごとのリファレンスになればと思い更新しています。 独学なので、UIデザインへのフィードバックやアドバイス大歓迎です。

UIトレース：ミュージック（iOS）

このアプリを選んだ理由Appleの純正アプリで、HIGに沿ったお手本的な設計だと思い選びました。個人的にもiOS・iPadOS版をよく使っていて馴染みがあるので、設計を知ることで使い勝手の良さと紐づけて理解が深まると思いました。 トレースをした気づきUIパーツ 再生／停止、リピート／シャッフル、早送り／巻き戻しなど、コア要素【音楽再生】に関わるものはボタン。 【コンテンツ遷移】、【補助機能】などはアイコン。たとえばタブバーや、ダウンロード、オプションメニューなど。 曲

さかい

    • 【読んだ】機嫌のデザイン／秋田道夫

      なぜ読もうと思ったかなにかに追われると気持ちに余裕がなくなる、そうすると周りにもキツく当たってしまう。もしくは、言葉にしなくても所作や表情で不機嫌さが漂ってしまう。いい大人なんだから感情はコントロールできないとと思ったとき、Twitterで見かけて気になったので手に取りました。 ポイント１）何事につけ「期待するな」 機嫌をよく保つには、周りや自分に対しても「期待するな」。自分自身に期待をしなければ、失望したり余計に傷つくことはない。周囲に対して劣等感を抱くのは、「（自分は

      さかい

      • 【Daily UI】#008 404 Page

        課題▼404 エラーページ 食品ECのエラーページのイメージで制作しました。何か探したいあてがあって試していると404に辿り着くという想定で、探しものをフォローできるUI（動線配置）にしました。 気づき調査していると、出会う確率が低いページだからこそ「そこでストレスを溜めないように親切・リッチに」「シンプルな作りで迷わせない」の2つの方向性に分かれると感じました。 タブに表示される名称まで変えてあげると親切。すごく細かいことだけど、タブを並べてざっと見る時にも分かりやすい

        さかい

        • 【Daily UI】#007 Settings

          課題▼設定画面 ファッションアプリの設定画面のイメージで制作しました。数個アプリを見比べて、違いを生むのはどう要素を分けるかの情報設計＋ラベルの付け方だと思いました。 気づきSNSアプリは設定画面の各見出しにもアイコンや色があるなどデザイン要素が多い。そういう細かい差別化がアプリの個性になりそう。 調べることー 参考資料ZOZOTOWN Baycrews United Arrows URBAN RESEARCH UNIQLO キャプチャは個人情報が入りまくる

          さかい

        UIトレース：ミュージック（iOS）

        さかい

        マガジン

        • 読書メモ
          2本
        • Daily UI
          6本

        記事

          【Daily UI】#006 User Profile

          課題▼ユーザープロフィール クリエイターの作品投稿SNSのイメージで作成しました。Pinterestみたく作品をフォルダでまとめて、ポートフォリオにしたいなと思い設計しました。 気づき「自分のプロフィール」「他者のプロフィール」で必要な機能が違う。そこまで想定して作り込めなかった… 何を目的としたアプリかで、要素や見せ方がだいぶ変わる。印象重視だとアイコン画像の後ろに背景画像入れてるアプリも多い 参考見た勢いで英語のラベルが多くなったけど、実際は日本語を使うことが多いは

          さかい

          【Daily UI】#006 User Profile

          さかい

          【Daily UI】#002 Credit Card Checkout

          課題▼クレジットカード決済画面 アプリの想定をせず、単純に機能面だけ考えて制作しました。参考資料をふまえ、「掲載項目を最小限にして大変そうという心理ハードルを減らす」「キーボードを入力エリアに被せないことで入力位置を分かりやすくする」ことを意識しました。 気づき入力項目 様々なアプリの決済画面を見ると、入力の共通項目は「カード番号」「有効期限」「セキュリティコード」のたった3つでした。名前や支払い回数を入力するものもありますが、サービスの内容によっては入力項目を絞ることで

          さかい

          【Daily UI】#002 Credit Card Checkout

          さかい

          UIトレース：Twitter

          メジャーなアプリを模写することで、構成要素を学ぼう…という試みです。主にグラフィカルな部分を鍛えるトレーニングの目的でやります。初回はTwitter(iOS)に取り組みました。 トレースして学びたいことアプリの目的に対して、どういうUI要素を配置すべきか タイプフェイスの扱い方（フォント選び・サイズ・色など） 色の扱い方 要素間のマージンの取り方 figmaの使い方 Twitterをトレースしたタイプフェイス 日本語フォントは「ヒラギノ角ゴ Pro」、見出しのウ

          さかい

          UIトレース：Twitter

          さかい

          【Daily UI】#005 App Icon

          課題▼おくすり手帳アプリ 子どもが頻繁に風邪をひいて薬をもらうので、紙のおくすり手帳を持ち歩くよりアプリで管理できたら便利かな、というイメージで製作しました。「子ども」がイメージにあったので、安心感のグリーンを柔らかい色味で使用しました。 気づきアイコンの作り方自体を学んだ方がいい。円と箱に沿って要素を組み立てていくやつ イメージ先行で作ったけど、本来はアプリの機能を詰める→それを端的に表現したアプリアイコンであるべき ストアで「薬」で調べると、おくすり手帳的なアプリは

          さかい

          【Daily UI】#005 App Icon

          さかい

          【Daily UI】#001 Sign Up

          仕事だとなかなかUIを作ることがないので、制作のトレーニングとしてDaily UIをはじめます（4年前はCocodaやって挫折したっけ… 制作の意図や参考事例を書き留めることで、全部やりきったとき、自分にとってUIを作る上での辞書的な役割になればいいなと思います。 課題▼アプリの会員登録画面 賃貸探しサイトの登録画面のつもりで作成。気軽に物件をお気に入りに入れて見るサイトという想定で、最低限の情報かつシンプルな設計でサクッと登録できることを目指しました。 気づきそもそも

          さかい

          【Daily UI】#001 Sign Up

          さかい

          デザイナー5年目、キャリアを考え直す

          久しぶりにnoteを書きます。雑記です。 タイトルのきっかけは、育休からの復職と、そこで直面した環境の変化から。 私は新卒で営業職をしていて、ある時期には店舗検索ASP（平たく言うとコンビニやATMなどを探せるサイト）を商材として扱っていました。そのうち「もっと使いやすくできないか」「使う人の暮らしに馴染むサービスにならないか」と考え始め、「だったら自分で作れるようになりたい！」という経緯で職種・業種を変えてデザイナーになりました。それが2017年11月。 そこからかくか

          さかい

          デザイナー5年目、キャリアを考え直す

          さかい

          【読書メモ】いちばん大切なのに誰も教えてくれない段取りの教科書／水野学

          なぜ読もうと思ったのか細かい業務が増えてきて、「何からやろう」「何をやろう」「いつやろう」などあれこれ考えている間に、時間を浪費していると感じたから。 気付き仕事は、ルーティンに沿って行うことでスムースに進行できる。自分のタスクを分解し、ルーティンを見つけることが大切。 タスクを細分化し時間の見積をつけ、スケジュールする。時間が過ぎたら調子が出ていても次に移る。そうすれば、「時間が押してできなかった」を改善できる。 これからやること / どう活かす？・タスクを洗い出す

          さかい

          【読書メモ】いちばん大切なのに誰も教えてくれない段取りの教科書／水野学

          さかい

          できないことを認めて、ポジティブに挑む

          はじめまして。 都内でインハウスデザイナーをしているサカイといいます。 営業職からデザイナーへキャリアチェンジして3年目を迎え、「知っている」から「わかる」「できる」を目指すため、言語化することでより理解を深める練習をしたいと思い、noteをはじめます。 2020年、今年の目標いつも目標を立てても達成しきれず挫折していたのですが、目指すものがないと動くことすらしないなと思い、自分のお尻をたたくべく目標宣言です。 大きな方針はこれ。 日々の業務で出来ないことが多すぎて悔し

          さかい

          できないことを認めて、ポジティブに挑む

          さかい