ウェブデザインで大切な縦のリズムをチェックできるブックマークレット -Gridwax

ウェブデザインの縦のリズムをチェックできるブックマークレットを紹介します。
日本語のウェブサイトでももちろん利用できます。

サイトのキャプチャ

Gridwax

Gridwaxのインストール

Gridwaxをあなたのブラウザにインストールするのは、簡単です。
サイトにアクセスし、「1. drag to your bookmark bar」にあるアイコンをブックマークバーにドラッグするだけです。

サイトのキャプチャ

Gridwax

あとは、好きなページを表示し、ブックマークからGridmaxを起動します。

Gridwaxの使い方

ブラウザにGridwaxをインストールして、当サイトでチェックしてみました。

サイトのキャプチャ

もう挫折しない、丁寧で分かりやすいiPhoneアプリ開発の入門書 -iPhoneアプリ開発の学校

とりあえず、文字のとこで
※縦のリズムは文字に限らず、画像やエレメントにもあります。

Gridwaxをブックマークから起動します。

サイトのキャプチャ

Gridwaxを起動

デフォルトでガイドの色はブラックですが、変更できます。

サイトのキャプチャ

ブラウザの下部でガイドの色を変更

ガイドの色を怪しげなパープルに変更。

サイトのキャプチャ

ガイドの色をパープルに

あとは、ガイドの間隔や開始位置を合わせます。

間隔の調整
shift+矢印キーの上下
開始位置の調整
shift+矢印キーの左右

矢印キーは1ずつ変更されます。小数点単位で変更する時は下部のバーから変更します。

サイトのキャプチャ

ガイドの間隔と開始位置の調整

top of page

©2017 coliss