あいさつ
こんにちは！オークファンWebデザイナーの@azneです。
Advent Calendarも3年目です。
いつの間にか社歴が6年目、Webデザイナー歴は7年目になってました。。時の流れが怖い！
昨年の記事ではNETSEAというサービスの担当と書いておりましたが、
今年4月から3年ぶりにaucfan.comの方に戻ってまいりました。
NETSEAのときと違ってリポジトリが多く、
最終更新日が7年前になっているファイルを触ることになったりして
「これ、誰に聞けば分かるの？？」みたいなこともありつつ、刺激の多い日々を送っております。
制作時のツール紹介
今回は普段使っているツールやブックマークの紹介をしたいと思います。
弊社のデザイン業務はバナーからLPのデザイン、UIUXデザイン、
HTML・CSSのコーディング、たまにJavaScriptも書いたりしているので
そのへんのやつがブックマークされているはずです。
デザインで使うツール
■ ICOOON MONO
https://icooon-mono.com/
しょっぱなからツールじゃなくて素材サイトですが…(；´∀`)
無料で商用利用可のアイコンがダウンロードできます。
弊社はAdobe Stockを契約しているのですが、ちょっとしたアイコンがほしい時によく使っています。
運営しているTopeconHeroesの他のサイト（フラットアイコンやフキダシ素材など）もよく使わせていただいています。
■ ImageAlpha
https://pngmini.com/
png画像のサイズ圧縮ができる、ダウンロードして使うアプリです。
ImageOptimとセットで使っています。
前職の制作会社ではマストで入れることになってました。
■ coolors
https://coolors.co/
カラーパレットジェネレーター。
スペースキーでオススメカラーを生成してくれます。
色選びに迷った時に使っています。
■ waifu2x
http://waifu2x.udp.jp/
jpgノイズを除去して拡大もできちゃう。
写真を載せるときなんかに小さくて荒い画像しかない！という時に使います。
下手にフォトショでいじるより早くてキレイです。
■ 黄金比計算
https://keisan.casio.jp/exec/system/1255063343
1000pxを黄金比に分割したデザインにしたい…などの時に使います。
一応計算はするけど結局黄金比じゃない仕上がりになることは多いです。
■ ダミーテキストジェネレータ
https://webtools.dounokouno.com/dummytext/
ダミーテキストを入れておきたい時に。
坊っちゃんやLorem ipsumなど文字数を指定してダミーテキストを生成できます。
■ QRのススメ
https://qr.quel.jp/
QRコードを作りたい時に。
URL入力の後コードの画像サイズが調節できて便利。
■ Sass Color Generator
http://scg.ar-ch.org/
SCSSでコーディングするので、LPのカラーなどは変数にするため
私はデザインの段階でこれを使います。
レイヤー名をlighten10%とかにしちゃってるのは私です。すみません。
コーディングのときにも使います。
■ 写真の縦横比を固定して拡大縮小値を計算するツール
https://www.web-jozu.com/javascript/size.html
「画像を3:4にしたいけど、横◯◯pxだと縦は何pxだろう？」などの時に使います。
意外と使います。
コーディングで使うツール
■ codic
https://codic.jp/
ネーミングのツール。日本語を入力するとclass名っぽく英語に翻訳してくれます。
class名を考えるのってやたらと時間をかけてしまうんですよね…。
記法もキャメルケースやスネークケースなど選べます。
■ HTMLやWikiの改行タグ自動挿入機
http://www.cost-simulator.com/eco/etc/enter.html
改行がたくさんある文章に<br>を追加するのに使います。
テキストエディタより一瞬でできる感があるので使ってしまいます。
■ Table Tag Generator
https://tabletag.net/ja/
テーブルのジェネレーターは色々ありますがこちらがシンプルで使いやすいです。
■ 【文字数カウント】
http://www1.odn.ne.jp/megukuma/count.htm
入力した文字をカウントしてくれます。余計な機能がないのが良いです。
何年もブックマークしてたんですが、この記事書くのに気になって初めてホームページを見ました…
食玩のトレード掲示板がメインコンテンツのようで、掲示板はもう消えていました…(；´∀`)
CSSジェネレーター系
■ CSS三角形作成ツール
http://apps.eky.hk/css-triangle-generator/ja
フキダシのデザインのコーディング時によく使います。
■ CSS Gradient
https://cssgradient.io/
背景グラデーションのジェネレーター。使いやすいです。
■ css-generator
https://css-generator.net/
border-image、text-shadow、box-shadowなどのジェネレーター。
■ CSS 2 SASS/SCSS CONVERTER
http://css2sass.herokuapp.com/
CSSをSASS、SCSSに変換してくれます。minifyされたCSSもいけます。
たまーにしか使いませんが、これが必要なときはたいていマズいときです。
チートシート系
■ Emmet Cheat Sheet
https://docs.emmet.io/cheat-sheet/
よく使うのしか覚えていないので、たま〜〜に見返します。
■ Can I use...
https://caniuse.com/
「このCSSのプロパティ、IE11に対応してたっけ？」なんていう時に使います。
■ jQuery日本語リファレンス
http://semooh.jp/jquery/
jQueryのAPIの使い方などをちょこっと調べるのに使います。
■ Font Awesome
▼最新版
https://fontawesome.com/icons
▼4.7.0
https://fontawesome.com/v4.7.0/
NETSEAではこっちを使ってました。
・アイコン一覧+検索
・チートシート（CSS Class, & Unicode）
↑一覧からアイコンを直接コピー、フォトショやXDにテキストでペーストできます。
ワイヤーフレーム作るときなどにアイコンをちょっと仮置きできるので使ってます。
・Font Awesomeのアイコンを日本語でサクっと検索
↑公式の検索でうまく見つけられないときはこちらを使ってます。
おわりに
技術的なことを書いたほうがいいかなーとも思ったのですが、
「オススメ！便利なツール◯選」みたいなものではなく、地味なものを含め
Webデザインで普段使うツールを紹介する記事って少ないなと思い
このような紹介記事にしました。
（これでいつブックマークデータが飛んでも安心）
社内のデザイナー同士でもこういう情報ってあんまり知らないんですよね…。
かなり前にブックマークしたものや、検索で上の方に出てきたやつとかを
パッとブックマークしてそのままなんていうものも多いので、
もっといいツールあるよ！とか、地味だけどこういうツールよく使ってるよ！
というのがあったら是非教えていただきたいです！！