デザイナー、コーチ、ディレクター / いがわ

.

Memos

Figmaの解像度は? 計算に便利なサイトやプラグイン。

Figmaの解像度。計算に使えるサイトやプラグイン。

Figmaで作成する画像の解像度。 Fifmaからエクスポートしたデザインデータは72ppiになる。 Fifmaは元々Web向け。 FifmaはWebデザイン、Webアプリに適したツールなので、書き出したデザインの解像度はデフォルトで72ppiとなる。 IllustratorやPhotoshopのように、解像度の設定や変更をすることもできない。 印刷物には一工...

Figmaのクイックアクションバー。開き方と使い方とショートカット。

Figmaのクイックアクションバー。開き方と使い方とショートカット。

Figmaのクイックアクションバーの開き方。 覚えると便利なクイックアクションバー。 開き方。 「メインメニュー(Main menu)」 > 「クイックアクション...(Quick actions...)」と進む。 または、下記のショートカットから開く。 Figmaのクイックアクションバーの使い方。 クイックアクションバーで検索。 ...

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

Figmaでアウトライン、ベクターにする方法。

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

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

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

Figmaのツールバーやサイドバーが消えた!? 無意識にうちにどこかを触っている。 サイドバーがない? Figmaを使ってデザインなどを行なっているとき、意図せずに上部のツールバーや左右のサイドバーが無くなっていることがある。 FigmaとPhotoshopとIllustratorの違い。 Figmaはフォトショとイラレと共通点が多いが...

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でスライドの作り方。デザインシステムの使いt方。

Figma上にある、デジタル庁によるデザインシステム。 デザイン庁のサイト。 とにかくシンプル。 デジタル庁のサイトはシンプルでまとまりが良く、ページの表示速度も速い。 色々とお手本となるWebサイトのひとつ。 デジタル庁のデザインシステム。 まとめられた、デザインデータ。 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の使い方や料金。日本語対応やAIの例。

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のトリミングや切り抜き、消しゴムの使い方。

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

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

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

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

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

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

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