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

しゅんです(@shun_webdesign)。こんにちは。
春も終わりを迎え、徐々に夏らしい季節になってきましたね(暑い)。
今日は5月にツイートしたWeb制作やWebデザインツールまとめを紹介させていただきます。

是非ご覧くださいませ。

関連リンク

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

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

ツール一覧

404 Illustrations

404に使えるイラストを集めたサイトです。
全20種類以上を無料でダウンロード可能。
イラストは多種多様なのでお好みに合わせて使用できるかと思います。

beedii

手書きのような絵文字フォント。 全48種類。
無料でダウンロード可能です。 絵文字をクリックすると通常の絵文字がコピペされます。 

Dark Mode Design

ダークモードのサイトを集めたギャラリーサイト。
50近くのサイトを閲覧できます。 ローンチされたばかりなのでこれから掲載数も増えて来るのではないでしょうか。

PHOTOMOSH

グリッチなどの特殊なエフェクトの画像を作れるサイト。

20種類以上あり、エフェクト同士を組み合わせれます。
「Mosh」というボタンを押すとランダムでエフェクトがつきます。
GIFの作成も可能です。画像のちょっとした加工に便利です。

LandingStock

ランディングページに使えそうな画像を集めたサイト。

全て無料でダウンロードできます。
単色背景の画像が多いので文字を入れたり、加工しやすいです。

oniku images

お肉のフリー素材サイト。

Spinners React

Reactのローディングアニメーション集。
サイズ、太さ、カラー、スピードまで変更できます。

gradientify

高クオリティのグラデーションアイコン。

全400種類以上のアイコンと100色以上ある グラデーションから色変更ができます。
もちろん無料でダウンロード可能です。

Self Space Illustrations

Webサイトに使えそうな高クオリティイラスト集。

Sketch,SVG,Ai,PNG,Figmaに対応してます。
一部有料ですがフリーダウンロード可能です。 今時なイラストなので凡庸性が高そう。

Smart upscaler

引き伸ばした画素の荒い画像をAIを使ってくっきり綺麗に整えてくれます。
ドラッグ&ドロップのみの操作なので簡単です。

NES.css

ファミコン風CSSフレームワーク。 ボタン、テキスト、カーソル、アイコン等ファミコン風に実装できます。

READMEは日本語訳が載ってるので読みやすいです。
任天堂キャラのアイコンとプログレスバーまで細部にこだわりを感じました。

Blush

Open Peepsなどの全12種類のフリーイラストをまとめたイラスト集。

ブラウザ上でイラストのポーズやカラーの編集ができます。
これだけブクマすればイラストに困らないのでオススメです。

IMAGE COMPARE VIEWER

前と後の形式で画像の変更を確認できる軽量のスライダーです。

WordPressユーザー向けのプラグインもあります。
加工の種類も選べてバーのスタート位置もカスタマイズ可能です。

Inspireframe

Webサイトのプロトタイプを簡単に作成できます。
設計スキルは必要ありません。 作ったイメージを無料でダウンロードできます。

BEM CHEAT SHEET

BEMのチートシート。 BEMの構造について図解付きでわかりやすいです。

BEMはクラス名でサイトの構造が推測しやすいのでSassを書かれる方には特にオススメします。

Neumorphism UI

ニューモーフィズムのUIキット。 Bootstrapテンプレートになります。

リンク先サイトもニューモーフィズムのデザインなので新鮮でした。
トレンドと言われてるだけに気になりますね。

The Stock

写真、動画、アイコン、フォント、カラーパレット、モックアップのサイトまで一括で検索できます。

サイトによっては移動せずに使用できるますし、ブックマークすれば素材探しに困りません。

Dark CSS theme generator

任意のWebサイトをダークモードのCSSを自動で生成してくれるツール。

URLを入力して「Generate」をクリックするだけです。
生成したコードはコピー、保存することができます。 最近、ダークモード対応のアプリ、サイトもよく見かけますね。

Resize Images

画像のサイズ変更、トリミング、最適化、またはJPEG、PNG、BMP、TIFF、またはWebP形式への変換ができます。
サイト上のリサイズや変更も可能、Chrome拡張機能もあるので手軽に行えます。

Ape Mockups

個人用と商用の両方に使用できる数千種類のモックアップがダウンロードできます。
全て無料です。 PC、スマホはもちろん、ロゴや名刺、Tシャツ、マグカップまで幅広く取り揃えてます。

Artify Editor

イラスト、アイコン、ロゴ、複数の素材を使ってオリジナルの画像を作成するツール。

背景画像からイラストまで幅広く作成可能です。
有料会員でモックアップも作成、 ブラウザ上で簡単に操作できます。

SocialBook Background Remover

ワンクリックで画像から人物を切り取るツール。

画像をアップするだけで秒で切り取りができます。
Adobe等のツールを開く手間も省けますし 切り取った画像をそのままブラウザ上で編集も可能です。

 

コメントを残す

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