Webサイト構築の時におすすめのツール20選

はじめまして。本サイトを立ち上げたときに超便利だった無料のツールやサービスの紹介をします。世の中には便利なツールが多く、大きく生産性を向上させるツールがたくさんあります。知っているだけで使えるものばかりです。

🎨 デザイン関連

Figma

Figma: コラボレーションインターフェイスデザインツール。 チームとしてより良い製品を作る。デザイン、プロトタイプ作成、フィードバック収集のすべてをFigmaで行えます。 www.figma.com

最近Adobeに買収されたデザインツールのFigma。画像を作るための素材はWeb上のものを利用していますが、記事のアイキャッチや記事内のイラストは、ほぼ自作で作成しています。Figmaは無料で利用できるかつデザインツールとしての使いやすさもピカイチなので、一度インストールして使ってみてください。「スクリーンショットの特定箇所を赤枠で括るだけ」「機密情報をマスキングしたい」など超単純な装飾にはデフォルトのペイントアプリを利用しています。それ以外のユースケースではすべてFigmaを利用しています。

Coolors

Coolors - The super fast color palettes generator! Generate or browse beautiful color combinations for your desi coolors.co

配色を決めたいときに参考にするカラーパレット作成ツールCoolors。使いたいカラーをロックすることができるため、ある程度色を決めていい感じな色を決めています。わかりにくいのですが、スペースキーで更新できます。ちなみに利用したことはありませんがiOS/Androidアプリ版もあります。

‎Coolors ‎Coolors is the most loved color palettes app and website tha apps.apple.com

Coolors - Apps on Google Play Create & browse color palettes play.google.com

flaticon

Free Icons and Stickers - Millions of resources to download Download Free Icons and Stickers for your projects. Resources www.flaticon.com

アイコンはいくつかのサイトを利用させていただいていますが、最も利用するのがこの flaticon です。全体的にギラギラした雰囲気を避けてフラットな印象を作ろうと努力しています。無料の場合はSVGが利用できない点がデメリット。

unDraw

Illustrations | unDraw The design project with open-source illustrations for any ide undraw.co

サムネイル画像を作成するときに挿絵的に使うオシャレなイラストにはunDrawを利用しています。よくサムネイルなどで利用されていることから既視感が強めだと思います。この系統のイラストを差し込むだけでモダンな雰囲気を醸し出せるため気に入っています。

Google Fonts

Google Fonts Making the web more beautiful, fast, and open through great t fonts.google.com

商用利用可能なフォントを提供するサービス。誰でもタグをheadタグ内に埋め込めばすぐに利用できるため非常に便利です。フォントの種類も圧倒的で気に入ったものを利用することができます。ただ特に日本語フォントはWebサイトのパフォーマンスのボトルネックになりがちな点が難点。

colorzilla

ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator and oth chrome.google.com

Colorzillaはマウスオーバーすると色情報を取得できるChromeの拡張機能。可能であれば検証機能で取得するほうが確実ですが、画像のピクセル指定での色は取得できないためこの拡張機能を使っています。

iFontMaker

‎iFontMaker ‎初めての iPad 専用フォント作成アプリ。 iFontMaker™ は待望の iPad™ 専用フォント作成アプリです apps.apple.com

iFontMakerはiPad専用のフォント作成アプリです。Apple Pencil を使ってサイトのロゴを自作フォントで作成しました。作成したフォントは使う文字だけですが、フォント作りはすごく楽しいのでみんなやってね。

自作フォントをつくってみた 本記事はSEOには全く関係ありませんが、自作フォントを作成し、本サイトに掲載してみようという実験的な記事になります。はじ kaizen-seo.net

🔧 開発関連

Lighthouse / PageSpeed Insight / Measure page quality

Lighthouse Lighthouse chrome.google.com

LighthouseはWebページのパフォーマンス、アクセシビリティ、SEOなどの計測を行うためのツール。これは言わずもがな有名ですね。何の施策をするにも計測するために欠かせないツールです。

PageSpeed Insightsは、Lightsailからパフォーマンスの項目を切り出して計測できるサービス。どうやら計測エンジンはLightsailと同じようです。

PageSpeed Insights pagespeed.web.dev

Measure page quality は Web上で計測できるLighthouseです。クラウド上のコンピュータから計測されます。

Measure page quality Test your pages in a lab environment powered by PageSpeed Ins web.dev

Meta Tags

Meta Tags — Preview, Edit and Generate With Meta Tags you can edit and experiment with your content metatags.io

Meta Tags はページのメタタグを確認するためのツール。ブラウザの検証ツールでもかまわないのですが、Meta DescriptionやOGP画像を手軽に確認できるのでSEO観点で大変重宝しています。

Website Speed Test by Cloudinary

Website Speed Test by Cloudinary Optimized images improve page load time and user satisfaction webspeedtest.cloudinary.com

Webサイトの高速化には画像の最適化が必須ですが、ページの画像について総合的に診断してくれるツールとして利用するのがWebsite Speed Test by Cloudinary です。かなり厳し目に診断してくれる印象です。

Minify CSS / JavaScript, Gzip Checker

CSS Minification Test | SEO Site Checkup This tool checks your site to ensure you have minified your C seositecheckup.com

JavaScript Minification Test | SEO Site Checkup This tool checks your site to ensure you have minified your J seositecheckup.com

GZIP Compression Test | GiftOfSpeed Test if Gzip or Brotli is working on your website. Brotli is www.giftofspeed.com

初期開発では確認しておきたいMinifyやGzip圧縮などが有効であるかをチェックするツール。Lighthouseでも警告されるかもしれませんが、個別に確認して解決したほうがいいのでチェッカーを利用しました。

🔍 SEO関連

Google Search Console / Bing Webmaster Tools

Google Search Console search.google.com

Bing Webmaster Tools Sign in or signup for Bing Webmaster Tools and improve your s www.bing.com

インデックス登録のための必須ツール。クローラーの動きが予測不可能なことは辛いポイントです。クローラーに動いてほしいときに動作間隔が開いたりするので、人類はクローラーの呪縛からは逃れられないのだと思います。

Google Analytics / Universal Analytics

お客様のビジネスに適した分析ツールとソリューション - Google アナリティクス Google アナリティクスには、ユーザー像を詳しく分析するうえで必要なツールが揃っており、そうしたツールで得られたインサ marketingplatform.google.com

Googleアナリティクス(GA)とその前身の ユニバーサルアナリティクス(UA)です。Webサイトの分析のための情報収集をするためのツールです。2022年時点においてはGAの方をサポートしていればいいのですが、UAの方が収集できる情報量が多いため、結局UAを閲覧することが多いです。

スマホでは AnalyticsPM というアプリを使ってアナリティクス情報を閲覧しています。GAの公式モバイルアプリは、インターフェースの情報が過多すぎて不便だと感じてしまいました。AnalyticsPMはシンプルに重要な情報だけを閲覧できるため便利です。

AnalyticsPM - ブロガーに大人気！Googleアナリティクスのスマホアプリ AnalyticsPM（アナリティクスピーエム）はスマホからGoogleアナリティクス情報を素早く確認できる、ブロガーやサ analyticspm.com

ラッコキーワード

ラッコキーワード｜無料のキーワード分析ツール（サジェスト・共起語・月間検索数など） 無料でサクサク使えるキーワードリサーチツール。世の中のニーズをサクッと把握！コンテンツ制作/製品開発の市場ニーズのリサーチ related-keywords.com

ラッコキーワードは無料のキーワードリサーチツールです。記事を書く前のキーワード選定にはラッコキーワードを使います。検索キーワードのボリュームや関連ワードなどを検索して記事のタイトルやディスクリプションを工夫するために利用します。現状は無料の範疇で使えていますが、有料プランも用意されています。

パワーランクチェック

パワーランクチェックツールでドメインのパワーランクを測定 | アクセスSEO対策ツールズ URLのパワーを独自指標パワーランク（100点満点）で測定します。SEOの観点からサイトの強さを評価する指標になります。 www.ispr.net

パワーランクチェックツールはドメインパワーを計測するために利用します。ドメインパワーは短期間では変動しないため、1ヶ月に1回程度確認すればいいと思います。開発したサイトは当然まだドメインパワーはありませんが…

GRC

検索順位チェックツールGRC SEOツールラボでは、アクセスアップを支援するSEO/SEMツールを無料配布しています。検索エンジン順位チェックツールGR seopro.jp

GRCは検索順位確認ツール。毎朝起動して記事とキーワードごとに検索順位を確認しています。2004年から開発されており、古臭いデザインですが、機能性はバツグンに便利です。筆者は有料ライセンスを購入して利用していますが、無料で試用（制限あり）できるので、検索順位を毎日チェックする人は試してみてください。

Sendinblue

All Your Digital Marketing Tools in One Place - Sendinblue Take your business to new heights with the complete all-in-on www.sendinblue.com

メール配信の自動化サービス。本サイトでは結局は利用しなくなりましたが、300通/日までは無料で、大変便利だったので紹介。最高に使いやすいインターフェースなので迷うことがなく利用できると思われます。しかし、難点は英語であること。デフォルトのまま使いたいフォームなども英語なので、いちいち日本語にしなければいけないです。Mailchimpは高機能すぎて逆に不便でした。日本語ユーザ向けは、大人しく日本製のメール配信サービスを利用するほうが助かるかもしれません。