マガジンのカバー画像

Farmnote Member's Notes

223
ファームノートで働く人々のマガジンです。 「世界の農業の頭脳を創る」ことを目指して日々奮闘している僕らの日常や学びなどを発信しています。
運営しているクリエイター

#UIデザイン

Daily UI #001 Sign Upにチャレンジ!

ファームノートでUXデザイナーをやっている秋山ウテです。 Daily UIにチャレンジして力つけるぞ!Daily UIっていう、UI力を100日間鍛えるプログラムに参加しました〜 いろんなお題が毎日メールできて、それをやる感じ。 UI力もつけて、表現力鍛えるっす〜 どんなサービスをイメージしているか?co-inっていうサービスを考えてます。 僕は小銭が大嫌いなので、万が一手元にあったら銀行にあずけてます。 ただ、銀行が遠い&平日の限られた時間しか受け付けてくれない…

Daily UI #002 Credit Card Checkoutにチャレンジ!

ファームノートでUXデザイナーをやっている秋山ウテです。 2日目に突入です。 クレジットカードの入力フォームにチャレンジ今回は、クレジットカード(デビットカードも可)の入力フォーム。 ECとかが普及して、みなさんも入力することが多いのではないでしょうか。 フォームのめんどいポイントかくいう僕もEC使うので、クレジットカードの情報を入力します。 でも、多くの場合入力がめんどいです。 ①カード番号、②名義人の名前、③有効期限、④セキュリティコードを入れる必要があります。

Daily UI #003 Landing Pageにチャレンジ!

ファームノートでUXデザイナーをやっている秋山ウテです。 本日はランディングページを作る課題です。 ファームノートでは、僕のnote一式が日報代わりになっておりまして、多くの方が温かい目で見てくれています。 特に承認を得ずにガンガンUPしているのですが、前回のアップ後に先輩から「Daily UXをやるんじゃなくて、Daily UIをやるんだよ」や、「Dribbleで参考になるやつ探してからやるんだよ」とありがたい御言葉を賜りました。 そこで、今回からは特にUI面に比重を

Daily UI #005 自社のアイコンをもし作ってみたら…

ファームノートでUXデザイナーをやっている秋山ウテです。 本日はアプリのアイコンを作る課題です。 もし、自社のアプリアイコンを僕が作るとしたら?ってことで、やってみました。 Dribbleの作品を見て思ったこと同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ①どうやら黄金比なるものを用いている ②フラットなテイストが多い ③使用している色が多くても4〜5色である 順番に見ていきましょー。 ①黄金比でアイコン作るのむずかった前回の課題で

Daily UI #004 「電卓」にチャレンジ!

ファームノートでUXデザイナーをやっている秋山ウテです。 本日は電卓を作る課題です。 Dribbleにアップ中の作品を見て思ったこと同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ①無機質な作りのものが多い(という印象) ②パーツそれぞれに黄金比が用いられているケースがある ③ボタンが丸くシャドウがかかっている(押せる感) 順番に見ていきまーす。 ①電卓をそのまま作るとめっちゃ無機質電卓をそのまま再現すると、当たり前ですが機械的で無機

Daily UI #006 プロフィールページに挑戦

ファームノートでUXデザイナーをやっている秋山ウテです。 本日はユーザープロフィールを作る課題です。 SNSのプロフィール画面をイメージして作りましたー。 Dribbleの作品を見て思ったこと同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ①カバー写真が画面のふちまで覆っている ②プロフィール写真が丸く縁取られている ③下につづく感を出している 順番に見ていきましょー。 ①カバー写真が画面いっぱいに画面いっぱいに写真があることで、迫力

Daily UI #008 異常を伝え次へ誘導

ファームノートでUXデザイナーをやっている秋山ウテです。 本日は404ページを作る課題です。 日本人が作った404ページと海外の方の404ページに違いはありましたが、2つの点で共通するものがありました。 現状を伝え次への移動を促す同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ①エラー(異常)を伝える ②日本においては”謝り”、海外では”Oops!” ③ホームボタンなどで次への移動を促している 順番に見ていきましょー。 ①エラー(異常

Daily UI #010 ニュルっと出てくるシェアボタン

ファームノートでUXデザイナーをやっている秋山ウテです。 今回、初めてアニメーションを用いて、シェアボタンにチャレンジしました。 普段はFigmaを使っているんですが、Atomicを使ってやってます。 SNSボタン多すぎ問題をどうするべきか同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ①折りたたみ式のボタンが多い ②横か縦への動きが多い ③シェアのアイコンは2パターン 順番に見ていきましょー。 ①折りたたみ式のボタンが多いSNSの数

Daily UI #009 よく使うものほど下に配置されてる音楽アプリ

ファームノートでUXデザイナーをやっている秋山ウテです。 今回は音楽アプリに挑戦しました。 よく使うボタンほど下に配置されてる…!?同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ①「前へ、再生、次へ」はほぼ必ず下に配置 ②気持ちいい出現、イーズアウト300ms ③Likeボタンが多い(ストリーミング系の影響?) 順番に見ていきましょー。 ①「前へ、再生、次へ」はほぼ必ず下に配置スマホに音楽再生アプリ(特にストリーミング系)の場合、ほ

Daily UI #011 エラーの原因とネクストアクションの導線を伝える

ファームノートでUXデザイナーをやっている秋山ウテです。 今回は完了&失敗メッセージにFigmaで挑戦しました。 try againからのsubmitのアニメーションは妥協しました。すんませんm(_ _)m いい作品は、視覚、導線面が優れていた同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ①視覚面 - 色・アイコンでもそれっぽいメッセージを伝えている ②導線面(1)- エラーの原因がわかりやすい ③導線面(2) - ネクストアクションが

Daily UI #012 ECは、3つのゴールに向かって導線が作られていそう

ファームノートでUXデザイナーをやっている秋山ウテです。 今回はECサイトにFigmaで挑戦しました。 で、海外の人がよく反応してくれるので、日本ならではの商品なにかなと思い、卵かけご飯(これ日本ぐらいしか食べられないらしいですね。)を題材にしました。 最終的に3つのゴールがある…かも同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ①視覚面 - 手に取れない分写真を大きく表示している ②導線面 - 最終的に3つの着地点を用意している ③情

Daily UI #013 ビジネス系とプライベート系のチャットでは情報配置が違った

ファームノートでUXデザイナーをやっている秋山ウテです。 今回はダイレクトメッセージにFigmaで挑戦しました。 右から自分&左から相手or左から自分と相手同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ①Instagram、LINEなどなどは自分は右、相手は左から ②ビジネス系のチャットは自分も相手も左から ③カーニングにも挑戦 プライベートでよく使うメッセージアプリとビジネス系のメッセージアプリには情報の配置に違いがありました。

Daily UI #016 UXを損なうポップアップとどう向き合うか

ファームノートでUXデザイナーをやっている秋山ウテです。 今回はポップアップにFigmaで挑戦しました。 また、下記記事を参考にしています。 一般的にはユーザーに嫌われるポップアップ同じ課題作がDribbleにも上がっているんですが、見て思ったのはこんな感じ。 ・「SALE開催中」や「今すぐユーザー登録」などの内容が多い印象 ・画面いっぱいに表示されるものが多い印象(PCを想定している?) 一方で、記事によると、購入やユーザー登録などのコンバージョンを意識したポップ

前言撤回!オブジェクトベースのUI設計をやるべき3つの理由

ファームノートでUXデザイナーをやっている秋山ウテです。 おかげさまで、現在結構大きめの改修案件を担当させてもらってます。 画面の数がかなり多いので、どうやって分類しようか考えています。 目次 オブジェクトベースのUI設計って? 商品→注文する=○、注文する→商品=✗ 僕も危うくタスクベース脳になるところだった ①UIがわかりやすくなる ②ユーザーが好きな手順で目的を実現できる ③開発者がデザインの意図を理解しやすくなる まとめ 今回は、この本の特集「速攻改善 UIデ