三重県名張市伊賀市のホームページ制作/グラフィックデザイン

BLOG

Webクリエイターの私がブックマークして頻繁に利用しているサイト16選

Webクリエイターの私がブックマークして頻繁に利用しているサイト16選

Webサイト制作に関わる仕事をしている人ならば、ブックマークしておいて、しょっちゅう開いているサイトがあるかと思います。私もWebクリエイターとして、ホームページを作ったり、ブログを更新したりするときに、参考にしたり、サービスを利用したりするWebサイトがあります。そこで、プロのWeb開発者である私が、実際にWeb制作の現場で活用しているサイトをご紹介します。

ただし、当たり前であるアナリティクスやサーチコンソールなどのGoogleのサービスを除いてとなっていますのでご了承ください。参考になれば幸いです。

私がブックマークしているWebサービス

GTmetrix

https://gtmetrix.com

WEBサイトの表示速度チェックツールとして超有名な「GTmetrix」。Web開発者にとってサイトの高速化は非常に重要なんです。サイトの表示速度が遅いと、ユーザーは「あ、見るのやーめた!」ってなっちゃうんです。制作したサイトの速度が遅い理由やその箇所を指摘してくれるので、改善に大変役に立ちます。

検索順位チェッカー

http://checker.search-rank-check.com

Google、Yahoo、Bingの三大検索エンジンの検索順位を調べられるサービス。スマホにも対応していて、正確かつシンプルで使いやすいので、私はこれを利用しています。

TinyPNG

https://tinypng.com

言わずと知れた、画像サイズを小さく圧縮してくれる「TinyPNG」。元々はPNG画像だけだったんじゃないかな。JPGも一緒にしてくれるので、だいぶ時短になります。私は、Webサイトを完成させてから最後に一気にやってます。半端なく軽くしてくれて、劣化はほぼ感じないというすごいサービスです。

関連キーワード取得ツール(仮名・β版)

http://www.related-keywords.com

Googleサジェスト、教えて!goo、Yahoo!知恵袋…これらの情報元より関連キーワードを一括取得し、表示するツールです。サイトのデザインはイマイチですが、数あるキーワードを調べるツールの中では、「goodkeyword」と並んで、シンプルで使いやすいです。

オンラインストレージ GigaFile(ギガファイル)便

https://gigafile.nu

1ファイル200Gまでという十分すぎる容量を無料で転送できるサービスです。クライアント様にデータを送るときに頻繁に使用しています。広告がちょっと気になりますが、無料で使用できるのだから、感謝しなきゃですね。

半透過マルチアイコンやファビコン(favicon.ico)作成

https://ao-system.net/alphaicon/

半透過マルチアイコンをPNG画像から簡単に作成できるツールです。綺麗なファビコンが作れるので、Webサイト制作時はいつも利用しています。モバイル版Googleにファビコンが表示されるようなり、重要性はかなり高まっていますので、ぜひブックマークしておきたいサービスです。

HTML特殊文字変換

https://tech-unlimited.com/escape.html

HTMLやコードをホームページに載せる時、特殊文字を正常に表示されるように変換するツールです。シンプルで使いやすいです。私はWeb制作系のブログを書いていますので、コードをブログに載せるときなど必須なんです。

写真素材なら「写真AC」無料(フリー)ダウンロードOK

https://www.photo-ac.com

高品質な写真素材を無料ダウンロードできるサイト。ただし高解像度の画像は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の高速化!6つの簡単な方法で重さを改善

https://capsulecloud.io/service/wordpress/speedup

Web開発者ならWordPressに関わる機会は多いかと思いますが、悩みの種は表示速度が遅いということです。そんな悩みをたった6つの簡単な方法で解決するという記事です。簡単にできて、さらに効果もあるので、ブックマークしておくと重宝します。

【保存版】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制作の参考にしていだければと思います。


関連するエントリー
ご相談・お見積り

制作のご相談・お見積り(無料)を
受け付けています。

制作についての不安や疑問など、どんなことでもお気軽にご相談ください。 制作会社様からの制作外注依頼もお待ちしております。

電話番号