Webサイト制作でピクセルを使うのをやめた話

今は日本からフィリピンに拠点を変えて、Webデザイナーフリーランスとして働いている尾島です。

お陰様で様々なクライアントからお仕事をいただけるようになり、普段の生活に困らないぐらいのお金をいただいてます。ありがてえ・・・
今回はWebサイトを制作する上で最近アップデートしたことを書きます。
自己満足です。

タイトルにもある通り、ピクセルを使うのをやめ、vwを代わりに使っています。

ピクセルとvwはどのように違うのかというお話ですが、
ピクセルは1px単位で要素を動かしたり、大きくしたりできますが、vwはディスプレイサイズに合わせて、要素動かしたり、大きくしたりできます。
つまり、どのディスプレイで見ても完璧にWebサイトがデザイン通りになり、UXが抜群によくなります。

ピクセルでも十分Webサイトを動かすことはできるし、ある程度の横幅では綺麗に見せることができます。
でも、ある程度しか綺麗に見せれないことを不満に思ったりもします。

例えば、デザインデータは1200pxで作った時に、ディスプレイサイズを1920pxで見ると、デザインデータと見比べた時に余白多くて、気持ち悪かったりするんですよね、、、
あと、デザインデータ以下のピクセルサイズでみた時に、横スクロールバーが付いたり、サイト全体が崩れてしまったりします。

別にいいじゃんって思うデザイナーもいるし、いやそこはどの画面サイズでも綺麗に見せたいっていうデザイナーもいます。
僕は圧倒的後者です。

そこで普段使ってるテンプレートに以下のmixinを追加しました。

//デザインデータのサイズ幅
$winW : 1920;

@mixin fontsizeVw($size){
 font-size: ($size / $winW) * 100 + vw;
}

.class-name {
@include fontsizeVw(13px);
}

参考サイト：vwを使って画面幅に応じて文字サイズを動的に変える方法

Sassでピクセルからvwの変換をしてくれる優れものです。

これを導入してからまだ1週間程度しか経ってないので、あまりデメリットは感じ取れてません。また何か感じたら書きます。

こっちも便利だよ！っていうのがあれば教えていただければ嬉しいです！