Web制作やWebデザインにブックマークしておくと便利なツール集【2020年3月まとめ】

皆さんこんにちは。しゅんです。
今回は毎度ツイッターで紹介させていただいてるツール、リンク集の3月まとめです。
興味があれば是非過去のまとめもよろしくお願いします。

すぐに使えるWeb制作に役立つツール集カテゴリ別【2020年2月まとめ】

Web制作、Webデザインにおすすめしたいツール集【2020年1月まとめ】

【2019年総まとめ】Web制作に役立つツール、サイト集

hixle

サイトギャラリー、フォント、ツール検索、カラーパレット等の機能が使えます。 サイト1つで完結できるのでとても便利です。 サイトの説明も使用してるカラーコード、ツール、フォントも記載されてるのとスタイル別でカテゴライズされてて見やすいです
http://www.hixle.co/

crello

グラフィックデザインが作れるオンラインツール。 Canvaと仕様が似ていることから比較されることが多いです。 操作もドラック&ドロップで手軽にポスター、バナー等が作れます Canvaと大差は感じませんが動画やアニメーションの素材が豊富にある印象です
crello.com

imagehover.css

40種類の画像ホバーエフェクトを簡単に実装できるようにするCSSライブラリー。 クラス名を選択することで実装できるようになります ライブラリは19KBとかなり軽いのでページの読み込みが遅くなる心配もないです
imagehover.io

#codevember

codepenを使用したスニペット集。 日付毎にキーワードが並んでおり、関連したコードを見れます。 元々はサイト開発者が創造性を磨き、スキルを向上させるためのサイトですが インスピレーションを得るために使ってみると面白そうです
codevember.xyz

Izmir Hover Effects

オシャレなホバーエフェクトのCSSライブラリー。 ホバーエフェクトも凝っていてどれも使用したいものばかり 写真や画像に使用すると良いかもしれません使用方法は「View Documentation」からご覧ください
ciar4n.com/izmir/index.ht

LittleSnippets.net

HTML/CSSのスニペット集。全1500種類以上。 hover,button,menu等各パーツでカテゴライズされてます。 コード表示があるのでコピペも可能。 各パーツを作成するのに便利です 個人的にスタイリッシュなhoverが多い印象でした
littlesnippets.net

ColorBox

オープンソース化されたカラーセットを作成するツールです。 統一されたカラーコードを選択できるので配色も困らなさそう
https://www.colorbox.io/

Animaticons

ハイクオリティのアニメーションアイコンサイト。一部有料ですが無料素材でも十分使用していただけます。全130種類。 カラー、単色と分けられてるのでサイトの配色を気にせず使えそうです
animaticons.co

Boxicons

1400種類を超えるシンプルなベクターアイコン。 ダウンロードすることで使用できますし、コードで表示させることも可能。 SNSやWeb言語のロゴもあるのでこちらも使用してみるのもありですね
https://boxicons.com/

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

 

Paper Illustrations

シンプルな切り絵のフリーイラスト集。 こういったわかりやすいイラストはよく目にしますが切り絵なので紙の質感だったり、紙が少しめくれてたり一味違う雰囲気がでます
https://iconscout.com/paper-illustrations/?ref=uigoodies.com

Tartanify.com

5000パターン以上のチェック柄の背景画像をダウンロードできます SVG,PNG形式に対応してます。 チェックと言えば秋冬のイメージですが サイト内でも使用されてる切り取り線のボタンとの相性も良いし配色によっては凡庸性が高そう
tartanify.com

SVG Backgrounds

SVGで背景画像を作れるサイト。 お好きなパターンを選択、カラーの変更も可能。画像をダウンロードや、コードで埋め込むことも出来ます。 40種類以上もパターンがあり、色変更できるので自分だけの模様やカラーパターンを作成できそうです
svgbackgrounds.com

New Old Stock

著作権フリーのビンテージ写真素材サイト。 味のあるモノクロの写真がたくさんあります 写真の他にもビンテージのイラストもあり、その時々の時代を感じる画像ばかり モノトーンのサイトを作る時に使用してみたいなと思いました nos.twnsnd.co

Dev Tube

世界中のエンジニア(Developer)のYoutube動画を集めたサイト 言語別で見ることもできますしキーワード検索も可能。 言語のチュートリアルからプレゼンの動画まであります Youtubeの字幕や翻訳機能を使用すれば言ってることは多少理解しやすくなるかと
https://dev.tube/

Components AI

グラデーション加工、作成、テキスト加工、box-shadow、幾何学模様のパターン作成等豊富な加工、作成がブラウザ上行えます。 1つのサイトでいろんな加工が試せるのはいいですね 難しい操作も特に必要ないのでどなたでもお使いいただけます
https://components.ai

コメントを残す

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

CAPTCHA