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

いがわ.

Memos

Figmaの画像書き出しができないときの対処。エクスポートの方法。

Figmaのエクスポートによる書き出しは4種類の画像形式。 PNGのメリット。 どうしてPNGなのか？ Figmaのエクスポート（画像書き出し）は、デフォルトではPNGとなっている。 PNGはUI/UXデザインを行うときに便利で、アイコンやボタン、ロゴなどを書き出しやすい。 イラストやトリミングされた画像も、PNGが向いている。 PNGは透過が可能。 ...

イラレの画像トレースを実際にやってみた手順。

イラストを画像トレースでベクターへ変換。 「画像トレース」の機能は、ペンやデジタルツールなどで描いたイラストなどの、JPGやPNG形式の画像をベクター化することができる。 使い方は簡単で、数ステップで可能。 アートボードにJPGやPNGなどを配置する。 今回はフリー素材サイトの（イラストAC）のイラストを使用。 （※フリー画像でも改変禁止のものもあるの...

ブルーライトカット眼鏡は意味ない？眼科医療機関と経験談。

ブルーライトカットとUVカット効果の体験談。 ブルーライト&UV。カット率90%超のオーバーグラス。 オーバーグラスのメリット。 既存のメガネの上からかけられるオーバーグラスは、安くて便利。 ブルーライトとUV（紫外線）がそれぞれ90%以上のカット率があるタイプは、確かに効果が感じられた。 オーバーグラスのデメリット。 メガネが二重になるため重い。長時間...

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

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

UI3。FigmaでWeb、スライド、UI/UXデザイン。

UI3というFigmaのインターフェイス。 FigmaのUI3ベータ版に。 FigmaのUI3ウェイティングリストから。 ウェイティングリストに登録していたFigmaのUI3が、ベータ版として使用可能となっている。 （※スクショはダークモード時のもの。） UI3と従来のUIの違い。 ツールバーが上部から下部へ移動。 大きな変化としては、以前...

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

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

生成AIとWebデザイン、ChatGPTの活用。

生成AIとデザインの交差点。 AIと画像生成・イラスト生成。これからの創作。 AI生成のテクノロジーと、アナログ作業の創造性。 すでにAI（人工知能）は、さまざまな分野で急速に進化しており、デザインの世界もその例外ではなくなった。 その中でも特に注目されているのが、OpenAIの生成AI、ChatGPT。 AIのイメージを超えた性能。 当...

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

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

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

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

IllustratorとPhotoshopのショートカットキー一覧。

Illustratorのショートカットキー一覧。 イラレのショートカットキー一覧が。 Ai おすすめショートカットキーリスト。 Adobe Creative Cloudのチュートリアル記事に、イラレのショートカットキーの一覧が載っている。 Mac用とWindows用それぞれに対応しており、キーボード配置の画像とそれに対するテキストによる構成で、一般的なショートカット...

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

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

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

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

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

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

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

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

イラレのテキストからベクターの例。Illustratorの生成AI。

Illustrator テキストからベクター生成の使い方。 テキストからベクター生成は、Illustratorのバージョン28.0（Illustrator 2024）から使えるようになっている。 参考メモ：Illustratorのテキストからベクター生成が見つからないとき。 使い方は簡単。 長方形ツールで画像サイズを指定する。 画像サイズの長方形を作る...

Illustratorのテキストからベクター生成が見つからないとき。

AIによる、テキストからベクター生成。 テキストからベクター生成。 画像生成AIにより、IllustratorでもAI画像が作成できるようになった。 ちょっと試してみようとしたところ、「テキストからベクター生成」というメニューが見つからなかった。 Illustratorのアップデートで解決。 Illustrator 2024（version 28.0）...