みりん

インハウスUIデザイナー/すきなものは蕎麦とスノボー☃️!夏はひきこもりです

みりん

インハウスUIデザイナー/すきなものは蕎麦とスノボー☃️!夏はひきこもりです

最近の記事

DailyCocodaやってみた!~06音楽アプリの再生画面~

今回、情報設計をやりすぎた4の反省を踏まえて情報設計を軽く、さらにトレースをしてからcocodaのお題をやってみたら、結構良かったので記事にしました! 01から試行錯誤をしながら、やっています。現在、01/02/04の記事があります。(3と5は書いてません) 自己紹介 みりんです。インハウスで新卒2年目デザイナーとして働いています。今メインはUIで、ユーザビリティテストもやったりします。去年はUXデザインであるユーザー調査も行なっていました。 まだまだ全然ひよっこ🐣なので

    • Dribbleで見つけたデザインをトレース04〜音楽再生画面縦タブ〜

      04はこちらです! デザインをみた所感▼情報設計について ・縦タブ最近中国のECアプリで流行ってるみたい ・1画面目タイトル2つある 2つ目のタイトルの方が大きい ・2つ目のタイトルとタブが関連しているので、大項目に対して、それぞれページがある。 ・大項目は、2画面目でリストになっている ・画面によって、プレイヤー(音楽どこまで再生してるかの指標)の向きが変わるのはユーザーが混乱しそう。2画面目、左にあるけど、親指の可動領域そんなにないからつらそう ・(チームメンバーより追

      • Dribbleで見つけたデザインをトレース03〜音楽再生画面〜

        こちらをトレースしました! 動き付き デザインをみた所感▼情報設計について ・NEXTやYou may also likeの項目があるので、いろんな曲と出会える感じかな ・当たり前だけど、メインコンテンツであるジャケットが大きめ。 ・音楽アプリは、曲名大きめフォントでアーティスト薄めor小さめフォントになってる。 ・Artistページでアーティストについてる星はわかるが、ハートは何に対してだろう? ▼グラフィックについて ・余白たっぷり ・流行りの半モーダル ・ドロ

        • 情報設計しっかりめにDailyCocodaやってみた! ~04料理アプリの検索画面~

          この記事は、インハウスで働く新卒2年目のUIデザイナーが試行錯誤しながらcocodaをやっている話です。 主にどんなことを考えてこの画面が出来上がったかとやUI作成の流れと考えることの備忘録です。わたしのメモ的な部分が大きいですが、駆け出しの人やcocodaをやろうかなと思ってる人、cocodaをやっている人に参考になると思います! 今回は、要件を決めるところから、その要件をきちんとUIに落とし込む流れを試してみたのでそれを書きました。 自己紹介 みりんです。インハウス

        DailyCocodaやってみた!~06音楽アプリの再生画面~

        • Dribbleで見つけたデザインをトレース04〜音楽再生画面縦タブ〜

        • Dribbleで見つけたデザインをトレース03〜音楽再生画面〜

        • 情報設計しっかりめにDailyCocodaやってみた! ~04料理アプリの検索画面~

          要件をきっちりUIに落とし込む 〜はじめてのUIデザインを読んで〜

          この記事は、(発売から大分経って、いまさらなのですが)はじめてのUIデザイン3章に書かれていることを紹介する記事です。とくにわたしがめっちゃためになる…!となった「要件をUIのペーパープロトタイプに落とし込む方法」を中心に書いてあります。 最後にも書くのですが、3章が大大大好きで会社でもめっっっちゃいいよと布教しています(笑) 実務では機能を作る際、HCDに沿ってだいたい 1.ユーザーインタビューををして 2.ペルソナ作って 3.CJM引いて 4.ユーザーストーリーを作

          要件をきっちりUIに落とし込む 〜はじめてのUIデザインを読んで〜

          Dribbleで見つけたデザインをトレース02

          今回はかなり表面上の考察しかありません。短いのでパパッとこんな感じか〜と見ていただければとおもいます。 Dribbleからのトレースはレイアウト感覚が身につくな。と感じます。 本日はこちらをトレースさせていただきました。 リンク飛んでいただくと、アニメーション付きのデザインがみれます 1画面目 ・癖として、図形小さく見えてるかつ、中心によってる ・画面的にはアプリっぽいのに、webページのように画像をはみ出すのおしゃれ。 ・コンテンツデータを自社で用意する場合とかサイ

          Dribbleで見つけたデザインをトレース02

          Dribbleで見つけたデザインをトレースする手順とトレース01

          dribbleのデザインがとっても素敵だったのでトレースしてみました。一度やり終わってから、デバイスサイズごとに揃えた方がいいな。と思ってやり直しました。この手順でやれば、やり直さなくて大丈夫です!👌 こちらの作品をトレースさせていただきました! 準備1. 画像コピーしてFigma(Sketchでもなんでも)に持ってくる 2. 画像のデバイスを特定してサイズを合わせる 画像を縮小(または拡大)して、デバイスのサイズに合わせます。 最近だと、だいたいiPhoneXです。

          Dribbleで見つけたデザインをトレースする手順とトレース01

          DailyCocodaやってみた!~02新規登録画面~

          この記事は、インハウスで働く新卒2年目のUIデザイナーがcocodaをやってみた話です。 主にどんなことを考えてこの画面が出来上がったかとやUI作成の流れと考えることの備忘録です。わたしのメモ的な部分が大きいですが、駆け出しの人やcocodaをやろうかなと思ってる人、cocodaをやっている人に参考になると思います! 自己紹介大学では芸術工学部に行きグラフィック、プロダクト、音、テキスタイル、人間工学、プログラミングなどなど浅く広く学びました。メディアアートの研究室に所属

          DailyCocodaやってみた!~02新規登録画面~

          iPhoneXとiPhone8のヘッダーとフッターの高さ調べて見た

          dailyUIでプロフィール画面を作った時に、レビューで左上の戻るボタンと、フッターのタブが小さくて押しにくそうiOS標準より狭くデザインしていない?と言われました。 そこで、ヘッダーとフッターの高さをしらべてみました! 自己紹介 みりんです。インハウスで新卒2年目デザイナーとして働いています。今メインはUIで、ユーザビリティテストもやったりします。去年はUX寄りユーザー調査も行なっていました。 まだまだ全然ひよっこ🐣なのですこしずつ毎日頑張ります! Twitter :

          iPhoneXとiPhone8のヘッダーとフッターの高さ調べて見た

          DailyCocodaやってみた!~01プロフィール画面~

          この記事は、インハウスで働く新卒2年目のUIデザイナーがcocodaをやってみた話です。 主にどんなことを考えてこの画面が出来上がったかやUI作成の流れと考えることの記録です。駆け出しの人やcocodaをやろうかなと思ってる人、cocodaをやっている人に参考になると思います! 自己紹介大学では芸術工学部に行きグラフィック、プロダクト、音、テキスタイル、人間工学、プログラミングなどなど浅く広く学びました。メディアアートの研究室に所属して不真面目でしたが(笑)、UnitとP

          DailyCocodaやってみた!~01プロフィール画面~

          UIやデザインのトレンドを毎日チェックするのに便利なPanda

          UIのトレンドどうやってチェックしてますか? DribbleやBehance毎日チェックしてる人多いかと思います このPandaを使えば、 Dribbbleなどのデザイン系のサイトから人気のあるデザインをひとまとめに表示してくれます! 左側でサイトを選んで、きになるものがあったら、クリック! 右側に詳細がスライドででてきます 左側のどのサイトを表示するかは、カスタマイズ可能で こんな風に、たくさんあるのでAddを押すだけです デザインカテゴリだけで201!!!

          UIやデザインのトレンドを毎日チェックするのに便利なPanda

          SketchでUIトレース ~Twitter~

          プロフィール画面とタイムラインの2画面をトレースし、フォント、カラー、マージンをまとめました。 このブログを参考にしました! トレースの仕方はこの記事がめちゃくちゃ参考になるかと思います! 【プロフィール画面】 左がスクショで右がトレースしたもの ああ ツイートを晒してしまって恥ずかしい、、、w おやすみモードの方がタブメニューのところに区切りがはいるのでトレースしやすかったです。 iphoneXやっぱ画面長いなあ〜 【タイムライン】 友達のツイートなので、ぼかし

          SketchでUIトレース ~Twitter~