ShunNote 
デザイナーのしゅん(@shun_webdesign)です。
ツールというと複雑な操作や操作方法がわかってないと使いこなせないイメージがある方もいらっしゃるかもしれません。
今回は誰でも簡単に使えるツールやサービスを紹介させていただきます。
こちらもどうぞ
アイコン
Basicons
ミニマルなベクターアイコン集。ジャンルやシーンを選ばず使えるアイコンです。
アイコンのダウンロードはもちろんコードでの埋め込みに対応しており、サイト上でサイズや線の太さを変更可能です。
現在は全186種類となってますが毎週更新されているのでこれから種類が増えていきます。
https://basicons.xyz/
Feather Icons
シンプルなベクターアイコン集。全282種類。
こちらもサイズ、線の太さもカスタマイズ可能でこちらはサイト上でカラーコードの変更も行えます。
※アイコンをクリックするだけで個別のダウンロードがされるので注意。
heroicons
Tailwind CSSのメーカーによるアイコン集。全226種類。
アイコンにカーソルを当てると「SVG」「JSX」でコードをコピーできる表示がされます。
サイズは24×24px、20×20pxで固定されています。
カラーパレット
Colordoo
カラーパレット、グラデーション、単色まで選んで使うことができます。
カラーコードは「Copy」を押すだけでコピーが行えます。
トップページの表示されてる色以外を見たい場合は「Explore More」をクリックしてください。
Webサイトやロゴ、イラストの配色選びにぴったりですね。
https://designkiki.com/colordoo/
イラスト
Uncommon Illustrations
フリーイラスト集。
一部有料ですが無料版は160種類以上のイラストを使用することができます。
https://www.artify.co/uncommon-illustrations
illustrations
全120種類以上のイラストキット。
主線なしのイラストからキャラクターまでそれぞれ個性の違うタッチのイラストが無料でダウンロードできます。
illustrator,SVG,EPS,PNGやFigmaにも対応しています。
https://illlustrations.co/
UIキット
revKit
フリーUIキット。sketch,Figma,Xdで使えます。
スタイルガイド付きでフォームやアイコンなど豊富で充実しています。商用無料。
https://rev.webkul.design/kit/
その他
MagicPattern
タイルのような模様を作れるジェネレーター。
色やパターンの数も自由にカスタマイズ可能で自分好みの画像が作成できます。
100 Days of Code
VScode拡張機能。
#100 Days of Codeを目指し、コードを書いた記録を提出することでどれだけ書いていたのか記録に残せます。
記録に残しマイレージが溜まることでSNSにシェアが可能です。
https://www.software.com/100-days-of-code
JSRobot
ロボットを操作しコインを収集することでJavaScriptでのコーディングを学習することができるゲームです。
CropHere
画像をアップロードすることで好きなサイズにトリミングできるツール。
「Open」をクリックして写真をアップロードした後、ドラッグ操作でサイズを変更し「Save」を押せば変更画像を保存できます。
https://crophere.com/
Isoflow
プレゼンテーション、ドキュメント、イラスト用アイソメトリック図を簡単に作成できるツール。
データベースやモバイルのイラストもあり、フローチャートの説明に役立ちそうです。
https://isoflow.io/project
Trace 2.0 by Sticker Mule
画像をアップロードすると自動で被写体切り取りを行ってくれるツール。
切り取りをした後、トリミングや背景に色を付けたり、背景画像を変更できるなどの加工も行えます。
https://www.stickermule.com/trace
3D Book Image CSS Generator
３Dの実本が作れるジェネレーター。
表紙の画像変更や本の厚さやサイズ変更も細かく行えます。作成したものはHTML/CSSのコードが生成されているのでコピーするだけです。
https://3d-book-css.netlify.app/
Previewed
モックアップジェネレーター。デバイスの画像を選択しプロモーショングラフィックを作成できます。
Apple製品はもちろんAndroidのスマホにも対応してます。
Random TEDTalk
これまで紹介したものとは少し趣旨が違いますが「TEDTalk」の動画をランダムで再生し続けるサービスです。
右上の「Randomize」から動画を変更でき、アクセスするたびに動画が変わります。
https://randomtedtalk.com/
