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

皆さんこんにちは。しゅん(@shun_webdesign)です。梅雨時なのか雨の多い日が続いていますね。
今月もTwitterでツイートしたツールをまとめさせていただきました。

他の月もまとめたものがありますのでよかったらご覧ください。

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

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

Fluent Icons

フラットアイコンパック。 アプリのロゴやツール、食べ物まで40種類以上のカテゴライズです。
無料のものはpngとベクター両方で使用可能です

Trianglify.io

ポリゴンスタイルの背景画像が作成できます。

サイズ、カラーコードを指定することでオリジナルの画像が作成可能です。
セルサイズ、パターンも調整でき、ランダムの調節も行えます
trianglify.io

blobs

水滴のようなオブジェクトを作成するツール。

ランダムのボタンを押すと右のバーレベルに合わせて変形します。
作成したものはHTMLコードがコピペが可能。
また、flutterのコードにも対応しています

OFFEO

オンライン動画メーカー。

画像アップするだけで簡単に動画が作成できちゃいます。
背景が単色の画像であれば自動で切り出して作成され、一覧が表示されます。ホバーで動画が再生します。

Shape Dividers

波のようなSVG画像を作成できるツール。
HTML/CSSコード表示されるので貼るだけで使用できます。
ヘッダーやフッターに使うと面白いかもしれません。

Storytale

個人、商業用の高クオリティイラスト集。
サイト、アプリに使用できます。 全1000種類以上。png,svgに対応しています。

有料のイラストがメインですが無料でも十分使用できそう。

Loading.io

ローディングアニメーション作成ツール。
色、サイズ、スピードまで簡単に設定できます。

他にもアイコン、背景やパターンのローディングも作れます。
ローディングアニメーション以外にも応用できそう。

BrandColors

ブランドカラーコードのコレクション。
Facebook、Twitter、Instagramなど、500以上のブランドの16進数の色コードがコピペできます。
Adobeだけではなく、CSS,Sass,LESS,CSSメタ言語のStylusの5種類のファイルを選んでダウンロード可能です。

ZOOM BACKGROUNDS

1000種類以上のZOOM画像背景をダウンロードできるサイト。
もちろん無料でダウンロード可能です。
Home,Nature,Cafe等カテゴリー別に検索できるので好きな画像が見つかりそう

Icons8 Emoji

皆さんおなじみの絵文字をアイコンとしてダウンロードできます。

ラインナップは想像できると思いますが現絵文字のラインナップより圧倒的に種類が多いです。
色、サイズ、テキストの追加まで細かい調整でダウンロードも可能。 HTMLコードも対応しています。

color.review

アクセシビリティの判断ができるカラーパレット。

コントラストでテキストと見出しのアクセシビリティ判断ができます。
画面右上で判定が出て、パレット上にコンラストの線があるのでわかりやすいです

Call the Doctor

医療関連のイラスト集。
シーンに合わせて20種類以上のイラストをダウンロードできます。
無料版はPNG対応です。 パーツ単体ではなく状況に応じたイラストでクオリティも高いです

Front end check list

名前の通りフロントエンドのチェックリスト。

英語表記ですがHTML/CSS,JSからアクセシビリティ,フォント,SEO,画像までカテゴリーが分かれてます。
チェックリストによっては推奨ツールの表示があります。

Image Colorizer

古い写真や白黒の写真に色を付けることができるAIを利用したオンラインツール。

Photoshopを手動で使用して、白黒写真に色を追加する必要はありません。
アップロードしたすべての写真は24時間ごとに消去されます。

HANDZ

手のみの3Dイラスト。 無料でダウンロードできます。
Sketch,Ai,Psd,Xd,Figma等で使用可能です。
手だけとはいってもいろんなポーズや種類があるので深さを感じます。

Flat-Icon Generator

フラットデザインのアイコンが作成できるツール。
サイト内で用意されてる素材を選択してカラー、シャドウ等の調整が可能です。

自分の画像をアップしてアイコンの作成もできます。

The Hero Generator

ヒーローヘッダー※作成ツール。

※写真や動画などを画面一面を使って表示させてWebサイトを構成していく手法 画像をアップロードし、
間隔と色の仕様を設定し、ボタンを追加すると、画面上で直接ビルドできるサンプルのコードが出てきます。

Color Copy Paste

カメラを使用し、画面上の色を摘出できるカラーピッカー。

ブラウザのQRコードを読めば画像のようにスマホでも使用できます。
他にもSketch,Figmaのプラグインとして対応しています。

Sorted CSS Colors

関連したカラーを名前ごとに表示してくれるカラーパレット。
一色選択するとカラーコード、RGB、HSLで表示してくれます。
色ごとに種類も分かれているので見てるだけでも面白いです。 モノトーンにも対応してます

windups

タイプライタースタイルのアニメーションをテキスト要素に追加するのに役立つツール。

テキストのビルディングブロックと「continue」を押すことでエフェクトを確認できます。
まるでゲームの会話画面みたいですね

Quick HEX to RGB

カラーコードをRGBに変換してくれるツール。

変換したものはリストとして履歴に残ります。 できることシンプルですが手軽に使えて誰でもわかりやすいです。
背景色の透過などRGBAカラーモデルで指定したい際は便利。

コメントを残す

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