イラレばかり使ってきた人間がFigmaデザインをコーディング用画像に書き出すための「クリッピング」
Ai（Adobe Illustrator）の操作に慣れた人間がFigmaへの作業移行をするにつれて、コーディング用画像書き出しに必須な「クリッピング」の観点で比較してまとめてみました。
Figma
【Figma】ファイルのサムネイルを設定する方法
どんどん増えるFigmaファイル、目的のデータが見つからず迷子になっていませんか？ 今回はサムネイルの設定手順に加え、J.B.Goodeでの運用ルールやページ整理のコツをまとめました。
【Figma】最小限のFrameでスケルトンUIアニメーションを作る
スケルトンUIとはコンテンツが表示されるまでの間、コンテンツの枠組みを表示する読み込みUIの一種で、YouTube、Uber Eats、Pinterestなどのサービスで採用されています。読み込み中で
【2026年8月】デザイン記事まとめ
J.B.Goodeでは、技術ナレッジや日々の気づき、企業カルチャーに関する投稿を行っています。今回は、8月に公開したホットなデザイン記事をご紹介します。 技術ナレッジ After Effe
【Chrome】プラグインなしで<img>タグのSVGをクリップボードに保存する方法
今回は、<img>タグのSVG画像をパス情報を保持したままクリップボードに保存する方法を忘備録として残します📝 はじめに SVGとは、拡大・縮小しても画像が荒れないベク
【Figmaプロトタイプ】モーダルをオーバーレイでつくる
今回はタイトルの如くです。Figmaのプロトタイプで、ボタンを押すとモーダルが開く挙動の設定を、備忘録も兼ねて記しておきたいと思います。 モーダルの設定方法 例として、動画の再生ボタンを押
【2026年7月】デザイン記事まとめ
J.B.Goodeでは、技術ナレッジや日々の気づき、企業カルチャーに関する投稿を行っています。 これらの発信がより多くの方に届くよう、noteでは企業カルチャーのほか、デザイナー陣が執筆する「デ
【Figma】自動で無限ループするアニメーションをつくる
今回は、Webサイトでよく見かける ロゴが流れて無限ループするアニメーション をFigmaのプロトタイプで再現します。実装者にアニメーションイメージを共有する時に使ってみてください
オートレイアウト依存から脱却しよう
皆さんはWebサイトを制作する際、どのツールを活用していますか？弊社では主にFigmaを活用して制作しています。私は入社前までスマホアプリのデザインを中心に制作していましたが、入社後はランディングペー
モバイルアプリの定番UIパーツ
モバイルアプリのデザインや開発を進める中で、「このパーツの名前は何だっけ？」「どれを使うのが適切なのだろう？」と迷うことはありませんか？この記事では、モバイルアプリで頻繁に使用される定番のUIパーツを
【Figma/Photoshop/Web】AIで簡単！画像の背景を削除してトリミングする方法
今回は、Figma・Photoshop・Web上で画像の被写体の背景を削除して、トリミングする方法を３つご紹介します。あくまで一例なので、普段使っているデザインツールや画像との相性に合わせて使い分けて
重力とレスポンシブ
Webサイト上にはこの宇宙に浮かぶ惑星と同じく、重力があります。 ここでいう「重力」とはざっくりというとものは下方向にぶら下がる力のことと思ってもらうのがよく、つまりHTMLの内部で上に置かれて