さかい

食品ECのWebデザイナー、プロモーションデザインが主/UIデザイン勉強中/地図屋さん…

さかい

食品ECのWebデザイナー、プロモーションデザインが主/UIデザイン勉強中/地図屋さんの営業職からWebデザイナーへ、職種も業界も未経験でキャリアチェンジしました

マガジン

  • 読書メモ

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

  • Daily UI

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

記事一覧

【読書メモ】日日是好日/森下典子

なぜ読もうと思ったかSNSで「この本を読んだことがきっかけで◯◯を始めました」という投稿を見て、人の行動を変えるほどの内容・文章ってどんなものだろう?と興味を持っ…

さかい
2か月前
1

UIトレース:ミュージック(iOS)

このアプリを選んだ理由Appleの純正アプリで、HIGに沿ったお手本的な設計だと思い選びました。個人的にもiOS・iPadOS版をよく使っていて馴染みがあるので、設計を知ること…

さかい
1年前

【読書メモ】機嫌のデザイン/秋田道夫

なぜ読もうと思ったかなにかに追われると気持ちに余裕がなくなる、そうすると周りにもキツく当たってしまう。もしくは、言葉にしなくても所作や表情で不機嫌さが漂ってしま…

さかい
1年前
8

【Daily UI】#008 404 Page

課題▼404 エラーページ 食品ECのエラーページのイメージで制作しました。何か探したいあてがあって試していると404に辿り着くという想定で、探しものをフォローできるUI(…

さかい
1年前

【Daily UI】#007 Settings

課題▼設定画面 ファッションアプリの設定画面のイメージで制作しました。数個アプリを見比べて、違いを生むのはどう要素を分けるかの情報設計+ラベルの付け方だと思いま…

さかい
1年前
1

【Daily UI】#006 User Profile

課題▼ユーザープロフィール クリエイターの作品投稿SNSのイメージで作成しました。Pinterestみたく作品をフォルダでまとめて、ポートフォリオにしたいなと思い設計しまし…

さかい
1年前

【Daily UI】#002 Credit Card Checkout

課題▼クレジットカード決済画面 アプリの想定をせず、単純に機能面だけ考えて制作しました。参考資料をふまえ、「掲載項目を最小限にして大変そうという心理ハードルを減…

さかい
1年前
2

UIトレース:Twitter

メジャーなアプリを模写することで、構成要素を学ぼう…という試みです。主にグラフィカルな部分を鍛えるトレーニングの目的でやります。初回はTwitter(iOS)に取り組みまし…

さかい
1年前
1

【Daily UI】#005 App Icon

課題▼おくすり手帳アプリ 子どもが頻繁に風邪をひいて薬をもらうので、紙のおくすり手帳を持ち歩くよりアプリで管理できたら便利かな、というイメージで製作しました。「…

さかい
1年前
4

【Daily UI】#001 Sign Up

仕事だとなかなかUIを作ることがないので、制作のトレーニングとしてDaily UIをはじめます(4年前はCocodaやって挫折したっけ… 制作の意図や参考事例を書き留めることで…

さかい
1年前
1

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

久しぶりにnoteを書きます。雑記です。 タイトルのきっかけは、育休からの復職と、そこで直面した環境の変化から。 私は新卒で営業職をしていて、ある時期には店舗検索ASP…

さかい
1年前
14

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

なぜ読もうと思ったのか細かい業務が増えてきて、「何からやろう」「何をやろう」「いつやろう」などあれこれ考えている間に、時間を浪費していると感じたから。 気付き仕…

さかい
3年前
3

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

はじめまして。 都内でインハウスデザイナーをしているサカイといいます。 営業職からデザイナーへキャリアチェンジして3年目を迎え、「知っている」から「わかる」「でき…

さかい
4年前
7
【読書メモ】日日是好日/森下典子

【読書メモ】日日是好日/森下典子

なぜ読もうと思ったかSNSで「この本を読んだことがきっかけで◯◯を始めました」という投稿を見て、人の行動を変えるほどの内容・文章ってどんなものだろう?と興味を持ったから。

数年前に、映画化されたのをアマプラで見たけど、ぼんやりとしか内容を覚えていなかったのもあって書籍を手に取りました。最近少し時間があって、ビジネス以外の本を読みたかったのもきっかけでした。

感想自分との向き合い方を、15のヒン

もっとみる
UIトレース:ミュージック(iOS)

UIトレース:ミュージック(iOS)

このアプリを選んだ理由Appleの純正アプリで、HIGに沿ったお手本的な設計だと思い選びました。個人的にもiOS・iPadOS版をよく使っていて馴染みがあるので、設計を知ることで使い勝手の良さと紐づけて理解が深まると思いました。

トレースをした気づきUIパーツ

再生/停止、リピート/シャッフル、早送り/巻き戻しなど、コア要素【音楽再生】に関わるものはボタン。

【コンテンツ遷移】、【補助機能】

もっとみる
【読書メモ】機嫌のデザイン/秋田道夫

【読書メモ】機嫌のデザイン/秋田道夫

なぜ読もうと思ったかなにかに追われると気持ちに余裕がなくなる、そうすると周りにもキツく当たってしまう。もしくは、言葉にしなくても所作や表情で不機嫌さが漂ってしまう。いい大人なんだから感情はコントロールできないとと思ったとき、Twitterで見かけて気になったので手に取りました。

ポイント1)何事につけ「期待するな」

機嫌をよく保つには、周りや自分に対しても「期待するな」。自分自身に期待をしなけ

もっとみる
【Daily UI】#008 404 Page

【Daily UI】#008 404 Page

課題▼404 エラーページ
食品ECのエラーページのイメージで制作しました。何か探したいあてがあって試していると404に辿り着くという想定で、探しものをフォローできるUI(動線配置)にしました。

気づき調査していると、出会う確率が低いページだからこそ「そこでストレスを溜めないように親切・リッチに」「シンプルな作りで迷わせない」の2つの方向性に分かれると感じました。

タブに表示される名称まで変え

もっとみる
【Daily UI】#007 Settings

【Daily UI】#007 Settings

課題▼設定画面
ファッションアプリの設定画面のイメージで制作しました。数個アプリを見比べて、違いを生むのはどう要素を分けるかの情報設計+ラベルの付け方だと思いました。

気づきSNSアプリは設定画面の各見出しにもアイコンや色があるなどデザイン要素が多い。そういう細かい差別化がアプリの個性になりそう。

調べることー

参考資料ZOZOTOWN

Baycrews

United Arrows

もっとみる
【Daily UI】#006 User Profile

【Daily UI】#006 User Profile

課題▼ユーザープロフィール
クリエイターの作品投稿SNSのイメージで作成しました。Pinterestみたく作品をフォルダでまとめて、ポートフォリオにしたいなと思い設計しました。

気づき「自分のプロフィール」「他者のプロフィール」で必要な機能が違う。そこまで想定して作り込めなかった…

何を目的としたアプリかで、要素や見せ方がだいぶ変わる。印象重視だとアイコン画像の後ろに背景画像入れてるアプリも多

もっとみる
【Daily UI】#002 Credit Card Checkout

【Daily UI】#002 Credit Card Checkout

課題▼クレジットカード決済画面
アプリの想定をせず、単純に機能面だけ考えて制作しました。参考資料をふまえ、「掲載項目を最小限にして大変そうという心理ハードルを減らす」「キーボードを入力エリアに被せないことで入力位置を分かりやすくする」ことを意識しました。

気づき入力項目

様々なアプリの決済画面を見ると、入力の共通項目は「カード番号」「有効期限」「セキュリティコード」のたった3つでした。名前や支

もっとみる
UIトレース:Twitter

UIトレース:Twitter

メジャーなアプリを模写することで、構成要素を学ぼう…という試みです。主にグラフィカルな部分を鍛えるトレーニングの目的でやります。初回はTwitter(iOS)に取り組みました。

トレースして学びたいことアプリの目的に対して、どういうUI要素を配置すべきか

タイプフェイスの扱い方(フォント選び・サイズ・色など)

色の扱い方

要素間のマージンの取り方

figmaの使い方

Twitterをト

もっとみる
【Daily UI】#005 App Icon

【Daily UI】#005 App Icon

課題▼おくすり手帳アプリ
子どもが頻繁に風邪をひいて薬をもらうので、紙のおくすり手帳を持ち歩くよりアプリで管理できたら便利かな、というイメージで製作しました。「子ども」がイメージにあったので、安心感のグリーンを柔らかい色味で使用しました。

気づきアイコンの作り方自体を学んだ方がいい。円と箱に沿って要素を組み立てていくやつ

イメージ先行で作ったけど、本来はアプリの機能を詰める→それを端的に表現し

もっとみる
【Daily UI】#001 Sign Up

【Daily UI】#001 Sign Up

仕事だとなかなかUIを作ることがないので、制作のトレーニングとしてDaily UIをはじめます(4年前はCocodaやって挫折したっけ…

制作の意図や参考事例を書き留めることで、全部やりきったとき、自分にとってUIを作る上での辞書的な役割になればいいなと思います。

課題▼アプリの会員登録画面
賃貸探しサイトの登録画面のつもりで作成。気軽に物件をお気に入りに入れて見るサイトという想定で、最低限の

もっとみる
デザイナー5年目、キャリアを考え直す

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

久しぶりにnoteを書きます。雑記です。
タイトルのきっかけは、育休からの復職と、そこで直面した環境の変化から。

私は新卒で営業職をしていて、ある時期には店舗検索ASP(平たく言うとコンビニやATMなどを探せるサイト)を商材として扱っていました。そのうち「もっと使いやすくできないか」「使う人の暮らしに馴染むサービスにならないか」と考え始め、「だったら自分で作れるようになりたい!」という経緯で職種

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

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

なぜ読もうと思ったのか細かい業務が増えてきて、「何からやろう」「何をやろう」「いつやろう」などあれこれ考えている間に、時間を浪費していると感じたから。

気付き仕事は、ルーティンに沿って行うことでスムースに進行できる。自分のタスクを分解し、ルーティンを見つけることが大切。

タスクを細分化し時間の見積をつけ、スケジュールする。時間が過ぎたら調子が出ていても次に移る。そうすれば、「時間が押してできな

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

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

はじめまして。
都内でインハウスデザイナーをしているサカイといいます。

営業職からデザイナーへキャリアチェンジして3年目を迎え、「知っている」から「わかる」「できる」を目指すため、言語化することでより理解を深める練習をしたいと思い、noteをはじめます。

2020年、今年の目標いつも目標を立てても達成しきれず挫折していたのですが、目指すものがないと動くことすらしないなと思い、自分のお尻をたたく

もっとみる