行間を基準としたバーティカルリズムをWebデザインに使用してみて
今までWebデザインをする際、垂直方向の余白はベースとなる最小のpxを決め、その数値の倍々になる値を使用してデザインをしていました。
例えば、最小の値を10pxとした場合は、20px/40px/80pxのような規則性です。
しかし、行間を基準としたバーティカルリズムを利用した方がキレイかつ効率的にデザインができるのではと思い、いくつかのプロジェクトで試してきた感想をまとめます。
今までWebデザインをする際、垂直方向の余白はベースとなる最小のpxを決め、その数値の倍々になる値を使用してデザインをしていました。
例えば、最小の値を10pxとした場合は、20px/40px/80pxのような規則性です。
しかし、行間を基準としたバーティカルリズムを利用した方がキレイかつ効率的にデザインができるのではと思い、いくつかのプロジェクトで試してきた感想をまとめます。
Webデザインツールとして、SketchやXDなどさまざまなツールが普及してきてはいるものの、まだまだPhotoshopでWebデザインをされている方は多いかと思います。
Photoshopからコードへテキストデータをコピペする際の手順を、少しだけ簡略化できるスクリプトを作成したので、ご紹介します。
ウェブサイトで使用するアイコンの管理ができるアプリケーション「Nucleo application」が、デザイナーにもフロントエンドにもメリットがありそうでしたのでご紹介します。
PhotoshopでIllustratorの移動機能のように、数値入力で移動させるスクリプトを作りました。
Photoshopではカーソルでの移動が1pxか10pxしか動かす事ができず、大きな値(100px以上)の移動をする際は何かと面倒ですし、
Webの世界ではきれいな数字を求められるため、どうしてもマウスでの移動やカーソルを何回も押しての移動ではずれてしまうことがあります。
そこで、Illustratorのように動かす値を直接入力して移動させるスクリプトを制作しました。