Yudai Sasaki

Saas事業のプロダクトデザイナーをしています。 学んだことなどを発信します。

Yudai Sasaki

Saas事業のプロダクトデザイナーをしています。 学んだことなどを発信します。

マガジン

  • お気に入り

  • AI関連

  • UI/UX

  • Feedforce Designers

    • 28本

    フィードフォースのデザイナーが執筆した note を集めたマガジンです。

  • Web制作

最近の記事

Googleのデザイナーから学ぶ UI / UX デザイン 後編

前回の続きになります。 引き続き講座で学んだ、重要だと感じた箇所をメモしたものになります。 FigmaとProtoPieで行うアプリの模写ライトモードとダークモードのVariable作成 講義の初めは模写から始まり、ライトモード、ダークモードの変数管理についてデザインしました。 まずVariableを指定し、デザインで使用したColorがVariableで指定したカラーに変更できているか確認します。 ProtoPieでプロトタイプを作成 スクロールアクションを追加

    • 【読書記録】15分でOKに! バナーデザインはかどり辞典 for + Photoshop + Illustrator

      普段仕事で使うデザインツールはFigmaが95%くらいでPhotoshopやIllustratorを使用する機会ほとんどありません。 デザイン技術向上と使い方を忘れたとならないため、毎日15分ほどでできる本書を購入し学習を進めました。 目的Photoshop、Illustratorのツールスキルの維持と向上 デザインのブラッシュアップ方法を知る デザインの引き出しを増やす クリックを誘う一体感のあるドロップシャドウのっぺりしたデザインにドロップシャドウを使って奥行きを

      • Googleのデザイナーから学ぶ UI / UX デザイン 前編

        これは動画学習サービスのColosoにある、「 Googleのデザイナーから学ぶ UI / UX デザイン 」の講座を受けたメモと制作物をまとめています。 受講した目的世界で活躍するUI / UX デザイナーのキャリアから築かれたデザインプロセスを知りたい プロダクトデザインスキルを引き上げる ProtoPieでの作成・共有方法を知る 生成AIによって作業の効率化とクオリティを高める はじめに「 優秀なデザイナー 」 になる方法 リサーチ、企画は重要な要素だが結局

        • タイポグラフィにおける文字間調整の考え方〜美しさだけでなく、読みやすさを確保するためのレタースペーシング

          これは?本と著者の今市さんのレタースペーシングのセミナー視聴して、重要だと感じた部分をメモしています。 目的美しいレタースペーシングとは何かを知りたい レタースペーシングの言語化し説明できるようになりたい 日本語と英語それぞれでレタースペーシングの気をつけるポイントを知りたい レタースペーシングとは見出しやロゴタイプに対してそれらを構成する全体の文字間が視覚均等に見えるよう調整する行為。 同じグループでも間隔が崩れると別のグループと認識してしまう。 良いスペーシング

        Googleのデザイナーから学ぶ UI / UX デザイン 後編

        • 【読書記録】15分でOKに! バナーデザインはかどり辞典 for + Photoshop + Illustrator

        • Googleのデザイナーから学ぶ UI / UX デザイン 前編

        • タイポグラフィにおける文字間調整の考え方〜美しさだけでなく、読みやすさを確保するためのレタースペーシング

        マガジン

        • お気に入り
          5本
        • AI関連
          4本
        • UI/UX
          11本
        • Feedforce Designers
          28本
        • Web制作
          7本
        • Figma
          11本

        記事

          0から始めるAfter Effects、実務でフル活用できる2Dモーション講座

          Colosoという動画教材で AfterEffectsの操作と教材を下にモーショングラフィックスを作成したので学習中のメモや単語をまとめています。 AfterEffectsは初めて触るので基礎から学べる講座を選びました。 モーションデザイナーの高瀬瞬輔さんが実際の現場でも活用性の高いモーショングラフィックスを初心者でもわかりやすいよう丁寧に解説されています。 モーショングラフィックは情報量を小出しにして、順番に情報を出して見る人に伝わるよう設計します。そのため動画を通じて

          0から始めるAfter Effects、実務でフル活用できる2Dモーション講座

          【読書記録】デザインの仕事がもっとはかどるAdobe Firefly活用テクニック50

          生成AIについて、なんとなく知ってるぐらいで活用する場面はほとんどありませんでした。 なのでAdobe Fireflyでどんなことができるかを、まずは理解して業務で活用できそうな知識をまとめました。 画像素材を生成してくれる以前ならAdobe Stockで自分が欲しい素材を探し、ダウンロードして調整する作業でしたが「生成塗りつぶし」を使用しプロンプトを書くことでいい感じの素材を生成してくれました。時間の短縮につながりますね。生成された合成素材を描画モードで調整します。 気

          【読書記録】デザインの仕事がもっとはかどるAdobe Firefly活用テクニック50

          【読書記録】Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り

          今年の2月よりデジタルプロダクトデザイナーとして転職しました。 転職先ではデザインシステムがすでに存在していたので、キャッチアップの目的で本書を手に取りました。 現場ではエンジニアと連携して実装を進めるのでバリアブルや開発機能モードについても書かれていたため、とても勉強になりました。 本書ではチュートリアルを進め、実践を通して「どのように作るのか」を学べます。あとで見返せるように印象的な箇所、重要だと感じた部分をまとめています。 オートレイアウト今まで、最低限の機能しか使

          【読書記録】Figma for デザインシステム デザインを中心としたプロダクト開発の仕組み作り

          【読書記録】Photoshop & Illustratorデザインテクニック大全

          日々の業務はFigmaをメインに作業していますが、表現のバリエーションを増やす目的とツールの理解を深めるため本書を購入してチュートリアルを実践しました。よく見かけるビジュアルはどうやって作っているのだろうという興味もあります。 記事ではあとで見返せるよう、実際の業務でも使えそうなテクニックをまとめています。 グリッチエフェクトを作る動きの少ないデザインに動きを加えたり、注目を集めたりするのに効果的です。デザインに動きを加えたり、注目を集めたりできます。 フィルターギャラ

          【読書記録】Photoshop & Illustratorデザインテクニック大全

          【読書日記】UI GRAPHICS

          レバレッジ読書を参考に重要だと感じた箇所を載せ、後で見直せるようにし自分の行動へ落とし込むことを目的としています。 本を読みながらその時に感じたことをメモし、後で読み返せるように書き溜めています。 この本を読む目的現在デジタルプロダクトデザイナー1年目として、世界の優れたUI/UXデザインの事例と、この領域に携わる研究者や実践者による知見や考え方を知ることで知識を深め、視野を広げたいと考え選びました。 文章のハイライト1.思考とジェスチャーとのあいだの繊細なインタラクショ

          【読書日記】UI GRAPHICS

          ゼロから始めるUI設計

          今回はオブジェクト指向の実践編としてBONOのゼロから始めるUI設計に挑戦しました。前回のオブジェクト指向について学んだnoteは下記になります。 概要として「出張申請サービスの詳細ページ」を作成する過程で、「要件」「目的」に沿って、デザインへ落とし込むスキルを鍛え、完成するまでの全体像を理解しようという内容です。 今回作成したのは「何を達成したいか」「何が必要か」最初の要件定義から入り、1度作って終わりではなく「これで課題が達成できているのか?」を何回もぶつけブラッシュ

          ゼロから始めるUI設計

          Webアクセシビリティを理解したい

          業務で視覚障害者・色弱者のアクセシビリティを考慮したサイト制作に携わるため事前に自分の理解を深めるのと、チームに共有する目的で書きました。 視覚に関してのアクセシビリティでよく聞くのはコントラストや色彩ですが、他考慮すべき点は何か。また全盲や弱視の方も考慮したアクセシビリティとは何かを調べています。 今回デジタル庁のウェブアクセシビリティ導入ガイドブック、freeeアクセシビリティー・ガイドラインを参考にさせていただきました。 freeeはより具体的な内容が書かれている印

          Webアクセシビリティを理解したい

          デザインの仕組み講座【後編】コミュニケーション(グラフィック)デザインの基礎

          ストアカでデザインの仕組み講座【前編】を受け、すごく勉強になる内容だったので、今回の後編も迷わず申し込みました! 【後編】も3時間の超ボリュームでしたが、講師の遠藤大輔さんの人柄が素晴らしく、楽しく・わかりやすい、そしていつまでも聞いていたい学びの深い時間を過ごすことができました。 後編の内容テーマは『「グラフィックデザイン」の基礎的な型を論理的に解説。感覚に理論を組み込み、自分のデザインを次のレベルへ。』です。 現役でゴリゴリに活躍されているデザイナーさんの教えを受けれ

          デザインの仕組み講座【後編】コミュニケーション(グラフィック)デザインの基礎

          コンテンツ中心のUIデザイン -オブジェクト指向ってなに?-

          今回はBONOのコンテンツにある「コンテンツ中心のUI」について学習しましたのでそのまとめとなります。 ロードマップもついに終盤に差し掛かり、満を持して「オブジェクト指向UIデザイン」にチャレンジしていきます。 「オブジェクト指向UI」って噂では聞いていましたが「難しそう」って先入観で拒否反応が出ていました。 今回、BONOの解説動画を見ることでOOUIの基礎について理解することができ、今後UIを作成する際は非常に重要となるパートなのでフローとその学びをまとめていきます!

          コンテンツ中心のUIデザイン -オブジェクト指向ってなに?-

          デザインの仕組み・デザイン力を伸ばすための基礎(創造編)で学んだこと

          今回ストアカで『デザインの仕組み【前編】・デザイン力を伸ばすための基礎(創造編)』を受講しその学びを残し後から見直す目的で書いています。 ※noteに書くこと、講義での資料を乗せることはあらかじめ遠藤さんに許可を取っております。 まずストアカとは個人でセミナーや講座を開き、一般のユーザーがそれらに参加できるサービスです。デザインやIT以外にもビジネススキルや料理、メイクなど様々な講座が開かれています。 今回、講座の講師を務めるのはニューヨーク美術大学、Pratt Inst

          デザインの仕組み・デザイン力を伸ばすための基礎(創造編)で学んだこと

          ゼロからUIをつくちゃおう! 音声SNS編【DAY1】

          今回デザインコミュニティ、BONOのDaily UIにチャレンジしたのでそこでの学び、気づきを記録として書きます。 お題は音声SNSアプリの各画面を作成していき、デザインしてUIの基本パターンを理解しようという基礎シリーズです。 また今回は月間チャレンジとしてコミュニティで同じお題に取り組み、月末には参加者同士が集まり、自身が作った成果物の発表が行われ、課題に対しての考えた事や疑問に思ったことについて発表します! 製作中の疑問点はカイさんにも質問ができます! 月度チャレ

          ゼロからUIをつくちゃおう! 音声SNS編【DAY1】

          はじめて0からサービスを考えデザインしてみた

          はじめまして!転職1年目のwebデザイナーYudaiです。 普段の業務はwebサイト、バナー作成などwebデザインに従事しています。 もっとデザインの幅を広げ、深く掘り下げたいと考えカイクンが運営しているコミュニティ、BONOで現在UI/UXデザインの学習に励んでいます。 今回は所属しているBONOで「サービスを0から作ってみる」というお題に取り組みました。 今回は1ヶ月という期間を区切り作成しました。(実際は1週間オーバーしました)そのプロセスをまとめています。 1.サ

          はじめて0からサービスを考えデザインしてみた