【Figma】最小限のFrameでスケルトンUIアニメーションを作る
スケルトンUIとはコンテンツが表示されるまでの間、コンテンツの枠組みを表示する読み込みUIの一種で、YouTube、Uber Eats、Pinterestなどのサービスで採用されています。読み込み中で
Design
光に文字が浮かび上がるアニメーション【After Effects】
今回はAfter Effectsを用いて、懐中電灯の光にテキストが浮かび上がるようなアニメーションを作成します。 動画のOPの演出などに使うと面白いと思うのでぜひ最後までご覧ください。
【2026年8月】デザイン記事まとめ
J.B.Goodeでは、技術ナレッジや日々の気づき、企業カルチャーに関する投稿を行っています。今回は、8月に公開したホットなデザイン記事をご紹介します。 技術ナレッジ After Effe
【Chrome】プラグインなしで<img>タグのSVGをクリップボードに保存する方法
今回は、<img>タグのSVG画像をパス情報を保持したままクリップボードに保存する方法を忘備録として残します📝 はじめに SVGとは、拡大・縮小しても画像が荒れないベク
説明できる。でも、しない。
デザインした本人が「なぜ？」を説明できない要素があっちゃダメだと思っています。 自分なりの根拠を持てと。ただ、それは“他人に説明するため”のものではありません。 「なんとなく、こっちがいい
【Figmaプロトタイプ】モーダルをオーバーレイでつくる
今回はタイトルの如くです。Figmaのプロトタイプで、ボタンを押すとモーダルが開く挙動の設定を、備忘録も兼ねて記しておきたいと思います。 モーダルの設定方法 例として、動画の再生ボタンを押
After Effectsで作る液体グラデーション
今回はAfter Effectsで作れる液体グラデーションのアニメーションの作り方を紹介します。比較的簡単に作れて、他のアニメーションとも組み合わせやすいと思うのでよかったら最後までご覧ください。
効率的にデザインを進めるための習慣
新規案件のデザインに着手する際、つい焦ってどんな風にしようかと考えながら、参考サイトやPinterestを開いていませんか？「誰をどのような状態へ導くべきか」が曖昧なまま表層的な参考探しを始めても、評
【2026年7月】デザイン記事まとめ
J.B.Goodeでは、技術ナレッジや日々の気づき、企業カルチャーに関する投稿を行っています。 これらの発信がより多くの方に届くよう、noteでは企業カルチャーのほか、デザイナー陣が執筆する「デ
Vite×Vue系環境でSVG画像を扱うならほぼ必須な設定〜SVGO圧縮に気をつけろ〜
ViteとVue系フレームワークを連携させる開発環境構築において罠になりがちなSVG画像の取り扱い方と、効果的に扱うためには「ほぼ必須」なconfig設定についてまとめています。
わたしも、イタコ。
赤と緑では、同じ言葉も違う声で聞こえてくる。ゴシックと明朝でも、違う。イラストと写真でも違うし、人物と風景でも、違う。デザインが、文字以外の要素で“脳内再生される声”を変える。それがボイスアンドトーン
Illustratorで立体的な金属オブジェクトを作ろう
今回は「風船のように膨らませた形」と「引き伸ばして奥行きを加えた形」の2種類の作り方を解説します。 風船のように膨らませた形 ステップ1 テキストを選択した状態で、「3Dとマテリアル
【Figma】自動で無限ループするアニメーションをつくる
今回は、Webサイトでよく見かける ロゴが流れて無限ループするアニメーション をFigmaのプロトタイプで再現します。実装者にアニメーションイメージを共有する時に使ってみてください
バランスをうまく取りなって。
“UI/UXデザイン”とかイキがる前に、もっとシンプルに考えてみましょうよ。っていう、今回もデザインポエムです。 ボタンを“押す”のと“押させる”の。 ボタン（広義の意味でのそれ）を押すと
Adobe Fontsの導入手順
コーディングでカンプを確認するとGoogle fontsではなくAdobe Fontsが使われていた...どうやって使おう？と困った方も多いのではないでしょうか。本記事ではAdobe Fontsの基本
たぶん、パンク。
デザインシステムやカラースキームをどれだけ緻密に設計したとしても、それだけでいいデザインになる。わけじゃない。1つのアイディア（≒ちょっとした思いつき）に突き動かされて、衝動的に描ききってしまったよう
オートレイアウト依存から脱却しよう
皆さんはWebサイトを制作する際、どのツールを活用していますか？弊社では主にFigmaを活用して制作しています。私は入社前までスマホアプリのデザインを中心に制作していましたが、入社後はランディングペー
〇〇パ。じゃないほう。
デザインの考え方の話かもしれませんし、ヒトとしての個人的なクセかも知れませんが、誤解を恐れず私見をひとつ。 デザインは、手数が少ないほうが良いと思っています。 昨今、「タイパ」や「コスパ」
切り抜きの後にやる、ひと手間。
デザイン制作の中で、もはや必須とも言える「画像の切り抜き」。最近はPhotoshopやFigmaで、速く、正確に切り抜けるようになりました。ありがたい。 では、早速Photoshopでこの画像を
モバイルアプリの定番UIパーツ
モバイルアプリのデザインや開発を進める中で、「このパーツの名前は何だっけ？」「どれを使うのが適切なのだろう？」と迷うことはありませんか？この記事では、モバイルアプリで頻繁に使用される定番のUIパーツを
【Figma/Photoshop/Web】AIで簡単！画像の背景を削除してトリミングする方法
今回は、Figma・Photoshop・Web上で画像の被写体の背景を削除して、トリミングする方法を３つご紹介します。あくまで一例なので、普段使っているデザインツールや画像との相性に合わせて使い分けて
重力とレスポンシブ
Webサイト上にはこの宇宙に浮かぶ惑星と同じく、重力があります。 ここでいう「重力」とはざっくりというとものは下方向にぶら下がる力のことと思ってもらうのがよく、つまりHTMLの内部で上に置かれて
デザインツールの点と線の話
Photoshop：Illustrator ＝ 点：線 フォトショ＝ビットマップ（点）：イラレ＝ベクター（線）。ん？Figmaはどっち？フィ？フィグ？もしや、フィマ？ 意外とここ、考えてな
その画像、本当にSVGでしょうか？
SVG画像はベクター形式なので劣化がなくてキレイかつ便利！とお思いのみなさま、突然ですがSVG画像の「中身」を見たことはありますでしょうか。 SVG画像が上記のような特徴を持つのは、画像としても
正円には勝てん話
デザインしていると、ふと、どうしようもない無力感に襲われる。虚無。その虚無の原因のひとつが“正円（真円）”ではと気づいた話。 正円は、あまりにも、強い 例えば、ロゴのシンボルを正円の中に収
After Effectsで桜吹雪を作ろう
4月になりオフィスの前の公園にも桜が咲く季節になったので、今回はAfter Effectsを使用して桜吹雪のアニメーションを作ってみようと思います。 作り方の手順 簡単に作り方の手
方眼紙のような背景をCSSで作る
課題 方眼紙のような背景を画像で実装していたが、実機で拡大すると下記の通り途切れたように見える部分がある。 原因 ピクセルのズレと丸め誤差スマホの画面に合わせたり、ピンチア
ミイラ取りがミイラのミライをつくる話
“AIがデザイナーやエンジニアの仕事を奪う”そんな言葉を見聞きするたび、「ミイラ取りがミイラになる」のようで、なんだかモヤモヤ。 AIは、どこからか急に現れた存在じゃない インターネットも