時間短縮に使える!Webサイト作成にオススメなWebサービス9選

Webデザイナーとかフロントエンジニアとかやってた私がよく使ってたウェブサービスを紹介します。
このサービスをうまく使えば大幅に時間短縮出来るから定時に帰れるよ!多分・・・。

スポンサーリンク

画像内で使った文字のフォント何だったけ?って時にはこれ

wordmark

PC内のフォントをまとめて確認できるサービス。
昔作ったバナーとかクライアントからさらっと渡されたデータとかにフォントデータが無かった時にこのサイトで自分のパソコンに入っているフォントを全て書き出して似たようなフォントを探す。
フォント探しは地味に時間がかかるのでかなり助かる。

濃い色、薄い色が見つかるサイト

0to255

濃い色と薄い色を瞬時に出してくれるサービス。
色のコードを指定すると、その色の濃淡のバリエーションを表示してくれる。ちょっと濃すぎるなぁとかもうちょっと濃くないと読めないなって時に活躍。

レスポンシブサイトをいろんな端末で確認したいならこれ

The Responsinator

いろんな端末でどう見えるか確認したい時に使えるサイト。
あくまでレスポンシブで作ったサイトの確認のみです。UAで切り分けたりしてる場合はそれぞれのブラウザの拡張機能を使うしか無い。

クラス名やファイル名、ディレクトリ名の英語単語があいまいな時にはこのサイトを使う

英語・語学の学習情報サイト「スペースアルク」:アルク

クラス名とかページ名、ディレクトリ名などをつける時にスペリング間違いをするとずっと恥ずかしいからここで必ずチェックする。
色々な翻訳サイトを使ってきたけど最終的にこのサイトが一番使いやすいということに私の中では落ち着いた。
地味に一番使ってるかも・・・。

IEの表示チェックの決定版

Browser Stack

IEテスターとかディベロッパーツールではJSの挙動とかでいまいち本物とは違う表示になる古いIEを確認できるツール。マックで確認する場合もこれを使うのが一番楽かな。
使い方が詳しく書かれたサイト

クライアントとのデカいファイルのやり取りに使えるサービス

Giga File便

こういうサービスはいくらでもある。ただ、メジャーなファイヤーストレージだと1ファイル250メガバイトまでしか送れない。これは2ギガのファイルまで送れる無料のアップローダー。
これだけの容量があれば紙媒体から送られてくるインデザインデータでも多分大丈夫。

ミニファイされたJSをインデント付きに一瞬で成形

Online Javascript beautifier

javascriptをオンラインで成形できるサイト。
改行が全くなくなってしまっているプラグインをキレイな見やすいコードに出来る。逆もまたしかり。

サイト内で使用されているカラーコードを見やすくカラーで一覧表示

ColrGrabr

ページ内で使われている色のコードを調べたい時に使うサービス。
あちこち継ぎ足して使ってるCSSは微妙に違うカラーコードがたくさん出てきたりして気持ちが悪い。
そうならないためにも既に使った色はこのサービスでチェックして使えるカラーがあれば同じクラスを使う。

サイトが出来たらチェックしたいタグの閉じ忘れ

HTMLタグチェッカー

Chromeのエクステンション。
レイアウトが崩れてしまった時にどこのタグを閉じ忘れたのかを簡単にチェック出来る優れもの。
Chromeだと平気だったのにIEで確認したら崩れてた!もはやどこのタグを閉じ忘れたのか全く覚えがないって時に出番です。
何気なく昔作ったサイト見てたら赤で何個とか出てきたらこっそり直しておきましょう。

\SNSリンクボタン/