勉強ももちろん大事だけど、効率良くパパッと構築できるスキルも必要。
例えるなら、フリーハンドで真っ直ぐな線を引けるよう頑張るのもいいけど、定規使ってピッと線引けば早いじゃないという話。WEB制作ならその定規はネットの海にたくさんあるのです。
要領よくやって工数を削減して、浮いた時間を勉強に回そう！
目次
Mergely – Diff online, merge documents
差分チェックツール
オンラインツールでもWinMargeみたいな差分チェクできたらいいですよね。WinMargeはMac版は無いし。
このサイトは使い勝手もよく、パパッと差分チェックできます。WinMargeと違って、文字単位での差分は拾えませんが、行単位で差分がある箇所が明示されます。
これでこっそり原稿が差し変わってても変更箇所を見つけられるね！！🥴
SassMeister
Sacc→CSS変換ツール
他のコーダーが突然Sassを使ってきたり、渡されたソースがSassだったりしたときに、CSSで作業を進行する場合どうしましょう？
使い方は大体前述のMergelyを同じで、このサイトの左側に変換したSassをペーストすると、右側にCSSに変換されて表示されます。
変換しきれていない箇所がたまにあるので、ざっと見返しましょう。
MDN Web Docs – 開発者による開発者のためのリソース。
コーダーにとっての最強の教科書
MDN Web Docs サイトは、ウェブサイトやプログレッシブウェブアプリのための HTML、CSS、API を含むオープンウェブ技術に関する情報を提供しています。また、Firefox 開発ツールのような Mozilla 製品に関する開発者向けドキュメントもあります。
とディスクリプションに書いてますが、その通り！
『backgroundをまとめて記述するのって、どうすんだっけ？』
『transitionの指定ってどうだっけ？』
なときも、このサイトがあれば疑問解消。
プロパティの解説から記述方法、各ブラウザでの互換性までまとまっています。
計算が苦手な文系のための コーディング単位計算ツール
コーディング時に必要な計算ツールがひとまとめ！
pxからのem換算、縦横のpxからのパーセンテージ……作業時にちょっともやもやする計算（なにせ計算が苦手なので）もこのサイトで瞬時に解決。
こういうサイトがすっきりデザインで公開されてるって、時代を感じますね。
消費税 – 高精度計算サイト
計算といえば消費税も計算しよう！
領収書もインボイス対応しなければなりません。これまで「50,000円」と金額だけで済んでいたところ、税抜金額、消費税額と内訳も記載しなければならなくなりました。
「これ5万円でお願い」とふんわり依頼を請けていたので、10%の消費税を加えて5万円にするためには？？と思考停止に。
こんなときこそオンラインツールを使いましょう！
83 Beautiful CSS box-shadow examples – CSS Scan
box-shadowのニュアンスを見て選べる
一口にshadowと言ってもニュアンスは様々。XDでかけたshadowをそのままの数値でCSSで組んでみてもなんか違う気が。
そんなとき一覧で見てデザイナーとコーダーがニュアンスを確認できて話が早い！
boxをクリックするとコードをコピーできるので作業も早い！
イージング関数チートシート
イージングを調整するならこのページ
アレンジした各イージングの名称とグラフ、hoverでそれに合わせた動きが確認できます。
さらに、該当イージングのパネルをclickすることで詳細ページに移動して、グラデーション、サイズ、位置、透明の変化が確認できる優れもの。
もちろんCSSの記述もセットです。
デフォルトのイージングが確認したい場合は、（動きは確認できませんが）分かりやすく解説しているこのページをオススメします。
Loader generator
ローディングのドットを数、回転、サイズ、色、Easingなどカスタマイズできる
ローディングはシンプルでいいの！ でもちょっとカスタマイズしたい！ という人向け。
「Customize style & transition」で調整すると右側のローディングサンプルがすぐ反映されるので、さくさく調整することができます。
個人的にEasingのセレクタで動きを見れるのが◎。
もちろんCSSコードも吐き出されますよ。
Flexy Boxes
Flexboxジェネレーター
慣れるまで混乱しがちなFlexBoxの配置ですが、ポチポチッとするだけで色々試すことができます。
もちろんジェネレーターでCSS（ベンダープレフィックス付き！）書き出しも有り。無くてもいいコードも丁寧に付いてきますが、そこは勉強して削りましょう〜！
Favicon Generator. For real.
各デバイス、ブラウザ対応のfaviconを一括生成！
特に説明がいらないくらい、簡単に各faviconやコードを生成してくれます。
ほぼほぼ使わないものも生成してくれるので、そこは削りましょう。favicon.ico、apple-touch-icon.png、android-chrome-256x256.pngの3種があれば十分だと思います。
その場合、headに記述するコードも以下の通りになります。
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/android-chrome-256x256.png">
Triangle generator
三角のCSSを掃き出してくれるジェネレーター
Triangle generator
（URLによってブログカードがうまく作動しないときがありますね）
UIが美しい。
三角のCSSも吐き出してくれる。SCSSでも吐き出してくれる。
このサイト、他にもSVG圧縮やカ階調でラーコード並べてくれたり、痒い所に手が届くツールが揃ってます。
OGP確認：facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ
タイトル通り！各SNSでのOGPイメージの見え方を一括確認できるサイト
OGPイメージってSNSによってトリミングやサイズが違うけど、一括で確認できるから便利なのです。
タイトルや本文の文字数も「こんな感じか」と確認できるので、SEO対策頑張ってる人にもオススメか。
GradPad
グラデーションジェネレーター
グラデーションのジェネレーター。使用する色を設定し、角度や位置を直感的に調整した後はヘッダーメニューの「Get CSS for this Gradient」からCSSを吐き出してくれます。直感的に角度や色、位置を調整できるのがいいですね。
使いたい色がはっきりしてないときはgalleryから気に入ったグラデーションを選択して調整していくことができます。
上記のサイトだと角度調整有りきなので、横真っ直ぐでシンプルにグラデーションが作りたい方は下記サイトの方が使い勝手がいいかもしれません。
Blobs – Generate beautiful blob shapes for web and flutter apps
有機的なシェイプをSVGで
WEB制作やイラストで背景に有機的オーガニックな形状（英語では「organic shape」）を敷きたいとき。自分で描こうとするとイマイチ自然な形になってくれずモヤモヤしてしまいがち。
オンラインツールで、膨らみ、角を指定し、「Channde blob」でランダムに形状を変化させ、気に入った形になるまで試すことができます。もちろんコード記号のアイコンからSVGをダウンロードすることもできるので、そのままWEBで使ったり、イラレで開いて編集したりも。
Optimizilla - オンラインイメージ最適化ツール
画像圧縮ツール
ページ読み込み速度に気を配りつつ、画像も大きく使って見栄えさせたいというアンビバレントな悩み、WEB制作あるあるですね。
「画像最適化ツールを使って画像サイズを小さくすればいいよ」と知識では知ってましたが、「画像汚くなるんでしょ？」「透過PNGに白縁ついちゃいそう……」と食わず嫌いをしていました。
操作は簡単。ファイルをアップロードすると自動的に圧縮のデモが始まります。微調整したいなら微調整して、OKであればダウンロードするだけ。
実際に背景が透過のイラストで最適化を試してみたところ、目立つほどの画像の劣化は無し！ 懸念していた白縁も無し！ サイズはバッチシ小さくなる！ と、これまで導入してこなかった自分の愚かさを嘆く結果に。気になった時点で検証しておくべきでした……。
YoutubeサムネイルURL取得
Youtube動画のサムネイル画像をサクッと取得！
Youtube動画のサムネイル画像が必要なとき、ずっと動画をフル画面表示させてスクリーンショットし、余計な部分をPhotoshopで修正するという手間をかけていました。
そんなことしなくてもYoutube自体がサムネイル画像を生成していたんですよ。そのサムネイル画像を動画URLを入れるだけで各サイズのサムネイル画像のURLが見つけられるというありがたいサービスです。
知れて良かったし、もっと早く知りたかった！
Remove Image Background
画像切り抜きツール
こちらは画像編集のオンラインサービス。なんと簡単に写真の背景を切り抜けるのです。
ちょっくら自分のイラストで試してみました。画像を選択してちょっと待つだけで……、
……白目とTシャツも切り抜かれてしまいました。
が！Editボタンから自分でもっと切り抜きたい箇所、切り抜きたくない箇所を調整できる！！こんなに優秀で簡単に操作できるとは思ってなかったのでビックリ！
（下記は右上の鉛筆ボタンを選んで切り抜きたくない箇所を塗り塗りしている途中です。反対に切り抜きたい箇所は消しゴムボタンを選んで消し消しするだけです）
Photoshopも進化してるし、こんな無料のオンラインサービスも登場してるし、もう有料切り抜きサービス各社の出番無いんじゃ……と人ごとながら心配になります。
iLoveIMG | 画像編集用オンラインツール
出先でも画像編集できるかな？
なぜクエスチョンマークなのかというと、実際に試してないから。
Photoshopを持ってれば不要なんですが、出先とかで借りたPCがPhotoshop入ってないかもしれないじゃないですか。そういうとき役に立ちそうなので、メモ。
無料プランでも基本的な画像編集は大体できそうですね。
Devices from Design at Meta
PC・タブレット・スマホ端末の無料モック
デザイン提出やWEBサービス系のLPデザインでPC・スマホ・タブレットのモックが使いたいときがありますよね。ストックフォトを探したり、無料素材を探したり。でもちょっと機種が古かったり、テイストがちょっと違ったり……と探すだけで意外と時間が潰れちゃう。
そんなときはこのサイト。FacebookからMetaに社名変更したことで、モックの置いてるページもちょっと移動しました。もちろん無料！しかも現行機種がほとんど揃ってる圧倒的物量！！
古いページのキャプチャですが。
SchemeColor.com
配色色見本サイト
数多くある配色見本サイトですが、私的にここが一番利用しやすいです。
有名企業の配色パターンや有名キャラクターの配色パターンなどクスッとなるカラーパターンも混ぜつつも、色味ごとに絞れたり、詳細ページも使い勝手がいいです。
カラー Archive – コピック公式サイト（日本語）
イラスト制作時に使える色見本
イラスト制作時にはもうちょっとニュアンスのある色を選びたい。そんな時はコピックのカラー Archiveを参考にしちゃうという手も。
グレートーンのニュアンスだけで4通り、WEB系のカラーパレットでは選択肢の少ないグリーンもこんなにバリエーションがあります。
実際に紙に塗ったものをパレットにしているので、スポイトツールで色を拾うときは若干調整しましょう。
Icons – Google Fonts
マテリアルデザインのアイコン
GoogleがGoogle Fontsサービスでアイコンも用意してきました。
これまでもマテリアルデザインのアイコンを無料配布はしていたのですが、Google FontsやFont Awesomeと同じようにWEBコーディングで使えるように。線の太さやサイズ感も調整できるので、これは使い勝手がめちゃアップしたかも。
シンプルな線画イラスト素材は「Linustock」- 無料ダウンロード
高品質とはこういうことさ、な無料線画イラスト集
このサイト見たら、もう自分で制作しなくていい気がしてきました。
ソコスト｜商用可・フリーイラスト素材
すっきり・クセのないイラスト素材集
点数も多く、テイストを揃えて使用できる！ ベクターでもダウンロードできる！ 編集も可！
これはフリーイラスト界の覇権争いに加わるな。。
Illustrations | unDraw
使い勝手の良いスラッとしたオープンソースのイラスト素材集
海外のイラスト素材はクセが強いものが多いのですが、ここはミニマムに抑えて表現もシチュエーションも使い勝手の良い高品質イラストを多数揃えています。
もちろん、ベクターでダウンロードもできます。
Download free illustrations to power up your projects | Stories
フラットな人物イラストが揃う
Freepik社が運営しているフリーイラスト素材サイトです。サイト上で色味を変更したり、背景部分を取ったり、と加工できます。
もちろんベクターもダウンロードできるので、ダウンロード後に加工してもOK。
人種の特徴もあまり無いので、アジアで使ってもそんな違和感無く使えると思います。
OGPチェックブックマークレット
OGPチェックツール
これはオンラインサービスではなくブックマークレットになります。
ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである[注釈 1]。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。
このOGPチェックブックマークレットはJavascriptを使用したOGPのチェッカーです。詳しい解説は株式会社シナップさんの記事を読んでいただきたいのですが、ここではChromeでブックマークに追加する方法だけ解説します。
ブックマークレットをブックマークに追加する方法
上記サイトの中ほどのリンクを右クリックします。
「リンクのアドレスをコピー」を選択するとJavaScriptのコードがコピーできます。ブラウザの右上にある「その他のブックマーク」を右クリックで開きます。
厳密にはページじゃないのですが「ページを追加」を選択し、
開いた「ブックマークに編集」ウインドウのURLに先程コピーしたリンクを貼り付けます。
名前と保存場所は分かりやすいものにしてください。
Google Chromeの場合は、ブックマークバーを表示させたあと、リンクをドラッグしてブックマークバーに移動させるだけで追加できます。なんて簡単……！
あとは、OGPのチェックをしたいページを開いて、ブックマークから先程追加したブックマークを選ぶだけです。
ここでは私のブログをチェックしてみます。
このようにウインドウが開いて、チェックした内容が表示されます。
うん、何さ、そのOGPイメージ。ちゃんとしよう……。
というように簡単にチェックできるようになります。
html-highlighter
Hタグチェッカー
こちらもJavaScriptを使用したHタグチェッカーです。
ブックマークへの追加の仕方は上記「ブックマークレットをブックマークに追加する方法」をご参照ください。
このブログ記事をチェックしてみます。
Hタグの箇所にビビッドな背景色が付き、見出しテキストの後ろに「|h1」「|h2」などと表示されるようになります。
量産コーディングを任されたときなど、サイトの構造を理解するときや、Hタグの振り付けが間違ってないか確認するときに便利です。