こんにちは！アウラスタッフ仁木です。
WEBサイトを制作する時に、このツールを活用するととっても便利なWEBサービスをご紹介したいと思います。
今回は画像や色、フォント関連のツールを紹介したいと思います！
まずは画像関連のツールから
ご存知の方が多数ではないかと思われる、画像の圧縮をしてくれる「TinyPNG」です。
ドラッグ＆ドロップするだけで一度に２０個の画像ファイルを圧縮してzipにまとめてくれます。１つのファイルのサイズは最大5MBまで(有料アカウントは２５MBまでアップロードできるようです)。
昔はPNGだけだったと思うのですが、JPGも対応してくれています。
こちらも画像を圧縮してくれる「Compressor.io」。こちらは一度に１ファイルずつしか処理できないですが、ファイルサイズは１０MBまで対応しているので「TinyPNG」で容量オーバーだった画像はこっちで圧縮したりします。PNGとJPGの他にGIF、SVGも圧縮できます。
こちらはPNGなどの画像ファイルからSVGファイルを変換して出力してくれるツールです。精度は若干シビアでサイズが小さかったり写真のような複雑な画像はきれいに変換できません。アイコン素材などで、ベクターデータで欲しいのに画像しかない、という時は一度使ってみると良いでしょう。
https://convertio.co/ja/png-svg/
コーディング最中にとりあえずダミー画像をいれておきたい時に「Placehold.jp」を使いましょう。サイドバーに欲しいサイズを入力して「画像を生成する」ボタンを押すとそのサイズのダミー画像のURLを出してくれます。あとはIMGタグのSRC属性にコピペするだけ。
さらにテキストや背景色、PNGかJPGかというファイルの種類もURLパラメータで指定ができます。
フォントやアイコンを
「icomoon」はSVGで制作したアイコンをWEBで使える用にアイコン化してくれるツールです。
ホームの右上にある「IcoMoon App」からアイコン化できるページに移ります。詳しい使い方はGoogle先生がたくさん知っています。
プロジェクト単位で管理し、最大４つまでプロジェクトを作成できますが、フリーアカウントではブラウザのキャッシュをクリアするとプロジェクトのデータもなくなりますので、「Manage Project」ページからバックアップとしてJSONファイルをダウンロードしておくことをおススメします。
iOSデバイスにインストールされているフォント一覧を調べたいときは「iOS Fonts」が便利です。iOSのバージョンごとにどのフォントがインストールされているのかまで調べられます。
特殊なフォントをWebで使用したいときにフォントデータをインポートしますが、その際にブラウザごとに必要なファイルの種類があります。それらを用意する時に「Online font converter」を使うと、自分の持っているフォントファイルから必要な種類のフォントデータを変換し出力してくれます。
画面上部にある「wordmark」と表示されている入力フォームにテキストを入力しエンターキーを押すと、自分のマシンにインストールされている全フォントをプレビューできます。
フォントを選ぶときに重宝します。
比率
元になる数値からパーセンテージを指定するか、比較したい数値を指定することで比率を教えてくれます。画像の書き出し時やサイズの変更時に便利です。
黄金比や白銀比など、様々な貴金属比を算出してくれます。デザインのレイアウトを決めるときなどに役に立つツールです。
http://voidism.net/metallicratio/
最後は色
綺麗なグラデーションのパターンを見つけられます。左下の「See All Gradients」に様々なグラデーションがあります。
自分で色を指定して色々パターンを試したりは出来ないので、参考にといった感じでしょうか。
「Coolors」はカラーパレットを作成できるツールです。自分で作成したパレットを書き出したり、他の人が作成したパレットを共有できます。
いかがでしょうか
良いなと思った知らないツールがあればぜひご活用ください。
今回は少しデザイン寄りなツールの紹介でしたがコーディングする時に便利なツールも紹介したいと思います！
