Web制作者として、よく使うブックマークは厳選しております。よく使うからこそ、本当に利用価値のあるものだけを置いておきたい、そう考えるのです。…が!そうそううまくいかないのが現状。
そこで今回は、よく使用するブックマーク、よく使用してきていたブックマークに限定しておすすめのものを晒していきます。
主にWeb制作に関するツールや参考にしているデザインギャラリーサイトの紹介です。30個あるので、あなたのお好みのものが見つかることでしょう。
ブックマークしておきたいWebツール
wordmark
自分のPC内にインストールされているフォントを利用して、テキストを一覧表示してくれるサイト。どんなフォントをインストールしていたか確認するのが目的…かな。私は、英数字の文字画像を作成する前に「どのフォントを使おうかな〜。」って悩んだ時に、このサイトでザッピングしてます。表示させる文字列やフォントサイズなども変更できるので、実際に使用する環境に合わせて使ってます。このサイトは、かなり利用させてもらってます。
FeedWind
RSSフィードURLをコピペするだけで、記事一覧を表示させるプラグインを生成してくれるサイト。最近はWordPressサイトばかりなので使う時は全然無くなりましたが、静的サイトの制作で予算が少ない場合は結構便利に使えます。いろいろとカスタマイズできるので、デザインに合わせて用意できますよ。サンプルがこちら↓
OGP画像シュミレータ
Facebook用のOGP画像表示をドラッグ&ドロップで確認できるシュミレートサイトです。OGP画像ではさまざまなサイズが求められるので、画像がどのようにクロップされるのか事前に確認したい方は、このサイトを利用してみてください。
構造化データテストツール
Googleへ構造化データを出力することは、SEOとして必須となりましたね。ページ内のどこに何の情報を掲載してあり、どのようなページコンテンツがあるのかを知らせるのが構造化データ。そのHTMLタグがしっかり記述されているかを確認してくれるのが、このWebツールなのです。納品前にここでチェックするようにしましょう。
PATTERNIFY
細かい斜線やドットなどの背景画像を作成することができるWebツール。画像だけではなくCSSコードで出力もできるので、コピペだけで細かいドット背景の実装可能です。これは、かなり使ってます。CSSコードだけで模様のある背景を用意できるのは魅力的ですよね。詳細は、以前の記事でも紹介してます。
think with Google
モバイルフレンドリーなサイトかどうかをチェックしてくれるGoogleが提供しているWebツール。100点満点で評価してくれます。このブログをチェックしてみたら…、ヤバいw 対策しないと。
GTmetrix
サイトの表示速度を測ってくれるおなじみのWebツール。このサイトへの信者がいるようですが、ここでの評価が良いからといって素晴らしいサイトであるということはないので、その点は注意が必要。私は参考程度にたまに測ってます。私のブログはダメダメですけどね…。
Browser screenshots
Microsoftが用意している、IEでの表示確認用のWebツール。実際の表示確認は実機を利用してますのであまり使うタイミングはないのですが、出先でMacしかない時に表示確認してもらう、こんな時のためにブクマしてあります。
HTML5 Outliner
HTML5でのマークアップ、ちゃんとアウトラインは確認してますか?文章構造をサクッと確認したい時に、こちらを利用してます。あと、Chrome拡張機能もあるので、簡単に確認したい場合にはそちらも利用してます。
SEOチェキ
作成したページのタイトルや説明文、検索キーワードでの検索順位を調べる時に利用するWebツール。このサイトの利用頻度はかなり高いです。私の場合、このサイトからではなく、ブックマークレットを利用して表示しているページのSEO状況を調べてます。ブックマークレットの登録方法は、空のブックマークを登録して、そのURLに以下をコピペします。これで、表示されているページでこのブックマークレットを発動すれば、SEOチェキでチェックされたページが表示されます。
javascript:q=location.href;if(q)window.open('http://seocheki.net/site-check.php?u='+encodeURIComponent(q));eval();
goodkeyword
ブログ記事を書く前に、関連するキーワードを探す際に利用するWebツール。でも、記事はだいたい思いついたキーワードをメインに執筆しているので、このサイトの利用頻度は低いのですが、どうしても思いつかないという場合にこのサイトを開いています。アイデア出しにいいのでは。
半透過マルチアイコンfavicon.icoを作ろう!
ファビコンを作る際にはこちらのWebツールにお世話になってます。でも、今WordPressではpng画像を用意すればファビコンを表示できるので、WordPressサイトではない場合や、クライアントから要望があった時にこちらを使用してます。画像さえ用意すれば簡単に作成できるので便利です。
SIMPLE ICONS
海外のWebサービスなどのアイコンをSVGで表示しているサイト。そのファイルをダウンロードして利用することも可。ブランドカラーもサイト上で表示されているので、簡単にブランドロゴマークを表示させることができます。あまり利用する機会はないかと思いますが、いざという時に便利なのでブクマしてます。
WEB系。
Web上で必要な比率での計算をしてくれるWebツール。黄金比や白銀比など、さまざまな比率で計算してくれます。こういう計算Webツールは1つはブクマしておいてもいいと思いますよ。1つでいいけどね。
JuDress
日本の住所を海外の住所書式に変換してくれるWebツール。前に海外に荷物を送る際に使用したので、その時にブクマしておいたもの。こちらもあまり利用する機会は少ないけど、いざという時に便利なのでそのままにしてます。海外オークションなどの利用がある場合には、これは便利ですよね。
ブックマークしておきたいWebデザインサイト
Sketch Repo
Macのウェブデザインツール『Sketch』で作成されたデザインモックアップを紹介するサイト。クオリティの高いデザインファイルをダウンロードして、実際にSketchで開いてみることができます。これからSketchを勉強したい方におすすめ。
Best of Themes
WordPressやEmail、海外のショッピングサイトなどのテンプレートを購入することが出来るサイト。もちろんデザインの参考にするのにもピッタリ!ここで紹介されているデザインはかなりおすすめ。このサイトデザインも好みな感じなので、よく見てます。
I/O 3000
日本のサイトデザインを参考にする時には、I/O 3000 を見てます。他にも日本のサイトを紹介しているサイトもありますけど、だいたい同じサイトを紹介していたりするので、ここだけチェックするようにしてます。スクロールだけでスルスルと見れますからね。
Responsive Web Design JP
日本のサイトでレスポンシブデザインも合わせて見てみたい時は、こちらもチェックしてます。レスポンシブデザインのギャラリーサイトって言ったらココでしょ!
カラーミーショップデザインギャラリー
カラーミーショップを使って制作されたネットショップのみを紹介しているサイト。めずらしいのでブクマ。ネットショップを作る機会は少ないんですけど、ネットショップのコンテンツの見せ方って結構参考になるので、こちらもチェックするようにしてます。
Landingfolio
日本のランディングページって、いかにもってのが多くてあまり参考にしたくないので、できるかぎり海外のランディングページを見るようにしてます。コンテンツの切り替えのデザインって特に参考になりますよね。
Product Pages
引き続き、ランディングページのデザイン紹介サイトですが、こちらはよりシンプルなデザインで、文章や画像コンテンツにフォーカスを当てた感じが好みなので、刺激を受けにきます。このようにデザインを1列でスクロールで魅せるというのもいい表現方法ですね。
LP アーカイブ | ランディングページ LP 制作 商品ページ デザイン
いかにも、なランディングページが好みのクライアントのためにブックマークしてあります。約4,500デザインもあれば、要望のものはたいがい見つかりますので、提案する時だけ見てます。たまにいい感じのもありますよ。(タイトルをコピペしたら…いかにもだった…。)
Webデザイナー 検索・登録 / フリーランスWebデザイナーHP集
フリーランスWebデザイナーを紹介しているサイト。私も同業なのでたまに見て刺激を受けてます。更新は止まってる?このサイトも申請したら掲載してもらえるのかな〜。
ブックマーク30個って、結構厳選しました
今回、すべてのブックマークを紹介することができなかったので、30個に限定させてもらいました。もっと、と言われれば、どんどん出すことができるのですが、これまでよく使っていたブックマークや、使っていたブックマークで厳選するとこんな感じになりました。
あとは、ブクマではなくChromeの拡張機能の方でもかなり使用頻度が高いものがあるので、そちらも駆使して、私はWebしてます。
紹介できる機会がありましたら、Chrome拡張機能版の記事も書いてもおもしろいのができそうですね。