世の中には制作時に役立つ便利なツールサイトがたくさんあります。今まで発見した、いつもorたまーに役立つツールをご紹介します。
CONTENTS
デザイン(色)に関するツール
ここでは配色に関するお役立ちツールをご紹介します。配色に困ったり色の組み合わせに困ったら参考にしてみてください。
カラー
Adobe Color CC
https://color.adobe.com/ja/create/color-wheel/
即座にカラーコード(RGB、HEX)を確認したいとき、ちょっとカラーコードの数値を変えてみたいときの確認にとても重宝します。また、トレンドのカラーパレットも違うページに掲載されているのも特徴です。
material design palette
https://www.materialpalette.com/
今流行りのアノ!マテリアルデザインに適したカラーを探すことができます。
Color Hunt
カラーパレット、配色の組み合わせのパターンが色々揃っています。
コーディングに関するツール
コーディングに関するツールは多彩なものばかりあります。
Can I use…
各ブラウザでベンダープレフィックスの対応状況を調べられます。こちらは随時チェックですね。
Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/
CSSにてグラデーションを使いたいときに超便利です!使いたいグラデーションを設定することで自動でCSSコード形成してくれます。
Favicon Generator
http://realfavicongenerator.net/
各デバイスのファビコンの表示のされ方を確認できます。また、例えばiosのSafariでサイトがホーム画面に追加されたときに表示されるアイコンなども確認することができます。
Dirty Markup
過去記事「お気に入りの国内・海外のギャラリーサイト(14選)と活用法」でもご紹介しましたが、HTML、CSS、js、APIのコードを整理してくれるツールです。サイト分析の際に役に立ちます。
SEOに関するツール
URLを打つだけでそのサイトの大まかな情報が把握できるツールたちをご紹介します。アナリティクスほど詳細には見れませんがお気軽に活用することができます。
SEOチェキ!
下記情報など確認することができます。手軽に見れるのがいいですね。
・ページ読み込み時間
・ファイルサイズ
・ソーシャルサイトシェア数
・サーバドメイン
・キーワード出現頻度チェック
など。
SimilarWeb
無料版と有料版がありますが、無料版だけでも訪問数や平均滞在時間、閲覧者の流入元などアナリティクスで分かることが大まかですが見れちゃいます。
その他のツール
ここでご紹介するツールはご存じの方が多いと思いますが、日ごろよく使うツールです。
StartCounter
世界中、国別にブラウザのシェアが確認できるサイトです。これは資料としても使える情報ですね。それにしてもChromeさんすごいですね~
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
調べたいサイトのURLを打つだけで、そのサイトの表示速度を上げるためのアドバイスをもらえます。
まとめ
世の中には便利なツールサイト、不便利なツールサイトが多々あります。便利なツールに出会えた時は感動ものです。これからも便利なツールを探したらご紹介していきたいと思います。