普段使用しているWEBツールのリンク集です

デザイン

Canva

https://www.canva.com/

Photoshop / Illstratorを開くまでも……というプロジェクト(速度と展開重視・また共同作業が必要なとき)にはCanvaを使用することが多いです。時短になりすぎていともカンタンに元が取れますので、ぜひとも有料プランで。

あらかじめよく使う要素をIllustratorでSVGに書き出し素材として読み込んでストックしておいたり、よく使うお気に入りフォントをアップロードしておくことで、さらに時短になります。

グラデーション作成ツール「WebGradients」

https://webgradients.com/

Webサイトの背景として使用できる180種類のリニアグラデーションを集めた無料のコレクションです。
コンテンツの背景として使用することができます。クロスブラウザ対応のCSS3コードを簡単にコピー
をコピーして、すぐに使うことができます。また、各グラデーションの.PNGバージョンも、SketchとPhotoshop用のパックもあります。

画像の背景をサクッと消す「removebg」

https://www.remove.bg/ja

結構な精度で、画像の背景をアップロードからのワンクリックで削除してくれます。APIなんかもあって、色々楽しそうなツール。


作図と共有(オンラインホワイトボードツール)

Miro

https://miro.com/

サクッと作図→誰かに共有したいときは、これが今のところ一番と思っています。(Cocooも使うときがありますが、操作感がMiroの方が良いと思う) もちろん共有した人との同時編集も可能なので、話し合いにも。

少し割高なのが難点。$1/monthくらいにしてくれたらな〜。

少しリーズナブルな「Mural」を現在お試し中です。


各種確認・検証ツール

いろいろ比較できる差分ツール「DiffChecker」

https://www.diffchecker.com/

テキスト、画像、PDF、Excelファイル、フォルダの差分が比較できるツール。デスクトップアプリもあります。

OGP・Twitterカードの確認「OGP確認ツール – Analyze OGP and Twitter Cards」

https://ogp.buta3.net/

URLを送信するだけで、OPGの情報、Twitterカード、それからFacebook/Twitterそれぞれのプレビューを見ることが出来て便利です。一緒に確認できて、操作感も軽く、楽。

リッチリザルトテスト

https://search.google.com/test/rich-results

構造化データをテストするための Google の公式ツールで、ページの構造化データで生成される Google のリッチリザルトを確認できます。Google 検索でリッチリザルトがどのように表示されるかをプレビューすることもできます。

スキーマ マークアップ検証ツール

https://validator.schema.org/

ウェブページに埋め込まれている Schema.org ベースの構造化データをすべて検証します。

正規表現チェック

特にGoogleアナリティクスでの目標設定にて正規表現で到達ページを登録するために使用しています。

https://docs.kaizenplatform.net/ja/regexp/

https://www.debuggex.com/


プロパティがわからなくなったら……

GridレイアウトやFlexは、「あれ???」となるときがあります。笑

そんなときに見返すサイトです。

https://scrimba.com/scrim/c2gd3T2

A Complete Guide to Flexbox

印刷

Convert Web Page to PDF for Free Online – #1 Web to PDF Converter

WEBページをA4サイズで印刷できるPDFに変換できる超便利ツール。実はこの機能は無料ではなかなか無い。
「WEBページの校正を印刷で確認したい」というニーズがたくさんあるので、こちらで対応。

https://www.web2pdfconvert.com/