WEBデザイン

WEBデザイン

【Figma】文字組み(文字詰めや行間の調整など)の方法について解説!

こんにちは!社内でFigmaを導入してから2年目になり、使用頻度ではイラレを抜いてメインツールと言っても過言ではないくらいの比重になっています。私はデザインもコーディングも両方するので、デザイナーとコーダーの双方にとってより効率的な作業がで...
WEBデザイン

【Figma】書き出したSVGデータが崩れていた時に確認すること【対処法】

こんにちは。すっかりご無沙汰の更新になってしまいました。 思わず「書かねば!」と急き立てられるトラブルに直面したのであります。 それがタイトルの「FigmaでエクスポートしたSVGデータぶっ壊れ問題」です。 たまに起こってはいたのですが、書...
WEBデザイン

ついに「Figma」はじめました!Figmaの特徴や使用感などのまとめ。

巷で話題のデザインツール「Figma」ですが、実は弊社でも最近導入されたんです。 まだまだイラレも主力ではあるのですが、ちょこちょこデザイン制作やコーディングで触れる機会が増えてきて最近ようやく慣れてきました。 率直な感想は…快適&便利で楽...
WEBデザイン

necco inc.さんの「Figmaでデザイン体験!」YouTube配信を視聴!

先日、制作会社「necco inc.」さん主催の配信『Figmaでデザイン体験!アイキャッチ画像を作ってみよう|CaT ONLINE』にリアルタイムで参加してきました。 結論から言うと、とっても充実した配信でした! Figmaについての概要...
WEBデザイン

【Illustrator】文字の角を丸くする「墨溜まり文字」の作り方

こんにちは。バナーやアイキャッチ制作で「いまいちインパクトが足りない…」や「文字を目立たせたいけど、派手にしたいわけじゃない…」そんなお悩みで行き詰まることありませんか?本日は、イラレを使ってちょっとした工夫で文字を印象付けて目立たせられる...
WEBデザイン

デザイン学習サービス「chot.design(ちょっとデザイン)」が無料公開に!

デザイン学習サービスを有料で提供していた「chot.design(ちょっとデザイン)」が先日、無料公開することになったとのニュースが! 実は前からちょっと気になっていたので、さっそく登録してのぞいてみました! chot.designとは? ...
WEBデザイン

【コーディング備忘録】letter-spacingとline-heightの計算方法

コーディングしていると、ついつい忘れてしまうのがletter-spacing(字間)とline-height(行間)の計算方法です。 毎度「どっちがどっちだっけ?」と混同してしまうんですよね...。 しっかりインプットするためにも、計算方法...
WEBデザイン

【Illustrator】書式を維持せずに文字の貼付けができる「書式なしでペースト」

イラレでのデザイン作業中、文字をコピペする機会が多々あります。 基本、フォントなどの書式設定をした文字をコピペすると、書式もまるっと同じコピーが生成されます。テキストだけ差替えたい時、ちょっと不便に感じていたんです。 …が、書式なしのプレー...
WEBデザイン

4月10日はフォントの日!2022年アドビ企画「#私の推しフォント」が面白そう。

ご存知でしたか、4月10日ってフォントの日らしいですよ。 4(フォン)10(ト)の語呂合わせで、2017年にアドビ社によって制定された記念日だそう。 フォントの日に先駆けて(?)Adobe Fontsに日本語フォントが大量追加されたとの情...
WEBデザイン

【コーディング備忘録】文字の下線を2行目(複数行)以降にも引く方法

先日、cssで下線を引く方法をご紹介しました。 下線を引いた見出しをPC向けに実装すると、タブレットやスマホでの表示にちょっとした問題が発生します。 レスポンシブで画面幅が狭まると1行で収まっていた見出しが複数行になることが多々あります。こ...