Figmaで名刺を作成、印刷してみたところ、無事に完成。 FigmaでDTP。 Figmaで名刺？ デザインツール「Figma」で、紙媒体の名刺を作って実際に発注し、仕上がりを確認してみた。 Figmaを印刷用に工夫。 単位やカラーモード、ファイル形式などを印刷用に。 Figmaは元々デジタルデバイス向けなので、単位がpxオンリー、カラー...
Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
Memos
Figmaを日本語化。言語設定や日本語版の使い方。
Figmaを日本語に切り替える方法。使い方はMacもWinも同じ。 Figmaの日本語対応。言語設定。 Figmaはデフォルトで英語⇄日本語の言語切り替えが可能となっている。 特に再起動の必要もなく、早ければ数秒〜数十秒ほどで言語の切り替えができる。 インストール版でもブラウザ版でも同じ手順で行え、いくつか方法がある。 Figmaへログ...
Figmaで検索・置換する方法。ショートカットからでOK。
Figmaで検索・置換が可能に。 Figmaのアップデートで検索と置換の機能が実装されていた。 ショートカットで検索、置換ができるので、なかなか使い勝手が良い。 使い方は簡単で、以下のショートカットですぐに覚えられる。 ショートカット Mac：「Command」 + 「F」 Win：「Ctrl」 + 「F」 ※「F」は「Find...
Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
Figmaのモザイクプラグイン「Pixels」とは？ ネット上に写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。 Figmaにはデフォルトでは備わっていないようなので、プラグインを探してみたところ、「Pixels」というシンプルで素敵なプラグインが見つかった。 Pixelsは、ただモザイクをかけられるだけでなく、ベクター画像としてモザイク処理...
CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。
CSSブレンドモード。 PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。 「描画モード」は英語では「Blend Mode（ブレンドモード）」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。 そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。 m...
Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
Print for Figma。Figmaの印刷物用プラグインとは？ Figmaで作るDTP。 Figmaはもともとデジタルデバイス向けのツールだが、工夫すればDTPやグラフィックデザインもできる。 無料で使え、初心者にも向いている。 PhotoshopからのFigma。 FigmaはPhotoshopを意識して作られたデザインツールなのだそうで、カラーパレッ...
Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。
グラフィック（印刷の通販グラフィック）の名刺発注の手順。 近年ユーザーが増えているFigma。基本的にWeb向けのツールだが、名刺くらいは作れそうなので、実験的に自分の名刺で実際に作ってみた。 印刷は長年定期的に利用しているグラフィックさんへ発注。 参考：Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。 参考：Figma...
Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
Figmaで印刷物を。名刺を作ってみる。 Figmaで印刷物。 デジタルデバイス向けのデザインツール「Figma」で、紙媒体の名刺を作れるらしい。 それなら試しにと、ひとまず自分用の名刺を制作。 Figmaで名刺制作。 Figmaは印刷物でよく使用するテキストのカーニングやアウトライン化も可能で、PDFでの書き出しもできる。 ロゴ...
counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。
CSSだけで連番を振ってくれる、counter-increment。 counter-increment CSSのプログラムでナンバリング。 CSS3からはプログラミングのプロパティが増え、ブラウザの対応も追いつき、いまではCSSだけで番号を振ることができる。 自動連番、ナンバリングもCSSオンリーで可能となっている。 自動でナンバリング。 番号を振って...
iPhoneを鏡代わりに使う最も簡単な方法。（追加アプリなしで。）
手鏡代わりならiPhoneの「カメラ」が便利。 ふと、鏡がほしいとき。 iPhoneを鏡代わりに。 公共機関などで移動中に、ふと、身だしなみが気になることがある。 電車や飛行機であればトイレがあるが、地下鉄や市内バスではそうはいかない。 iPhoneだけで大丈夫。 アプリなしでも。 アプリをインストールするにも、Wi-Fi環境がなければ、パケット代...
viewport-fit=coverで対応。iPhoneのSafe Area問題。
viewport-fit=coverで、iPhoneのSafe Area外をカバー。 iPhone X以降、iPhone 14までのiPhoneは、画面内にノッチがあったりコーナーが角丸になっている。 画像引用：Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11 Killian ...
CSS フォントサイズはどうする？ remの基本かつ効果的な使い方。
remで覚えると安全かつ便利。 Webサイト制作の際に必ずと言って良いほど使用するfont-size。毎回の制作の度にfont-sizeの指定をするが、どのくらいのサイズが適切なのか迷ってしまうことがある。 単位とサイズ。 もし単位に迷うのであれば、「px」ではなく「rem」で指定しておいた方が安全で使いやすい。 サイズについては、各ブラウザ間でほぼほぼ16pxが確...
Chromeデベロッパーツールでスマホ表示チェックする際の注意点。
デベロッパーツールのショートカット。 デベロッパーツールは右クリックからも開けるが、よく使う機能なのでショートカットで覚えておくと作業がはかどる。 ショートカット。 Mac： 「Command」 + 「Option」 + 「i」（FirefoxやSafariでも同じ。） Windows： 「Ctrl」 + Shift「」 + 「i」 （「F12」でも可。） ...
ウイルス・マルウェアチェックサイト。オンラインかつ無料利用可。
ファイルやサイトのウイルスをチェック、「VirusTotal」。 VirusTotal オンラインかつ無料で、ウイルスやマルウェアをチェックしてくれるサイトがある。 いずれも英語だが、URLのコピペやファイルのアップロードだけでチェックしてくれるので、ブラウザの翻訳機能を利用すればほとんど苦にならない。 VirusTotal by Google Wik...
WordPressのセキュリティをオンラインチェック、「Sucuri」。
WordPressのセキュリティをチェック、「Sucuri」。 WordPressの普及率とセキュリティ対策。 WordPressとSucuri。 非常に多くの人たちに利用されているCMS（コンテンツ・マネジメント・システム）であるWordPress。 世界中のWebサイトの約40%で利用されていると言われるほど。 そのWordPressサイトが、大々的に乗っ...
PageSpeed Insightsでサイト読み込みの改善。増えた４項目。
PageSpeed Insightsはアップデートが多い。 PageSpeed Insightsに限らず、AnalyticsやSearch Consoleもそうだが、UIや仕様が良く変わる。追いつくのがなかなか大変だ。 Googleのサービスは日進月歩。 サイト運営に密接に関わるGoogleサービスには、広告関連を除けば、大きく次の３つがある。これらはSEOに重視...
line-clampの使い方。CSSで複数行指定。効かないときは？
CSSで複数行指定。line-clampの使い方。 line-clampの登場により、JavaScriptやPHPなどを使用しなければなからなった「複数行指定、文字列の抜粋」が、CSSだけでできるようになった。 ブログやニュースなど、投稿記事のタイトルの抜粋が非常に楽であり、かつCSSなのでブレイクポイントによりスマホは２行、PCは３行などと簡単に振り分けができる。 li...
iPhoneの寿命、充電回数は何回？「最適化されたバッテリー充電」機能。
iPhoneの充電回数は本当に約500回なの？ iPhoneのバッテリー。 iPhoneの充電はいつどう行うのがベストか？ なるべく使い切った方が良いのか、充電切れを無くすため、不測の事態を避けるためにも、毎日フル充電するのが良いのか？ 答えをApple社の公式サイトから探ってみた。 電池、バッテリーの特徴。 一昔前には、なるべく充電を使い切って...
CSSの@whenと@else。新しいブレイクポイントの設定方法？
@whenと@elseは普及するだろうか？ CSSのブレイクポイントの新しい書き方なのか、「@when」と「@else」を使用したif文のような条件分岐が草案となっている。 W3Cのサイトにドラフトで、@whenを使った条件分岐として下記のような例が記載されている。 引用元サイト：CSS Conditional Rules Module Level 5 @whe...
text-shadow 縁取りがおしゃれに効かない時はdrop-shadowで。
text-stroke使用時は、text-shadowの挙動がすこし違う。 文字を縁取りするためtext-strokeを使っているときに、さりげなくおしゃれな感じにtext-shadowでシャドウをかけたいことがある。 そこでちょっと試しに、静かで澄んだの山頂上空の写真と、賑やかなネオンのムーラン・ルージュの写真に文字を乗せて検証してみた。 [affiliate] ...