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

いがわ.

Memos

Illustratorでのトリミング（切り抜き）方法。

画像の切り抜きと書き出し方法１ 長方形、正方形のトリミング。 画像を選択。 上部の「コントロールパネル」ーに「画像を切り抜き」が表示される。 「オブジェクト」 > 「画像を切り抜き」からでも可。 また、右クリックメニューメニューにも「画像を切り抜き」がある。 （※Illustratorの画面幅を狭めている場合は、コントロールパネルに「画像を切り抜き」メニュ...

Illustratorの背景色を変えたい場合。

Creative Cloudからのダークモード設定。 Illustratorのダークモード設定手順。 「Creative Cloud」の起動から。 Illustratorのダークモード設定は、まず「Creative Cloud」を起動し、右上の自分のアカウントのアイコンをクリックする。 「Creative Cloud」 > 「環境設定」 > 「アピア...

WordPressの投稿IDを確認したいときの確認方法。

WordPressの投稿IDで条件分岐したいとき。 投稿IDを確認したい。 投稿には個別にIDが振られている。 WordPressサイトを構築・運用する際に、投稿IDを知りたいときがある。特定の記事でのみでJavaScriptやGoogle Fontsを読み込みたい場合などに。 普通にheader.phpなどで読み込むと、全ての投稿記事に適用されてしまう。そうなると...

Illustratorのスポイトで半透明の色を拾いたいとき。

スポイトで半透明の色を拾いたい。 Illustratorで作業中に、キーカラーを基に透明度を使ってデザインを組んでいくことがある。 そういったとき、不透明度が設定されていない場合はスポイトツールでサクッと色を拾える。が、不透明度が設定されているオブジェクトの場合はそうはいかない。 何年か前にできるようになった気がするが、忘れてしまったか、気のせいか、そもそもそんな方法は存...

VirusTotal。無料オンラインウイルス&マルウェアチェック。

無料オンラインウイルス&マルウェアチェック「VirusTotal」。 VirusTotal。Google社が非商用で運用。 ネットで調べ物などをしているときに、意図しないページへ飛んでしまうことがある。 知らない相手から、メールで添付ファイルやURLのリンクが届くこともある。 また、未知のオンラインツールを使用するときもあるだろう。 VirusTotalは、オンラ...

Photopeaの使い方。使える機能やPSDファイルなど。

Photoshopなどでちょこっとだけ画像編集したくなったとき。 無料プランで使えるオンライン画像編集ツール「Photopea」。 ちょっとした画像編集作業をしたくなったとき、このパソコンにPhotoshopが入っていればなぁ、と思うことがある。 しかしPhotoshopはなかなか高価であり、単発や短時間の作業ではコスパが良くない。 そういうときに、ブラウザ上で無料...

オンラインで動画を圧縮する、「オンラインでビデオを圧縮」。

オンラインでビデオを圧縮。Compress Video Online。 動画は1枚1枚の画像のコマ送り。そのためどうしても容量が重たくなる。かと言って圧縮のためだけに動画編集ソフトを立ち上げるのもこれもまた気が重たい。 そこで重宝するのが、オンライン圧縮サイト「Compress Video Online / オンラインでビデオを圧縮」。 インストールの必要も、アカウント登...

Figmaのガイドやルーラーの出し方。

Figmaのルーラー（定規）の出し方。 ルーラー（定規）の表示方法。 Figmaでルーラーを表示させたい。 Figmaでデザインをしているときにルーラー（定規）を出そうと「command + R」 or 「Ctrl + R」を押しても出てこない。 あれ！？と思い、じゃあ、と右クリックで出そうとしてもメニューにもない。 IllustratorやPhotoshop...

写真の一部を消すオンラインツール、Cleanup Pictures。

写真に映り込んだ不要な箇所を消したい。 Photoshopのように。 Cleanup Picturesで消していく。 写真の一部を消したいときに、なぞって消すことができるオンラインツール。 まるで、Photoshopの「修復ブラシ」や「コンテンツに応じた〜」のように。 Cleanup Pictures。 消したい写真をアップロード。 真ん中の点線で...

detailsとsummaryの使い方。HTMLだけでアコーディオンを実装。

detailsとsummary。HTMLだけでアコーディオンメニュー。 detailsタグとsummaryタグ。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉（アコーディオンメニュー）ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い...

Googleのアイコン。Material Symbols and Iconsの使い方。

Googleのアイコンフォント。 アイコンフォントといえば「Font Awesome」が有名だが、Google Fontsでもアイコンフォントを無料配布している。 Googleフォントのように使え、SVGやPNG形式で画像として個別にダウンロードすることもできる。 また、デザインツール「Figma」のプラグインとしても利用できる。 Google Fontsのサイトによる...

Figmaのトリミングや切り抜き、消しゴムの使い方。

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

Figmaで名刺制作。作成・入稿・仕上がりまで。

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

Figmaを日本語化。日本語設定の方法。

Figmaを日本語化。設定方法はMacもWindowsも同じ。 Figmaが日本語対応。より使いやすく。 言語変更で日本語のUI（ユーザーインターフェイス）に。 2022年にFigmaの日本法人が設立されてから、Figmaはデフォルトで英語⇄日本語の言語変更が可能となっている。 参考：Figma日本語対応のお知らせ Figmaの言語変更はシンプ...

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

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

Figmaでモザイクをかける方法。Pixelsプラグイン。

Figmaのモザイクプラグイン「Pixels」とは？ Pixelsで画像にモザイクを。 写真や文字にモザイクをかけたいとき。 ネット上などに写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、こういうときはプラグイン。 Pixelsでモザイクをかけられる。 プラグインを探し...

CSSブレンドモード。乗算をmix-blend-modeで。

CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode（ブレンドモード）」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m...

Figmaで印刷物。DTPプラグインPrint for Figma。

Print for Figma。Figmaの印刷物用プラグインとは？ Figmaで作るDTP。 Figmaはもともとデジタルデバイス向けのツールだが、工夫すればDTPやグラフィックデザインもできる。 無料で使え、初心者にも向いている。 PhotoshopからのFigma。 FigmaはPhotoshopを意識して作られたデザインツールなのだそうで、カラーパレッ...