サイト制作で使えるピクセル計算ツールと配色見本サイト
こんにちは、WEBデザイナーのみなとです。
ホームページをデザインしていると、枠幅の計算や色選びなど、自力でやるとけっこう手間のかかる作業がでてきます。
今回はそんなときに時間を短縮しつつクオリティを上げる便利なサイトをご紹介していきます。
目次
枠数に合わせて幅とマージンを計算してくれる「gridulator」
gridulatorは「Overall Width」に全体の横幅を入力し、「# of Columns」で枠の数を選択すると自動で幅とマージンを計算してくれます。
『960pxの空間に8個の項目を並べて隙間は8pxにしたいなら、1個あたりの横幅は113px！』というような使い方ですね。
ワイヤーフレーム作成の段階で重宝します。
比率に合わせてサイズを計算してくれるツール
https://www.web-jozu.com/javascript/size.html
こちらは「WEB上手」のサイト内コンテンツで、画像の比率に合わせて縦横のピクセル数と拡大縮小倍率を計算することができます。
同じ比率の画像をサイズ違いで何度も使用するときに便利。
また、画像を並べるときは上記のgridulatorで横幅を出し、こちらで縦幅を出すという合わせ技もよく使います。
おしゃれな配色を決めるのに便利なサイト
カラーリングはデザインをする上で非常に重要な要素になります。
中間色のようなカラーを探すのに便利なサイトがこちら。
coolors
coolorsでは直感的に色の組み合わせを選ぶことができます。
上記の画面でスペースボタンを押すと配色パターンがランダムで表示されます。
もっと細かく設定したいときは青い「Start the Generator, it’s free!」ボタンをクリック。
遷移先のこちらの画面では同じにようにスペースボタンで配色が変更でき、気に入った色だけ変わらないように鍵をかけたり、個別で明るさを調整できたりします。
colourlovers
colourloversではウエディングやファッションなど、ジャンルに合わせた配色を選ぶことができます。
一覧でパッと探したい時などには便利ですね。
おまけ：QRコードを作る君
WEBサイトを制作しているとQRコードを記載することがよくあると思います。
印刷用のQRコードを作る君では、URLを入れるだけで簡単にベクトルデータを作成できます。
同じQRコードをサイトと印刷物で流用するときなどに便利ですね。
まとめ
いかがでしたか？
ラフの段階でしっかりルール付けすることで、比率が狂ったり、統一感のない配色を防ぐことができると思います。
作業効率を上げたい方はぜひお試しください！