ShunNote 
皆さんこんにちは。しゅん（@shun_webdesign）です！
2020年ももう終わりですね。今年はたくさんのWebツールを紹介させていただきましたが
今回は昨年に引き続きWeb制作に役立つツール、リンク集の2020年まとめ版を紹介させていただきます！
比較的使いやすいものを選んでみたのでお試しください。
LittleSnippets.net
HTML/CSSのスニペット集。全1500種類以上。 hover,button,menu等各パーツでカテゴライズされてます。 コード表示があるのでコピペも可能。 各パーツを作成するのに便利です 個人的にスタイリッシュなhoverが多い印象でした
出典：https://littlesnippets.net
#codevember
codepenを使用したスニペット集。 日付毎にキーワードが並んでおり、関連したコードを見れます。 元々はサイト開発者が創造性を磨き、スキルを向上させるためのサイトですが インスピレーションを得るために使ってみると面白そうです。
出典：http://codevember.xyz
CSSeffectsSnippets
CSSのスニペット集。ホバー、ローディング等のCSSのみで作られたアニメーションが実装できます。
出典：https://emilkowalski.github.io/css-effects-snippets/
animation library
CSSアニメーションのライブラリー。使い方はCSSファイルまたはSCSSファイルを追加。
アニメーションクラスを適用して要素をアニメーション化できます。
出典：http://animation.kaustubhmenon.com/
Logobook
大量のロゴマークが閲覧できるサイト
カテゴリーは会社やテーマだけではなくロゴのオブジェクト、アルファベット別に分けられてます。
出典：http://www.logobook.com/
scrnshts
ストアアプリデザインのiPhoneスクリーンショットが載ってるギャラリーサイト。
アプリのカテゴリーごとに分けられてます。キーワードで検索も可能。
出典：https://scrnshts.club/
httpster
海外のお洒落なサイトが載ってるギャラリーサイト。
他のギャラリーサイトと違って年数日付で分けられており、遡ることができます。
出典：https://httpster.net/
WeLoveWP
WordPressのテーマを使って作られたサイトのギャラリーサイト。ジャンルでもテーマ別でも見れますし
色、タグでも検索可能。
出典：https://welovewp.com/
ONE PAGE LOVE
名前の通り１ページ完結のサイトを集めたギャラリーサイト。
複雑なレイアウトのサイトがないのでどのサイトも非常に見やすいサイトが多いです。
出典：https://onepagelove.com
Pinspiry
無料デザインリソースのフォント、グラフィック、モックアップ、Webテンプレート、UIキット等がダウンロードできるサイト。
出典：https://pinspiry.com
hixle
サイトギャラリー、フォント、ツール検索、カラーパレット等の機能が使えます。 サイト1つで完結できるのでとても便利です。 サイトの説明も使用してるカラーコード、ツール、フォントも記載されてるのとスタイル別でカテゴライズされてて見やすいです。
出典：http://www.hixle.co/
Izmir Hover Effects
オシャレなホバーエフェクトのCSSライブラリー。 ホバーエフェクトも凝っていてどれも使用したいものばかり 写真や画像に使用すると良いかもしれません使用方法は「View Documentation」からご覧ください
出典：https://ciar4n.com/izmir/index.html
imagehover.css
40種類の画像ホバーエフェクトを簡単に実装できるようにするCSSライブラリー。 クラス名を選択することで実装できるようになります ライブラリは19KBとかなり軽いのでページの読み込みが遅くなる心配もないです。
出典：http://imagehover.io
Devices.css
iPhone,Macbook,Apple Watch,iPad その他端末までCSSで再現されてるライブラリ。
出典：https://picturepan2.github.io/devices.css/
Woah.css
動きが騒がしいCSSアニメーションライブラリ。
出典：http://www.joerezendes.com/projects/Woah.css/
DynCSS
スクロールに合わせてエレメントを回転させれます。
出典：https://www.vittoriozaccaria.net/dyncss-example/
CSShake
振ったり震えたりするcssの動きをつけるツール。
インストール後指定されたクラス名を使えば動きをつけれます。
出典：https://elrumordelaluz.github.io/csshake/
Anime.css
CSSアニメーションのライブラリ。フェードからズームから多種多様なアニメーションです。
出典：https://animate.style/
Animated Mesh Lines
流れ星などの曲線的な動きのライブラリ。
出典：https://tympanus.net/Development/AnimatedMeshLines/demo2.html
Three Dots
ローディングアニメーションに使えるCSSライブラリ。色、高さ、間隔等のカスタマイズも可能です。
出典：https://nzbin.github.io/three-dots/
Pattern.css
classを指定することでグリッド、ドット、ストライプ等のパターンを実装できるCSSライブラリ。
パターンも多種多様でサイズも4段階に分かれています。
出典：https://bansal.io/pattern-css
Fresh Folk
PhotoShop対応のフリーイラスト素材。
アドレス登録をすることでダウンロードできます。お好みのイラストにカスタマイズすることでパターンも無限。
出典：https://fresh-folk.com/?ref=neede.co
Ape Mockups
全て無料です。 PC、スマホはもちろん、ロゴや名刺、Tシャツ、マグカップまで幅広く取り揃えてます。
Gratisography
遊び心溢れる写真が多く、どれもインパクトがあります。
お洒落な画像を探しがちですがユーモアを取り入れるにはいいのではないでしょうか。
出典：https://gratisography.com/
oniku images
お肉のフリー素材サイト。
出典：http://tenandoproject.com/onikuimages/
FreePhotos.cc
複数の写真素材サイトから一括で写真を探すことができます。
このサイトで見つけることができる写真は商用フリーです。
出典：https://freephotos.cc/ja
Foodiesfeed
1500種類以上の食べ物写真がそろう素材サイト。
どれもインスタに投稿されてそうなくらい映えそうな写真です。
出典：https://www.foodiesfeed.com/
World vector logo
世界中のロゴが検索ダウンロードできるサイト。
SVGでダウンロード可能。ロゴならジャンル問わず何でも検索できます。
出典：https://worldvectorlogo.com
Duotone
名前の通りデュオトーンの画像を加工作成ダウンロードできるサイト。デュオトーンを使えばお洒落かつインパクトのある画像に仕上がります。
出典：https://duotone.shapefactory.co/
wipeyy
動画を見ながら別作業できるChrome拡張機能。ウィンドウを画面端に置いて動画を確認しながらコードが打てます。
CSS Peeper
ページ上のパーツの大きさや色などを簡単に測定することができるChrome拡張機能です
サイトで使用されてる色を一覧で表示したり、使われている画像を一括してダウンロードする機能もあります。
出典：https://csspeeper.com/
BEM CHEAT SHEET
BEMのチートシート。 BEMの構造について図解付きでわかりやすいです。
BEMはクラス名でサイトの構造が推測しやすいのでSassを書かれる方には特にオススメします。
出典：https://9elements.com/bem-cheat-sheet/
Gradient Buttons
ホバーアニメーション付きのグラデーションボタンが作成できます。
Get CSS code を押せばコードが表示され、コードもコピー可能です。
アニメーションも難しいものではないのでコードの中身もわかりやすいです。
出典：http://gradientbuttons.colorion.co/
bttn.css
様々な種類のボタンをコピペで簡単に実装できます。カラー、文字サイズも変更可能。
ボタンもホバー付きなのでいろんな物を試してみると良いと思います。
出典：http://bttn.surge.sh/
Websiteplanet ファビコン作成ツール
websiteplanetのファビコン作成ツール。無料ギャラリーからファビコンを選択して生成するだけ指定した画像をファビコンにすことも可能。
出典：https://www.websiteplanet.com/ja/webtools/favicon-generator/
Web Launch Checklist
Webサイト起動チェックリスト。
セキュリティ、SEOまで全36のチェック項目があります。
出典：https://www.weblaunchchecklist.com/
carbon
ソースコードの画像を作成して共有します。
言語別でコードを選択できるのはもちろんのことエディターのテーマも選べます。
出典：https://carbon.now.sh/
Blobmaker
水滴を落としたような歪な形の円形が作れます。色も変更できますし形もランダムで変更可能。
出典：https://www.blobmaker.app/
Font in Logo
有名なブランドで使用されてるフォントを探せます。
ブランド名をフォームで検索、該当のブランドが使用してるフォントをダウンロード。
出典：https://www.fontinlogo.com/
ScreenSizes
一般的なスマートフォン、タブレット、モニターの画面サイズとピクセルサイズが見れるサイト
デバイスごとに絞ることもでき、カラム毎に順番も変更可能。
出典：https://screensiz.es/
Remove Image Background
画像背景の切り抜きを自動でやってくれるサービス。
被写体の対象がしっかりしてる画像なら簡単にくり抜いてくれます。
出典：https://www.remove.bg/ja
Get Waves
波線のようなグラフの図形が作れるツール。色、曲線のタイプ、曲線の形状から変更可能
作成したものはSVGでのダウンロード or コードでの読み込ませれば利用できます。
出典：https://getwaves.io/
CSS layout cheat sheet
CSSのレイアウトがわかりやすく書いてあるチートシート。
position,float,displayについてわかりやすいです。
出典：https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/
Glitch Art Generator
グリッチバックグラウンドエフェクトを作成できます。（下記画像） 色、グリッチの数、場所、方向、コーナー効果を調整可能。 グラデーションに使用する色もいくらでも追加できるのでキレイなグラデーションが作れそうです。
出典：https://glitchart.io/
CSS Puns
面白いイラストでCSSコードについて教えてくれます 意味が分かれば結構面白いです。
プロパティについてわからない初学者の方には特徴が掴みやすいイラストだと思いました。
出典：https://saijogeorge.com/css-puns/
threed.io
ハイクオリティの3Dモックアップを作成できます。 無料で操作も簡単。 デザインをアップロードし画面の角度、背景色等の設定を調整可能 cocoda!やってた時にこれ使ってモックアップ作成したかった psd素材ダウンロードしてやるより遥かに簡単です。
出典：https://threed.io
3D Frame Illustrator
3Dでフレーム化された画像を生成します。 画像をアップロード、フレームスタイルを選択、どこでも使用できる高解像度フレーム画像をダウンロードできます。イラストや作品の確認として利用もできそうです。
出典：https://www.levelframes.com/frame_illustrator
freemium.cc
デザイナー向けの無料ツールとリソース集です 30種類以上の無料ツールをまとめており 画像、エディター、カラーパレット等を使用できます。
出典：https://freemium.cc
Tartanify.com
5000パターン以上のチェック柄の背景画像をダウンロードできます SVG,PNG形式に対応してます。 チェックと言えば秋冬のイメージですが サイト内でも使用されてる切り取り線のボタンとの相性も良いし配色によっては凡庸性が高そうです。
出典：http://tartanify.com
SVG Backgrounds
SVGで背景画像を作れるサイト。 お好きなパターンを選択、カラーの変更も可能。画像をダウンロードや、コードで埋め込むことも出来ます。 40種類以上もパターンがあり、色変更できるので自分だけの模様やカラーパターンを作成できそうです。
出典：https://svgbackgrounds.com
New Old Stock
著作権フリーのビンテージ写真素材サイト。 味のあるモノクロの写真がたくさんあります 写真の他にもビンテージのイラストもあり、その時々の時代を感じる画像ばかり モノトーンのサイトを作る時に使用してみたいなと思いました 。
出典：https://nos.twnsnd.co
Dev Tube
世界中のエンジニア（Developer）のYoutube動画を集めたサイト 言語別で見ることもできますしキーワード検索も可能。
出典：https://dev.tube/
Beautiful CSS box-shadow examples
サービスやアプリのbox-shadowを使えるサイト。
80種類以上あってどれもクリックするだけでコピーできて貼り付けれます。
出典：https://getcssscan.com/css-box-shadow-examples
Smart upscaler
引き伸ばした画素の荒い画像をAIを使ってくっきり綺麗に整えてくれます。
ドラッグ＆ドロップのみの操作なので簡単です。
出典：https://icons8.com/upscaler
