BLOG
Webクリエイターの私がブックマークして頻繁に利用しているサイト16選
Webサイト制作に関わる仕事をしている人ならば、ブックマークしておいて、しょっちゅう開いているサイトがあるかと思います。私もWebクリエイターとして、ホームページを作ったり、ブログを更新したりするときに、参考にしたり、サービスを利用したりするWebサイトがあります。そこで、プロのWeb開発者である私が、実際にWeb制作の現場で活用しているサイトをご紹介します。
ただし、当たり前であるアナリティクスやサーチコンソールなどのGoogleのサービスを除いてとなっていますのでご了承ください。参考になれば幸いです。
私がブックマークしているWebサービス
GTmetrix
WEBサイトの表示速度チェックツールとして超有名な「GTmetrix」。Web開発者にとってサイトの高速化は非常に重要なんです。サイトの表示速度が遅いと、ユーザーは「あ、見るのやーめた！」ってなっちゃうんです。制作したサイトの速度が遅い理由やその箇所を指摘してくれるので、改善に大変役に立ちます。
検索順位チェッカー
http://checker.search-rank-check.com
Google、Yahoo、Bingの三大検索エンジンの検索順位を調べられるサービス。スマホにも対応していて、正確かつシンプルで使いやすいので、私はこれを利用しています。
TinyPNG
言わずと知れた、画像サイズを小さく圧縮してくれる「TinyPNG」。元々はPNG画像だけだったんじゃないかな。JPGも一緒にしてくれるので、だいぶ時短になります。私は、Webサイトを完成させてから最後に一気にやってます。半端なく軽くしてくれて、劣化はほぼ感じないというすごいサービスです。
関連キーワード取得ツール（仮名・β版）
http://www.related-keywords.com
Googleサジェスト、教えて！goo、Yahoo!知恵袋…これらの情報元より関連キーワードを一括取得し、表示するツールです。サイトのデザインはイマイチですが、数あるキーワードを調べるツールの中では、「goodkeyword」と並んで、シンプルで使いやすいです。
オンラインストレージ GigaFile(ギガファイル)便
1ファイル200Gまでという十分すぎる容量を無料で転送できるサービスです。クライアント様にデータを送るときに頻繁に使用しています。広告がちょっと気になりますが、無料で使用できるのだから、感謝しなきゃですね。
半透過マルチアイコンやファビコン(favicon.ico)作成
https://ao-system.net/alphaicon/
半透過マルチアイコンをPNG画像から簡単に作成できるツールです。綺麗なファビコンが作れるので、Webサイト制作時はいつも利用しています。モバイル版Googleにファビコンが表示されるようなり、重要性はかなり高まっていますので、ぜひブックマークしておきたいサービスです。
HTML特殊文字変換
https://tech-unlimited.com/escape.html
HTMLやコードをホームページに載せる時、特殊文字を正常に表示されるように変換するツールです。シンプルで使いやすいです。私はWeb制作系のブログを書いていますので、コードをブログに載せるときなど必須なんです。
写真素材なら「写真AC」無料（フリー）ダウンロードOK
高品質な写真素材を無料ダウンロードできるサイト。ただし高解像度の画像は1日に1つしかダウンロードできなかったりと無用会員には制約は多いです。私は有料会員に入っているので、ダウンロードし放題です。有料会員と言っても月額1,066円と他の素材サイトと比べると格段に安いので、非常に嬉しいです。よく活用させていただいています。
私がブックマークしている記事
Google HTML/CSS Style Guide まとめ
https://qiita.com/Sugima/items/785644372397595644ba
Googleが定めたHTML/CSSのガイドラインを、分かりやすく翻訳してまとめている記事。Web制作に携わる人なら、必ず覚えておかなければいけないルールなので、必須かと。私はほぼ覚えているので、最近は見る機会はありませんが、永久保存版です。
CSS Flexbox の基礎知識と使い方を詳しく解説
https://saruwakakun.com/html-css/basic/font-awesome
Web制作に関する情報を発信しているサイト「コリス」のFlexboxの記事。CSS Flexboxとは、柔軟なレイアウトを実現できるCSSの新しいレイアウトモジュールで、今やスタンダードな技術となっています。すごく分かりやくまとめてあるので、実際のコーディング時にいつも開きながら作業してます。それぐらいすごい神ページです。
WordPressの高速化！６つの簡単な方法で重さを改善
https://capsulecloud.io/service/wordpress/speedup
Web開発者ならWordPressに関わる機会は多いかと思いますが、悩みの種は表示速度が遅いということです。そんな悩みをたった６つの簡単な方法で解決するという記事です。簡単にできて、さらに効果もあるので、ブックマークしておくと重宝します。
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
https://saruwakakun.com/html-css/basic/font-awesome
Font Awesomeとは、無料で利用可能なWebアイコンフォントで、とても種類が多いのでWeb制作のあらゆる場面で活用することができます。この記事は、Font Awesomeの使用方法が分かりやすくまとめてあるので、大変参考になります。ホームページ制作時は、どんどんWebアイコンフォントを使い、ビジュアル的なクオリティーを上げていきましょう。
簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード
https://www.1-firststep.com/archives/462
WordPressを導入していれば、問い合わせフォームにはContact Form 7があるので何の心配もいりませんよね。でもWordPressを使用しない場合は、ちょっと苦労するんです。そんな方のために、簡単に設置できるメールフォームがあるのをご存知ですか。カスタマイズしなくてもそこそこのデザインだし、設置方法も分かりやすく書かれていて、とても参考になるページです。
head内に書くべきタグを総まとめ
https://saruwakakun.com/html-css/basic/head
WordPressを導入していて、All in One SEO Packを設定すれば、細かくhead内のタグを出力してくれます。ただ理屈として知っておく必要は絶対あるし、WordPressを導入してない場合は、自分で書く必要があるんです。だからこちらの記事はWeb制作者にとって必須とも言えるかと思います。説明が分かりやすいので、とても勉強になります。
WordPress 構造化データを動的に出力する方法
https://hirashimatakumi.com/blog/3192.html
構造化データとは、検索ロボットにサイトの内容を適切に理解させることのできるメタデータで、こちらの記事を参考にすれば、ほぼコピペでいけちゃう優れページです。構造化データも必須となってきた昨今では、ぜひブックマークしておきたいページですね。
ホームページ制作 費用・料金の相場【2019年版】
https://www.lab-ry-works.com/blog/?p=243
数あるページのWeb制作の料金相場の記事の中で、私はこちらを参考にしています。皆様もホームページを制作するときの料金相場はとても気になりますよね。こちらの相場は、プロの私の目から見て、かなり平均的で正確な数字だと思います。ただ、一般の人からすれば「高いなー」というのが本音でしょう。ただこの数字が平均的なんですよね。だからとても参考になると思います。ただ、当スタジオでは、こちらのページの一般的な価格よりも半額ほどで制作させていただいております。
まとめ
いかがでしたか、どれもWeb制作の現場でフル活用できそうなサービスやページだったのではないでしょうか。いつの時代もWeb制作のスタンダードは、あっという間に移り変わります。でも今回掲載したサイトは、2020年の今現在、まだまだ活用いただけるものばかりだと思いますので、どうぞWeb制作の参考にしていだければと思います。
