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

こんにちは。しゅん(@shun_webdesign)です。
外は良い天気ですがなかなかお出かけできない状況なので
少しでも暇潰しにでもなればと思います。

今回は4月にTwitterで紹介したツール・リンクまとめです。
是非ご覧ください。

関連リンク

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

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

 

ツール一覧

ikonate

非常にシンプルなアイコンサイト。 カラー、ボーダー、サイズまで変更が可能です。

ボーダーの種類まで変更できるのでデザインに合わせたアイコンがダウンロードができます。
サイトがダークモードに対応してるためダークモード状態のアイコンも確認可能。

Logos made simple.

文字入力と好きなロゴ選ぶだけで名刺、サイトイメージ、Tシャツのモックまで
表示してくれるのでロゴの使用イメージがしやすい。 自分専用のロゴを名刺に使ってみたいですね。

Mega Doodles Pack

手描きのベクターイラスト集です。 全160種類以上。

プレゼンテーション、ステッカー、ソーシャルメディアの投稿、READMEファイルの写真に使用できます。
ごちゃっとしたイラストが可愛い! パターン素材として使うのもいいですね。

Cleanmock

簡単操作でモックアップが作れるサイト。
モックアップに使用したい画像とiPhone、Android、PC、Dribbble等サイズに合わせたデバイスを選べば作成できます。
作成画面も1ページに完結してるので分かりやすいですね

Foodiesfeed

1500種類以上の食べ物写真がそろう素材サイト。
どれもインスタに投稿されてそうなくらい映えそうな写真です。

CSS Duotone Generator

好きな画像をCSSでデュオトーン加工できるジェネレーター。
余白やぼかしの設定、ヴィンテージ、ランダム加工まで細かく設定できます。
「Generate HTML+CSS」を押せばCSSのコードを生成。

SVGeez

SVGno背景パターンがダウンロードできます。 ダウンロードは無料。
色の変更や透明度も調整できるのがいいですね。
キャラクター等の可愛いパターンからストーン柄のおしゃれなものもあります。

Mazwai

高クオリティな動画の素材サイト。
タグ、キーワード検索で好みのシーンに合わせた動画を見つけることができます。
一部有料の動画もありますが無料でも十分なクオリティです。
動画を使ったフルスクリーンのサイトを作ってみたいですね。

Picular

Googleの画像検索を使用した原色ジェネレーター。

気に入った色はピンのボタンを押すことでお気に入り登録できますし
カラーコード押すだけですぐコピペ可能。
サイトもシンプルかつ整ってるので使いやすいです。

Animaticons

ハイクオリティのアニメーションアイコンサイト。

一部有料ですが無料素材でも十分使用していただけます。全130種類。
カラー、単色と分けられてるのでサイトの配色を気にせず使えそうです。

Gradient Buttons

ホバーアニメーション付きのグラデーションボタンが作成できます。

Get CSS code を押せばコードが表示され、コードもコピー可能です。
アニメーションも難しいものではないのでコードの中身もわかりやすいです。

Lordicon

アニメーションアイコンサービス。

50種類の動くアイコンが無料で使用できます。
メニューの「Freebies」からダウンロード可能です。
ダウンロードしたアイコンは色変更もでき、 アイコン以外にも動くイラストもあります。

Control.

100種類以上のイラストが使用できます。

「Solid」「Linear」の2タイプから選択可能。
Ai,Figma,Sketchに対応してます。

bttn.css

様々な種類のボタンをコピペで簡単に実装できます。

カラー、文字サイズも変更可能。
ボタンもホバー付きなのでいろんな物を試してみると良いと思います。

midori

アニメーション背景のライブラリ。

背景イラストとエフェクトのクオリティが高いです。
使用したい場合はGitHubのロゴからページに飛ぶので READMEから見れます。
アニメっぽいイラストが引き立ちますね。

background generator

簡単にドット等の背景画像が作れるサイトです。

色、サイズ、アイコン変更可能でオリジナルの画像が作成できます。
アップロードした画像も使用可能です。

Pattern.css

classを指定することでグリッド、ドット、ストライプ等のパターンを実装できるCSSライブラリ。
パターンも多種多様でサイズも4段階に分かれています。

いかがでしたでしょうか?
最後まで見ていただきありがとうございます。
次回も是非よろしくお願いします。

コメントを残す

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