デザイナー、コーチ、ディレクター / 井川

.

Memos

Figmaでアウトライン化、フラット化をする方法と注意点。

Figma(フィグマ)でアウトライン化する方法。

Figmaのアウトラインはすごく簡単。 DTPデザインを行なった場合、基本的にテキストを「アウトライン化」して、入稿することが必要となる。 またDTPに限らず、テキスト(ブランド名やキャッチコピーの文字列など)から、パスを使ってロゴや見出しなどをデザインするときも同様。 IllustratorやPhotoshopの場合でも、それ以外のソフトでも、必須的なもの。 ...

Figmaでラスタライズをする方法と注意点。

Figma(フィグマ)でラスタライズをする方法。

解像度とラスタライズと。 解像度。 Figmaは元々Web用のデザインツールのためか、現時点(2023年11月)では「解像度」の設定がない。 ラスタライズ。 「ラスタライズ」は下記の手順でできるが、解像度はおそらく「72ppi」となると思われる。 Illustratorの場合。 Illustratorでは、テキストや画像にぼかしやシャドウ...

Figmaのツールバーやサイドバーが消えてしまったときの対応。

Figma(フィグマ)のツールバーやサイドバーの表示非表示の方法。

Figmaのツールバーやサイドバーが消えた!? UIの表示/非表示の切り替え。 サイドバーがない? Figmaを使ってデザインなどを行なっているとき、意図せずに上部のツールバーや左右のサイドバーが無くなっていることがある。 一瞬焦るが、そんなときは、「UIの表示/非表示」パネルから元に戻すことができる。 (※UIは「User Inter...

Remove BGのアカウント作成と、Figma用APIキーの作成方法。

Remove BGのアカウント作成と、Figma用APIキーの作成方法。

Remove BGのアカウント作成手順。 Remove BGのサイトから。 アカウントはRemove BGのサイトの右上の「Sign up(サインアップ)」から無料で作成可能。 アカウントを作成。 「Sign up(サインアップ)」をクリックすると、アカウント作成の画面に切り替わる。 日本語翻訳。 日本語化されていないページがある...

Figmaのカーニング、文字詰めのショートカットの使い方。

Figma(フィグマ)の文字詰め、カーニングができないとき。

Figmaのカーニングは「alt + >」と「alt + <」で。 Figmaは基本的にWebデザイン向けのツールだが、カーニングができる。 イラレやフォトショと同じく、「alt + >」と「alt + 」は大なり、「」で調整。 文字と文字の間隔を詰めたい場合は「alt + 」 or 「alt + (大なり)」や「」は「.(ピリオド) / る」、「...

フリーランスHubへ掲載。Figmaで名刺を作ってみたら。

フリーランスhubへ掲載されると聞いた猫ちゃん。

フリーランスHubへ。 Figmaで名刺を作ってみた結果を公開していたところ、一例としてフリーランスHubさまで掲載していただけることに。 今回の掲載先。 CHIBA DESIGN(チバデザイン)さまによる名刺デザインのコツや、株式会社山櫻さまによるQRコードのメリットについての記事が紹介されています。 ひと工夫で魅力的なデザインに!名刺づくりの参考にしたい記事まと...

Figmaでのスライドの作り方と、デジタル庁のデザインシステム。

Figma(フィグマ)でスライドの作り方。アイコン素材もプレゼンも。

Figma上にある、デジタル庁によるデザインシステム。 デザイン庁のサイト。 デジタル庁のサイトはシンプルでまとまりが良く、お手本となるWebサイトのひとつ。 サイト制作におけるビジョンや過程がスライド形式でアップされているため、プレゼン用などFigmaを使ったスライド作りの参考にもなる。 デジタル庁のデザインシステム。 Webサイトやアプリのためのデザインシ...

FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。

Figma(フィグマ)からCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。

TinyImage Compressorプラグインとは? 圧縮だけでなく、印刷用やWeb用などにも。 TinyImage Compressor TinyImage Compressorは、Figmaからエクスポートするファイルを軽量化してくれるプラグイン。 Figmaでは現時点サポートされていないCMYKに変換したり、画像形式をWebPなどに変換してくれる。 ...

FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。

Figma(フィグマ)とAI Genius。画像生成、UI/UXデザインを。

GeniusをAI仲間に、Figmaでデザインを。 AIの勢いが止まらない。 デザインツール「Figma」にも、AIのデザイン・コンパニオンがやってくる。 開発元のDiagram社のサイト上で公開されている動画によると、「Companion(コンパニオン)」という名の通り、付き添う仲間や友、連れ、という役割をしてくれる様子。 ざっくりとデザインを考えているときなどに...

FigmaからWebPで書き出しす方法。Olive Pressの使い方

FigmaからWebPで書き出しす方法。Olive Pressの使い方。

Figmaのプラグイン「Olive Press」とは? WebPで書き出すことが増えている。個人的にはWeb用の画像のほとんどは.webp形式を使用している。 現時点、FigmaやIllustratorなどのソフトはデフォルトでWebPは書き出せないが、画像形式を変換できるWebサイトはネット上に多々ある。 また、Figmaのプラグイン「Olive Press」は、Fig...

Figma プラグインを削除する方法。追加も削除もシンプルに。

Figma(フィグマ)のプラグインを削除する方法。

Figmaへ追加したプラグインを削除したいとき。 Figmaはプラグインのインストールが簡単なので、ついつい色々なものを追加してしまう。 そうしているうちに、数日後、数ヶ月後には、あれ?と、何のためのプラグインだったかがわからなくなってしまったり、増えすぎて探しづらくなってきたりする。 Figmaからプラグインを削除する手順。 プラグインの追...

Figmaがもし有料化されたら。Next Figmaのデザインツール。Pixso。

Pixso。Figma(フィグマ)の代替デザインツール。

Pixso。Figmaがもし有料化されたら。 無料プランでも十分に使えるFigma。 Adobe社に買収されてから、いつかFigmaも有料化されるのでは?と内心不安を抱えている人たちは、結構いるのではないだろうか。 例えば、 初心者の方や学習中の方たちが、ちょっと使ってみたいな、というとき。 職場ではAdobeのプランがあるけど、自宅にないと不便だな、というと...

Figma 削除したファイルを復元したいとき。復元の方法。

Figma(フィグマ) 削除したファイルを復元したいとき。

Figma使用中に削除してしまったファイルを復元したい。 Figmaで作業中に、誤ってファイルを削除してしまうときがある。 ゴミ箱を探しても、残念ながらFigmaにはゴミ箱はない。 焦ってしまうが、ゴミ箱的な場所は存在し、そこから復元することは可能だ。 Figmaの削除ファイルを復元する手順。 「Drafts / 下書き」をクリ...

Material SymbolsをFigmaへ。インストールしてすぐに使える。

Material SymbolsをFigmaへ。すぐに使えるインストール方法。

GooleのアイコンフォントをFigmaへ。Material Symbols。 Google Fontsから手軽に使えるアイコンフォント「Material Symbols」が、デザインツール「Figma」のプラグインとして配布されている。 Googleの案内では現時点、2,500以上のアイコンが使えるらしい。 かつ「Outlined(輪郭)」、「Rounded(角丸)」、「S...

Figmaのルーラー(定規)の出し方。表示方法がイラレとちょっと違う!

Figma(フィグマ)のルーラーやガイドの出し方。

Figmaのルーラー(定規)の出し方。 Figmaのルーラー。 ルーラー(定規)。 Figmaでデザインをしているときにルーラー(定規)を出そうと「command + R」 or 「Ctrl + R」を押しても出てこない。 あれ!?と思い、じゃあ、と右クリックで出そうとしてもメニューにもない。 IllustratorやPhotoshopで慣れて...

Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。

Figma(フィグマ)のトリミング、切り抜きとremove bgの使い方。

Figmaのペンツールとマスクで、背景から切り抜く。 IllustratorやPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。 AIの普及などにより被写体の切り抜き精度が上がっている。が、それでもうまく切り抜けない時は、結局人の手によるペンツールに頼ることになる。 また、ペンツールはロゴやアイコンなど、図形やイラストを描くときに重宝する。い...

Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。

Figma(フィグマ)で名刺制作。

Figmaで名刺を作成、印刷してみたところ、無事に完成。 Figmaで名刺? デザインツール「Figma」で、紙媒体の名刺を作って実際に発注し、仕上がりを確認してみた。 印刷用に工夫。 Figmaは元々デジタルデバイス向けなので、単位がpxオンリー、カラーモードはRGB、印刷物向けのデータ形式はPDFのみ、などと制限がある。 が、工夫すれば...

Figmaを日本語化。言語切り替えの使い方。再起動も不要。

Figma(フィグマ)を日本語化。言語切り替えの使い方。

Figmaを日本語に切り替える方法。MacもWinも使い方は同じ。 Figmaの日本語対応。 2022年のFigmaの日本法人設立により、Figmaはデフォルトで英語⇄日本語の言語切り替えが可能となっている。 特に再起動の必要もなく、早ければ数秒〜数十秒ほどで言語の切り替えができる。 インストール版でもブラウザ版でも同じ手順で行える。 ...

Figmaで検索・置換する方法。ショートカットからでOK。

Figma(フィグマ)で検索・置換する方法。

Figmaで検索・置換が可能に。 Figmaのアップデートで検索と置換の機能が実装されていた。 ショートカットで検索、置換ができるので、なかなか使い勝手が良い。 使い方は簡単で、以下のショートカットですぐに覚えられる。 ショートカット Mac:「Command」 + 「F」 Win:「Ctrl」 + 「F」 ※「F」は「Find...

Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。

Figma(フィグマ)でモザイクをかける方法。Pixels。

Figmaのモザイクプラグイン「Pixels」とは? ネット上に写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、プラグインを探してみたところ、「Pixels」というシンプルで素敵なプラグインが見つかった。 Pixelsは、ただモザイクをかけられるだけでなく、ベクター画像としてモザイク処理...