自分のPC内にインストールされているフォントを利用して、テキストを一覧表示してくれるサイト。どんなフォントをインストールしていたか確認するのが目的…かな。私は、英数字の文字画像を作成する前に「どのフォントを使おうかな〜。」って悩んだ時に、このサイトでザッピングしてます。表示させる文字列やフォントサイズなども変更できるので、実際に使用する環境に合わせて使ってます。このサイトは、かなり利用させてもらってます。

RSSフィードURLをコピペするだけで、記事一覧を表示させるプラグインを生成してくれるサイト。最近はWordPressサイトばかりなので使う時は全然無くなりましたが、静的サイトの制作で予算が少ない場合は結構便利に使えます。いろいろとカスタマイズできるので、デザインに合わせて用意できますよ。サンプルがこちら↓

Facebook用のOGP画像表示をドラッグ＆ドロップで確認できるシュミレートサイトです。OGP画像ではさまざまなサイズが求められるので、画像がどのようにクロップされるのか事前に確認したい方は、このサイトを利用してみてください。

無料で画像圧縮できるWebツールの定番『tiny png』は、ブクマは必須！ pngだけではなくjpgも圧縮してくれるので、ここだけあれば充分ですね。

Googleへ構造化データを出力することは、SEOとして必須となりましたね。ページ内のどこに何の情報を掲載してあり、どのようなページコンテンツがあるのかを知らせるのが構造化データ。そのHTMLタグがしっかり記述されているかを確認してくれるのが、このWebツールなのです。納品前にここでチェックするようにしましょう。

細かい斜線やドットなどの背景画像を作成することができるWebツール。画像だけではなくCSSコードで出力もできるので、コピペだけで細かいドット背景の実装可能です。これは、かなり使ってます。CSSコードだけで模様のある背景を用意できるのは魅力的ですよね。詳細は、以前の記事でも紹介してます。

モバイルフレンドリーなサイトかどうかをチェックしてくれるGoogleが提供しているWebツール。100点満点で評価してくれます。このブログをチェックしてみたら…、ヤバいw　対策しないと。

サイトの表示速度を測ってくれるおなじみのWebツール。このサイトへの信者がいるようですが、ここでの評価が良いからといって素晴らしいサイトであるということはないので、その点は注意が必要。私は参考程度にたまに測ってます。私のブログはダメダメですけどね…。

Microsoftが用意している、IEでの表示確認用のWebツール。実際の表示確認は実機を利用してますのであまり使うタイミングはないのですが、出先でMacしかない時に表示確認してもらう、こんな時のためにブクマしてあります。

HTML５でのマークアップ、ちゃんとアウトラインは確認してますか？文章構造をサクッと確認したい時に、こちらを利用してます。あと、Chrome拡張機能もあるので、簡単に確認したい場合にはそちらも利用してます。

作成したページのタイトルや説明文、検索キーワードでの検索順位を調べる時に利用するWebツール。このサイトの利用頻度はかなり高いです。私の場合、このサイトからではなく、ブックマークレットを利用して表示しているページのSEO状況を調べてます。ブックマークレットの登録方法は、空のブックマークを登録して、そのURLに以下をコピペします。これで、表示されているページでこのブックマークレットを発動すれば、SEOチェキでチェックされたページが表示されます。

javascript:q=location.href;if(q)window.open('http://seocheki.net/site-check.php?u='+encodeURIComponent(q));eval();

ブログでHTMLタグを紹介する際には、エンコードしたHTMLタグを記述する必要があるのでブックマークしてました。でも今はMacアプリの『PopClip』のエクステンションで、ドラックしたHTMLタグをエンコードしてくれる機能があるので、そればかり使っています。
が、念のためブクマしてます。

ブログ記事を書く前に、関連するキーワードを探す際に利用するWebツール。でも、記事はだいたい思いついたキーワードをメインに執筆しているので、このサイトの利用頻度は低いのですが、どうしても思いつかないという場合にこのサイトを開いています。アイデア出しにいいのでは。

ファビコンを作る際にはこちらのWebツールにお世話になってます。でも、今WordPressではpng画像を用意すればファビコンを表示できるので、WordPressサイトではない場合や、クライアントから要望があった時にこちらを使用してます。画像さえ用意すれば簡単に作成できるので便利です。

海外のWebサービスなどのアイコンをSVGで表示しているサイト。そのファイルをダウンロードして利用することも可。ブランドカラーもサイト上で表示されているので、簡単にブランドロゴマークを表示させることができます。あまり利用する機会はないかと思いますが、いざという時に便利なのでブクマしてます。

Web上で必要な比率での計算をしてくれるWebツール。黄金比や白銀比など、さまざまな比率で計算してくれます。こういう計算Webツールは１つはブクマしておいてもいいと思いますよ。１つでいいけどね。

日本の住所を海外の住所書式に変換してくれるWebツール。前に海外に荷物を送る際に使用したので、その時にブクマしておいたもの。こちらもあまり利用する機会は少ないけど、いざという時に便利なのでそのままにしてます。海外オークションなどの利用がある場合には、これは便利ですよね。

Macのウェブデザインツール『Sketch』で作成されたデザインモックアップを紹介するサイト。クオリティの高いデザインファイルをダウンロードして、実際にSketchで開いてみることができます。これからSketchを勉強したい方におすすめ。

CSSフレームワークのBootstrap を使用したサイトを紹介しています。定番化したBootstrap もデザインだけでこんなに変わるんですよね。

WordPressやEmail、海外のショッピングサイトなどのテンプレートを購入することが出来るサイト。もちろんデザインの参考にするのにもピッタリ！ここで紹介されているデザインはかなりおすすめ。このサイトデザインも好みな感じなので、よく見てます。

アイコンやパンフレット、ロゴなどさまざまなデザインを紹介しているサイト。この記事を執筆中にもさっそくいいロゴ見つけてしまった…！

デザイン制作会社のサイトで、アイコンやピクトグラムの実績を紹介してます。ここのデザインクオリティが高くて好みの感じだったので、ブックマークしてたまに見てました。

日本のサイトデザインを参考にする時には、I/O 3000 を見てます。他にも日本のサイトを紹介しているサイトもありますけど、だいたい同じサイトを紹介していたりするので、ここだけチェックするようにしてます。スクロールだけでスルスルと見れますからね。

日本のサイトでレスポンシブデザインも合わせて見てみたい時は、こちらもチェックしてます。レスポンシブデザインのギャラリーサイトって言ったらココでしょ！

カラーミーショップを使って制作されたネットショップのみを紹介しているサイト。めずらしいのでブクマ。ネットショップを作る機会は少ないんですけど、ネットショップのコンテンツの見せ方って結構参考になるので、こちらもチェックするようにしてます。

日本のランディングページって、いかにもってのが多くてあまり参考にしたくないので、できるかぎり海外のランディングページを見るようにしてます。コンテンツの切り替えのデザインって特に参考になりますよね。

引き続き、ランディングページのデザイン紹介サイトですが、こちらはよりシンプルなデザインで、文章や画像コンテンツにフォーカスを当てた感じが好みなので、刺激を受けにきます。このようにデザインを1列でスクロールで魅せるというのもいい表現方法ですね。

いかにも、なランディングページが好みのクライアントのためにブックマークしてあります。約4,500デザインもあれば、要望のものはたいがい見つかりますので、提案する時だけ見てます。たまにいい感じのもありますよ。（タイトルをコピペしたら…いかにもだった…。）

フリーランスWebデザイナーを紹介しているサイト。私も同業なのでたまに見て刺激を受けてます。更新は止まってる？このサイトも申請したら掲載してもらえるのかな〜。

ファビコンだけを集めたギャラリーサイト。めずらしいのでブクマして、いざという時に見てます。当サイトのファビコンもちゃんと作らないと。