デザインする際に便利なサイトをまとめました

デザイン作業で役立つサイトをカテゴリごとにまとめました。
ログイン不要、無料で利用できるものを中心に選んでいます。

色選択

• HUE/360
  ベースの色を選択し、それに沿った配色を簡単に選べます。
• ColorSupplyyy
  サンプルアイコンや配色の可視化があり、直感的に使いやすいです。

アイコン

• Font Awesome
  豊富なアイコンを簡単に利用できます。

フォント

• Google Fonts
  無料で多くのフォントを利用可能。デザインの定番です。

CSS

• UIVerse
  アニメーション付きのデザインが豊富で、コードも確認できます。
• AnimatiSS
  CSSアニメーションを視覚的に確認でき、参考になります。
• ベイジの図書館
  よく使うCSSコードがまとめられた便利なブログです。
• 外国のおじさんのサイト
  CSS生成ツールが充実しています。
  • Pie chart: 円グラフ作成
  • Clippy: 形付き要素作成
  • Scales: グラデーション作成

レイアウト

• Haikei
  背景をSVGで作成できます。あまり使わないかもしれませんが、便利なので記述しておきます。

画像

• かわいいロゴ(さわらつき)
  プログラミングに関する、かわいいロゴがいろいろあります。
  自分もこのプログを書く時のサムネイルの作成に利用させていただいているロゴたちです。
• TinyWow
  無料で利用できるツールがいっぱいあります。特に画像の編集系を多用するので、ここにて記述しておきます。
• Png2Svg
  画像をSVGに変換できます。(vectorizer.aiは有料になってしまった。。。。)
• Placehold
  ダミー画像を生成するURLを発行できます。ピクセル数表示も便利です。
  https://placehold.jp/300x100.png
  
• Lorem Picsum
  写真を使ったダミー画像を生成できます。
  https://picsum.photos/300/100
  

まとめ

自分の個人的デザイン便利ツールメモです。