こんにちは、アウラのコーダー仁木です。
去年に「WEB制作に便利で素晴らしいWebツールたち」という記事を投稿しました。
この時に紹介したものは画像圧縮や比率計算、配色ツールなどでしたが、さらにボリュームアップして紹介したいと思います。
今回はコーディング時の作業で使えるツールが多めです。
お役立ちレベル：★★★
入力したURLからオープングラフタグを抽出し、表示結果をシミュレートしてくれます。
ちなみにアウラのトップページはこんな感じで確認できます。
上記のような表示結果の下にTitle、Description、Image、Website Addressと設定しているタグの情報を個別に確認もできます。
またGenerate Meta Tagsという機能ではGoogle・Facebook・TwitterそれぞれのOGPタグを出力してくれるのでOGPタグの設定に重宝しています。
https://saruwakakun.com/it/seo/eyecatch
お役立ちレベル：★
様々なSNSなどでWebページがシェアされた時のアイキャッチ画像の表示をシミュレートしてくれます。
Twitter、Facebookの他、はてなブックマークの表示も確認できます。
https://realfavicongenerator.net/
お役立ちレベル：★★★
画像をアップローしてファビコン用の各種ファイルとソースコードを生成してくれます。
またiOSやAndroidのホーム画面に追加した時のアイコンも一緒に設定してくれます。
アップロードする画像は260px × 260pxの正方形サイズで用意します。
画像をアップロードすると、iOSやAndroidのホーム画面のアイコンの表示の設定など行い、最後に「Generate」ボタンを押すと各種ファイルとソースコードが生成されます。
http://gs.statcounter.com/
お役立ちレベル：★★
世界中のブラウザや端末、OSのシェア率を見ることができます。
条件指定も可能で、「日本国内のデスクトップ端末でのブラウザシェア率」や「日本国内のモバイル端末のOSのシェア率」なども見ることができます。
ちなみに直近１２ヶ月の日本国内のモバイル端末の開発メーカーごとのシェア率を見てみるとAppleがずば抜けて１番となっています。
上部のグレーの線がアップルで、その他のベンダーはそれぞれ１０％以下という結果。
https://matthewlein.com/tools/ceaser
お役立ちレベル：★★★★★
フロントエンド回りでは有名そう、CSSのアニメーションのイージングを調整して、コードを取得できます。
イージングの種類はデフォルトで選ぶか、カスタマイズします。実際のアニメーションは「Effect」の[Left・Width・Height・Opacity]のボタンを押すと、それぞれのプロパティで動きを確認できます。
http://www.colorzilla.com/gradient-editor/
お役立ちレベル：★★★★★
グラデーションをCSSで出力してくれます。
グラデーションは手入力だと面倒だし、いざ書こうってなった時に書き方どうだったっけ、、となりがちなので大変重宝しています。
ベンダープレフィックスも出力してくれます（現在だともう書かなくてもいいと思いますが）。
グラデーションをCSS出力してくれるツールは数多くありますが、デザイナーさんが作ったデザインを再現するという点に置いてこれが一番使いやすいなと思っています。
http://www.bad-company.jp/box-shadow/
お役立ちレベル：★★★★
box-shadowとborder-radiusをカスタマイズしてCSS出力してくれます。
パラメーターを動かしていい感じになったらコードをコピペする、というお手軽感が気に入っています。
http://apps.eky.hk/css-triangle-generator/
お役立ちレベル：★★★★★
三角形をCSSコードで出力してくれます。
向きや大きさ、色を設定して出力されるCSSコードをコピペします。
三角形はリンクのデザインのあしらいなどで頻繁に使うので、いつも大変重宝しています。
https://30-seconds.github.io/30-seconds-of-css/
お役立ちレベル：★★
30秒で理解できるCSSのスニペット集です。
ちょっとしたインタラクションやTips的なCSSコードをまとめてくれています。
「へー、こういうこともCSSで出来るんだ」っていう発見があり、サッと眺めてコードを読んでみるだけでも発見があります。
https://smallpdf.com/jp/compress-pdf
お役立ちレベル：★★
PDFファイルを圧縮してくれます。
フリープランだと１時間に２ファイルまでしか圧縮できないのでファイル数が少ない場合に使えます。
お役立ちレベル：★★★★
指定した文字サイズを基準に、文字のジャンプ率を一覧で表示してくれます。
基準になる文字サイズは[Bases]で指定し、比率は[Ratio]で選択できます。
お役立ちレベル：★★★
マシンにインストールされている全フォントを確認できます。
テキストを入力してEnterキーを押すと、入力したテキストでフォントが表示されます。
一覧で確認できるのでデザインなどでフォントを決める時に役立ちます。
お役立ちレベル：★★★★
ご存知の人の方が多いでしょう。CSSプロパティの対応をブラウザごとにチェックできます。
新しいプロパティなどはここで確認してブラウザ対応を確認しておかないと、後で怖い目に合います。
http://kangax.github.io/compat-table/es6/
お役立ちレベル：★★★
ECMAScriptで新しく実装された機能などについて、ブラウザやベンダごとの対応を一覧で確認できます。
Javascriptの開発で役に立ちそうです。
いかがでしたでしょうか。
今回紹介したツールは全てフリーかつブラウザ上で利用できます。
本当に開発者の人に感謝しながら日々使っています。
Web上で公開されているツールの中には多機能すぎて使いきれない程に作り込まれた素晴らしいツールがたくさんあります。
それらの恩恵を受けながらストレスのない効率の良い制作をしていきたいですね！
