CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ？ 2023.05.22 井川 宜久 ブレイクポイントの最小は320px？ スマホの元祖である、初代iPhoneの横幅は320pxだった。 それが基準となっているのか、2023年時点でも、320pxからのアクセスがある。 320pxは現存している。 320pxからのアクセスは、Googleアナリティクスを調べているとわかる。例えば月間約10,000〜15,000ユーザーのサイトで、70〜80ユーザーほど計測... CSSmemosWebデザイン
商用利用可、著作権フリーな画像生成AI。Adobe Fireflyの使い方例。 2023.03.28 井川 宜久 Adobe Fireflyとは？ 画像生成AIと文章生成AI。 Stable Diffusionがすごい、DALL·Eがやばい、ChatGPTがとんでもない、というハイスピードなAI新時代に、いよいよデザインツールの大御所と言えるAdobe社が参入してきた。 Fireflyという名前のツールとなるらしい。 （蛍ではなく赤い鳥。現在は順番待ち。） 肖像権... AImemosWebデザインデザインデザインツール脳
サイトが高速化？.htaccessをチェック。キャッシュ指定は要注意。 2023.03.17 井川 宜久 サイトの.htaccessファイルが間違っているかも。 サイトが重たいときやSEO対策をしたいとき、.htaccessで対策することが度々ある。 そのような場合、あちこちとサイトを検索して、コードを拝借して利用していることもあるだろう。 ありがたいことに、ネット上には色々とコピペOKなコードが提供されている。 ただし肝心のコピー元や自分自身のアレンジが間違っていた場... ChatGPTmemosPageSpeed InsightsSEOWebデザインWordPress
FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。 2023.02.19 井川 宜久 GeniusをAI仲間に、Figmaでデザインを。 AIの勢いが止まらない。 デザインツール「Figma」にも、AIのデザイン・コンパニオンがやってくる。 開発元のDiagram社のサイト上で公開されている動画によると、「Companion（コンパニオン）」という名の通り、付き添う仲間や友、連れ、という役割をしてくれる様子。 ざっくりとデザインを考えているときなどに... AIFigmamemosWebデザインデザインデザインツール脳
Illustrator 「クロスと重なり」の使い方。簡単操作が作業効率を上げる！ 2023.02.18 井川 宜久 クロスと重なりとは？ 「クロスと重なり」機能の登場で、デザインでよく使う、オブジェクトの重ね方が一瞬でできるようになった。 例えば、オリンピックの五輪マークのようなデザインをしたいときなどは、とても便利にできる。 以前はハサミツールでパスを切ったり、切ったオブジェクトを同じ場所に重ねたりと、色々と合わせ技が必要だったが、「クロスと重なり」はその作業を短縮させられる。 ... IllustratormemosWebデザインデザインデザインツール
CSS aspect-ratioの使い方。効かないときはどうする？ 2023.01.24 井川 宜久 CSSで縦横比の指定。aspect-ratioの使い方。 aspect-ratioの登場により、画像やGoogle Map、YouTubeなどの縦横比（アスペクト比）の指定がCSSでできるようになった。 すでに全てのモダンブラウザで実装可能となっている。 ブログやニュースなどの投稿記事のアイキャッチ画像の統一や、商品画像の一覧、Google MapやYouTubeなどのア... CSSmemosWebデザイン
FigmaからWebPで書き出しす方法。Olive Pressの使い方 2023.01.16 井川 宜久 Figmaのプラグイン「Olive Press」とは？ WebPで書き出すことが増えている。個人的にはWeb用の画像のほとんどは.webp形式を使用している。 現時点、FigmaやIllustratorなどのソフトはデフォルトでWebPは書き出せないが、画像形式を変換できるWebサイトはネット上に多々ある。 また、Figmaのプラグイン「Olive Press」は、Fig... FigmamemosWebデザインデザインデザインツール
Illustratorのファイルの保存場所をコンピューターにしたいとき。 2023.01.01 井川 宜久 Illustratorの初期設定のファイルの場所 Illustratorのファイルの保存場所を、クラウドではなくローカルに保存したいときがある。 保存の都度指定することもできるが、あらかじめローカル（コンピューター）にしておきたい場合は、環境設定で指定しておける。 「Illustrator」 > 「環境設定」 > 「ファイル管理」へ進む。 上部のメニューバー... DTPIllustratormemosWebデザインデザインデザインツール
GA4のページビュー数（PV数）は、page_viewとは違う？ 2022.12.31 井川 宜久 GA4のpage_viewと、表示回数と、UAのページビュー数と。 UA→GAから移行中のため、現在両方のアナリティクスで指標が見られる状態となっている。 とりあえず両方での「ユーザー数」はほとんど同じだ。（期間が若干違うため一致はしていない。） ただし、「ページビュー数」が全然違う。桁が違うレベルで異なるので、明らかにおかしい。 (※複数のサイトで確認。) ... memosSEOWebデザインアナリティクス
Illustratorでのトリミング（切り抜き）方法。できるだけシンプルに。 2022.12.30 井川 宜久 画像の切り抜きと書き出し方法１ 長方形、正方形のトリミング。 画像を選択。 上部の「コントロールパネル」ーに「画像を切り抜き」が表示される。 「オブジェクト」 > 「画像を切り抜き」からでも可。 また、右クリックメニューメニューにも「画像を切り抜き」がある。 ※（Illustratorの画面幅を狭めている場合は、コントロールパネルに「画像を切り抜き」メニュ... DTPIllustratormemosWebデザインデザインデザインツール
Illustratorの背景色を変えたい場合。ダークモードとアートボードと黒とグレー。 2022.12.29 井川 宜久 Illustratorのダークモードは不完全。 OSやChromeやFigmaがダークモードに完全対応している中、現時点（2022年12月）ではIllustratorのダークモードはちょっとしんどい。 Creative Cloudからダークモードに設定することはできるが、肝心のアートボードの背景が真っ白のままで目にきつい。 フォント選択のパネルの背景色も、真っ白のままだ。... IllustratormemosWebデザインデザインデザインツール
Illustratorのスポイトで半透明の色を拾いたいとき。（PhotoshopやFigmaと違う。） 2022.12.27 井川 宜久 スポイトで半透明の色を拾いたい。 Illustratorで作業中に、キーカラーを基に透明度を使ってデザインを組んでいくことがある。 そういったとき、不透明度が設定されていない場合はスポイトツールでサクッと色を拾える。が、不透明度が設定されているオブジェクトの場合はそうはいかない。 何年か前にできるようになった気がするが、忘れてしまったか、気のせいか、そもそもそんな方法は存... DTPmemosWebデザインデザインデザインツール
画像編集フリー。Photoshopのような無料オンラインツール「Photopea」。 2022.12.22 井川 宜久 Photoshopなどでちょこっとだけ画像編集したくなったとき。 無料プランで使えるオンライン画像編集ツール「Photopea」。 ちょっとした画像編集作業をしたくなったとき、このパソコンにPhotoshopが入っていればなぁ、と思うことがある。 しかしPhotoshopはなかなか高価であり、単発や短時間の作業ではコスパが良くない。 そういうときに、ブラウザ上で無料... DTPmemosWebデザインオンラインツールデザイン
オンラインで動画を圧縮する、「オンラインでビデオを圧縮」。 2022.12.19 井川 宜久 オンラインでビデオを圧縮。Compress Video Online。 動画は1枚1枚の画像のコマ送り。そのためどうしても容量が重たくなる。かと言って圧縮のためだけに動画編集ソフトを立ち上げるのもこれもまた気が重たい。 そこで重宝するのが、オンライン圧縮サイト「Compress Video Online / オンラインでビデオを圧縮」。 インストールの必要も、アカウント登... ITmemosWebデザインオンラインツール
写真の一部を消せるオンラインツール「Cleanup Pictures」。 2022.12.14 井川 宜久 映り込んだ被写体や不要な箇所を消したい。 petsPhotoshopのように。 写真の一部や映り込んだ被写体を消したいときに、なぞって消すことができるオンラインツールがある。 まるで、Photoshopの「修復ブラシ」や「コンテンツに応じた〜」のように。 petsCleanup Pictures。 真ん中の点線で囲まれた範囲内で、クリーンアップしたい画... memosMovieWebデザインオンラインツール
detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。 2022.12.10 井川 宜久 detailsタグとsummaryタグ。HTMLだけでアコーディオンメニュー。 JavaScriptを使わなくても、HTMLだけで折り畳められたコンテンツ領域の開閉（アコーディオンメニュー）ができようになった。 情報量が多い箇所など、覚えておくと何かと便利そうなHTML5の新しい要素。基本的な使い方はとにかくシンプル。 コピペで使い回しも可能。 de... CSSHTMLJavaScriptjQuerymemosWebデザイン
Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。 2022.12.01 井川 宜久 Figmaのモザイクプラグイン「Pixels」とは？ ネット上に写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、プラグインを探してみたところ、「Pixels」というシンプルで素敵なプラグインが見つかった。 Pixelsは、ただモザイクをかけられるだけでなく、ベクター画像としてモザイク処理... FigmamemosWebデザインデザイン
viewport-fit=coverで対応。iPhoneのSafe Area問題。 2022.11.17 井川 宜久 viewport-fit=coverで、iPhoneのSafe Area外をカバー。 iPhone X以降のiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。 画像引用：Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian THORON さま ... CSSHTMLiPhonememosWebデザイン
CSS フォントサイズはどうする？ remの基本かつ効果的な使い方。 2022.11.15 井川 宜久 remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 pets単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16... CSSmemosWebデザイン
Chromeデベロッパーツールでスマホ表示チェックする際の注意点。 2022.11.14 井川 宜久 デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット Mac： 「Command」 + 「Option」 + 「i」（FirefoxやSafariでも同じ。） Win： 「Ctrl」 + Shift「」 + 「i」 （「F12」でも可。） で開いた... CSSiPhoneJavaScriptmemosWebデザイン
