デザインを作るときに役立ちそうなサイト

2020/02/11,

Web サイトをデザイン、作成するときに利用しているサイトをまとめます。 自分も利用しているんですが、ときどきサイト名を忘れてしまったりするので自分への備忘録としても作成します。

Adobe Color

Adobe Color

Adobe が提供しているカラーパレット生成サイト

  • 類似色
  • モノクロマティック
  • トライアド
  • 補色
  • コンパウンド
  • シェード

上記の色の組み合わせを表示できます。

2020-02-10 23.55.20 color.adobe.com 34737f692f8d.png

Coolors

COOLORS

スペースを押すたびにいい感じのカラーパレットを生成してくれる。どんな色を使ってサイトをデザインしようか迷ったら、とりあえずスペースを連打して好みのパレットが出てくるか探してみるのもいいです

Screenshot_2020-02-11 Coolors.png

フォント

Google Fonts

Google が提供している Web フォント。日本語フォントもいくつかあります。

Web フォントなのでサーバーにわざわざフォントをアップロードしておく必要もなく便利。

Windows, Mac, Linux, Android, iOS など使用している OS や環境によってデフォルトで用意されているフォントが異なります。フォントの見た目を統一したいのなら、Web フォントを用意しておくといいです。

注意: フォントをダウンロードするのでそのぶん通信を食います。

2020-02-11 00.26.30 fonts.google.com 11018db86cff.png

画像

かっこいい画像が欲しい時は以下のサイトから探すことが多いです。商用利用可能で使い勝手がいい。

Unsplash

Screenshot_2020-02-11 Beautiful Free Images Pictures Unsplash.jpg

Pixabay

Screenshot_2020-02-11 Pixabay - 100万点以上の高品質なフリー画像素材.jpg

イラスト

unDraw

unDraw

Screenshot_2020-02-11 Illustrations unDraw.png

顔がなくてちょっとゆったりとしてそうな人々のイラスト。

最近こういうイラスト流行ってきていますよね。

以下のリンクにフリーで使えるイラストがまとめられています。

Free Amazing Illustrations Library for Your Project

アイコン

Material Design Icon

Material Design Icon

Google が提唱している Material Icon。シンプルな物が多い。

Screenshot_2020-02-11 Tools.png

Font Awesome

Font Awesome

Web フォント形式で利用できるアイコン集。React や Vue で利用できるライブラリも公開されています。

Screenshot_2020-02-11 Font Awesome.png

プロトタイピング

ブラウザで動作するプロトタイピングツール。

ブラウザで動作したり複数人数で同時編集したりできるから便利。

figma

Screenshot_2020-02-11 Figma the collaborative interface design tool .png

まとめ

デザインするとき、サイトを作成する時に利用しているサイト集でした。


Ouvill(おーびる)

この記事は Ouvill(おーびる) が書きました。サイト作成や、ウェブアプリケーション開発、IT 関連の記事執筆のご依頼を賜っております。

ご要件がある方はコンタクトフォームからご連絡ください。

@Ouvill

最新記事