この記事は最終更新日から1年以上が経過しています
- 投稿日：2024/08/28
この記事は約2分で読めます
要約
webサイトデザインをする時によく使う便利ツール「typescale」と「huemint」の紹介です。「typescale」はサイトの本文フォントサイズを基準に見出しのサイズを決めることができます。「huemint」は決めた配色を実際にサイトに当てはめて確認することができます。
Typescale：サイトの見出しサイズを実際に試せる
Googleの自動翻訳がおかしなことになっているのですが、「体のサイズ」が本文サイズです。「規模」で本文サイズを基準にジャンプ率を変更することができます。
フォントの種類や太さ、行間、文字間、文字色、背景色あたりは無料の範囲でもいじれるので便利です。
有料版にすると見出しのフォント種類を変更したりCSSが出力できたりお気に入り登録ができるようですが、ログインなし無料版でも問題ないです。
左側の設定をいじると真ん中のスタイルガイド、右側の実際のサイト画面が自動で変わります。
サイト画面だけが見えるようにしたり、スマホ版に切り替えることもできるので見出しのサイズをどれくらいにしようか悩んだときにおすすめです！
本文以外はほとんど小数点がついちゃうので、小数点以下は切り捨てるなり微調整は必須です！
Huemint：配色を実際のサイトで試せる
続きは、リベシティにログインしてからお読みください
