【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ

## 個人開発・ポートフォリオ作成をする方に贈る

いくらプロダクトが素晴らしいとしても、一見してダサいデザインだと、ユーザーは使う気がなくなってしまう。
でも、今からデザインの勉強をするのは面倒だし、そこまでこだわりがあるわけでもない。

**Q. 簡単に及第点のデザインにできるサービスとかないんですか？
A. あります。**

ということで、デザインのことはよくわからなくても、簡単にそれっぽくできるサービスをまとめました。
個人的には、「それっぽさ」の大部分は**ページレイアウトと画像**、「こなれ感」は**配色とフォント**によって構成されていると思っています。

また、~~私はケチなので~~ここで紹介しているものは、すべて無料で使えるサービスです（課金プランはある）。


### 書かないこと

- 細かい使い方
  - 大体有名なので、使い方はggれば出てきます。
- ライセンスなどの情報
  - 特に素材系は規約などを確認の上で使ってください。

あくまでも、こういうサービスがあるという導入になればいいなと思います。
随時追加していきます。



## CSSフレームワーク

いい感じのデザインを実現しようと思って自前でCSSを書くともれなく死にます（時間的に / そして大していい感じにできない）。

CSSフレームワークを使えば、FlexBoxなどのレイアウトはクラスを指定するだけでどうにかなります。
どれを使うかについては、デザインの好みと自分が使いたいコンポーネントがあるかどうかを判断基準にするといいと思います。
マテリアルデザインとかフラットデザインとか、デザインのトレンドとかもあるらしいけど、我々は使いやすさ重視で選べばいいです。

こまけえことはここを見ろ：[2020年版：おすすめの人気CSSフレームワークと特徴の総まとめ](https://webdesign-trends.net/entry/11473)


### [Bootstrap](https://getbootstrap.com/)

みんな大好きBootstrap
レイアウト系もコンポーネント系クラスも十分だし、ドキュメントも充実しているので、やりたいことは大体できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/cd12d36a-f204-9c9e-b24f-09abb3589b99.png)

ちょっと他の人と違う感じにしたい人には、Bootstrapを使った[Flat UI](https://designmodo.github.io/Flat-UI/)もオススメ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/c6bd4495-dbe4-54c0-3937-f0eab17bf2d8.png)


### [Semantic UI](https://semantic-ui.com/)

直感的な名前のクラスが用意されていて、それらのクラスを組み合わせることでコンポーネントとして整えるイメージ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/5cdb13d9-b66b-9923-170f-1608e66c8f56.png)


### [Tailwind CSS](https://tailwindcss.com/)

`.button`などのクラスは用意しておらず、レイアウト系のクラスのみ。上2つよりCSSの知識が必要な分、ある程度自分で融通を利かせられる。
デフォルトでコンポーネントが用意されていないので、レイアウト系クラスを組み合わせてボタンなどを作る必要がある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/5772530e-701c-530e-ae4d-0a91f33b06f1.png)
[tailblocks](https://mertjf.github.io/tailblocks/)でコンポーネントのまとまりを紹介しているので、まずはこれをコピペして、形をカスタマイズしていくとよさげ。
[Cheat Sheet](https://nerdcave.com/tailwind-cheat-sheet)や[Tailwind UI](https://tailwindui.com/components)が便利そう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/34df1eae-3da2-ff2f-6b12-e35f4e29017a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/81c871ee-83a8-6f8d-a45e-c5cfabda6577.png)


### [daisyUI](https://daisyui.com/)

上記のTailwindを基盤としていて、よく使うコンポーネントには既に`.button`などのクラス名が付与されている。基本的なコンポーネントは直感的にかけるし、カスタマイズしたい場合は直接Tailwindのクラスで調整できる。
Tailwindで届かなかった痒いところに手を伸ばした感じ。
TOPページに「Tailwindだとこう記述する必要があるけど……daisyUIならこれだけ！」と書いてあるので、それを見るのが一番早いです。
個人的な感情ですが、今から新規でCSSフレームワークを入れるならもうこれでよくね？って思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/fc7be866-9b8f-7688-9a67-3b12bf8f5659.png)



## カラーパレットツール

思考停止で文字色を`#000000`にするのはやめよう。実際に一般的なサービスの文字色を調べてみるとわかるが、真っ黒に見えても`#333333`だったりする。

最初にテーマカラーを一つ決めて、それに合わせて他の色を選ぶのがオススメ。
フォントの色はCSSで変えやすいが、素材は色を変更しづらいので、使う素材から抽出すると統一感が生まれる。


### [イメージカラーピッカー](https://lab.syncer.jp/Tool/Image-Color-Picker/)

画像から色を抽出できる。自然だったりイラストレーターさんの色はかなり参考になる。
![lab.syncer.jp_Tool_Image-Color-Picker_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/1ae18fb4-c0a9-204c-d005-b8d7800b147a.png)


### [0to255](https://www.0to255.com/)

色を選ぶと、その色を基準として、`#ffffff`から`#000000`までのグラデーションを出してくれる。
カラーコードからでも可能なので、一色決まっている状態から他の色を考えたいときなどにも使える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/a0718ab9-ac8f-2aef-4755-2740671701e4.png)


### [HUE / 360](https://hue360.herokuapp.com/)

色彩度で輪になっている。デフォルトでは輪は20分割だけど、設定で100分割までできる。`M&S Judge`をONにしておくと、最初に選んだ色と相性がいい色のみ表示される。
同じ輪の中で選ぶと、色が違っても統一感が出る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/b66449e1-9747-c15b-bb9b-a2151d44dbd3.png)


### [カラーホイール、カラーパレットジェネレーター\| Adobe Color](https://color.adobe.com/ja/create/color-wheel)

丸を動かすと、バランスのいい5色を出してくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/ba0316eb-16b1-f3aa-bf82-e061002fdf1b.png)


### [Color Hunt](https://colorhunt.co/)

色の組み合わせをまとめたサイト。差し色も入っていたりするので、統一感は出したいけど、同一色だけってのもな……という人におすすめ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/f7c602ca-03c4-dd71-9be9-d5a301dc1f37.png)


### [Colormind](http://colormind.io/template/paper-dashboard/)

ランダムでカラーパレットを作成する。気に入った色はロックすると、それに応じて合う色を抽出する。ランダムとはいえ、くすみ系の色合いの印象。
スクロールすると、このように管理画面に自動で色を適応してくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/5842895a-b85d-8de0-73ec-c865963a0c44.png)



### [Happy Hues](https://www.happyhues.co/)

パレットの数は少ないけど、実際に色が反映されるので、イメージが湧く。ポップめ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/733f5e71-8b97-5220-c169-51c8043ff419.png)


### [NIPPON COLORS \- 日本の伝統色](https://nipponcolors.com/)

もうデザインがいい。見るだけで楽しい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/c4c52784-0ba3-86bb-e361-196eb7973a35.png)



## Webフォント

Webフォントは若干ラグいのと、重くなりがちなので、ご利用は計画的に。
タイトルロゴとかにワンポイントで使うといい。

### [Google Fonts](https://fonts.google.com/)

もう神。大体イメージに合うものがあるはずなので、ここで足りてしまう気がする。とはいえ英語しか対応していないものが多い。
[日本語専用サイト](https://googlefonts.github.io/japanese/)のページが可愛い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/294c06cb-1586-af83-14d2-8149da4ccbc9.png)


### [Fonts\.com](https://www.fonts.com/ja)

[検索ページ](https://www.fonts.com/ja/browse?filter=family:licenses:web)から無料のものも検索できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/787c9c5a-b98f-4fb8-9564-a67ebb8e968c.png)



## デフォルトフォント

Webフォントは重いので、まずはデフォルトフォントを確認してfont-familyで指定するのもオススメ。
あと、bodyのフォントもちゃんと選ぶと野暮ったさがなくなったりする（特にBootStrapのデフォルトフォントはあまりオシャレじゃない）。
デザイン性の高いフォントも多いので、ある程度OS / ブラウザを決め打つならこれで十分。

### [全標準フォント一覧 / フォントシミュレーター \- Dekasu\.net](http://dekasu.net/fonts/)

好きな文でフォントを確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/484edd79-f217-ba3f-e83d-ee2b522378be.png)


### [Font\-familyメーカー](https://saruwakakun.com/font-family)

使い方が視覚的にわかりやすい。
font-familyを自動で生成してくれるので、そのままCSSにコピペして使える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/b8ee3c82-6f08-cf37-6f93-a172fedbb541.png)


### [Wordmark\.it](https://wordmark.it/)

好きな文字列で、自分のパソコンにインストールされているフォントを一覧にしてくれる。
GoogleFontは有料らしいので公式で調べよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/33bf095b-ef11-952f-721d-a845f050d172.png)


## WEBアイコン

### [Font Awesome](https://fontawesome.com/)

なんといっても数が多い。太さや大きさを変えたり、アイコンを組み合わせるなど、できることも多い。有料版だと使えるテーマも増える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/08cd4a92-a20a-5fdc-8539-6a13f8827a32.png)


### [Material Design Icon](https://material.io/resources/icons/?style=baseline)

登録なしでCDNが使えるので、めちゃくちゃ楽ちん。
同じアイコンに対してテーマも多い。
![Image from Gyazo](https://i.gyazo.com/d8890b6d93b85785990b30d3e149fd55.gif)

### [Ionicons](https://ionicons.com/)

Outlineのスタイリッシュさが素敵。

![Image from Gyazo](https://i.gyazo.com/4308371f7274956859cf8b2f1f77702b.gif)



## ロゴジェネレーター

### [hatchful](https://hatchful.shopify.com/ja/)

イメージなどを選択すると、いい感じのロゴを生成してくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/4d52a1b5-2a8d-9741-6fe2-4d77ea4b145b.png)
色やフォントなどをカスタマイズできる。ついでに配色の参考にもなる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/17665457-da9b-09ba-8e0a-0fa6435b75ef.png)


### [DesignEvo](https://www.designevo.com/jp/)

テンプレートや素材からロゴを作成できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/908e29bc-5995-66f0-f5e8-f07f6f2920be.png)
拡張性の高さがすごい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/3ac3b2de-732e-3b1a-2906-b19044a5ff68.png)
500×500のJPGとPNG画像をダウンロードできる。高画質版は有料。
ファビコンや小さなロゴなら無料でも十分。
![www.designevo.com_jp_apps_logo__name=black-circle-and-beige-voting-box.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/b28b145c-2cc1-d120-490b-aaccc33f1ba8.png)


### [Canva](https://www.canva.com/)

ロゴジェネレータというよりは、いろんなテンプレートがあるブラウザデザインツール。
デフォルトで用意されているテンプレートが豊富かつ拡張性が抜群なので、いろいろ調べる必要なく手軽に作成・アレンジできる。背景透過など追加機能には課金が必要だが、無料でも十分使える。
エクスポート可能な形式はPNG, JPG, PDF。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/7c48091c-6912-d3b6-e715-73fbfa54b40d.png)


### [ロゴメーカー / STORES](https://logo-maker.stores.jp/)

タイトル、キャッチコピー、アイコンとそれぞれ一つずつしか選べないものの、簡単にロゴを作ることができる。
120px、240px、480pxのPNGとJPGがダウンロード可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/05b9b01f-2c15-0556-dba4-30314bdce080.png)


## モックアップ素材

### [Mockup Photos](https://mockup.photos/)

登録は必要だけど、無料で簡単にモックアップ画像を作成できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/55c2300b-1184-f880-fb11-ef4245a192e3.png)
サイズ調節などもブラウザ上で可能。Chromeのスクリーンショットなどと組み合わせるとプロ感が出る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/5a59db26-052c-eb50-45be-c70c02ed2623.png)



## イラスト素材

### [unDraw](https://undraw.co/illustrations)

数がめちゃくちゃ豊富。色をカラーパレットから選べるのもいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/ac96da3a-47a5-e461-d8ce-3262868db0ae.png)


### [Isometric](https://isometric.online/)

素材数はちょっと少なめ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/441fb84e-ecb8-6aea-f208-b25d2708cd72.png)


### [Illustrations on Blush](https://blush.design/ja)

いろんなアーティストの方の素材がある。癖が強いけどかわいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/5e14edd5-1b5b-026c-18a0-c07d6526efa4.png)
かなりカスタマイズ性が高い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/a8b0f2da-8aa6-49e6-a10f-056e2b0ee66b.png)


### [Icons8 Illustrations](https://icons8.com/illustrations)

いろんなテイストの素材がある。ベクター素材の組み合わせで一つとして保存もできるし、別々に保存もできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/2d016aa7-c336-9440-ed84-8d3e1c5b0101.png)
さらに、ブラウザ上で編集できるのがすごい。自由度が高すぎて、これでできないことはないんじゃないかと思える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/ed23ba58-2c9b-82f5-0651-8ca8cc935791.png)


### [Stories](https://stories.freepik.com/)

外国っぽい独特の世界観がある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/b621b8c8-1f37-5642-76b1-c7ff25416de8.png)


### [Linustock](https://www.linustock.com/)

シンプルな線画イラスト素材が多数。なんだかシュールだったり、時事っぽい素材があったり。個人的に、画像のタイトルのセンスが好き。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/ab3cf220-5fc8-78c1-ec28-cd0a9df7ee36.png)


### [いらすとや](https://www.irasutoya.com/)

素材といえばいらすとや。「そこに無ければ無いですね」の代名詞（？）
難点は、どう頑張っても世界観がいらすとやになってしまうこと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/49e9e708-ce9d-2f8d-b418-15ff3f19f5f3.png)



## 画像素材

画像素材はイメージと合致するものと巡り会えるかなので、とりあえずいろいろ挙げる。

### [ぱくたそ](https://www.pakutaso.com/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/2e151d8c-351f-9124-0b04-fde189089e9a.png)


登録不要で商業利用も可能。
よくアフィリエイトの記事などに使われている（勝手な偏見）。また、国内向けなシュールな画像も多い。


### [Icons8](https://icons8.com/photos)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/61f9beb2-3c0d-a12e-d2de-7f8483e011ef.png)


### [Free Stock Photos: High\-Res Images for Websites & Commercial Use](https://burst.shopify.com/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/bf34446c-3033-15ce-9ffc-0102278414d1.png)


### [Kaboompics](https://kaboompics.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/06560534-c518-9728-afe7-558b1bee0a59.png)


### [Unsplash](https://unsplash.com/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/a7f03e53-2d72-b514-3393-3e5e42ef9bfb.png)


### [Startup Stock Photos](https://startupstockphotos.com/)

スタートアップっぽい画像がたくさんある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322882/6ab6d384-7427-f1b2-19b2-510e72cd2ec3.png)



## その他

### 一度は読むといい

- [優れたフォームをデザインする\. デザイナーが陥りがちなミス、そして、その修正の仕方](https://medium.com/japan/d-9ff35629c4fb)
- [UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ](https://coliss.com/articles/build-websites/operation/design/visually-distorted-when-ui-looks-all.html)
- [ソシオメディア \| ヒューマンインターフェース ガイドライン](https://www.sociomedia.co.jp/category/shig)
- [freeeアクセシビリティー・ガイドライン](https://a11y-guidelines.freee.co.jp/)
- [ユーザーインターフェイスのデザインのヒント \- Apple Developer](https://developer.apple.com/jp/design/tips/)


### ページデザインが0から浮かばないときに眺めるといい

- [UI Design Resources, UI Kits, Wireframes, Icons and More \- UI8](https://ui8.net/)
  - 有料のUIキット。購入しなくても、パラパラ見るだけで参考になる。
- [SANKOU\! \| Webデザインギャラリー･参考サイト集](https://sankoudesign.com/)
  - 既存のサイトのまとめ。日本のサイトばかりなので、わりと親しみを感じられるはず。
- [Stock \- 日本のWebデザインギャラリー](https://stock.pulpxstyle.com/)
  - [デザイナーさん](https://twitter.com/pulpxstyle)が集めた良デザインのサイトまとめ。
- [Checklist Design \- A collection of the best design practices\.](https://www.checklist.design/)
  - UI的に必要な要素をチェックリストでまとめている。例えば、「ログインページ」や「検索フィールド」など。

### まとめ系おすすめサイト

- [コリス](https://coliss.com/)
- [Web Design Trends【ウェブデザイントレンド】\- Webに関わるすべての人のためのメディア](https://webdesign-trends.net/)
- [Pulp Note](https://pulpxstyle.com/)


## 終わりに