デザイン業務で使う便利ツール

  • このエントリーをはてなブックマークに追加

日頃業務で使用している便利なウェブサイトを紹介します。
実際に使う場面を想定してまとめました。

目次

デザイン

フォント選びに役立つ

wordmark.it


https://wordmark.it/

PC内のフォント一覧を見られる!
「enter a word or a phrase」に任意の文字列を入力してEnter

フィルター機能で気になるフォントだけを比較できる!
気になるフォントをクリック
右上の「Filter selected」をクリックすると絞り込めます

アイコンがほしい

Material Design


https://material.io/tools/icons/?style=baseline
形式:SVG PNG

シンプルで汎用性が高い!
ラインアイコンや角丸、ツートンカラーなど切り替えられる(左「THEMES」から)
絞り込みは、左上の「Filter by name」から英語で入力

ICOOON MONO


http://icooon-mono.com/
形式:SVG PNG JPG

数が多い!

Icon rainbow


https://icon-rainbow.com/
形式:SVG PNG JPG

ちょっと凝ったデザイン

ローディング画像がほしい

Preloaders


https://icons8.com/preloaders/
形式:SVG GIF APNG

色や大きさのカスタマイズができる!
好きな形の画像をクリック
詳細画面右側のカスタマイズエリアでで色や大きさを設定
「GENERATE」をクリックして適応

ダミー写真がほしい

ぱくたそ


https://www.pakutaso.com/
形式:JPG

動物の写真がかわいい。うずらと雷鳥がおすすめ。

ダミー文章がほしい

ダミーテキストジェネレータ


https://webtools.dounokouno.com/dummytext/

無難に、名作でも入れておこう。

テクスチャがほしい

Paper-co


http://free-paper-texture.com/
形式:PNG JPG

最大1200pxと大きめなのが嬉しい!

色の組み合わせに迷った

paletton


http://paletton.com/

トライアド、テトラード配色などパッと確認!
カラーホイール左下「Base RGB」に値を入力してベースカラーを設定

時間がない、でもここにイラストが足りない

ベクタークラブ


http://vectorclub.net/
形式:AI

クオリティが高い上にベクター

横幅300pxの画像、高さ何pxにしよう?

アスペクト比計算ツール


https://ocadweb.com/aspectratiotools

さまざまな比率で一括計算!
16:9 4:3 黄金比 など

黄金比計算


https://keisan.casio.jp/exec/system/1255063343

コーディング

クラス名どうしよう

codic


https://codic.jp/
まずはコレ

Weblio


https://ejje.weblio.jp/
codicで上手く出ないとき

DMM英会話なんてuKnow?


https://eikaiwa.dmm.com/uknow/
Weblioでもしっくり来ないとき

タグのブラウザ対応状況を知りたい

Can I use…


https://caniuse.com/

タグや属性がブラウザに対応しているかサッと調べられる
「Can I use_____?」に調べたい値を入力

文章中になぞの空白。どうして

機種依存文字チェッカー


https://www.submit.ne.jp/tools/check

機種依存文字の混在が原因のときがあります。

flex-box使いたいけど、よくわからない

Visual Guide to CSS3 Flexbox


https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

flex-boxが視覚的にわかる!
「justify-content」を「center」にすると中央寄せになるのか。なるほど。

三角形をcssで書くのが面倒

CSS三角形作成ツール


http://apps.eky.hk/css-triangle-generator/ja

テーブル大量生成で死にそう

Excel to HTML


https://tech-unlimited.com/exceltable.html

Excelの表をHTMLのテーブルタグに変換

その他

パスを共有するその前に

PathCon


http://www.kenjisugimoto.com/pathcon/

相手の環境に合わせてパスを変換!
MacとWindowsのファイルパス相互変換

「請求書作成するので作業時間教えてください」「はい」

Toggl


https://toggl.com/

記録しておけば大丈夫。そう、Togglでね。

とりあえずここにメモ!

trello


https://trello.com/

使い方はたくさん

最後に

各ツールの開発・運営に携わっていらっしゃる方々に感謝いたします。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*