2020年 サイト制作する際に便利な無料のWEBサービス
美しく、SEOを考慮したWEBサイトをデザイン、コーディングする際に便利なWEBサービスを紹介します。
ダウンロード・登録不要、無料のWEBサービスなので、ぜひ活用してください。
便利なオンラインツール デザイン編
きれいなWEBサイトをデザインする際に使える便利ツールです。
登録不要と謳っておきながらいきなりPinterestを紹介しております。こちらを除いて他のサービスは登録不要です。
Pinterestとは、ネット上のWEBサイト・Pinterest上にある画像を自分のボードに集めることの出来る画像収集サービスです。
興味のあるカテゴリーにウェブデザインを入れておくと、タイムライン上におしゃれなウェブサイトがたくさん表示されます。
登録に抵抗がある方は「2020年プロの現場で使われるギャラリーサイト7選」こちらの記事で紹介しているギャラリーサイトをご活用ください。
COLOR SAFE
COLOR SAFEとは、背景やフォントサイズなどをしているすることで、WCAGの基準をもとに最適なカラーコントラストをカラーパレットとして提案してくれるWEBサービスです。
他にも同じ適切なカラーを選べる「Color.review」というWEBサービスもあります。こちらは色とコントラスト比の関係を表示された3本のラインを基準に色の組み合わせを考えることができます。
カラーパレットから選ぶなら「COLOR SAFE」、カラーピッカーから選ぶなら「Color.review」用途に応じてご活用ください。
ダミーテキストジェネレータ
ダミーテキストジェネレータとは、文字数、文字の大きさ、字間、行間などを確認するためにダミーテキストを使いたいときに便利なWEBサービスです。
Google Fonts
Google Fontsとは、Googleが提供している簡単にWEBフォントを利用できるサービスです。
もちろんフォントをダウンロードすることも可能です。
Googleの高速サーバーから読み込むことができるので、日本語フォントや、数種類の英語フォントの使用であれば気にならないくらいのページ読み込みの速さを保つことができます。
日本語フォントが少ないのが少し残念ですが、Adobeのサービスを利用している方であれば、Adobe Fontsを利用することで、追加料金なしで豊富な日本語フォントを利用することができます。
便利なオンラインツール コーディング編
SEOに強く、パフォーマンスの良いWEBサイトをコーディングをする際に使える便利ツールです。
TinyPNG
TinyPNGとは、ほとんど画質を劣化させずに画像のサイズを小さくすることができるWEBサービスです。
1回で最大20枚、5MBまで圧縮することができます。
また、他のサービスと比べてファイル名を維持することができるのが最大の特徴です。
画像のサイズを圧縮することで、WEBサイトの表示速度を上げることができるため、SEO対策にも有効です。
Placehold.jp
Placehold.jpとは、日本製のシンプルなダミー画像を生成できるWEBサービスです。
サイトのコーディング時などに、ダミー画像があると何かと便利なので、よく利用させていただいてます。
写真のダミー画像を利用したい場合は、海外製のものですが「PlaceIMG」が便利です。
PNG、JPGをWEBPに変換くん
PNG、JPGをWEBPに変換くんとは、PNG、JPG画像を次世代フォーマットのWebP形式に変換できるサービスです。
こちらのツールを使えば、「TinyPNG」で圧縮した画像より約20％サイズを圧縮することができます。
WebPについては「画像の次世代フォーマット webpについて」こちらの記事を参考にしてください。
cubic-bezier.com
cubic-bezier.comとは、transition-timing-function の cubic-bezier の値を ease など用意された値と比較しながら作成できるWEBサービスです。
より美しいアニメーションを作成するには、もともと用意されている値を使わず、自分で作成するのが手でしょう。
DeepL翻訳
DeepL翻訳とは、AIを搭載した精度のとても高い翻訳サービスです。
最近、日本語、中国語が対応したことによって日本国内でかなりの注目度が上がりました。
Google翻訳などのサービスと比べても比較にならないくらい精度が高いのが特徴です。多言語ページの作成などにご活用ください。
さいごに
他にも、たくさん便利なWEBサービスはありますが、私が現状サイトを作成するうえで利用しているものは、紹介した9個のWEBサービスと「Font Awesome」の10個です。
今回は登録不要というコンセプトで記事を書いているため、毎回利用する「Pinterest」を除いて、案件ごとに使わなかったりする「Font Awesome」は外させてもらいました。