ラスタライズと解像度。 Figmaは元々Web用のデザインツールのためか、現時点（2023年11月）では「解像度」の設定がない。 「ラスタライズ」は下記の手順でできるが、解像度はおそらく「72ppi」となると思われる。 Illustratorでは、テキストや画像にぼかしやシャドウ、透明効果などを使用した場合、印刷用入稿データにする際に「ラスタライズ」を行う...
Figmaでラスタライズをする方法と注意点。
Memos
Figmaのツールバーやサイドバーが消えてしまったときの対応。
Figmaのツールバーやサイドバーが消えた！？ UIの表示/非表示の切り替え。 Figmaを使ってデザインなどを行なっているとき、意図せずに上部のツールバーや左右のサイドバーが無くなっていることがある。 一瞬焦るが、そんなときは、「UIの表示/非表示」パネルから元に戻すことができる。 （※UIは「User Interface / ユーザーイン...
Remove BGのアカウント作成と、Figma用APIキーの作成方法。
Remove BGのアカウント作成手順。 Remove BGのサイトから。 アカウントはRemove BGのサイトの右上の「Sign up（サインアップ）」から無料で作成可能。 アカウントを作成。 「Sign up（サインアップ）」をクリックすると、アカウント作成の画面に切り替わる。 日本語翻訳。 日本語化されていないページがある...
X（旧Twitter）ロゴのダウンロードURLとSVGコード。
Xロゴの公式ダウンロードURL。 𝕏のロゴ 現時点（2023年11月初旬）では、日本語のダウンロードサイトが見つからないが、英語で「x logo download」と検索すると、下記のページが表示される。 Brand toolkit 𝕏ロゴのダウンロードURL：https://about.twitter.com/en/who-we-are/brand-toolkit...
Illustratorのテキストからベクター生成。使い方の例と注意点。
Illustrator テキストからベクター生成の使い方。 テキストからベクター生成は、Illustratorのバージョン28.0（Illustrator 2024）から使えるようになっている。 参考メモ：Illustratorのテキストからベクター生成が見つからないとき。 使い方は簡単。 長方形ツールで画像サイズを指定する。 画像サイズの長方形を作る...
Illustratorのテキストからベクター生成が見つからないとき。
AIによる、テキストからベクター生成。 テキストからベクター生成。 画像生成AIにより、IllustratorでもAI画像が作成できるようになった。 ちょっと試してみようとしたところ、「テキストからベクター生成」というメニューが見つからなかった。 Illustratorのアップデートで解決。 Illustrator 2024（version 28.0）...
Figmaのカーニング、文字詰めのショートカットの使い方。
Figmaのカーニングは「alt + >」と「alt + <」で。 Figmaは基本的にWebデザイン向けのツールだが、カーニングができる。 イラレやフォトショと同じく、「alt + >」と「alt + 」は大なり、「」で調整。 文字と文字の間隔を詰めたい場合は「alt + 」 or 「alt + （大なり）」や「」は「.（ピリオド） / る」、「...
フリーランスHubへ掲載。Figmaで名刺を作ってみたら。
フリーランスHubへ。 Figmaで名刺を作ってみた結果を公開していたところ、一例としてフリーランスHubさまで掲載していただけることに。 今回の掲載先。 CHIBA DESIGN（チバデザイン）さまによる名刺デザインのコツや、株式会社山櫻さまによるQRコードのメリットについての記事が紹介されています。 ひと工夫で魅力的なデザインに！名刺づくりの参考にしたい記事まと...
Figmaでのスライドの作り方と、デジタル庁のデザインシステム。
Figma上にある、デジタル庁によるデザインシステム。 デザイン庁のサイト。 デジタル庁のサイトはシンプルでまとまりが良く、お手本となるWebサイトのひとつ。 サイト制作におけるビジョンや過程がスライド形式でアップされているため、プレゼン用などFigmaを使ったスライド作りの参考にもなる。 デジタル庁のデザインシステム。 Webサイトやアプリのためのデザインシ...
Adobe Fireflyの使い方例。商用利用可、著作権フリーな画像生成AI。
Adobe Fireflyとは？ 画像生成AIと文章生成AI。 Stable Diffusionがすごい、DALL·Eがやばい、ChatGPTがとんでもない、というハイスピードなAI新時代に、デザインツールの大御所と言えるAdobe社がいよいよ本格参入。 無料で使えるプランもある。 参照元：Adobe Firefly – 誰でも使える生成AI ...
CSS gapの使い方？Flexboxでレスポンシブ？効かないときは？
gapとは？ divなどで作ったボックスを並べるとき、要素間に均一な余白を開けると綺麗に見える。 これまでは「margin」、もしくは「padding」を使うのが一般的だったが、「gap」を使うという選択肢が増えた。 すでにモダンブラウザはgapに対応している。 参考： gap" | Can I use... Support tables for HTML5, CS...
FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。
TinyImage Compressorプラグインとは？ 圧縮だけでなく、印刷用やWeb用などにも。 TinyImage Compressorは、Figmaからエクスポートするファイルを軽量化してくれるプラグイン。 Figmaでは現時点サポートされていないCMYKに変換したり、画像形式をWebPなどに変換してくれる。 印刷用にしたい場合はCMYKでPDFのエクスポー...
O-DANの使い方や著作権など。商用利用可なフリー素材をODAN(オーダン)。
O-DAN（オーダン） 商用利用可能なフリー写真や画像を世界から横断。 ここ数年すっかりお世話になっている、商用利用可かつ著作権フリーな写真・画像の検索サイトO-DAN。 とにかく使い勝手が手軽で、アカウント登録の必要さえもない。 基本的にクレジット表記も不要で、加工もOK。ブログの記事やアイキャッチ画像（サムネイル）にも使える。 ライセンスの例。 例外もある...
FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。
GeniusをAI仲間に、Figmaでデザインを。 AIの勢いが止まらない。 デザインツール「Figma」にも、AIのデザイン・コンパニオンがやってくる。 開発元のDiagram社のサイト上で公開されている動画によると、「Companion（コンパニオン）」という名の通り、付き添う仲間や友、連れ、という役割をしてくれる様子。 ざっくりとデザインを考えているときなどに...
Illustrator 「クロスと重なり」の使い方。簡単操作が作業効率を上げる！
クロスと重なりとは？ 「クロスと重なり」機能の登場で、デザインでよく使う、オブジェクトの重ね方が一瞬でできるようになった。 例えば、オリンピックの五輪マークのようなデザインをしたいときなどは、とても便利にできる。 以前はハサミツールでパスを切ったり、切ったオブジェクトを同じ場所に重ねたりと、色々と合わせ技が必要だったが、「クロスと重なり」はその作業を短縮させられる。 ...
Illustratorの「スケッチをベクターに変換」を実際にやってみた手順。
手書きのスケッチをベクターデータへ変換。 「スケッチをベクターに変換」の機能は、その名の通り、ペンや鉛筆などで描いたスケッチのJPGやPNG画像をベクター化することができる。 ずっと欲しかった機能で、ありそうでなかった。使い方は簡単で、数ステップで可能。 アートボードにJPGやPNGなどを配置する。 今回はボールペンで描いたエッフェル塔のスケッチをスキャンし...
AI DALL·E 葛飾北斎と歌川広重による札幌の浮世絵？
北斎風の札幌のような風景画。 葛飾北斎は1760年の東京（江戸）生まれ。 当時の北海道（蝦夷地）はアイヌの人々が住む土地だった。 東京から北海道までは距離も遠く、札幌市は街自体が存在していなかった。 なので、北斎が描いた「富嶽三十六景」にも、札幌の風景は存在しえない。 （「富嶽」は「富士山」のこと。） DALL·E（ダリ）による、北斎風の札幌のような風景画。...
Illustratorのシェイプ形成ツールの使い方。見つからないときは！？
シェイプ形成ツールは簡単に使える。 「シェイプ形成ツール」は「パスファインダー」と似たような機能で、なんとなく気軽に使える。 もちろん使い分けをするのがベストだが、両方ともそれほど難しくなく、それでいて扱えると作業効率が格段に上がる。 ロゴやピクトグラム、イラスト作成時などには特に役に立つ。 もしこのことを知らなければ、「ペンツール」などで頑張ってしまい、結局それで...
FigmaからWebPで書き出しす方法。Olive Pressの使い方
Figmaのプラグイン「Olive Press」とは？ WebPで書き出すことが増えている。個人的にはWeb用の画像のほとんどは.webp形式を使用している。 現時点、FigmaやIllustratorなどのソフトはデフォルトでWebPは書き出せないが、画像形式を変換できるWebサイトはネット上に多々ある。 また、Figmaのプラグイン「Olive Press」は、Fig...
Figma プラグインを削除する方法。追加も削除もシンプルに。
Figmaへ追加したプラグインを削除したいとき。 Figmaはプラグインのインストールが簡単なので、ついつい色々なものを追加してしまう。 そうしているうちに、数日後、数ヶ月後には、あれ？と、何のためのプラグインだったかがわからなくなってしまったり、増えすぎて探しづらくなってきたりする。 Figmaからプラグインを削除する手順。 プラグインの追...