WEBデザインをする上でよく使うおすすめ無料WEBツール10選

鶴川

6年 ago

こんにちは、鶴川です。
涼しくなり過ごしやすい季節になりましたね。休日は日が暮れてからベランダでのんびりすることが増えました。
今秋はテントキャンプからグランピングまで、アウトドアの予定がいくつかあるので楽しみです。

さて今回は、WEBデザインをつくる上でよく使っている無料WEBツールをいくつか紹介したいと思います。

1. 黄金比・白銀比を調べる

美しいデザインを作る上で欠かせないテッパン比率。WEBデザイン上でもよく取り入れています。

http://voidism.net/metallicratio/
黄金比、白銀比のほか、プラチナ比や青銅比の算出もできます。

例えば「1200pxのコンテンツ幅に3カラム配置してボックス間の余白を30pxにした場合、1カラム何px？」っていう計算が面倒な時に便利なツール。
私が計算に弱いからか、電卓で出した数字でデザイン起こしたらサイズが合わなかった・・という地味なショックがないように。

http://www.kenjisugimoto.com/gridpx/
ボックスで再現してくれるのでなんとなくのサイズ感もつかみやすい。

色弱や視覚障害のあるユーザーが文字を読み取るのに十分なコントラストが確保できているかカラーコードからチェック。
主にサイトのメインターゲットが高齢の時に使用します。また色覚異常は女性より男性の方が多いので、男性メインのデザインにも。

https://snook.ca/technical/colour_contrast/colour.html
backgroundのカラーコードとその上に乗る要素のカラーコードを入力し判定。AA(達成)、AAA(高いレベルで達成)。18pt以上か以下かでも合格基準が分かれます。

windowsでは使いやすい差分比較ツールがあったのですが、macでは見当たらず・・
普段コーディングをしない私は使う頻度も低いので、ちょっと比較したいなーって時にはWEBツールを使います。

https://difff.jp
差分箇所が太字＆蛍光色になるので見やすくって良いです。

投稿コンテンツ、可変コンテンツは予想外の長文が来るとデザインバランスが崩れるので、最大何文字までなら保てるか、という時にカウントします。

クライアントから届いた写真素材のサイズが300px・・デザインでは500pxほしい・・スマホでは600pxは無いと粗くなってしまう・・元データはない。
古い画像ほどあるあるなこの問題。ひとつずつ加工するのが大変な数の時にこのツール。

https://waifu2x.me/index.ja.html
複数の画像をまとめて処理し、一括でダウンロードできます。

ジーニアスウェブは分業制でいつもコーダーにコーディングを依頼しているのですが、例えば修正点を伝える時に「3つのポイントの中にある”わたしたちは〜”のコンテンツの2つめのボックスの・・・」と場所を言葉で使えるのが難しい（し、相手にも伝わりづらい）場合に使います。

https://aun.tools/
ふせん感覚で使え、パスワードも掛けれます。保存期間が短くなってしまったので、すぐに対応できるときに。もしくは有償版。

リニューアルデザインを担当する際、そのサイトがどのような形跡を辿ってきたかを確認するときに。現行サイトには無くても、その前のデザインに使えそうな情報が含まれていたりします。

https://archive.org/web/
有名なツールですね。

サイトを制作する上で頻繁にある「地図の埋め込み」。デフォルトの状態でも見やすくて良いけど、せっかくならサイトに馴染むデザインにカスタマイズしたい。

https://ezmap.co/
テーマがたくさん用意されていて、アレンジも設置もしやすいです。

デザインだけでは伝わらない補足を画面上で共有したい時に。

https://www.invisionapp.com/
簡単な遷移図の作成にも。使い勝手も良いです。メールアドレスだけで利用できるのでクライアントとのやりとりにも◯。

今まで時間を掛けていた作業がツールを使うことで時間短縮できるというのはよくあるので、定期的にツールサーフィンしたいと思います！