仕事に役立つ便利なサイト・ツールまとめ【webデザイン・SEO】

こんなことを考えている方へ。

この記事のポイントは以下です。

現役フリーランスの私が重宝しているweb制作、コーディング、webデザイン、SEO…etcに役立つ便利なサイトやツールのまとめ

この記事を書いている私は大阪在住のフリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトやECサイトを作ったり、サイト分析をしたり、PMOとして開発案件に参画したり、ブログを書いたりして生活しています。

仕事に役立つ便利なサイト・ツールまとめ【webデザイン・SEO】

仕事に役立つ便利なサイト・ツールをまとめました。

現役フリーランスとして活動している私が日々使っているサイト・ツールたちを紹介します。

ちなみに、私の主な仕事はこちら。

• コーディング（WordPressサイトがメイン）
• webデザイン（たまに）
• ECサイト構築（最近はShopifyが多い）
• ECサイト分析/コンサル（分析→提案→代行で丸っと担当の流れが多い）
• webマーケティング提案および運用代行

EC企業に5年勤めていた経験を活かして、サイト構築〜施策提案〜分析まで手広くやっています。

なので、本記事で紹介する便利なサイト・ツールたちは、web制作・コーディング・webデザイン・SEOに役立つものが中心となっています。

フロントエンド（コーディングなど）に役立つサイト・ツール

フロントエンド全般、コーディング、WordPress構築…etc に役立つサイト・ツールを紹介します。

Favicon Generator for perfect icons on all browsers

ファビコンジェネレーター。画像アップロードで複数パターンのファビコンが一括で作れます。超便利です。

https://realfavicongenerator.net/

OGP確認｜facebook、twitter、LINE、はてなのシェア時の画像・文章を表示

OGPの見え方を確認できるツール。各SNSに対応したOGPデバッガー・シミュレーターです。Basic認証かけてると見れないので注意です。

https://rakko.tools/tools/9/

sitemap.xml Editor｜サイトマップを作成 自動生成ツール

Googleサイトマップsitemap.xmlや、モバイルサイトマップを作成する自動生成ツール。静的サイトやsitemapが自動生成されないサイトを構築する際に使用します。

これでsitemapを作成したら、ルートディレクトリに配置してGoogle Search Consoleでsitemapを送信するだけです。

http://www.sitemapxml.jp/

【関連記事はこちら】
【新機能】Search Console Insightsとは？【実際に使ってみた】を合わせて読む >>

CART CHECKER｜人気ECサイトの作り方

CART CHECKER（カートチェッカー）は人気ECショップが使用しているカートシステムを調べることができるツールです。
識別できないことも結構ありますが、サクっと使えるので便利です。

https://br-others.jp/ec-shop/

Shopifyサイトかどうかを調べる場合は、Chrome拡張機能を使った方が楽です。以下の記事で解説しています。

【関連記事はこちら】
Shopifyを使ったECサイト参考事例まとめ【国内海外】を合わせて読む >>

Diffchecker｜Compare text online to find the difference between two text files

差分 (diff) をチェックしてくれるツールです。git管理していないソースコードの比較を行う場合などに使います。

https://www.diffchecker.com/

【関連記事はこちら】
GitHubデスクトップ（GitHub Desctop）の使い方【初心者向け】を合わせて読む >>

AUN[あうん]｜登録不要の修正依頼・指示ツール

AUNはweb制作の現場で、バグや修正の指示をスムーズにするために作られたツールです。

私自身、めちゃくちゃ使ってます。

デザインやコーディングの現場で必須かと。

ページキャプチャを専用画面に貼り付けて、視覚的に修正依頼や指示を簡単に行えます。AUNのお陰でコミュニケーションコストが大幅に下がっています。

自身が作成した指示内容をURLで他人に共有できるので、使い勝手がいいです。もちろん、自分も相手も会員登録は不要です。

無料版では指示内容の保存期限が7日間という制限があります。有料プランは月額3,000円〜とやや高めです。

https://aun.tools/

WordPress Codex 日本語版

WordPressのリファレンスです。よく使うのは「関数」のリファレンスですね。「あのタグってどうやって使うんだっけ？」みたいなときに、辞書的に使います。

https://wpdocs.osdn.jp/Main_Page

ただ、サイトに記載がある通り、このリファレンスは今後積極的な更新は行われないようです。

当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムや WordSlack #docs チャンネルでお知らせください。

https://wpdocs.osdn.jp/Main_Page

新ユーザーマニュアルは、以下のURLとなります。

https://ja.wordpress.org/support/

動くWebデザインアイデア帳

jQueryとCSSでつくるアニメーションの逆引きサイトです。コピペで使えるサンプルコードと解説が充実しています。

https://coco-factory.jp/ugokuweb/

こちらのサイトをベースにした書籍も発売されています。

第二弾として「実践編」も発売されました。前書が基本的なサイトのアニメーションを解説していたのに対して、実践編はサイトの印象を強める動きの実装に重きを置いています。

PageSpeed Insights

Googleが運営するページの表示速度を計測してくるサイトです。構築したサイトのスピードチェックに使用します。

https://pagespeed.web.dev/

Test My Site – モバイルサイトの速度を改善して、ビジネスを加速させましょう。

Googleが運営するスマホ（モバイル）に特化したページ速度の測定サイトです。速度の測定だけではなく改善レポートを受け取ることもできます。

https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/

webデザインに役立つサイト・ツール

webデザインやLP、レスポンシブデザインに役立つサイト・ツールを紹介します。

webデザインの勉強法については以下の記事をご覧ください。

【関連記事はこちら】
【2021年】現役フリーランスが選ぶwebデザインの勉強にオススメな本まとめ　を合わせて読む >>

Awwwards – Website Awards – Best Web Design Trends

イケてるデザインのWebサイト集です。海外サイト中心で日本のサイトは少なめです。Shopifyのサイト構築事例を調べる時によく使っていました。

https://www.awwwards.com/

SANKOU! | Webデザインギャラリー･参考サイト集

有名なギャラリーサイト。日本の事例のみが掲載されているので使いやすいです。

https://sankoudesign.com/

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。デザインが洗練されたサイトが多く、参考になります。

余談ですが、私がコーディングしたサイトも掲載されていました。見つけた時はちょっと嬉しかったです。

https://responsive-jp.com/

Figma｜the collaborative interface design tool.

ブラウザ上でも起動するデザインツールです。デスクトップ版アプリもあります。Adobe XDと操作感は似ているので、XDを使える人は難なくfigmaも使えるはず。

ワイヤーフレームとかをサクっと作るときに便利です。最近はfigmaでデザインされたデータをコーディングすることも増えてきました。

https://www.figma.com/

o-dan

商用OKの無料画像を検索できるサイトです。ブログのアイキャッチからサイトのデザインまで幅広く活用させてもらっています。

https://o-dan.net/ja/

iLoveIMG | 画像編集用オンラインツール

画像の圧縮、リサイズ、切り抜き、拡張子変更…etc。ブラウザ上で完結する画像編集サイトです。画像の圧縮とリサイズはよく使います。

非会員の場合は1度に処理できる画像の枚数が15枚まで。無料の会員登録をすると、1度に処理できる画像の枚数は30枚になります。

https://www.iloveimg.com/ja

unDraw

フリー素材サイトです。フラットなデザインで作られたオシャレなイラストを商用OK・無料でダウンロードできます。しかも、svg形式でもダウンロードできるので加工も可能です。

https://undraw.co/illustrations

Font Awesome

無料で使えるアイコン集です。SNSアイコン、カートアイコン、その他ピクトグラムなどが充実しています。コーディングに組み込んで使うのがメジャーですが、svgでダウンロードもできます。

https://fontawesome.com/

ICOOON MONO

無料で使えるアイコン素材を配布しているサイトです。商用OK。ダウンロード時にサイズ・カラー・拡張子を細かく選択できます。

https://icooon-mono.com/

icon rainbow

無料で使えるアイコン素材を配布しているサイトです。商用OK。

https://icon-rainbow.com/

SEO・キーワードリサーチに役立つサイト・ツール

SEO、キーワードリサーチ、競合サイト分析…etc に役立つサイト・ツールを紹介します。

【関連記事はこちら】
【アドセンスの再審査】長期間放置して広告停止になったサイトを再申請する方法 を合わせて読む >>

SimilarWeb｜ウェブサイトトラフィック – あらゆるウェブサイトをチェック分析

webサイトを入れるだけでそのサイトの分析ができるサービス。ただ、対象サイトのトラフィックが少ないとデータが表示されないので注意。小規模サイトにはほとんど使えません。

https://www.similarweb.com/ja

ubersuggest｜無料キーワード提案ツール SEO対策

調べたいキーワードを入れるだけで月間検索ボリューム、CPC、競合データを表示してくれるSEOツールです。

使い勝手がいいのでかなり重宝しています。無料でも使えますが、ほぼ使いものにならないので有料版がおすすめです。

仕事はもちろん、個人で運用しているブログのSEO対策でも使用しています。

https://neilpatel.com/jp/ubersuggest/

【関連記事はこちら】
ubersuggestの有料版(買い切り版)を安く買う方法【SEO対策に必須】　を合わせて読む >>

ラッコキーワード

キーワード集め、キーワードリスト作成に役立つツールです。入力したキーワードに関係のあるキーワードをサジェスト形式で出力してくれます。

ubersuggestやキーワードプランナーと違い、月間検索ボリュームは出ません。一方で、ユーザーが実際に検索しているキーワードをかなりの数集めることができます。

ロングテールのキーワード集めには必須です。私もよく使います。

https://related-keywords.com/

OMUSUBI

ラッコキーワードと似ています。キーワード集め、キーワードリスト作成に役立つツールです。入力したキーワードに関係のあるキーワードをサジェスト形式で出力してくれます。

https://omusubisuggest.appspot.com/

Google TRENDS

調べたいキーワードの経年トレンドを分析できるツールです。

たとえば「クリスマス」というキーワードは毎年10月上旬から検索され始め、クリスマスイブの週に検索数がピークを迎えます。こうした検索ワードのトレンドを調べることができます。

最長、過去5年分の検索ワードのトレンドを見ることができるので、そのキーワード自体がアップトレンドなのかダウントレンドなのかを調べることができます。

https://trends.google.co.jp/trends/?geo=JP

ツール活用×スキルアップで自分の価値を高める方法

ひとつの仕事を仕上げるのに使える時間というのは限られています。

限られた時間でクオリティの高い価値を提供するのがプロの仕事です。

便利なツールや便利なサイトをフル活用して、作業系の業務は極力効率化し、コア業務に時間を避けるようにしましょう。

• 動画でスキルアップする

スキマ時間に自分のペースで学びたいなら「udemy」がおすすめ。

「未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース 」や「WordPress開発マスター講座 」や「Shopifyでクライアントのストアを作る人のための講座 」など、web制作に関わるコースが多数開講されています。

• udemyでweb制作に関わる講座の一覧を見る >>

• 本でスキルアップする

WordPress、ネットショップ、webマーケティングのおすすめ本をピックアップしました。辞書的な役割として手元に一冊置いておくと安心です。

• デイトラで学ぶ

「デイトラ」は質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。

「Web制作コース」や「WEBデザインコース」や「ShopifyEC構築コース」や「Webマーケティングコース」といった複数のコースを提供しています。

現場で役立つスキルを提供しているのが特徴で、学習中は厳しい審査を突破した現役エンジニアやフリーランスがメンターとしてサポートしてくれます。

• TechAcademy（テックアカデミー）で学ぶ

TechAcademy（テックアカデミー）は、専属のパーソナルメンターがマンツーマンでサポートしてくれるオンラインスクールです。

「WordPressコース」や「Shopifyコース」などが開講されています。体系的に即戦力のスキルを身に付けたい人にはおすすめです。

とはいえ、安い買い物ではないので「TechAcdemyの講座を無料体験で試してみる」のがおすすめです。

• フリーランスとしての生き方を学ぶ

フリーランスは基本ひとり。誰も守ってくれません。知識（＝武器）を身につけ、自分の身は自分で守りましょう。

まとめ

この記事のポイントをまとめます。

本記事では以下の３分野に分けて、業務に役立つサイト・ツールを紹介しました。

・フロントエンド（コーディングなど）に役立つサイト・ツール
・webデザインに役立つサイト・ツール
・SEOに役立つサイト・ツール

情報収集や作業系の業務をいかに効率よく行えるかで、コア業務に避ける時間が変わってきます。

できる限り省力化・効率化を進めて、仕事の質を高めていきましょう。

今回の記事はここまでです。