BLOG

日本・海外のデザインシステムまとめ「20選」

2025.03.23

デザインシステムはプロダクト開発におけるデザインの一貫性と効率性を高めるためのフレームワークです。…

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

海外のデザインシステム8選

2025.03.23

デザインシステムは企業や組織が一貫性のあるユーザー体験を提供するためのガイドラインやコンポーネント…

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

日本のデザインシステム8選

2025.03.23

デザインシステムはプロダクト開発においてデザインの一貫性と効率性を高めるための仕組みです。日本国内…

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

【UIデザイン】ケバブメニューとミートボールメニューの使い分けについて（３点リーダー）

2025.03.10

モバイルアプリやWebアプリのUIデザインにおいて、メニューの配置やデザインはユーザーの操作性に大きな…

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

デザイナーが覚えておくべきUIパーツ一覧

2025.03.10

Webデザインやアプリデザインにおいてユーザーインターフェース（UI）はユーザー体験（UX）を大きく左右…

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

相性の悪い色の組み合わせ一覧

2025.03.01

色彩は私たちの感情や印象に大きな影響を与える重要な要素です。しかし色の組み合わせ次第では目に負担が…

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

基本色の補色一覧と抽出ツールを紹介

2025.03.01

色彩の世界では色の組み合わせによって印象が大きく変わります。その中でも「補色」と呼ばれる関係は視覚…

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

ラインスタンプの審査期間や時間はどのくらい？審査に通らない人の特徴もご紹介

2025.02.23

ラインスタンプを作成し販売したいと考えている方にとって、審査時間や審査の通過条件は気になるポイ…

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

カジュアルなデザインに合う日本語フォント10選

2025.02.22

カジュアルなデザインには親しみやすく柔らかい印象を与えるフォントが欠かせません。Googleフォントには…

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

かわいいデザインに合う日本語フォント10選

2025.02.22

「かわいい」デザインを目指す場合、フォントが持つ印象によってデザインの雰囲気が大きく変わります。Go…

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

【Googleフォント】シンプルなデザインに合う日本語フォント10選

2025.02.22

ウェブサイトやデザイン制作において、フォントの選択は非常に重要です。特にシンプルなデザインを採用す…

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

【Googleフォント】エレガント（豪華）な日本語フォント10選

2025.02.22

デザインにおいてフォントの選択は非常に重要な要素です。特に高級感やエレガントな雰囲気を演出するため…

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

【Figma】要素を斜体にするツール（Skewdatプラグインの使い方）

2025.02.18

「Skewdat」プラグインはデザインに斜めの角度を加えるための強力なツールです。スキュー効果（斜め…

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

【Figma】テキストや要素をアーチ型にできるツール（Arcプラグインの使い方）

2025.02.18

「Arc」プラグインはその一つで、円弧（アーク）やカーブを使ったデザインを簡単に作成できる便利な…

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

【Figma】波線を簡単に作成できる（Wave & Curveプラグインの使い方）

2025.02.18

「Wave & Curve」プラグインは、波形や曲線を直感的に作成できる便利なツールです。これを利用す…

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

【Figma】ノイズやテクスチャを加えるツール（Noise & Textureプラグインの使い方）

2025.02.18

「Noise & Texture」プラグインを使うことで背景やボタンに自然な質感を加え、視覚的に豊かなデ…

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

【Figma】ニューモーフィズム作成ツール（Neumorphismプラグインの使い方）

2025.02.18

Neumorphism（ニューモーフィズム）とは、最近注目されているデザインスタイルの一つで、柔らかくリ…

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

【Figma】最低限守りたいデザインガイドの引き方

2025.02.17

チーム全体で一貫したデザインを維持するためには、「デザインガイド」を適切に作成することが不可欠です…

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

Figmaプラグインの入れ方を徹底解説

2025.02.17

Figmaは豊富なプラグインがあり、デザイン作業を効率化できることが魅力です。しかしFigmaを使い始めたば…

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

FigmaでWebデザインする流れとやり方

2025.02.17

近年FigmaはWebデザイン業界で広く使われるようになりました。クラウドベースでチームとリアルタイムに共…

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

【Figma】開発モードを使わずにコーディングする方法

2025.02.17

開発者向けの「開発モード」は有料プラン限定のため、無料プランでは詳細なコードの取得やエクスポートが…

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

【Figma】吹き出しデザインの作り方まとめ

2025.02.17

UIデザインにおいて吹き出し（バルーン）はユーザーの注意を引いたり、情報をわかりやすく伝えたりするの…

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

【Figma】スクロール時にコンテンツを固定する方法

2025.02.16

「スクロール時にコンテンツを固定する」機能はユーザーの視線誘導やナビゲーションの改善、情報の整理に…

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

【Figma】アニメーションの作り方

2025.02.09

「スマートアニメート（Smart Animate）」を活用すると、簡単にプロトタイプ内で滑らかなアニメーション…

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

【Figma】フォントを追加する方法

2025.02.09

デフォルトで提供されるフォント以外を使用したい場合、フォントの追加方法を知っておく必要があります。…

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

Figmaのおすすめテンプレート10選！用途別でご紹介！

2025.02.09

テンプレートを活用すれば作業の効率が格段に向上します。本記事ではFigmaのおすすめテンプレート10選を…

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

【Figma】商用利用可能！アイコンの入れ方ガイド

2025.02.09

UI/UXデザインにおいてアイコンは重要な要素の一つです。しかし「Figmaでアイコンをどのように追加すれば…

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

【Figma】縦書きデザインをマスターしよう

2025.02.09

日本語の縦書きデザインを扱う際にはいくつかの工夫が必要です。特に「どっちから配置すればいいのか？」…

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

【Figma】日本語の設定方法

2025.02.09

Figmaはデザインやプロトタイピングに最適なツールですが、初期設定では英語表示がデフォルトです。…

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

【Figma】画像や要素等のトリミングのやり方

2025.02.09

「画像や要素をトリミングする」という操作は、デザイン作業を効率的に進めるために欠かせないスキルのひ…

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

【Figma】コンテンツをエクスポートする方法まとめ

2025.02.09

本記事ではFigmaで作成したコンテンツをさまざまな形式でエクスポートする方法を詳しく解説します。初心…

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

【Figma】マスクの使い方を徹底解説！

2025.02.09

「マスク機能」は画像や図形を効率よく操作し、デザインにメリハリを加える上で欠かせない機能です。しか…

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

【Figma】ファイルを印刷する方法と注意点

2025.02.06

FigmaはUI/UXデザインやグラフィックデザインに広く使われるクラウドベースのデザインツールですが、「印…

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

ユーザビリティとアクセシビリティの違いとは？ 〜それぞれの役割と重要性〜

2025.02.05

現代のデジタル環境において、ウェブサイトやアプリの設計は単なるデザインの美しさだけではなく「使いや…

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

【忙しい人向け】ユーザビリティの項目まとめ

2025.02.05

ユーザビリティとはユーザーが製品やサービスを直感的に、ストレスなく利用できるかどうかを示す指標です…

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

【忙しい人向け】アクセシビリティの項目まとめ

2025.02.04

近年Webサイトやアプリ、公共施設など、あらゆる分野でアクセシビリティ（Accessibility）の重要性が高ま…

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

PCやiPadで無料でお絵描き出来るソフト！クリップスタジオの料金と特徴

2025.02.02

デジタルイラストを描くなら使いやすいお絵描きソフトが欠かせません。その中でも「CLIP STUDIO PAINT（…

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

【初心者必見】クリップスタジオで始めるデジタルアート！無料体験から登録までの徹底ガイド

2025.02.02

デジタルアートソフトは数多くありますが、クリップスタジオは初心者からプロフェッショナルまで多くのク…

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

Figmaの無料版で出来ること、出来ないこと。有料版との違い。

2025.01.31

Figmaには無料版と有料版があり、無料版にはいくつかの制限があります。 本記事ではFigmaの無料版でで…

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

【Figma】実践向け！レイヤー名を一括で変更する２つの方法

2025.01.27

複雑なプロジェクトになるとレイヤー数が膨大になり、管理が難しくなることがあります。レイヤー名を整理…

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

Figma入門！初心者のための使い方ガイド

2025.01.26

初心者でも1日で使いこなせる！Figmaの基本と応用を徹底解説！ デザインツールの中でも近年圧倒的…

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

【Figma】プレビュー（プロトタイプ）の完全ガイド

2025.01.26

Figmaはデザイナーや開発者がリアルタイムで共同作業できるだけでなく、プロトタイプを簡単に作成し…

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

【2025年版】オリジナルLINEスタンプ販売までの流れをご紹介します！

2025.01.25

今回はイラスト完成後のLINEスタンプ販売までの流れを解説したいと思います。とりあえずすぐに販売し…

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

【Figma】背景色の変更方法（テーマ、プロジェクト）

2025.01.25

視覚的なカスタマイズが可能な点は作業の効率や集中力を高める上で重要です。本記事ではFigmaで「プ…

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

【Figma】ログインできない時の対処法

2025.01.23

Figmaでログインできない問題に直面した時の対処法を紹介します。特にプロジェクトの進行中にこうし…

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

【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

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

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