【2020年版総まとめ】 Web制作に役立つお手軽Webツール集

皆さんこんにちは。しゅん(@shun_webdesign)です!
2020年ももう終わりですね。今年はたくさんのWebツールを紹介させていただきましたが
今回は昨年に引き続きWeb制作に役立つツール、リンク集の2020年まとめ版を紹介させていただきます!

比較的使いやすいものを選んでみたのでお試しください。

あわせて読みたい

LittleSnippets.net

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

出典:https://littlesnippets.net

#codevember

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

出典:http://codevember.xyz

CSSeffectsSnippets

CSSのスニペット集。ホバー、ローディング等のCSSのみで作られたアニメーションが実装できます。

出典:https://emilkowalski.github.io/css-effects-snippets/

animation library

CSSアニメーションのライブラリー。使い方はCSSファイルまたはSCSSファイルを追加。
アニメーションクラスを適用して要素をアニメーション化できます。

出典:http://animation.kaustubhmenon.com/

Logobook

大量のロゴマークが閲覧できるサイト
カテゴリーは会社やテーマだけではなくロゴのオブジェクト、アルファベット別に分けられてます。

出典:http://www.logobook.com/




scrnshts

ストアアプリデザインのiPhoneスクリーンショットが載ってるギャラリーサイト。
アプリのカテゴリーごとに分けられてます。キーワードで検索も可能。

画像

出典:https://scrnshts.club/

httpster

海外のお洒落なサイトが載ってるギャラリーサイト。
他のギャラリーサイトと違って年数日付で分けられており、遡ることができます。

出典:https://httpster.net/

WeLoveWP

WordPressのテーマを使って作られたサイトのギャラリーサイト。ジャンルでもテーマ別でも見れますし
色、タグでも検索可能。

出典:https://welovewp.com/

ONE PAGE LOVE

名前の通り1ページ完結のサイトを集めたギャラリーサイト。
複雑なレイアウトのサイトがないのでどのサイトも非常に見やすいサイトが多いです。

画像

出典:https://onepagelove.com

Pinspiry

無料デザインリソースのフォント、グラフィック、モックアップ、Webテンプレート、UIキット等がダウンロードできるサイト。

画像

出典:https://pinspiry.com

hixle

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

出典:http://www.hixle.co/

Izmir Hover Effects

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

出典:https://ciar4n.com/izmir/index.html

imagehover.css

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

出典:http://imagehover.io

Devices.css

iPhone,Macbook,Apple Watch,iPad その他端末までCSSで再現されてるライブラリ。

画像

出典:https://picturepan2.github.io/devices.css/

Woah.css

動きが騒がしいCSSアニメーションライブラリ。

出典:http://www.joerezendes.com/projects/Woah.css/

DynCSS

スクロールに合わせてエレメントを回転させれます。

出典:https://www.vittoriozaccaria.net/dyncss-example/

CSShake

振ったり震えたりするcssの動きをつけるツール。
インストール後指定されたクラス名を使えば動きをつけれます。

出典:https://elrumordelaluz.github.io/csshake/

Anime.css

CSSアニメーションのライブラリ。フェードからズームから多種多様なアニメーションです。

出典:https://animate.style/

Animated Mesh Lines

流れ星などの曲線的な動きのライブラリ。

出典:https://tympanus.net/Development/AnimatedMeshLines/demo2.html

Three Dots

ローディングアニメーションに使えるCSSライブラリ。色、高さ、間隔等のカスタマイズも可能です。

出典:https://nzbin.github.io/three-dots/

 

Pattern.css

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

出典:https://bansal.io/pattern-css

Fresh Folk

PhotoShop対応のフリーイラスト素材。
アドレス登録をすることでダウンロードできます。お好みのイラストにカスタマイズすることでパターンも無限。

出典:https://fresh-folk.com/?ref=neede.co

Ape Mockups

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

Gratisography

遊び心溢れる写真が多く、どれもインパクトがあります。
お洒落な画像を探しがちですがユーモアを取り入れるにはいいのではないでしょうか。

画像

出典:https://gratisography.com/

oniku images

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

出典:http://tenandoproject.com/onikuimages/

FreePhotos.cc

複数の写真素材サイトから一括で写真を探すことができます。
このサイトで見つけることができる写真は商用フリーです。

画像

出典:https://freephotos.cc/ja

Foodiesfeed

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

出典:https://www.foodiesfeed.com/

World vector logo

世界中のロゴが検索ダウンロードできるサイト。
SVGでダウンロード可能。ロゴならジャンル問わず何でも検索できます。

画像

出典:https://worldvectorlogo.com

Duotone

名前の通りデュオトーンの画像を加工作成ダウンロードできるサイト。デュオトーンを使えばお洒落かつインパクトのある画像に仕上がります。

出典:https://duotone.shapefactory.co/

wipeyy

動画を見ながら別作業できるChrome拡張機能。ウィンドウを画面端に置いて動画を確認しながらコードが打てます。

画像

CSS Peeper

ページ上のパーツの大きさや色などを簡単に測定することができるChrome拡張機能です
サイトで使用されてる色を一覧で表示したり、使われている画像を一括してダウンロードする機能もあります。

出典:https://csspeeper.com/

BEM CHEAT SHEET

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

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

出典:https://9elements.com/bem-cheat-sheet/

Gradient Buttons

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

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

出典:http://gradientbuttons.colorion.co/

bttn.css

様々な種類のボタンをコピペで簡単に実装できます。カラー、文字サイズも変更可能。
ボタンもホバー付きなのでいろんな物を試してみると良いと思います。

出典:http://bttn.surge.sh/

Websiteplanet ファビコン作成ツール

websiteplanetのファビコン作成ツール。無料ギャラリーからファビコンを選択して生成するだけ指定した画像をファビコンにすことも可能。

出典:https://www.websiteplanet.com/ja/webtools/favicon-generator/

Web Launch Checklist

Webサイト起動チェックリスト。
セキュリティ、SEOまで全36のチェック項目があります。

画像

出典:https://www.weblaunchchecklist.com/

carbon

ソースコードの画像を作成して共有します。
言語別でコードを選択できるのはもちろんのことエディターのテーマも選べます。

出典:https://carbon.now.sh/

Blobmaker

水滴を落としたような歪な形の円形が作れます。色も変更できますし形もランダムで変更可能。

画像

出典:https://www.blobmaker.app/

Font in Logo

有名なブランドで使用されてるフォントを探せます。
ブランド名をフォームで検索、該当のブランドが使用してるフォントをダウンロード。

出典:https://www.fontinlogo.com/




ScreenSizes

一般的なスマートフォン、タブレット、モニターの画面サイズとピクセルサイズが見れるサイト
デバイスごとに絞ることもでき、カラム毎に順番も変更可能。

画像

出典:https://screensiz.es/

Remove Image Background

画像背景の切り抜きを自動でやってくれるサービス。
被写体の対象がしっかりしてる画像なら簡単にくり抜いてくれます。

画像

出典:https://www.remove.bg/ja

Get Waves

波線のようなグラフの図形が作れるツール。色、曲線のタイプ、曲線の形状から変更可能
作成したものはSVGでのダウンロード or コードでの読み込ませれば利用できます。

出典:https://getwaves.io/

CSS layout cheat sheet

CSSのレイアウトがわかりやすく書いてあるチートシート。
position,float,displayについてわかりやすいです。

画像

出典:https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/

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

Tartanify.com

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

出典:http://tartanify.com

SVG Backgrounds

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

出典:https://svgbackgrounds.com

New Old Stock

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

出典:https://nos.twnsnd.co

Dev Tube

世界中のエンジニア(Developer)のYoutube動画を集めたサイト 言語別で見ることもできますしキーワード検索も可能。

出典:https://dev.tube/

Beautiful CSS box-shadow examples

サービスやアプリのbox-shadowを使えるサイト。
80種類以上あってどれもクリックするだけでコピーできて貼り付けれます。

出典:https://getcssscan.com/css-box-shadow-examples

Smart upscaler

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

出典:https://icons8.com/upscaler

コメントを残す

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

CAPTCHA