正直教えたくないWeb制作に役立つツール集【2020年11月まとめ】

こんにちは。しゅん(@shun_webdesign)です。
11月になるとさすがに寒くて外出時も防寒が必要になってきましたね。

今回は毎月投稿しているWeb制作に役立つWebツールまとめを紹介させていただきます。
手軽に使えるライブラリやジェネレーターなど、どれも基本無料で使用できるものです。
Twitterでも紹介してないツールをまとめました。

関連記事

Web制作をちょっとでも楽にしたいならコレ!お役立ちツールまとめ【2020年9月】 誰でも簡単操作で使えるWebデザインツール集【2020年8月】 Web制作をさらに便利にするツール集【2020年7月】

3D画像なら

isometriclove

アイソメトリックの3D画像。全233種類。

こんな時に使える
近年見かけるアイソメトリックや3Dのイラスト。Webサイトにトレンドを取り入れたい方に使えます。

https://www.isometriclove.com/

レイアウトの参考に

CSS layout

よくあるWebサイトのレイアウトとソースを集めたコレクション集。

こんな時に使える
レイアウトを選択すれば、デモとソースが表示されるのでコピー&ペーストして利用できます。手軽に実装したいときには便利です。
※ただし、コピー&ペーストの多用は注意。

https://csslayout.io/

FreeFrontend

フロントエンドで実装できるコード事例を紹介しているサイト。
HTML,CSS,Bootstrap,JS,JQuery等を取り扱ってます。

こんな時に使える
codepenで投稿されてるものを紹介しているため、非実用的なコードも含まれます。
フロントエンドの言語でどんなものが作れるかインスピレーションを沸かせたいときには参考になります。

https://freefrontend.com/

Froala Design Blocks

Webまたはモバイルアプリですぐに使用できる170を超えるレスポンシブデザインブロック。

こんな時に使える
すべてのブロックはBootstrapに基づいているのでBootstrapを使用したい人向けです。

https://froala.com/design-blocks/

Saas page

ランディングページの各パーツに焦点を当ててデザインを見ることができます。

こんな時に使える
部分的にデザインを見たいときや各パーツのみ参考にしたいときは役に立ちそうです。
https://saaspages.xyz/




シャドウを使いたいときは

smoosh shadow generator

shadow boxでなめらかな影を作ることができるジェネレーター。

こんなときに使える
ボタンや画像などbox-shadowを使っておしゃれに浮かせたいときに使えます。

https://s.muz.li/MWNjYTY2Yjk4

変わったエフェクトをつける

curtain.js

カーテンのように揺れるアニメーションをつけれるライブラリ。

こんな時に使える
背景画像やサムネイルなどマウスホバーする部分につけると面白いです。

https://www.curtainsjs.com/

particles.js

星座のように幾何学的に動き続ける背景画像を作れるライブラリ。

こんな時に使える
サイトの背景画像やヒーローヘッダーなど注目してほしい箇所に使えます。

https://vincentgarreau.com/particles.js/

Tilt.js

マウスオーバーで視差を表現できる軽量ライブラリ。

こんな時に使える
CSSを書かずにパララックスや立体感を表現したいときに使えそうです。

https://gijsroge.github.io/tilt.js/

Webサイトのフィードバックに

Markup.io

ウェブサイトにコメントをつけることができるサービス。

こんな時に使える
1つのサイトにコメントをつけたり、サイトのURLを共有し複数人でコメントやフィードバックを行えます。会員登録をするだけで無料で使うことができます。

https://www.markup.io

最後に

今回は手軽に使えるジェネレーターなどコピー&ペーストで使えるツールを紹介しました。
最近はこういった手軽なツールも増えてきて、誰でも使えるようになってます。

コードをコピー&ペーストをすることは悪いとは思いません。
しかし、特に意味もわからず作れる気になってしまうのはとても危険なので、コードの意味を少しでも理解できるように意識してみてどうでしょうか。

最後まで見ていただきありがとうございます。是非記事のシェアをよろしくお願いします。

コメントを残す

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

CAPTCHA