Figma 削除したファイルを復元したいとき。復元の方法。 2023.01.09 井川 宜久 Figma使用中に削除してしまったファイルを復元したい。 Figmaで作業中に、誤ってファイルを削除してしまうときがある。 ゴミ箱を探しても、残念ながらFigmaにはゴミ箱はない。 焦ってしまうが、ゴミ箱的な場所は存在し、そこから復元することは可能だ。 Figmaの削除ファイルを復元する手順。 「Drafts / 下書き」をクリ... FigmamemosWebデザインデザインデザインツール
text-overflowの使い方。CSSで文字数を制御。効かないときは？ 2023.01.06 井川 宜久 CSSで文字数の制御。text-overflowの使い方。 text-overflowで３点リーダーを付ける場合は単体では機能しなく、次の4つを一緒に指定する必要がある。 width: 30em; (幅の単位や広さは任意。) overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 「text... CSSmemosWebデザイン
Illustrator ハート型を綺麗で滑らかに作るシンプルな方法。 2023.01.02 井川 宜久 まずはハートの半分を作る。 Illustratorでハート型のような左右対称な形を作る場合、最初から全体を作るとなかなかうまくいかない。 コツとしては、左右どちらかの半分だけを作って、それを反対側へコピーすると良い。 （数式で描かれたベジェ曲線による同じ形をコピーすることになるため、綺麗な左右対称の形になる。） ハートはペンツールで結構簡単にできる。 ... IllustratormemosWebデザインデザインデザインツール
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デザインデザインデザインツール
WordPressの投稿IDを確認したい時は、ここを見るのが簡単。 2022.12.28 井川 宜久 投稿IDで条件分岐したいとき。 WordPressサイトを構築・運用する際に、投稿IDを知りたいときがある。特定の記事でのみでJavaScriptやGoogle Fontsを読み込みたい場合などに。 普通にheader.phpなどで読み込むと、全ての投稿記事に適用されてしまう。そうなるとページの表示速度にも影響してしまうので、できれば条件分岐をしたい。 その場合、条件分岐... memosPHPWebデザインWordPress
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デザインオンラインツール
slickの使い方。jQueryスライダーのシンプルなサンプル例。コピペも可。 2022.12.17 井川 宜久 slickのシンプルなサンプル。 petsmetaタグ内に記述。 jQuery本体とslickのJS、slickのCSSを読み込む。 （※jQueryはbodyの閉じタグの前じゃなくても特に問題はない。開発者や公式サイトではmeta内となっている。） <script src="https://code.jquery.com/jquery-3.6.... CSSHTMLJavaScriptjQuerymemosWebデザイン
Material SymbolsをFigmaへ。インストールしてすぐに使える。 2022.12.16 井川 宜久 GooleのアイコンフォントをFigmaへ。Material Symbols。 Google Fontsから手軽に使えるアイコンフォント「Material Symbols」が、デザインツール「Figma」のプラグインとして配布されている。 Googleの案内では現時点、2,500以上のアイコンが使えるらしい。 かつ「Outlined（輪郭）」、「Rounded（角丸）」、「S... FigmamemosWebデザインオンラインツール
Figmaのルーラー（定規）の出し方。表示方法がイラレとちょっと違う！ 2022.12.15 井川 宜久 Figmaのルーラー（定規）は「shift + R」で。 Figmaでデザインをしているときにルーラー（定規）を出そうと「command + R」 or 「Ctrl + R」を押しても出てこない。 あれ！？と思い、じゃあ、と右クリックで出そうとしてもメニューにもない。 IllustratorやPhotoshopで慣れているとつい、「command + R」 or 「Ctr... FigmamemosWebデザインデザイン
写真の一部を消せるオンラインツール「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デザイン
Material Symbols and Iconsの使い方。表示されないときの対処法。 2022.12.09 井川 宜久 Googleのアイコンフォント。 アイコンフォントといえば「Font Awesome」が有名だが、Google Fontsでもアイコンフォントを無料配布している。 Googleフォントのように使え、SVGやPNG形式で画像として個別にダウンロードすることもできる。 また、デザインツール「Figma」のプラグインとしても利用できる。 Google Fontsのサイトによる... CSSHTMLmemosWebデザインオンラインツール
Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。 2022.12.07 井川 宜久 Figmaのペンツールとマスクで、背景から切り抜く。 Illustratorや画像編集ソフトの代表格であるPhotoshopでもそうだが、ペンツールの使い方を覚えておくと後々で役に立つ。 AIの導入などによりPhotoshopの被写体の切り抜き精度が上がっている。ただしうまく切り抜けない時は、今でも結局人の手によるペンツールに頼ることになる。 また、ペンツールはロゴやアイ... DTPFigmamemosWebデザインデザイン
Figmaを日本語化。言語切り替えの使い方。再起動も不要。 2022.12.03 井川 宜久 Figmaを日本語に切り替える方法。MacもWinも使い方は同じ。 2022年のFigmaの日本法人設立により、Figmaはデフォルトで英語⇄日本語の言語切り替えが可能となっている。 特に再起動の必要もなく、早ければ数秒〜数十秒ほどで言語の切り替えができる。 インストール版でもブラウザ版でも手順は同じ。 Figmaの画面右下のhelpマーク（... FigmamemosWebデザインデザイン
Figmaで検索・置換する方法。ショートカットからでOK。 2022.12.02 井川 宜久 Figmaで検索・置換が可能に。 Figmaのアップデートで検索と置換の機能が実装されていた。 ショートカットで検索、置換ができるので、なかなか使い勝手が良い。 使い方は簡単で、以下のショートカットですぐに覚えられる。 ショートカット Mac：「Command」 + 「F」 Win：「Ctrl」 + 「F」 ※「F」は「Find... FigmamemosWebデザインデザイン
