NOE

Yumemi.inc/UIデザイナー/(前職はゲームUIデザイナー/VR系)/個人事業…

NOE

Yumemi.inc/UIデザイナー/(前職はゲームUIデザイナー/VR系)/個人事業主として副業もしています。日々の学びや振り返りを書いています。

最近の記事

HCD-Net認定HCDスペシャリストに合格しました!

2022年度のHCD-Net認定HCDスペシャリストを受験しまして、無事合格しました🎉 HCD認定資格は新卒時代のゲーム会社にいた時に知って、勉強会にちょこちょこ参加しながらいつか取れたら嬉しいな〜と思っていたので、合格できてとっても嬉しいです。 ご報告も兼ねて、振り返りをnoteにまとめようと思います。 1.HCDの受験を意識し始めた時期〜受験までざっくり2022年度を取得しようと考えていて、受験に向けて意識し始めたのは2022年の7月ごろになります。 その時期までに取

    • 【 Atomic Design】に基づくCompormentsの整理の仕方

      「YUMEMI Design Advent Calendar 2022」の24日目担当のNOEです!(1日遅れてしまいました…) Atomic Design ~堅牢で使いやすいUIを効率良く設計する 五藤 佑典https://www.amazon.co.jp/dp/477419705X/ref=cm_sw_r_tw_dp_U_x_RsrMEbSZG6NDT @amazonJP 先日こちらの書籍を元にLTを行ったのでその内容をNOTEにも上げさせていただきます。 本書

      • LINE Green Badge Basicに合格しました

        最近、社内でLINEGreenBadgeという資格について知りました。 LINEアカウントを活用した広報活動やクーポンを使用した販促などが一般的になっている中、知識をつけたく今回受講して資格を取るに至りました。 講座ではLINEアカウントの基礎情報から活用方法までが幅広く記載されており、実際に活用すのを見越したイメージを掴むことができます。 なかなか情報量も多いので理解するのも難しかったですが、ユーザー目線的にも企業のアカウントの苦労などを知ることができて非常に楽しかっ

        • 【UIデザイン】iOSで配置する画像サイズ、Aspectfitを意識してみる🖼

          去年末ごろ、会社で携わった案件にてとある6画面の画像運用ルールをエンジニアさんや各所と連携し、仕様を定める取り組みをしたので備忘録としてnoteにまとめてみました。 iOSで画像をレイアウトする際に【Aspect Fit】や【Aspect Fill】という機能があるのですが、それを意識しながらデザイン上でレイアウトすることで各端末ごとのレイアウトルールを明確に定めることができます。後々の端末別のレイアウト問題や認識の齟齬をなるべく抑えることができて非常に連携しやすかったです

        HCD-Net認定HCDスペシャリストに合格しました!

        • 【 Atomic Design】に基づくCompormentsの整理の仕方

        • LINE Green Badge Basicに合格しました

        • 【UIデザイン】iOSで配置する画像サイズ、Aspectfitを意識してみる🖼

          【UIデザイナー】XcodeでiOSアプリを作ってみた

          年末に ・iOSアプリ開発集中講座 ・SwiftUI 徹底入門 を購入し、いくつかアプリを実際に作成してみました。 実際にコーディングができるようになりたいというわけではなく、UIデザイナーとして、アプリ開発者とレイアウトであったり、機能実現できるかの観点でいい連携ができるようになりたいと思い学習を始めてみました。 購入した本は下記になります。 以下作成したアプリと感想です。 01.ジャンケンアプリ iphoneアプリ開発集中講座の一番はじめに制作するアプリになりま

          【UIデザイナー】XcodeでiOSアプリを作ってみた

          【illustor】Android5/6でバグらないSVGを書き出すバッチ作成方法

          Androidバージョン5/6では、一定のパス数を超えた時にパスが歪んでしまうバグが発生してしまいます。(私は最近知りました:) 以降のバージョンでは特に問題ないもので、そういった現象が発生してしまいます。その場合該当するSVGを修正しないとなりません。 しかし、以降のバージョンで問題ないので、具体的な修正箇所が不明な場合、チェックなどで大幅に時間がかかってしまいます。 さらに、Sketch/figma/XDなどのUIツールで作成したアイコンなどをSVGは保存方法を変更する

          【illustor】Android5/6でバグらないSVGを書き出すバッチ作成方法

          【デザイナー】WEBのビジュアル制作で気をつけていること

          自分はビジュアルのみを担当するwebデザイン制作に関わり始めて半年〜1年くらいになります。 初めて関わった際はエンジニアさんにとてもご迷惑をおかけしていましたが、数回ほどお仕事としてLPサイトなどを制作するうちに、 ようやく ・ある程度自分ルールができてきた ・実装される方への不都合が少ないデザインカンプを作成できるようになった 気がするので(気がするので)、この度振り返りとして簡単な内容になりますがnoteにまとめてみました✨ 01.制作ソフトについて自分は主に ・

          【デザイナー】WEBのビジュアル制作で気をつけていること

          IT系カタカナ英語難しい!比較して振り返ってみる

          自分は業務で、 「知ってるけどちゃんと理解できてなさそうな言葉が多いな〜💦」 ということがよくあり、 思い返すと、類似したカタカナ英語 が苦手だな思いました。 なので今回は6つの項目でそれぞれ個人的に気になったIT系カタカナ英語を比較し、振り返ったものをまとめてみました! ※主にwebやアプリ開発に関する言葉になります。 ※順番は適当ですがご容赦ください。 01.アクセシビリティとユーザビリティって?IT業界にいると必ず聞く言葉ですね。改めて振り返ってみます。 ●ア

          IT系カタカナ英語難しい!比較して振り返ってみる

          【デザイナー】週末限定で1年間副業をやってみて学んだこと

          株式会社ゆめみでUIデザイナーをしているNOEです。 普段はゆめみでWEBやアプリのデザインをしています。 私は、2019年5月に前職のゲーム会社を退職したのですが、 前職は副業が原則禁止されており、外部との交流も非常に少ない会社でしたので、 「とにかくいろいろやってみたい!」 と思い退職した次の日から週末限定で副業を始めました✨ この度は副業をはじめてから現在まで丁度1年たった今を改めて振り返ってみようと思います。 01.やってみた副業の簡単な実績①〜⑤ 🟠その① 新

          【デザイナー】週末限定で1年間副業をやってみて学んだこと

          【配布】OGP画像のテンプレートと作成方法

          最近OGP画像を作成する機会があり、 個人的にFigmaにてテンプレートを作成したのですがせっかくなので 配布します〜!✨ 01.そもそもOGPとは? 「Open Graph protocol」の略称です。FacebookやTwitter、Google+、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。 SNSでリンクをシェアする時に各SNS特有のサイズで表示されるサム

          【配布】OGP画像のテンプレートと作成方法

          【デザイナー】開業届から確定申告までを税理士さんに依頼した話

          自分は2019年5月ごろ、前職を退職した次の日から土日メインで副業を初め、9月に本業もしながら個人事業主になりました✨ 自分には前職の同期に税理士の人がいて、税金のことが分からないと相談したところ、業務委託と言う形で開業から確定申告をまるっとサポートをお願いできることになりました! そして先日、無事確定申告の払込が完了しましたので振り返ってnoteにまとめることにしました🙆‍♀️ 01.何故自分でやらなかったのか?デザインに集中したかったからです。 確かに1からやってみて

          【デザイナー】開業届から確定申告までを税理士さんに依頼した話

          GIFでもJSONでもダメ…それならAPNGとwebPで綺麗なアニメーションを実装しよう!

          UIデザイナーのNOEです。 先日、お仕事でアプリのローディングアニメーションを作成したのですが、 当初予定していた 、 GIFの書き出しを、するとグラデーションがきれいに表現できず…😂 (※サムネイルはイメージです!) 悩んでいたところ、 ふと APNGというPNGの連番ファイル形式の存在 を思い出し、 エンジニアさんに協力いただいて、 なんとか理想通りのアニメーションの実装が可能になりました!✨ 今回はそんな、 ・GIFだと汚くなってしまう ・JSONで表現で

          GIFでもJSONでもダメ…それならAPNGとwebPで綺麗なアニメーションを実装しよう!

          【AfterEffect】初めての動画制作で学んだ、業務で役立つ4つのポイント

          こんにちは!デザイナーのNOEです。 先日業務で、はじめてアプリ紹介動画を作成しました! (↓いわゆるAppストアに並ぶアプリの操作について説明する動画です。) 今回先方がいる状態での業務、つまり戻しや修正が発生する中でそれらを際想定して作ったファイル内構造や自分ルールが割と基本的なことかと思いますが、心がけることでかなりスムーズに業務ができたのでその4つのポイントをまとめてみました。 1.二つ以上使う素材は全てコンポーネント化するコンポーネントとは、Adobe製品だと

          【AfterEffect】初めての動画制作で学んだ、業務で役立つ4つのポイント

          【UIデザイナー向け】Lottieってなんだ?illusutratorからlottieまで全行程メイキング

          はじめにはじめまして!私は現在株式会社ゆめみという会社でUIデザイナーをしています藤川と申します✨ 6月から入社をしたのですが、入社してすぐ『lottieやってみて』って言われまして、『lottieってそもそもなんだ。』状態だったんですが、死に物狂いで調べて一通りできるようになったので簡単にnoteにまとめてみました! そもそも私はlottieを触る前に右も左もわかりませんでした・・・・。 調べるときいろんな記事を見たところ、 lottieとは ①"JSON"という形式の

          【UIデザイナー向け】Lottieってなんだ?illusutratorからlottieまで全行程メイキング