WebデザインやDTP、AIなどについてのメモです。 / いがわ

いがわ.

Memos

Figma Slidesの使い方。スライドの例。

Figma Slidesとは？ Figma Slides。スライドがテンプレートから作れる。 Figma Slidesの使い方について。 Figma Slidesは現在ベータ版として用意されており、アカウントがあれば2025年初頭まで無料で使用が可能。 使い方はシンプルで直感的。 使い方は簡単で、テンプレートなのですぐに慣れる。 スライド画面のサイズはモ...

FigmaでデザインされたWebサイトの例。

FigmaでデザインされたWebサイト。 Figmaでデザインされたサイトの判断。 このサイトはFigmaでデザインしている？ 現代ではさまざまなデザインツールが普及している。 そのため、Webサイトの見た目だけで、使用しているデザインツールを特定するのは難しい。 またFigmaには、WordPressやWix、STUDIO、Canvaなどのような、Webサイ...

AI生成のウェブサイトについて。

WordPressと生成AI。 AIによる生成サイト。 AI生成サイトの現在地。 たまに、AIによりWebサイトがあっという間にできあがった的な情報を見る。 そうなれば仕事の効率が良くなり、生産性が上がるかもしれない。 ただし、生成AIやデザインツールのAI機能によって作られたWebサイトが、WordPressのようにデータベースも作りました、...

Figmaで使える日本語フォント。おすすめフリーフォントサイト。

Figmaで日本語フォントが無料で。おすすめな33選。 無料で商用利用も可能な日本語フォント。 日本語フォントのまとめ。 Figmaで使える無料の日本語フォントがまとめられている。 33種類あり、商用利用も可。 （※細かな利用条件は各フォントの公式サイトでチェック。） 参照：無料で商用利用も可！日本語フォント集 / Free Japane...

Figmaで写真にぼかしをかける方法。

Figmaのエフェクト機能でぼかし。 Figmaには4種類のエフェクトがある。 Figmaにデフォルトで備わっているエフェクトは下記の4種類。 インナーシャドウ ドロップシャドウ レイヤーブラー 背景のぼかし （※「ブラー（Blur）」は日本語で「ぼかし」の意味。） この中の、「レイヤーブラー」と「背景のぼかし」で、写真にぼかしをかけることができる。...

Figmaのカラーパレットプラグインの使い方。

カラーパレットと色相環。 色相環ベースのカラーパレット。 Color Wheel デザイナーは色彩を適切に選択し、調和のあるカラーパレットを作成することが求められる。 そんなときに便利なのが、Web上で色相環を基にカラーパレットを作れるジェネレーター。 参照：Color Wheel - Color Palette Generator by Figma ...

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

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

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

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

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

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

Figmaのツールバーやサイドバーの表示非表示の方法。

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

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

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

Figmaでカーニング、文字詰ができないときの対応方法。

Figmaのカーニングは「alt + >」と「alt + <」で。 Figmaのカーニング、文字詰めの方法。 カーニングで、詰めたいときと広げたいとき。 Figmaは基本的にデジタルデバイス向けのツール。でも、カーニングができる。 イラレやフォトショと同じく、ショートカットの「alt + >」と「alt + 」は大なり、「」で調整。 文字と文字の間隔を...

フリーランスhubの評判は？

フリーランスHub。 Figma作った名刺が。 フリーランスHubへ。 Figmaで名刺を作ってみた結果を公開していたところ、一例としてフリーランスHubさまで掲載していただけることに。 名刺制作の参考として。 CHIBA DESIGN（チバデザイン）さまによる名刺デザインのコツや、株式会社山櫻さまによるQRコードのメリットについての記事などと一緒に、ふらっと...

Figmaでスライドの作り方。デザインシステムの使いt方。

Figma上にある、デジタル庁によるデザインシステム。 デザイン庁のサイト。 とにかくシンプル。 デジタル庁のサイトはシンプルでまとまりが良く、ページの表示速度も速い。 色々とお手本となるWebサイトのひとつ。 デジタル庁のデザインシステム。 まとめられた、デザインデータ。 Webサイトやアプリのためのデザインシステムも公開されている。 スラ...

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

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

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

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