WEB PRODUCTION TOOLS / 09

Web制作の
小さな判断を、
すぐ形に。

clamp、px/rem、配色、OGP、ブレイクポイント。制作中に何度も検索していた確認作業を、ここから。

SPECIMEN BOARD

OPEN SOURCED UTILITY

clamp() clamp(16px, 1.1vw + 12px, 28px)

WCAG 12.63:1 AA / AAA

OGP 1200 x 630 / 1.91:1

@media 768px <= width < 1024px

公開中の制作ツール

CSS / カラー / チートシート

COPY

生成結果はすぐ使える形式で

一覧ではなく、成果物の断片で選ぶ。

NO GENERIC CARDS / BUILT FOR WEB PRODUCTION

CSS UTILITY

値を決める、
式にする。

clamp / rem / scale

01 /clamp-generator/ →

clamp() ジェネレーター

min/max値とビューポート幅を入力してレスポンシブなclamp()式を自動生成

OUTPUT

clamp(16px, calc(0.94rem + 1.13vw), 24px)

02 / CSS

px → rem 変換ツール

ベースフォントサイズを設定してpxとremを相互変換

24px = 1.5rem

24px

= 1.5rem

03 / CSS

タイポグラフィスケールジェネレーター

ベースサイズ×モジュラー比率でフォントサイズ階層を生成

COLOR DESIGN

見えるか、
伝わるか。

contrast / convert / palette

04 / COLOR /color-contrast/ →

カラーコントラストチェッカー

前景色・背景色のコントラスト比をWCAG 2.1のAA/AAAレベルで判定

#161616

12.63:1

05 / COLOR

カラー形式変換ツール

HEX / RGB / HSL をリアルタイムで相互変換

HEX #00A6A6 / RGB 0, 166, 166

HEX #00A6A6

RGB 0, 166, 166

06 / COLOR

カラーパレットジェネレーター

1色からtints/shades/補色などを自動展開

CHEATSHEET

調べ直す前に、
開く。

ogp / media query / font stack

07 / CHEATSHEET /ogp-cheatsheet/ →

OGPサイズチートシート

SNS別の推奨OGP画像サイズ・metaタグをまとめた早見表

Facebook / OGP 1200 x 630

X large image 1200 x 675

08 / CHEATSHEET

メディアクエリブレイクポイント集

主要フレームワークのブレイクポイントを横断比較

sm 640 md 768 lg 1024

09 / CHEATSHEET

Webフォントスタック集

日本語Webサイト向けfont-family推奨スタックをコピーで提供

あいうえお ABCDE 1234

"Noto Sans JP", "Hiragino Sans", Meiryo, sans-serif

Web制作の小さな判断を、すぐ形に。

値を決める、式にする。