fsato

中年ですが大した実績もないデザイナーです。 UIデザインと、フロントエンド開発、バックエンド開発見習いとAWS見習いをしています。 https://satofaction.net/

fsato

中年ですが大した実績もないデザイナーです。 UIデザインと、フロントエンド開発、バックエンド開発見習いとAWS見習いをしています。 https://satofaction.net/

[UIデザイナーが学ぶ]Three.jsの Raycasterで
マウスイベントを使う話

はじめにこの記事はthreejs journeyを利用しての学習メモです。 このthreejs journeyはthree.jsを学ぶのに非常に有用ですので、是非視聴してみてください。おすすめです！！ Raycasterとは Three.jsで光線(Ray)を使ってオブジェクトとの交差を検出するためのものです。これを利用することで、特定の方向に向かって投げられた光線がシーン内のどのオブジェクトと交差するかを判定できます。 この機能は、例えばクリックした位置にあるオブジェ

fsato

    • [UIデザイナーが学ぶ]Three.jsの物理演算の話

      はじめにこの記事はthreejs journeyを利用しての学習メモです。 このthreejs journeyはthree.jsを学ぶのに非常に有用ですので、是非視聴してみてください。おすすめです！！ 今回はWebglでの物理演算をする方法について少し記載します。 学習の備忘録てきに書いているので、詳しくは上記リンクのthreejs journeyを御覧ください。 物理演算ライブラリ3Dの物理演算用のライブラリはいくつかあります。 代表的なものは以下になります。 1.

      fsato

      • [UIデザイナーが学ぶ]Three.jsの画面スクロールとの連動の話

        はじめにこの記事はthreejs journeyを利用しての学習メモです。 このthreejs journeyはthree.jsを学ぶのに非常に有用ですので、是非視聴してみてください。おすすめです！！ 今回はWebglでの描画とブラウザのスクロールを連動するための方法について少し記載します。 学習の備忘録てきに書いているので、詳しくは上記リンクのthreejs journeyを御覧ください。 HTMLの準備以下のような、高さ100vhのsectionを3つ持つhtmlを用

        fsato

        • [UIデザイナーが学ぶ]Three.jsのパーティクルのすこし応用の話

          はじめにこの記事はthreejs journeyを利用しての学習メモです。 このthreejs journeyはthree.jsを学ぶのに非常に有用ですので、是非視聴してみてください。おすすめです！！ パーティクルの応用に挑戦パーティクルを利用しての応用表現に挑戦したいと思います。 ベースの表示 まずはベースとなるパーティクル表示を行います。 座標-2〜2の範囲でランダムに10000個のパーティクルを配置します。 ...中略let geometry = null;le

          fsato

        • [UIデザイナーが学ぶ]Three.jsの Raycasterで
マウスイベントを使う話

          fsato

        • [UIデザイナーが学ぶ]Three.jsの物理演算の話

          fsato

        • [UIデザイナーが学ぶ]Three.jsの画面スクロールとの連動の話

          fsato

        • [UIデザイナーが学ぶ]Three.jsのパーティクルのすこし応用の話

          fsato

          [UIデザイナーが学ぶ]Three.jsのパーティクルの基本的な話

          普段はメーカーで冴えない中年UIデザイナーとして勤務しております。 あまり業務では利用しませんが、Three.jsのパーティクルについて学び直しているので、備忘録的にまとめています。 SphereGeometryの頂点情報を利用してパーティクルを表示あまり利用するシーンはないかもしれませんが、既存のGeometryの頂点情報を利用してパーティクルを表示させます。 const particlesGeometry = new THREE.SphereGeometry(1,

          fsato

          [UIデザイナーが学ぶ]Three.jsのパーティクルの基本的な話

          fsato

          [UIデザイナーが学ぶ]Three.jsのアニメーションの基本的な話

          普段はメーカーでプログラムなど一切書かないUIデザイナーとして勤務しております。 あまり業務では利用しませんが、Three.jsのアニメーションについて学び直しているので、備忘録的にまとめています。 アニメーションといっても、フレームレートでレンダリングを繰り返す部分のみ説明となり、複雑なアニメーションについては言及しておりません。 アニメーションの実装方法についてThree.jsでアニメーションを実装する方法はいくつかあります。 以下が候補です。 結論から言うとTHR

          fsato

          [UIデザイナーが学ぶ]Three.jsのアニメーションの基本的な話

          fsato

          [UIデザイナーが学ぶ]Three.jsの影の基本的な話

          普段はメーカーで影の薄いUIデザイナーとして勤務しております。 あまり業務では利用しませんが、Three.jsの影について学び直しているので、備忘録的にまとめています。 影の表示手順レンダラーで影を有効にする。 ライトで影を有効にする。 影を落とすMeshを設定する 影を受けるMesh設を設定する // レンダラーで影を有効にするconst renderer = new THREE.WebGLRenderer();renderer.shadowMap.enable

          fsato

          [UIデザイナーが学ぶ]Three.jsの影の基本的な話

          fsato

          [UIデザイナーが学ぶ]Three.jsの3Dテキストの基本的な話

          普段はメーカーで地味なおじさんUIデザイナーとして勤務しております。 あまり業務では利用しませんが、Three.jsの3Dテキストについて学び直しているので、備忘録的にまとめています。 3Dテキストの表示方法利用するフォントはなんでも良いのですが、GoogleFontなどを利用する場合はFacetype.jsなどでコンバートした後読み込んでください。 ...中略...import { FontLoader } from "three/examples/jsm/loade

          fsato

          [UIデザイナーが学ぶ]Three.jsの3Dテキストの基本的な話

          fsato

          [UIデザイナーが学ぶ]Three.jsのマテリアルの基本的な話

          普段はメーカーでプログラムなど一切書かないUIデザイナーとして勤務しております。 あまり業務では利用しませんが、Three.jsのマテリアルについて学び直しているので、備忘録的にまとめています。 マテリアルの実装方法利用したいマテリアルのインスタンを作成して、メッシュに渡します。 プロパティはマテリアルのインスタンス作成時にコンストラクタにわたすのでも良いですし、後から個別に指定してもOKです。 const material = new THREE.MeshBasicM

          fsato

          [UIデザイナーが学ぶ]Three.jsのマテリアルの基本的な話

          fsato

          [UIデザイナーが学ぶ]Three.jsのテクスチャの基本的な話

          普段はメーカーでUIデザイナーとして勤務しております。 あまり業務では利用しませんが、Three.jsのテクスチャについて学び直しているので、備忘録的にまとめています。 テクスチャの読み込み方法TextureLoaderを利用して読み込む const textureLoader = new THREE.TextureLoader()const colorTexture = textureLoader.load('/textures/color.jpg') 複数のテクス

          fsato

          [UIデザイナーが学ぶ]Three.jsのテクスチャの基本的な話

          fsato

          Github ActionsでリポジトリAからリポジトリBにプルリクエストを出す

          こんにちは。 私は普段はメーカーでUIデザインを担当しています。 この記事はGithub ActionsもGithub Appsも使ったこともない、汚いおじさんデザイナーが備忘録として書いているメモです。 間違っていたり、もっといい方法があったりするかもしれません。 何がしたいのか 社内には複数のアプリ(プロダクト)があり日々開発が進んでいます。 こちらの記事でも書きましたが、社内のアプリにアイコンや、色指定など共通部分が多くあり、現状プロダクト毎に管理しているので、更

          fsato

          Github ActionsでリポジトリAからリポジトリBにプルリクエストを出す

          fsato

          Figma REST APIを使ってアイコンの書き出しを自動化する

          こんにちは。私は普段はUIデザイナーとしてデザイン業務を行っています。 社内には複数のプロダクトが存在し、それぞれプロジェクトチームがあり、 デザイナーもエンジニアもメンバーが異なります。 ただし、社内のプロダクトの為一定のデザイン基調は合わせる必要がありますが、スケジュールがタイトなこともあり、細かな違いが出ることは多いです。 具体的に言うと、プロダクト横断して共通のボタンが、プロダクトやプラットフォーム(iOS、Android、Web)などでデザインが（色、スペース

          fsato

          Figma REST APIを使ってアイコンの書き出しを自動化する

          fsato

          Style Dictionaryでデザイントークンの作成にチャレンジ

          現在、私は自社プロダクトのデザイン業務に携わっています。 プロダクトは自分が担当しているもの以外にも複数ある為、その他の兄弟プロダクトと一貫したユーザー体験ができるように意識する必要があります。 しかし開発が進むと色が少し違ったり、フォントサイズやマージンが異なるなど…iOSやAndorid、Webなどのプラットフォームごとに微妙に異なるUIが生まれてしまいます(仕方がないことですが)。 そこで、デザイントークンを作成し、共通化する仕組みを導入することを考えました（他社の

          fsato

          Style Dictionaryでデザイントークンの作成にチャレンジ

          fsato

          Figmaのプラグイン作成入門

          こんにちは。普段はUIデザイナーとして業務を行っています。 UIデザインの作業ではFigmaを利用しており、便利なプラグインを日々利用させていただいており、自分でもいつか作ってみたいなと思っておりました。 そこで冬休みの目標として、Figmaのプラグインをなにか作ってみることにしました。 その際の手順などをメモとして残しておこうと思っています。 サンプルプラグインを作成まずはFigmaで用意されているサンプルプラグインを実行できるところまでやってみます。 サンプルプラグ

          fsato

          Figmaのプラグイン作成入門

          fsato

          Figmaのレイヤー周りでよく使う機能と、最近覚えたことのメモ

          レイヤー周りでよく使う機能と、最近覚えた少々のメモです。 レイヤーの名前を一括変換レイヤーの名前を一括で変換する方法です。 ショートカットは「Cmd + R」(Mac)です。 Match(optional)に正規表現が使えるようで、選択中のファイルの中から特定の文字列だけリネームすることもできるようでした。 詳しくはこちら。 オブジェクトの表示、非表示を切り替える選択中のレイヤーの表示非表示を「Cmd + Shift + H」で切り替えることができます。 また、「Cmd

          fsato

          Figmaのレイヤー周りでよく使う機能と、最近覚えたことのメモ

          fsato

          TouchDesignerでデザインパーツを作る

          TouchDesignerをご存知でしょうか。 TouchDesignerは、ノードベースのヴィジュアルプログラミングツールです。 オペレーターと呼ばれるプログラムのモジュールをつなげることで、コードを書かなくてもビジュアルプログラミングができる開発環境です。 もちろんプログラミングを書くこともできます。 表現自体は色々できるみたいなのですが、リアルタイムで操作する映像表現などによく使われるみたいです。 音楽に映像を同期するオーディオビジュアライズなどでも使われます。

          fsato

          TouchDesignerでデザインパーツを作る

          fsato