Design

【2026年8月】デザイン記事まとめ

公開

J.B.Goodeでは、技術ナレッジや日々の気づき、企業カルチャーに関する投稿を行っています。
今回は、8月に公開したホットなデザイン記事をご紹介します。

技術ナレッジ

After Effectsで作る液体グラデーション

この記事では、『液体グラデーション(リキッド・グラデーション)』という、水や油膜のような有機的な形状と、色が混ざり合うような色彩変化を持つ表現手法を、After Effectsを使ってアニメーションで表現する方法を紹介しています。
シェイプの作成方法も紹介されいるので、グラフィック面でも参考にしてみてください。

After Effectsで作る液体グラデーション

今回はAfter Effectsで作れる液体グラデーションのアニメーションの作り方を紹介します。比較的簡単に作れて、他のアニメーションとも組み合わせやすいと思うのでよかったら最後までご覧ください。 ①グラデーションのシェイプを作成 まずは1080×1920pxの縦型のコンポジションを作成し、そこに星形のシェイプを配置します。(最終的に作る動画が横長でも縦型のコンポジションを作成します。

【Figmaプロトタイプ】モーダルをオーバーレイでつくる

デザイン提案の際にFigmaのプロトタイプを用いることが増えている昨今。
その中で頻出のUIである「モーダル」を開く動きを効率的に設定する方法を紹介しています。
プロトタイプは実際の動きをイメージできる素晴らしいツールですが、その分多くの画面を繋げる作業が煩雑になりがち…修正も大変…というデザイナーのお悩みを解決するヒントになるかもしれません。

【Figmaプロトタイプ】モーダルをオーバーレイでつくる

今回はタイトルの如くです。Figmaのプロトタイプで、ボタンを押すとモーダルが開く挙動の設定を、備忘録も兼ねて記しておきたいと思います。 モーダルの設定方法 例として、動画の再生ボタンを押すとモーダルが開く、という挙動の設定をしてみます。 こんな感じ ①デザインを用意 まずは、ベースとなるデザインとモーダルのデザインを用意します。 ②インタラクションを設

【Chrome】プラグインなしで<img>タグのSVGをクリップボードに保存する方法

デザインを作成する際、Webからロゴやアイコンをコピーして持ってくるという場面があります。この記事ではSVGをクリップボードにコピーし、そのままデザインツールで配置する方法を紹介しています。 
綺麗なSVG画像をコピーするために、ブラウザから一度保存した後、デザインツールへ持ってきて「めんどくさ〜」と思っている、そんなあなたはぜひご一読を。

【Chrome】プラグインなしで<img>タグのSVGをクリップボードに保存する方法

今回は、<img>タグのSVG画像をパス情報を保持したままクリップボードに保存する方法を忘備録として残します📝 はじめに SVGとは、拡大・縮小しても画像が荒れないベクター形式の画像データです。 普段見かけるJPGやPNG画像は、右クリックして「画像をコピー」することでクリップボードに保存でき、そのままデザインツールにペーストできます。 しかし、SVG画

効率的にデザインを進めるための習慣

こちらは技術というより思考面におけるナレッジです。
デザイナーであれば、ゴールが定まらないままデザインを進めてしまい、迷走したり、失敗したことが一度はあるのではないでしょうか。
この記事ではデザインの絵作りの前にやるべきこと、情報整理や対象の理解を深める方法について紹介しています。
効率的に進めるためにも、まずは焦らずじっくり考えてみることの大切さを改めて自身に問いかけるきっかけに。

効率的にデザインを進めるための習慣

新規案件のデザインに着手する際、つい焦ってどんな風にしようかと考えながら、参考サイトやPinterestを開いていませんか?「誰をどのような状態へ導くべきか」が曖昧なまま表層的な参考探しを始めても、評価基準がないため必要以上に時間を費やしてしまいます。さらに、そのまま制作を進めると、軸がブレて迷走したり、そもそも間違った方向性のデザインを作り込んでしまう危険性があります。だからこそ、私は新規案件の

ポエム

説明できる。でも、しない。

「このデザインって、どういう意図ですか?」というデザイナーからすると胃が痛くなってくる質問No.1に輝いている(かもしれない)この言葉。
デザインの意図をきちんと説明できることがデザイナーにとって大切ではあるものの、ロジックだけでは説明できない直感がデザインを左右する場面もあります。そんな混沌としたデザインの「正解」と「正義」について考えるポエムです。

説明できる。でも、しない。

デザインした本人が「なぜ?」を説明できない要素があっちゃダメだと思っています。 自分なりの根拠を持てと。ただ、それは“他人に説明するため”のものではありません。 「なんとなく、こっちがいいな」と思ったとして、もし誰かに聞かれたら、ちゃんと語れる。 聞かれたら、0点。 「このデザインって、どういう意図ですか?」 あー…はい、0点。負け。 デザインは世の中に出た瞬間

おわりに

今月は技術ナレッジ記事を中心に、作業の効率化につながるテクニックや表現方法の紹介、デザインの思考に関するテーマと、多種多様なラインナップでお届けしました。

私たちと同じように日々試行錯誤するクリエイターのみなさんの参考に少しでもなれば幸いです。

7月の記事まとめはこちら☀️

【2026年7月】デザイン記事まとめ

J.B.Goodeでは、技術ナレッジや日々の気づき、企業カルチャーに関する投稿を行っています。 これらの発信がより多くの方に届くよう、noteでは企業カルチャーのほか、デザイナー陣が執筆する「デザインマガジン」を運営しています。今回は、7月に公開したデザイン記事をご紹介します。 技術ナレッジ 🌈 【Figma】自動で無限ループするアニメーションをつくる Figmaで