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

いがわ.

Memos

いがわが描いたイラストのにゃんこ。

WordPressとセキュリティ。アップデート対応。

WordPressには脆弱性がある？ 脆弱性がないシステムは存在しない。 セキュリティやリテラシーも含めた、アップデートが必要。 WordPressは「古い」、「脆弱性」がどうかというレベルではなく、「スタンダード化」している。 パソコンやスマホのように。 Photo by gounder パソコンやスマホと同様。 MacやWindows、...

X軸とY軸のどっちが縦か横かの覚え方。

XとY、どっちが縦か？ 縦と横はすぐわかっても。 XとYはピンとこない。 久しぶりのときや、並行作業のときなどに、一瞬、迷うことが。 Photo by Ishaan Brar 座標軸の覚え方の例。 XとYの場合。 X横とY軸。 X（横軸）とY(縦軸)は、どっちがどっちだったかを忘れやすい。 そのため例えば、「X」と「Y」...

WordPressとjQueryで構築。Rolling Stonesのように。

Stonesのサイトは、WordPressで制作されている。 デザインと機能性の良さがあれば。 新しいとか古いとかは、関係がない。 1960年代にデビューしたバンド「The Rolling Stones」は、2020年代に入っても新作を発表している。 彼らは演奏し歌うミュージシャンで、シンガーソングライターでもある。 クリエイターとして、ブルースを原点とした主...

MacBook Neoのスペックでイラレやコーディングはできる？

MacBook Neoの価格と実務の比較。 MacBook Airは軽く、MacBook Proはより高性能。 MacBookの特徴。 Appleのノートパソコン（ラップトップ）であるMacBookは、とても便利で使いやすい。 MacBook Airは物理的にも軽いので、持ち運びも楽。 趣味や個人での使用では十分なスペックがあり、ウィルスやマルウェアへの感染例...

Figmaで画像をベクター化。できないときの対応イメージ。

Figmaでスケッチからベクターへ。 Figmでのベクター化。 ラスターからベクターへ変換可能に。 いよいよFigmaでも、スケッチからベクターへ変換できるように。 紙へ描いたスケッチやラフの写真（ラスターデータ）画像を、Figmaのデフォルト機能でベクターデータにできる。 Photo by A S Figmaでベクター化をする手順。 ...

Apple Creator StudioのメリットとAdobe Illustrator。

Apple Creator Studioとは？ iWorkの拡張版のような。 Appleの新しいサブスクサービス。 MacとiPad（一部例外あり）で使用できる、クリエイター向けとオフィス系のツールがパッケージされたサービス。 価格が良心的。 価格は月額1,780円、または年間17,800円と、この分野では低い設定となっている。 学生や教職員には初月無料...

生成AIの無断学習、著作権侵害への対策例。

AIの無断学習と著作権侵害。 Webサイトのクロールとコンテンツの著作権。 Webサイトのクロール。 生成AIの登場、普及からの悩ましい問題である、AIによるインターネット上のクローリング、スクレイピング。 便利なツールである反面、サイトのリンク元の表記が「単なる数字（AIの回答に出る番号）」だったり、サーバーへ「1日に数万件以上」のクロールがあったりする。 ...

Nano BananaでのGeminiの画像生成や編集のイメージ。

Nano Bananaで画像生成・編集が高次元に。 画像生成と画像編集。Google AI Studioの使い方。 無料で画像編集が可能、かつ高精度で。 Google AI Studioに、Gemini 2.5 Flash Imageとして、新しい画像生成機能（Nano Banana）が登場。 クオリティが高いので、使い方次第でかなりのポテンシャルを感じる。 ...

Figmaにフォントが反映されないときの対応方法。

Figmaにフォントが反映されない。 ヒラギノや游明朝がFigmaから消えた。 日本語フォントが消えている！？ なにかの拍子にFigmaからヒラギノが消えていた。フォントのパネルから検索しても出てこない。 ヒラギノだけでなく、游書体など、他の日本語フォントも消えていた。 英語フォントも消えている！？ 一部の英語フォントも消えていた。 おそらく自分で...

Figmaのガラスエフェクト。見つからないとき、できないときの対応。

Figmaへガラスエフェクトが追加。 Figmaのガラスエフェクト。 ガラスエフェクトは現在ベータ版。 ガラスエフェクトはベータ版だが、無料ユーザー含め、現時点ではFigmaの全ユーザーが使用できる。 ガラスエフェクトが見つからない、ならないとき。 ガラスエフェクトは、フレームへの適用となる。 長方形ツールなどで作成した図形には適用できないので、...

Figmaで図形や文字を斜めに。ベクター編集モード。

Figmaの文字を斜めに変形する「Skew」。 Skewプラグインで斜めに変形。 Figmaの文字を斜めにする。 Figmaでデザインをしているとき、文字を斜めにしたいときがある。 そんなときに便利なのが、Skewプラグイン。 テキストをアウトライン化しなくても、斜めの状態で文字編集ができる。 斜めの指定方法。 Skewプラグインを使用した...

LLMO。AI Mode（AIモード）へ対策。

AI Modeはいつから？SEOはLLMOに？ AI Modeは、段階的に使用されてきたネーミング。 Search LabsからAI Overviews、そしてAI Modeへ。 以前は「強調スニペット」などで検索結果の最上位に表示されていた箇所は、試験や段階を踏みながら、「Search Labs」>「AI Overviews（AIによる概要）」へと進化。 そして最...

FigmaのWebサイトデザイン画面が見つからないとき。

FigmaのWebデザイン用画面が見つからない？ FigmaのUI/UXデザインが変更。 Figma Sitesの登場。 Figma Config 2025の開催後、FigmaのUI/UXがアップデートされており、機能がもりもりになっている。 デザイン用の画面も、AIとノーコードツールの流れによって、機能やインターフェイスが変わっている。 Webサイトデザイン...

ChatGPTの画像生成ができないとき。画像生成の制限と方法。

ChatGPT GPT-4oの画像生成、Image Generation。 Image Generation（Image Gen）の使い方例。 作りたい画像をメッセージで指示。 生成したい画像をテキスト入力で指示。 （※テキストメッセージのことをプロンプトとも呼ばれる。） 現在は生成に結構、時間がかかる。（今回は無料プランで生成。） メッセージ（...

Figmaで縦書きができないときの対処方法。

Figmaの縦書きプラグイン「Vertja」とは？ Figmaで文字を縦書きにしたいとき。 縦書き用のプラグイン。 Figmaは日本語対応はしているが、縦書きへの対応は現時点ではされていない。 デザイン上、縦書きにしたい箇所も出てくるので、プラグインがあると助かる。 Vertjaで縦書きができる。 Figmaの縦書きには、Vertical（バーティカル）...

Figmaで背景を削除。デフォルトのAI機能でさくっと切り抜き。

FigmaのAI機能、「背景を削除」。 プラグイン不要。Figmaだけで背景削除。 「ツールバー」>「アクション」>「背景を削除」。 FigmaのAI機能を使った背景削除ができるようになっている。 手順は簡単で、選択ツールで画像を選択し、下部にあるツールバーから、アクションへ進み、背景を削除を選ぶだけ。 今回はFigmaが生成した画像を使用。 ツール...

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

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

WordPressのテーマ。ホワイトハウス。

WordPressテーマによるホワイトハウス。 WordPressによるホワイトハウスのWebサイト。 2025年1月にリニューアル。 2025年1月にリニューアルされたアメリカ合衆国のホワイトハウスのサイトは、引き続きWordPressが使用されている。 WordPressの評価は変わらない。 ノーコードや生成AIが普及していく中で、WordPressはまだ...

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

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

ブルーライトカットの科学的根拠、眼科と経験談。

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

キャッシュがGoogleからWayback Machineへ。削除や拒否の方法。

キャッシュの更新リクエストができない？ キャッシュの更新はリクエスト不可に。 キャッシュの更新はできない。 Google Search Consoleのサイドバーから「削除」の画面に進むと、「キャッシュの更新はリクエストできなくなりました。スニペットの更新は引き続きリクエストできます。」と表示がされていることがある。 これは、長らくGoogleの検索結果にあった「キ...

CSSが効かないのはダークモードが原因かも。

CSSが効いていない。一部だけおかしい場合。 CSSアニメーションやキャッシュの問題？ CSSの優先順位も間違いない。 CSSは間違いないはず。W3CのValidatorでのチェックでも問題がない。 参照：W3C CSS 検証サービス ブラウザやサーバーのキャッシュも削除済み。 CSSのブラウザキャッシュは、スーパーリロードで無視もできる。 バージ...

WordPress投稿画面のオートセーブを無効化する方法。

WordPress投稿画面の自動保存機能とは？ 自動保存、オートセーブの普及。 自動保存、オートセーブ機能は便利な反面... 近年ますます普及している、自動保存、オートセーブ機能。 デザインツールでは重宝しているオートセーブ。ただし、WordPressの投稿記事ではちょっと煩わしく感じることがないだろうか？ また、リビジョン数が増えてしまうので、データ量が肥大...

Simple Image XML Sitemapの使い方の例。

Simple Image XML Sitemapのインストール方法。 Simple Image XML Sitemapとは？ 画像のXMLサイトマップを生成するプラグイン。 Simple Image XML Sitemapは、更新頻度も高く、ページや投稿内にアップロードされたすべての画像のXMLサイトマップを生成してくれるというプラグイン。 WordPress管理画...

Google検索結果とサムネイル。

Google検索結果でサムネイルが表示されないときの誤解。その1。 metaタグによるサムネイル画像の指定は、実は意味がない。 <meta name="thumbnail" content="指定したいサムネイル画像へのパス">では検索結果に表示されない。 Googleの検索結果へのサムネイル表示については、下記のように...

ファビコンが検索結果へ表示されなくなった原因と対処。

検索結果からファビコンが突然消える？ ファビコンがGoogleやYahooで表示されない。 ファビコンの設定方法を確認。 気がついたらGoogleやYahooの検索結果からサイトのファビコンが消えていた。 ファビコンの設定方法を確認しても、特に問題が見つからず。 ファビコン表示がされないときの主な確認事項。 画像の形式や拡張子。（favicon.ic...

WordPressのリビジョン機能を制御。プラグインでも。

WordPressのリビジョン機能。 WordPressのリビジョン数は制限もできる。 リビジョンは便利。ただし容量が増えてしまう。 リビジョンは便利な反面、データベースの容量が増えてしまう。 また、古い記事のリビジョンは、ほとんどの場合、すでに使うことのないデータとなっている。 それらのデータが大量に溜まることで、サイト表示の速度低下や、思わぬエラーの原因と...

WordPressのバックアップができないときの対処方法。

WordPressのバックアップができないときの対応。 WordPressのバックアップはあわてずに。 WordPressのバックアップは実はシンプル。 WordPressは無料プランと有料プランがあり、拡張性が高く、普及率も高い。 ただ普通の静的なサイトと違い、情報発信などを行える動的サイトなので、データベースを利用する。 そのためサイトの制作時や公開後のト...

WordPressのリビジョンがおかしいときの復元方法。

WordPressのリビジョン表示を復元。 WordPressのリビジョンが2026年前に。 リビジョンの日時表示の設定。 WordPressでリビジョンを使用していたところ、いつの間にか日時が2026年前になっていた。 2026年前というと紀元前であり、明らかにどこかがおかしい。 クライアントさまのサイトではなく、修正方法もわからなかったのでそのままにしてお...

ファビコンが表示されなくなったときの対処例。

ファビコンが表示されない？ 検索結果からファビコン表示が消える。 ファビコン表示不可。GoogleでもYahooでも。 ふと気がついたら、Google検索結果からサイトのファビコンが表示されなくなっていた。 突然のことであり、Yahooでもファビコンは表示されていなかった。 ファビコン表示がされないときの主な確認事項。 画像の形式や拡張子。（favi...

WordPressのメディアライブラリが表示されないときの対処。

WordPressのメディアライブラリが表示されない？ メディアライブラリにファイルが表示されない。 メディアの追加とアイキャッチ画像の設定ができない。 今回の現象。 WordPressの投稿画面から、メディアを追加しようとすると、メディアファイルが空欄になっていた。 つまり、メディアライブラリにファイルが表示されない。 アイキャッチ画像（サムネイル画像...

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の違い。 ツールバーが上部から下部へ移動。 大きな変化としては、以前...

WordPressの例とセキュリティプラグインで強化。

WordPressのセキュリティ問題と脆弱性。 WordPressのセキュリティ強化とシェア率。 WordPressのセキュリティ対策とシェア率の高さ。 現在は世界中のWebサイトの約40%が、WordPressでできて言われている。WordPressのシェア率の高さはかなり以前から言われており、徐々にシェア率を伸ばしてきた。 そのため、ターゲットとして狙われやすい...

VS Codeの折り返しと、ショートカット。

VS Codeが折り返していない！？ VS Codeのコードが折り返さずにはみ出てしまう。 コードが右端で折り返していない。 VS Codeでコーディングをしているときに、コードがはみ出ていることに気がつくことがある。 直したはずなのに、また折り返しにならないことも。 VS Codeの折り返しの設定箇所は複数ある。 右端での折り返...

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

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

CSS first-letterが効かないとき。Webデザイン。

CSS擬似要素のfirst-letter。 first-letterは、最初の一文字という意味。 ::first-letter 「first-letter」を日本語にすると、そのまま「最初の一文字」となる。 Webデザインをしているとき、その「最初の一文字」だけのデザインを変えたいときがある。 最初の一文字だけデザインを変えたい。 例えば見出しの最初の一...