BLOG

【Figma】マスクで切り抜く方法～解除できない時の対策やショートカットまで。（完全ガイド）

2025.01.22

「マスク機能」は画像や要素を特定の形で切り抜き、プロジェクトに洗練された表現を加えるのに欠かせ…

• すべてのカテゴリー
• デザイン

【Figma】3月11日に料金プランが変更。選択すべきプランについて。

2025.01.21

Figmaが2025年3月11日から料金プランを改定します。 新しいプランはユーザーの多様なニーズに応え…

• すべてのカテゴリー
• デザイン
• 便利な情報

【Figma】画像をパス化！画像トレースできる「Image Tracer」プラグインの使い方

2025.01.21

「Image Tracer」プラグインは画像を簡単にベクター化できる優れたツールです。 Figmaはデザイン…

• すべてのカテゴリー
• デザイン

【Figma】要素の書き出し方法（エクスポート）

2025.01.20

デザインツールとして広く使用されるFigmaは、UI/UXデザイナーにとって欠かせないツールです。特にFi…

• すべてのカテゴリー
• デザイン

【Figma】レイヤーの順番を一発で整理できる！Soterプラグインの使い方

2025.01.19

Figmaはデザインの作成から共有までをスムーズに行える人気のデザインツールです。その中でもSorter…

• すべてのカテゴリー
• デザイン

【Figma】[1秒で完了]レイヤーの順番を入れ替える方法

2025.01.19

オブジェクトを複製した際、レイヤーの順番が実際のオブジェクトの並び順と逆になってしまうケースがあり…

• すべてのカテゴリー
• デザイン

デザイナーになるには？未経験、独学では「なれない」という勘違い

2025.01.14

「デザイナーになりたいけど専門学校にいけない」「転職でデザインを仕事にしたいけど、高額なスクール代…

• すべてのカテゴリー
• デザイン
• 転職

【Figma】エクスポート（書き出し）でサイズが変わってしまう理由

2025.01.13

WEBサイトへ画像を設置したはいいものの、画像がぼやけて見える...。そんな時に原因となっているのは、ほ…

• すべてのカテゴリー
• デザイン

【Figma】画面固定したコンテンツがプロトタイプで表示されない理由

2025.01.12

Figma のプロトタイプを制作する際に、フローティング（追尾）の仕様を追加したのに実際のプレビュー画面…

• すべてのカテゴリー
• デザイン

【Figma】FigmaAIがない？使えない？最新情報と機能について

2025.01.11

デザインツール「Figma」は、ユーザー間でのコラボレーションや効率的な作業が可能な非常に人気のあ…

• すべてのカテゴリー
• デザイン

【Photoshop】イラストの塗の隙間をなくす方法

2025.01.11

ブラシツールで書いた線の内側を塗りつぶしツールで塗ると、下記のように1pxほどの隙間が空いてしまいま…

• すべてのカテゴリー
• デザイン

アウトライン化したフォントを元に戻す方法【illustrator】

2025.01.10

AI技術の進化でアウトライン化したフォントを元に戻すことができるようになりました。現在はまだ日本語版…

• すべてのカテゴリー
• デザイン

ヘッダーメニューを全幅で表示する。【ドロップダウンも画面いっぱいにする】初心者向け、コピペ可。

2025.01.09

グローバルナビを画面幅に合わせる 完成図【デモ画面】 See the Pen ヘッダー全幅 by ゆ…

• すべてのカテゴリー
• デザイン
• プログラム

【2025年版】おすすめFigmaプラグイン50選（忙しい人向け）

2025.01.08

Figmaのプラグイン50選を簡単な説明付きで早見表として一覧化しました。ざっくりどんなプラグインが…

• すべてのカテゴリー
• デザイン

【Adobe Firefly】背景を透明のまま保存したい

2025.01.07

AdobeのFireflyを利用して画像生成した後、背景を透明にして保存することはできません。プロンプトを空白…

• すべてのカテゴリー
• デザイン

【CSS】文字の下に縞模様の下線を入れるコード（コピペ可）

2025.01.06

CSSで縞模様の下線を装飾するためのコードです。 display:inline-block;でテキストをブロックに合わせ…

• すべてのカテゴリー
• デザイン
• プログラム

【A8net】imgの下の1px画像を消す方法。（広告コード）

2025.01.05

アフィリエイト広告バナーにデフォルトで付与されている1px×1px画像の消し方を紹介します。 この…

• すべてのカテゴリー
• デザイン
• プログラム

【Figma】Webサイトをフレームで取り込める！（html.to.designプラグインの使い方）

2025.01.03

標準ではHTML/CSSコードを直接インポートする機能はありません。しかしHTMLコードを基にしたデザイン…

• すべてのカテゴリー
• デザイン

【Figma】フロー図作成ツール（Autoflowプラグインの使い方）

2025.01.03

画面遷移やインタラクションの流れを視覚的に理解するのが難しくなることがあります。そこで役立つの…

• すべてのカテゴリー
• デザイン

【1分で完了・デザイン有】アンカーリンク付きの目次を設置する方法（WordPress）

2025.01.03

はじめに Wordpressの管理画面からアンカーリンク付きの目次を設置する方法を紹介します。 投…

• すべてのカテゴリー
• デザイン
• プログラム

【Figma】水たまりのような円を作る（Blobsプラグインの使い方）

2025.01.01

「Blobs」プラグインはユニークで柔軟なデザインを作成する際に非常に役立つツールです。自然で有機…

• すべてのカテゴリー
• デザイン

【Figma】簡単オブジェクト分割！（Split Shapeプラグインの使い方）

2025.01.01

標準の機能だけでは複雑な形状の分割やレイアウト作業を効率的に行うのが難しいことがあります。そこ…

• すべてのカテゴリー
• デザイン

【Figma】日本語フォントだけで選びたい（Japanese Font Pickerプラグインの使い方）

2025.01.01

日本語フォントを効率的に選んだり適用したりするには、標準機能だけでは不十分なことがあります。そ…

• すべてのカテゴリー
• デザイン

【Figma】フォントを一覧で比較したい！（Better Font Pickerプラグインの使い方）

2025.01.01

「Better Font Picker」プラグインは、フォント選びをより効率的にするための優れたツールです。Figm…

• すべてのカテゴリー
• デザイン

【Figma】簡単に画像圧縮できる（Downsizeプラグインの使い方）

2025.01.01

画像やアートワークの最適化をサポートする「Downsize」プラグインは、デザインの効率を高め、最適化…

• すべてのカテゴリー
• デザイン

【Figma】貼り付けた画像の画質が悪くなってしまうときの対処法（Insert Big Imageプラグインの使い方）

2025.01.01

Figmaの「Insert Big Image」プラグインは、デザイン作業において非常に役立つツールです。特に大き…

• すべてのカテゴリー
• デザイン

【Figma】背景を透過に切り抜ける（Remove BGプラグインの使い方）

2025.01.01

Remove BG（Remove Background）プラグインは画像から背景を簡単に削除できる機能を提供し、作業の効…

• すべてのカテゴリー
• デザイン

【Figma】豊富なグラデーションライブラリ（UIGradientsプラグインの使い方）

2025.01.01

この記事ではグラデーションを簡単に取り入れられる「UIGradients」プラグインの使い方を詳しく説明…

• すべてのカテゴリー
• デザイン

【Figma】豊富なフリー素材イラスト集（Blushプラグインの使い方）

2024.12.31

Blushプラグインはプロジェクトにぴったりのカスタマイズ可能なイラストを簡単に作成・追加できる優…

• すべてのカテゴリー
• デザイン

【Figma】フリーアイコン集（Iconifyプラグインの使い方）

2024.12.31

アイコンを効率的に追加するためにはIconifyプラグインが非常に役立ちます。Iconifyは、豊富なアイコ…

• すべてのカテゴリー
• デザイン

【Figma】3Dデザインツール（Blenderプラグインの使い方）

2024.12.31

3Dモデリングや高度なビジュアライゼーションが必要なプロジェクトでは、Blenderのようなツールとの…

• すべてのカテゴリー
• デザイン

【Figma】3Dデザイン作成ツール（Splineプラグインの使い方）

2024.12.31

2Dデザインだけでなく3Dデザインも取り入れることで、デザインの可能性を広げることができます。Spli…

• すべてのカテゴリー
• デザイン

【Figma】モック作成ツール（Angle Mockupsプラグインの使い方）

2024.12.30

「Angle Mockups」プラグインはモックアップの作成を簡単にし、デザインの魅力を効果的に伝えるため…

• すべてのカテゴリー
• デザイン

【Figma】豊富な3D素材ライブラリ（Vectary | 3D Studio Liteプラグインの使い方）

2024.12.29

「Vectary | 3D Studio Lite」プラグインは、簡単に3D要素を取り入れることができる強力なツールです…

• すべてのカテゴリー
• デザイン

【Figmaの使い方】Figmaとは？導入前の確認事項とアカウント作成について

2024.12.28

Figmaはクラウドベースのデザインツールで、ウェブデザインやアプリのUI/UX設計、プロトタイピングに…

• すべてのカテゴリー
• デザイン

【Figma】オートレイアウトを徹底解説！使い方と活用シーン

2024.12.28

「オートレイアウト」はデザイン作業を効率化し、柔軟性を持たせるための重要な機能です。本記事では…

• すべてのカテゴリー
• デザイン

【Figma】テキストやレイヤーに連番を自動で入力！（Paginateプラグインの使い方）

2024.12.27

複数の要素を整列させたりページネーションを手動で設定したりするのは手間がかかります。そこで役立…

• すべてのカテゴリー
• デザイン

【Figma】画像からカラーパレットを作成する（ImagePaletteプラグインの使い方）

2024.12.25

「ImagePalette」は画像から簡単にカラーパレットを抽出できる便利なプラグインです。この記事では、…

• すべてのカテゴリー
• デザイン

【Figma】素材を用意せずにダミー画像を一括で入れる方法（Unsplashの使い方）

2024.12.23

画像を一括で挿入する方法を知っていると作業がスムーズに進みます。特に「Unsplash」プラグインを活…

• すべてのカテゴリー
• デザイン

【Figma】デザインからコードを自動生成できる（Builder.ioの使い方）

2024.12.11

Builder.ioはノーコードやローコードでウェブサイトやアプリケーションを構築できる非常に便利なプラ…

• すべてのカテゴリー
• デザイン

【Figma】マテリアルデザインを簡単作成！（Material Theme Builderの使い方）

2024.12.10

Material Theme Builderプラグインは、GoogleのMaterial Designガイドラインに基づいてデザインテー…

• すべてのカテゴリー
• デザイン

【Figma】レイヤーで選択したオブジェクトにフォーカスする方法

2024.12.09

結論、Shift+2でフォーカスすることができます。意外と情報を探しても見当たらなかったので、この記事が…

• すべてのカテゴリー
• デザイン

【Figma】Color Style Guideの使い方

2024.12.08

Figmaはデザイナーにとって欠かせないツールであり、その機能を拡張するプラグインは作業効率をさら…

• すべてのカテゴリー
• デザイン

【Figma】Starkの使い方

2024.12.08

デザインプロジェクトが大規模になると、スタイルの管理が難しくなることがあります。Figmaの「Style…

• すべてのカテゴリー
• デザイン

【Figma】Style&Variables Organizerの使い方

2024.12.08

デザインプロジェクトが大規模になると、スタイルの管理が難しくなることがあります。Figmaの「Style…

• すべてのカテゴリー
• デザイン

【Figma】Export Commentsの使い方

2024.12.04

Export Commentsとは エクスポートコメンツとは、Figmaプロジェクト内のコメントをExcelファイル…

• すべてのカテゴリー
• デザイン

WEBデザインで使うべき無料ソフトは１択です。

2024.12.03

絶対使うべきＷＥＢデザインソフト 結論から言うと「Figma」一択です。 これ以外にも無料ソフトが…

• すべてのカテゴリー
• デザイン

【Figma】バリアントをコンポーネントに戻す方法

2024.11.14

バリアントグループの枠からドラッグandドロップで枠外に移動してください。レイヤー操作から親フレーム…

• すべてのカテゴリー
• デザイン

【Figma】コンポーネントをフレームに戻す方法

2024.11.14

コンポーネントからインスタンスを作成し、そのインスタンスを切り離すとフレームに戻すことができます。…

• すべてのカテゴリー
• デザイン

【Figma】作業効率化！ショートカット一覧！

2024.11.14

option(mac)→alt(windows) command(mac)→control(windows) はじめに 現場でそこまで使わ…

• すべてのカテゴリー
• デザイン

【Figma】プロジェクトの背景の色を変えたい。ツールバーのテーマカラーを変えたい。

2024.11.13

ツールバーの色（テーマカラー）の変更方法 Figmaのテーマカラーは左上にあるFigmaアイコンから「基本…

• すべてのカテゴリー
• デザイン

【Figma】ローカルバリアブルの適用範囲を制限する（スコープの設定方法）

2024.08.18

利用前の前提 ローカルバリアブルを利用する用途としてプリミティブカラーの登録や、テーマカラー（エ…

• すべてのカテゴリー
• デザイン

【Figma】開発モードで出来ることまとめ

2024.08.14

Figmaでデザインしたデータをエンジニアへ受け渡す時に便利なモードです。この機能は標準装備されており…

• すべてのカテゴリー
• デザイン
• プログラム

【Figma】コンテンツ（要素）をコピペで置き換える方法（置換）

2024.07.28

Figmaのフレーム内にある要素を差し替える際に「ここに貼り付け」から同フレーム内に設置し、差し替えた…

• すべてのカテゴリー
• デザイン
• 便利な情報

【Figma】プロトタイプで削除したコンテンツが残ってしまう時の対処法

2024.05.15

デザインデータから削除したコンテンツが、プロトタイプ表示したときに残っていた場合、該当のコンテンツ…

• すべてのカテゴリー
• デザイン

WF【構成案】8ptグリッドシステムを利用しよう

2024.03.25

８で割り切れる数値でレイアウトを組んでいく方法のことです。 優先順位としては、８→４→２で割り切れ…

• すべてのカテゴリー
• ディレクション
• デザイン

【Figma】ボタンはオートレイアウトでデザインしよう

2024.03.23

制約を利用するかオートレイアウトを利用するか適宜使い分ける必要がありますが、オートレイアウトはpadd…

• すべてのカテゴリー
• デザイン

【HTML,CSS】table属性でセルの結合をする方法

2024.02.17

WEBサイトへExcelのような表を掲載する際に、複雑な表になった場合でもセルの結合のような複雑な調整が可…

• すべてのカテゴリー
• デザイン
• プログラム

静的ページをWordPress化するための手順【備忘録】

2023.11.02

・フロントページを「index.php」と書き換える ・スクリーンショットファイルでテーマのサムネが表示…

• すべてのカテゴリー
• デザイン
• プログラム

アドビ認定プロフェッショナルIllustrator2023

2023.09.18

アドビ認定プロフェッショナルIllustrator2023の難易度と試験内容を紹介。 難易度 【実務経験…

• すべてのカテゴリー
• デザイン
• 便利な情報