誰でも簡単操作で使えるWebデザインツール集【2020年8月】

デザイナーのしゅん(@shun_webdesign)です。
ツールというと複雑な操作や操作方法がわかってないと使いこなせないイメージがある方もいらっしゃるかもしれません。

今回は誰でも簡単に使えるツールやサービスを紹介させていただきます。

こちらもどうぞ

Web制作をさらに便利にするツール集【2020年7月】

Web制作に役立つリンク、ツール集【2020年6月まとめ】

Web制作に役立つツール、リンク集【2020年5月まとめ】

アイコン

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

3Dの実本が作れるジェネレーター。
表紙の画像変更や本の厚さやサイズ変更も細かく行えます。作成したものはHTML/CSSのコードが生成されているのでコピーするだけです。

https://3d-book-css.netlify.app/

Previewed

モックアップジェネレーター。デバイスの画像を選択しプロモーショングラフィックを作成できます。
Apple製品はもちろんAndroidのスマホにも対応してます。

Random TEDTalk

これまで紹介したものとは少し趣旨が違いますが「TEDTalk」の動画をランダムで再生し続けるサービスです。
右上の「Randomize」から動画を変更でき、アクセスするたびに動画が変わります。

https://randomtedtalk.com/

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA