福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【まとめ】web制作・webデザインで便利なツール!

SUGOYOKU BLOG

【まとめ】web制作・webデザインで便利なツール!

福岡・大阪・東京でSEO対策・ホームページ制作・マーケティングを行っている株式会社スゴヨクです。
web制作・webデザインをしていく上で効率化を図るツールは必要だと思います。
便利だなと思うツールを紹介します。

web制作

入れ子ツール

入れ子のルールが確認できる便利ツール
間違った構造で作られているサイトが多いので、マークアップエンジニア、フロントエンジニアは確認しておいて損はないです!

https://yoshikawaweb.com/element/

インデント調整(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/

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金を使ってホームページを制作しませんか?

スゴヨクでは、小規模事業者持続化補助金を使ったホームページ制作を行っています。
助成額が3分の2、最大50万円まで補助されるので、(要件次第で100万円も可能)
ホームページ制作、広告をお考えの方は一度ご連絡ください。
申請は無料なので、まずはご連絡いただけると幸いです。



補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得