ブログ

スタッフブログ

webデザイナー募集中webデザイナー募集中

eyecatch

こんにちは!アウラスタッフ仁木です。

WEBサイトを制作する時に、このツールを活用するととっても便利なWEBサービスをご紹介したいと思います。
今回は画像や色、フォント関連のツールを紹介したいと思います!

まずは画像関連のツールから

TinyPNG

TinyPNG – Compress PNG images while preserving transparency

ご存知の方が多数ではないかと思われる、画像の圧縮をしてくれる「TinyPNG」です。

ドラッグ&ドロップするだけで一度に20個の画像ファイルを圧縮してzipにまとめてくれます。1つのファイルのサイズは最大5MBまで(有料アカウントは25MBまでアップロードできるようです)。
昔はPNGだけだったと思うのですが、JPGも対応してくれています。

https://tinypng.com/

 

Compressor.io

Compressor.io optimize and compress your images and photos

こちらも画像を圧縮してくれる「Compressor.io」。こちらは一度に1ファイルずつしか処理できないですが、ファイルサイズは10MBまで対応しているので「TinyPNG」で容量オーバーだった画像はこっちで圧縮したりします。PNGとJPGの他にGIF、SVGも圧縮できます。

https://compressor.io/

 

Convertio

こちらはPNGなどの画像ファイルからSVGファイルを変換して出力してくれるツールです。精度は若干シビアでサイズが小さかったり写真のような複雑な画像はきれいに変換できません。アイコン素材などで、ベクターデータで欲しいのに画像しかない、という時は一度使ってみると良いでしょう。

https://convertio.co/ja/png-svg/

 

Placehold.jp

Placehold.jp|ダミー画像生成 モック用画像作成

コーディング最中にとりあえずダミー画像をいれておきたい時に「Placehold.jp」を使いましょう。サイドバーに欲しいサイズを入力して「画像を生成する」ボタンを押すとそのサイズのダミー画像のURLを出してくれます。あとはIMGタグのSRC属性にコピペするだけ。
さらにテキストや背景色、PNGかJPGかというファイルの種類もURLパラメータで指定ができます。

http://placehold.jp/


 

フォントやアイコンを

icomoon

❍ Icon Font

「icomoon」はSVGで制作したアイコンをWEBで使える用にアイコン化してくれるツールです。

ホームの右上にある「IcoMoon App」からアイコン化できるページに移ります。詳しい使い方はGoogle先生がたくさん知っています。

プロジェクト単位で管理し、最大4つまでプロジェクトを作成できますが、フリーアカウントではブラウザのキャッシュをクリアするとプロジェクトのデータもなくなりますので、「Manage Project」ページからバックアップとしてJSONファイルをダウンロードしておくことをおススメします。

https://icomoon.io/#icon-font

 

iOS Font

iOSデバイスにインストールされているフォント一覧を調べたいときは「iOS Fonts」が便利です。iOSのバージョンごとにどのフォントがインストールされているのかまで調べられます。

http://iosfonts.com/

 

Online font converter

特殊なフォントをWebで使用したいときにフォントデータをインポートしますが、その際にブラウザごとに必要なファイルの種類があります。それらを用意する時に「Online font converter」を使うと、自分の持っているフォントファイルから必要な種類のフォントデータを変換し出力してくれます。

http://www.fontconverter.org/

 

wordmark

wordmark.it helps you choose fonts

画面上部にある「wordmark」と表示されている入力フォームにテキストを入力しエンターキーを押すと、自分のマシンにインストールされている全フォントをプレビューできます。
フォントを選ぶときに重宝します。

http://wordmark.it/


 

比率

比率計算ツール

元になる数値からパーセンテージを指定するか、比較したい数値を指定することで比率を教えてくれます。画像の書き出し時やサイズの変更時に便利です。

http://hiritsu.blogspot.jp/

 

METALLIC RATIO

METALLIC RATIO / 貴金属比 黄金比・白銀比などを計算

黄金比や白銀比など、様々な貴金属比を算出してくれます。デザインのレイアウトを決めるときなどに役に立つツールです。

http://voidism.net/metallicratio/


 

最後は色

uiGradients

uiGradients Beautiful colored gradients

綺麗なグラデーションのパターンを見つけられます。左下の「See All Gradients」に様々なグラデーションがあります。
自分で色を指定して色々パターンを試したりは出来ないので、参考にといった感じでしょうか。

https://uigradients.com/#

 

Coolors

Coolors.co The super fast color schemes generator

「Coolors」はカラーパレットを作成できるツールです。自分で作成したパレットを書き出したり、他の人が作成したパレットを共有できます。

https://coolors.co/


 

 

いかがでしょうか

良いなと思った知らないツールがあればぜひご活用ください。
今回は少しデザイン寄りなツールの紹介でしたがコーディングする時に便利なツールも紹介したいと思います!

webデザイナー募集中webデザイナー募集中

株式会社アウラ 松永巳知子 社長ブログ

お電話からのお問い合わせはこちら

お気軽にご相談ください。 06-6292-8577 【電話受付】 10:00~18:30(平日)

インターネットから24時間受付中
お問い合わせ専用フォーム 24時間受付中!

御社のホームページ、ご活用されていますか? インターネットからのお問い合わせは24時間受付中

御社のホームページ、ご活用されていますか?