Web制作に便利で素晴らしいWebツールたち 〜その2〜

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. Web制作に便利で素晴らしいWebツールたち 〜その2〜

Web制作に便利で素晴らしいWebツールたち 〜その2〜

Web制作に便利で素晴らしいWebツールたち 〜その2〜

こんにちは、アウラのコーダー仁木です。

去年に「WEB制作に便利で素晴らしいWebツールたち」という記事を投稿しました。

WEB制作に便利で素晴らしいWebツールたち

この時に紹介したものは画像圧縮比率計算配色ツールなどでしたが、さらにボリュームアップして紹介したいと思います。
今回はコーディング時の作業で使えるツールが多めです。

HEY META

http://www.heymeta.com/

お役立ちレベル:★★★

入力したURLからオープングラフタグを抽出し、表示結果をシミュレートしてくれます。
ちなみにアウラのトップページはこんな感じで確認できます。

上記のような表示結果の下にTitleDescriptionImageWebsite Addressと設定しているタグの情報を個別に確認もできます。

またGenerate Meta Tagsという機能ではGoogleFacebookTwitterそれぞれのOGPタグを出力してくれるのでOGPタグの設定に重宝しています。

アイキャッチ画像サイズチェッカー

https://saruwakakun.com/it/seo/eyecatch

お役立ちレベル:★

様々なSNSなどでWebページがシェアされた時のアイキャッチ画像の表示をシミュレートしてくれます。
TwitterFacebookの他、はてなブックマークの表示も確認できます。

Favicon Generator

https://realfavicongenerator.net/

お役立ちレベル:★★★

画像をアップローしてファビコン用の各種ファイルとソースコードを生成してくれます。
またiOSAndroidのホーム画面に追加した時のアイコンも一緒に設定してくれます。

アップロードする画像は260px × 260pxの正方形サイズで用意します。
画像をアップロードすると、iOSやAndroidのホーム画面のアイコンの表示の設定など行い、最後に「Generate」ボタンを押すと各種ファイルとソースコードが生成されます。

statcounter

http://gs.statcounter.com/

お役立ちレベル:★★

世界中のブラウザや端末、OSのシェア率を見ることができます。

条件指定も可能で、「日本国内のデスクトップ端末でのブラウザシェア率」や「日本国内のモバイル端末のOSのシェア率」なども見ることができます。

ちなみに直近12ヶ月の日本国内のモバイル端末の開発メーカーごとのシェア率を見てみるとAppleがずば抜けて1番となっています。


上部のグレーの線がアップルで、その他のベンダーはそれぞれ10%以下という結果。

Ceaser

https://matthewlein.com/tools/ceaser

お役立ちレベル:★★★★★

フロントエンド回りでは有名そう、CSSのアニメーションのイージングを調整して、コードを取得できます。

イージングの種類はデフォルトで選ぶか、カスタマイズします。実際のアニメーションは「Effect」の[Left・Width・Height・Opacity]のボタンを押すと、それぞれのプロパティで動きを確認できます。

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

お役立ちレベル:★★★★★

グラデーションをCSSで出力してくれます。

グラデーションは手入力だと面倒だし、いざ書こうってなった時に書き方どうだったっけ、、となりがちなので大変重宝しています。
ベンダープレフィックスも出力してくれます(現在だともう書かなくてもいいと思いますが)。

グラデーションをCSS出力してくれるツールは数多くありますが、デザイナーさんが作ったデザインを再現するという点に置いてこれが一番使いやすいなと思っています。

box-shadowとborder-radiusジェネレーター

http://www.bad-company.jp/box-shadow/

お役立ちレベル:★★★★

box-shadowとborder-radiusをカスタマイズしてCSS出力してくれます。

パラメーターを動かしていい感じになったらコードをコピペする、というお手軽感が気に入っています。

CSS triangle generator

http://apps.eky.hk/css-triangle-generator/

お役立ちレベル:★★★★★

三角形をCSSコードで出力してくれます。
向きや大きさ、色を設定して出力されるCSSコードをコピペします。

三角形はリンクのデザインのあしらいなどで頻繁に使うので、いつも大変重宝しています。

30 Seconds of CSS

https://30-seconds.github.io/30-seconds-of-css/

お役立ちレベル:★★

30秒で理解できるCSSのスニペット集です。

ちょっとしたインタラクションやTips的なCSSコードをまとめてくれています。

「へー、こういうこともCSSで出来るんだ」っていう発見があり、サッと眺めてコードを読んでみるだけでも発見があります。

Smallpdf

https://smallpdf.com/jp/compress-pdf

お役立ちレベル:★★

PDFファイルを圧縮してくれます。

フリープランだと1時間に2ファイルまでしか圧縮できないのでファイル数が少ない場合に使えます。

https://www.modularscale.com/

お役立ちレベル:★★★★

指定した文字サイズを基準に、文字のジャンプ率を一覧で表示してくれます。

基準になる文字サイズは[Bases]で指定し、比率は[Ratio]で選択できます。

wordmark.it

https://wordmark.it/

お役立ちレベル:★★★

マシンにインストールされている全フォントを確認できます。

テキストを入力してEnterキーを押すと、入力したテキストでフォントが表示されます。
一覧で確認できるのでデザインなどでフォントを決める時に役立ちます。

Can I use

https://caniuse.com/#home

お役立ちレベル:★★★★

ご存知の人の方が多いでしょう。CSSプロパティの対応をブラウザごとにチェックできます。
新しいプロパティなどはここで確認してブラウザ対応を確認しておかないと、後で怖い目に合います。

ECMAScript Compatibility table

ECMAScript Compatibility table

http://kangax.github.io/compat-table/es6/

お役立ちレベル:★★★

ECMAScriptで新しく実装された機能などについて、ブラウザやベンダごとの対応を一覧で確認できます。
Javascriptの開発で役に立ちそうです。

まとめ

いかがでしたでしょうか。

今回紹介したツールは全てフリーかつブラウザ上で利用できます。
本当に開発者の人に感謝しながら日々使っています。

Web上で公開されているツールの中には多機能すぎて使いきれない程に作り込まれた素晴らしいツールがたくさんあります。
それらの恩恵を受けながらストレスのない効率の良い制作をしていきたいですね!

前後の記事

お問い合わせはこちらから

見出しアイコン スタッフ募集 Recruit

アウラでは新メンバーを募集しています。詳しくは採用ページをご覧ください。