ウェブサイトをデザインするときにお世話になっている7つのツールとサービスを紹介します

みやっち


ウェブサイトをデザインするときにお世話になっている7つのツールとサービスを紹介します

おつかれさまです。デザイナーのみやっちです。

デザインをする際に、Photoshop以外にもお世話になっているツールが結構あります。フォントの選定だったり、コンテンツの幅を計算したり、地味な部分ですが、ここをツールに頼ると結構時短できます。

というわけで、今回はこれらの便利ツールをいくつかまとめでご紹介します。

1. wordmark.it

01

http://wordmark.it/

PC内にインストールされているフォントを読み取って一覧で表示してくれるサービスです。

2

デバイスフォントを使用する箇所はあまり選択肢がないため、主にタイトルで使用する英語のフォントを探したり、文字組みを確認したりするのに使っています。

09

目についたものだけクリックしていき、あとでフィルタリングして比較するといった使い方もできて便利です。

2. web計。

04

http://zeller-lab.com/img-width/

レイアウトに関するさまざまな計算を自動でやってくれるサービスです。計算が必要になると思考が停止する僕は結構多用しています。主に画像の比率とコンテンツの幅とマージンを設定するときに重宝していますね。

05

↑の画像だと、『1366pxの幅で画像を3つ置き、マージンを32pxに設定したときの1つの画像の幅』を算出してくれます。ちょっと説明が難しくて伝わりにくいかもですが、デザイン中にも実際に使う場面が多くて助かっています。

06

ニュースページなどのデザインがあるとよく使う、画像比率もあります。
例えば、横幅600pxに対する「16:9」「4:3」「3:2」それぞれの比率を算出してくれます。

3. 文字数カウント

06

http://www1.odn.ne.jp/megukuma/count.htm

こちらは同様のサービスが多いのですが、検索で1番上にくるので、このサイトの文字数カウントを使っています。

よく使うのはコピーやタイトルの文字組みを考える際に文字数を見ながら調整することと、メディアサイトでタイトルに文字数制限を設けるときの確認に使っています。

4. OGP画像シュミレータ

07

http://ogimage.tsmallfield.com/

有名なサービスなので結構な方が使っているかと思うのですが、実際にfacebookに投稿した際のシミュレーションができるサービスです。

10

OGP用の画像をアップロードすると、さまざまな投稿サイズのサンプルを表示してくれます。
サイトのローンチ前には必ずお世話になるのでピックアップさせていただきました。

5. Web Clip Simulator

11

http://webclip.xyz/

iOSのショートカットで使用されるWeb Clipアイコンのシミュレーターです。「Upload your image」から画像をアップロードすれば、ショートカットを設定した際の見た目を表示してくれます。

12

6. Smallpdf

08

https://smallpdf.com/jp/compress-pdf

PDFを圧縮してくれるサービスです。結構な圧縮率で、画像を多く使った提案書は重くなりがちなので重宝しています。圧縮すると画像が荒くなる場合がありますので、気をつけましょう。

13

画像てんこ盛りの370MBのPDFが2.2MBまで圧縮されました!

7. TinyPNG

14

PNG画像を圧縮してくれるブラウザツールです。一度に20ファイルか、5MBまで処理することができます。
こちらも圧縮率が高く、重くなってしまいがちなPNGファイルを劣化も少なく軽量化してくれます。

まとめ

いかがでしたでしょうか。すでに知っているものもあったかとは思いますが、僕が普段お世話になっているツール・サービスをまとめて紹介させていただきました。
まだまだ僕の知らない便利ツールがいっぱいあると思いますので、どんどん試して実務を効率化していきたいと思います。

Q. あなたの使っているwebサービス・ツールは?
あなたの使っているwebサービス・ツールはなんですか?理由も添えて教えていただけると嬉しいです。
みやっち
この記事を書いた人
みやっち

デザイナー

関連記事