デザイナー、コーチ、ディレクター / 井川

.

Memos

Material SymbolsをFigmaへ。インストールしてすぐに使える。

Material SymbolsをFigmaへ。すぐに使えるインストール方法。

GooleのアイコンフォントをFigmaへ。Material Symbols。 Google Fontsから手軽に使えるアイコンフォント「Material Symbols」が、デザインツール「Figma」のプラグインとして配布されている。 Googleの案内では現時点、2,500以上のアイコンが使えるらしい。 かつ「Outlined(輪郭)」、「Rounded(角丸)」、「S...

Figmaのルーラー(定規)の出し方。表示方法がイラレとちょっと違う!

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

Figmaのルーラー(定規)は「shift + R」で。 Figmaのルーラー。 Figmaでデザインをしているときにルーラー(定規)を出そうと「command + R」 or 「Ctrl + R」を押しても出てこない。 あれ!?と思い、じゃあ、と右クリックで出そうとしてもメニューにもない。 IllustratorやPhotoshopで慣れているとつ...

写真の一部を消せるオンラインツール「Cleanup Pictures」。

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

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

detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。

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

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

Material Symbols and Iconsの使い方。表示されないときの対処法。

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

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

Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。

Figmaのトリミング、切り抜きとremove bgの使い方。

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

Figmaを日本語化。言語切り替えの使い方。再起動も不要。

Figmaを日本語化。言語切り替えの使い方。

Figmaを日本語に切り替える方法。MacもWinも使い方は同じ。 2022年のFigmaの日本法人設立により、Figmaはデフォルトで英語⇄日本語の言語切り替えが可能となっている。 特に再起動の必要もなく、早ければ数秒〜数十秒ほどで言語の切り替えができる。 インストール版でもブラウザ版でも手順は同じ。 Figmaの画面右下のhelpマーク(...

Figmaで検索・置換する方法。ショートカットからでOK。

Figmaで検索・置換する方法。

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

Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。

Figmaでモザイクをかける方法。Pixels。

Figmaのモザイクプラグイン「Pixels」とは? ネット上に写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、プラグインを探してみたところ、「Pixels」というシンプルで素敵なプラグインが見つかった。 Pixelsは、ただモザイクをかけられるだけでなく、ベクター画像としてモザイク処理...

CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを!

CSSブレンドモード。Photoshopのような乗算をmix-blend-modeで。

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

counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。

CSSで連番。counter-incrementの使い方。

CSSだけで連番を振ってくれる、counter-increment。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 番号を振ってくれる「counter-increment」プロパティに、「custom-ident(名前)」と「integer...

CSS フォントサイズはどうする? remの基本かつ効果的な使い方。

CSS フォントの単位はpx? %? em? rem?

remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 pets単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16...

Chromeデベロッパーツールでスマホ表示チェックする際の注意点。

Chrome デベロッパーツールでスマホ表示確認時の注意点。

デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット Mac: 「Command」 + 「Option」 + 「i」(FirefoxやSafariでも同じ。) Win: 「Ctrl」 + Shift「」 + 「i」 (「F12」でも可。) で開いた...

ウイルス・マルウェアチェックサイト。オンラインかつ無料利用可。

オンラインでかつ無料で利用できるウィルスチェックサイト。

ファイルやサイトのウイルスをチェック、「VirusTotal」。 オンラインかつ無料で、ウイルスやマルウェアをチェックしてくれるサイトがある。 いずれも英語だが、URLのコピペやファイルのアップロードだけでチェックしてくれるので、Chromeの翻訳機能を利用すればほとんど苦にならない。 VirusTotal Wikipediaによると、70種類以上のアンチウ...

WordPressのセキュリティをオンラインチェック、「Sucuri」。

オンラインでかつ無料で利用できるウィルスチェックサイト。

WordPressのセキュリティをチェック、「Sucuri」。 世界中のWebサイトの約40%で利用されていると言われるほど非常に多くの人たちに利用されているツール(CMS:コンテンツ・マネジメント・システム)であるWordPress。 WordPressサイトの場合、大々的にサイトが乗っ取られたという事例が過去にある。最近は聞かないが、もし自分や会社が運用しているWordPr...

PageSpeed Insightsでサイト読み込みの改善。増えた4項目。

サイトの読み込み速度を測る、PageSpeed Insights。

PageSpeed Insightsはアップデートが多い。 PageSpeed Insightsに限らず、AnalyticsやSearch Consoleもそうだが、UIや仕様が良く変わる。追いつくのがなかなか大変だ。 Googleのサービスは日進月歩。 サイト運営に密接に関わるGoogleサービスには、広告関連を除けば、大きく次の3つがある。これらはSEOに重視...

line-clampの使い方。CSSで複数行指定。効かないときは?

CSS line-clampが効かないときに確認すべきこと。

CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 ブログやニュースなど、投稿記事のタイトルの抜粋が非常に楽であり、かつCSSなのでブレイクポイントによりスマホは2行、PCは3行などと簡単に振り分けができる。 li...

CSSの@whenと@else。新しいブレイクポイントの設定方法?

CSSの新しいブレイクポイント設定。

@whenと@elseは普及するだろうか? CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。 W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。 引用元サイト:CSS Conditional Rules Module Level 5 @whe...