Web制作で便利に使ってるサイトやツール
Web制作で普段使っているツールなんかをまとめてみます。
(2023年3月現在)
お世話になっているサイト
制作に入る時に結局行きつくサイトです。
お世話になってます。
とほほのBootstrap 5入門
老舗サイトとほほのWWW入門のコンテンツです。
Bootstrapのクラス名や結果をセクション毎にまとめてくれていて、個人的に公式サイトより探しやすく見やすくてありがたいです。
新規サイトでBootstrapを選ぶ機会は減ってると思いますが、私が個人でやっていた時は既存サイトの修正案件なんかでたまにBootstrap4(たまに3)が使われていたり、Webアプリケーションのモックアップ作成のお手伝いをした時もCSSが得意でないエンジニアさんからの指定で使っていました。
もし何かの案件で必要になったら、とほほさんのページを思い出してみてください。
入れ子チートシート
コーディング中の「リストの中にタイトルって入れられるっけ？」という些細な疑問を一瞬で解決してくれます。
Tiny PNG
記事の見出し程度だったらこちらのサイトでサクッと圧縮して貰います。
無料版は20枚、5MBまでの制限があるけど綺麗に圧縮してくれます！
ラッコツールさんでも画像圧縮出来るんですがWebP対応しているので、こちら固定で使ってます。
アスペクト比計算ツール
16:9の画像を作ってる時に同じ横幅で4:3を作らなきゃいけなくなった時なんかに、サクッと調べられて便利です。
ラッコOGP確認
SNSでシェアした時の画像を確認出来ます。
ラッコツールさんは他にも
文字数カウント
動画をGIFに変換
webページ画像抽出
などなど便利なサービスが沢山揃ってますので、色々と試してみてください。
piacehold.jp
ダミー画像作成ツールです。
ランダムで人物や風景写真のダミー画像を作成してくれるツールなんかも有りますが、ワイヤー作成段階ではオシャレな写真が邪魔になるのでシンプルなダミー画像を使っています。
クライアントや外部デザイナーに依頼する時にはダミー画像に文字を埋め込んでサイズ指定も簡単に出来るので重宝してます。
METALLIC RATIO
黄金比計算ツールです。
余白の計算やバナー作成する時に使っています。
黄金比だけでなく白銀比、白金比、青銅比なども計算して出してくれるので、バナーやメインビジュアルを制作中にバランスが取れなくて迷った時の指針に使っています。
CSS Grid Generator
行数と列数などを指定したら、望んだグリッドレイアウトのコードを吐き出してくれます。
数年前にフレックスボックスを覚えて無の状態で使いこなせるようになったと思ったら、グリッドレイアウトの登場。
昨年あたりから重い腰を上げて取り入れるようになったのですが、頭がこんがらがってました。
そんな時にこちらのジェネレーターを使うようになり、使っているうちにルールも理解出来てきました。
作者さんありがとうございます…。
Real Favicon Generator for all platforms
ファビコンジェネレーターです。
一括で基本的なデバイスのファビコンと設定が出来て、HTML用、Gujp用などいくつかの形式のタグも吐き出してくれ、それをコピペするだけなので設置もスムーズです。
もともとWordPressのプラグインで見つけて使っていたのですが、ブラウザ版もあって嬉しかったです。
めちゃくちゃ時短になりますよ。
Markdown表テーブル作成ツール
仕様書をマークダウン記法で書いてるのですが、テーブルが…面倒くさい…！
そんな時にこちらのツールを使って一瞬で変換してもらってます。
Excelから読み込んで変換する事も出来ます。
(というよりそちらがメインのツールですね)
動くWebデザインアイディア帳
jQueryを使って「よくある動き」をささっと作りたい時に役立ちます。
3年の期限付き(いつまでかは不明)サイトとの事なので、気に入った人は書籍を手に入れましょう。
jQuery、まだまだ使いますよね…。
フーノページ
SVGを使ったアニメーションやCSSで色を変えたい時なんかに、調べると一番上に出てくるので何回もお世話になっています。
分解して解説してくれるので、SVGとっつきにくい、分からない、と躊躇している方はこちらのサイトを読んでみてください。
余談ですが、ベクター描画ソフトのVectornatorの使い方などもかなり詳しく書いてくれていて、マイナーなので助かっています。
LPアーカイブ
ランディングページのデザインをまとめて閲覧出来るサイトです。
キャッチコピーもまとめてくれているので、参考になります。
頭の整理をしたい時、仕事したくない時は良く遊びに行って刺激をもらっています。
クローム拡張機能
Wappalyzer
サイトでどんなフレームワークを使っているか？などを調べられます。
最近いいね！と思うのは大体GSAPかtree.js。
VisBug
要素をブロックに分けて表示してくれて、要素の単純なズレを見つけられたり、情報をクリップしたり編集したりする事も出来ます。
私はデザインカンプを完璧に作るよりも、コーディングしながらデザインを調整する事が多いのでこちらのツールは必須です。
(不本意ながらこのやり方に落ち着いたのには様々な理由があるので、いつかまた記事にします…)
動画
たにぐちまことさん
お世話になっていない人なんて居ないんじゃないか。とっても優しい声で優しく正しく解説してくれます。
新しい技術もどんどん出してくれて、Web界隈をちゃんとしようと活動して下さっています。
Udemy講座もほとんど受けてます。
書籍と同じセクションで撮ってくれているので、書籍と合わせて受けると本当に身になるし、後から調べるときは書籍を使っています。
Adobe公式
なんだかんだ公式が強いです。
XDはほとんど公式動画とセミナーで身につけました。
身につけたんだよ…
figma講座出たら受けるよ…
アプリ
Eagle
素材管理にはこれしかないです。
画像はドラッグ&ドロップで保存出来るし、サイトもスクショを撮ってタグとコメントをつけてフォルダに分けて保存出来る。
色んなツールを使ってきたけれど、これが一番使いやすいです。
29.95ドル買い切り(！)でMacとWindows両方にインストールできます。
円高のタイミングで是非手に入れてください。
Microsoft To Do(旧Wonderlist)
ワンダーリスト使いだったもので、そのまま使っています。
他のToDoアプリも試したのですが、プロジェクト毎に素材も管理できるので便利です。
Zenn(見る専)
とってもお世話になっています。
Qira（見る専）
とってもお世話になっています！
みんなだいすきTwitter。
色々な人の最新情報や仕事のやり方なんかを発信してくれていて、刺激になります。
おまけ
キャッチアップ
コリス
Web界隈にいて知らない人はモグリのコリスさんです。
流行りのデザインや技術の移り変わりが早いWeb業界に関する、あらゆる最新情報を手に入れられます。
技術の最新情報を翻訳して下さったり、フォントやKindleのセール情報も手に入れられるのでフォロー推奨です。
Webクリエイターボックス
Manaさんが運営する、Web関連情報をまとめてくれているサイトです。
最新のツール紹介やコードの解説もしてくれて、とてもわかりやすいです。
ポッドキャストも始められて色々な価値観を積極的に発信して下さっています。
曲
テクノ法要
作業BGMにどうぞ。
まだまだ追加します
本やポッドキャストも紹介したくなったので、こちらのページに追加するか新しく記事を書きます。
みなさんお仕事頑張りましょう。
この記事が気に入ったらサポートをしてみませんか？