【まとめ】web制作・webデザインで便利なツール！
福岡・大阪・東京でSEO対策・ホームページ制作・マーケティングを行っている株式会社スゴヨクです。
web制作・webデザインをしていく上で効率化を図るツールは必要だと思います。
便利だなと思うツールを紹介します。
web制作
入れ子ツール
入れ子のルールが確認できる便利ツール
間違った構造で作られているサイトが多いので、マークアップエンジニア、フロントエンジニアは確認しておいて損はないです！
インデント調整（vscordプラグイン）
vscode内のインデントを揃えてくれるプラグインワードプレス制作をしている場合に重宝する。 https://marketplace.visualstudio.com/items?itemName=rifi2k.format-html-in-php
CSS ツール
バックグラウンドのパターンを作成し、cssに吐き出してくれる便利ツール
円形やギザギザ、ストライプなど色々と作成できるので便利。
https://www.magicpattern.design/tools/css-backgrounds
コピペで出来る簡単組み込みjs
モーダル Micromodal.js
カルーセル Swiper.js
ダイアログ SweetAlert2
パララックス Rellax.js
webデザイン デザイン系
コーディングをする際に必要なデザインデータ取得ツール（Photoshopプラグイン）
https://b-risk.jp/blog/2020/09/how-to-speedup-coding/#Zeplin
イラスト系
本当にちょうどいいイラスト素材です。
https://tyoudoii-illust.com
https://loosedrawing.com/
https://soco-st.com/category/life
アイソメトリック調のデザイン素材一覧です
https://www.manypixels.co/gallery/?color=fd6868
アイコン素材にぴったり
https://material.io/resources/icons/?style=baseline
画像保存ツール
あれ？どこ保存したっけ？を無くしてくれる便利ツール。
https://jp.eagle.cool/
ARツール
AR上で撮った写真をwebに入れてくれるツール
触ってみると面白いですよ！
https://clipdrop.co/
波のシェイプを作成
好きなように波の背景画像が作れる便利サイト
https://getwaves.io/
半透明フィルターツール
グラデーションなど最近のヘッダー画像を作るときに便利なツール
https://hero-generator.netlify.app/
要素を多角形に切り抜きするツール
イラストレーターやフォトショップで切り抜きを行うのが面倒な多角形の切り抜きが可能な便利ツール
https://bennettfeely.com/clippy/
webデザイン フォント系
font-family作成ツール
日本語のフォントの確認ができる。 デザインを制作するときにクライアントとも一緒に一瞬で確認ができる便利ツール https://saruwakakun.com/font-familyフォントの確認ができる（英語のみ）
https://wordmark.it/
2023年IT導入補助金でお得にECサイト
【実践マーケティング手法２２選】 無料ダウンロード
助成金・補助金・融資・M＆A等の総合経営支援サービス「あなたのアイボー」
月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。
ワードプレスでSEO対策をするなら【オリテン】
seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。
