Go to Qiita Advent Calendar 2024 Top
LoginSignup
2418
2612

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

RUNTEQAdvent Calendar 2020

Day 1
@aiandroxin超実践型エンジニア育成スクールRUNTEQ

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

Last updated at Posted at 2020-11-30

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

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

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

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

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

書かないこと

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

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

CSSフレームワーク

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

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

こまけえことはここを見ろ：2020年版：おすすめの人気CSSフレームワークと特徴の総まとめ

Bootstrap

みんな大好きBootstrap
レイアウト系もコンポーネント系クラスも十分だし、ドキュメントも充実しているので、やりたいことは大体できる。
image.png

ちょっと他の人と違う感じにしたい人には、Bootstrapを使ったFlat UIもオススメ。
image.png

Semantic UI

直感的な名前のクラスが用意されていて、それらのクラスを組み合わせることでコンポーネントとして整えるイメージ。
image.png

Tailwind CSS

.buttonなどのクラスは用意しておらず、レイアウト系のクラスのみ。上2つよりCSSの知識が必要な分、ある程度自分で融通を利かせられる。
デフォルトでコンポーネントが用意されていないので、レイアウト系クラスを組み合わせてボタンなどを作る必要がある。
image.png
tailblocksでコンポーネントのまとまりを紹介しているので、まずはこれをコピペして、形をカスタマイズしていくとよさげ。
Cheat SheetやTailwind UIが便利そう。
image.png
image.png

daisyUI

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

image.png

カラーパレットツール

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

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

イメージカラーピッカー

画像から色を抽出できる。自然だったりイラストレーターさんの色はかなり参考になる。
lab.syncer.jp_Tool_Image-Color-Picker_.png

0to255

色を選ぶと、その色を基準として、#ffffffから#000000までのグラデーションを出してくれる。
カラーコードからでも可能なので、一色決まっている状態から他の色を考えたいときなどにも使える。
image.png

HUE / 360

色彩度で輪になっている。デフォルトでは輪は20分割だけど、設定で100分割までできる。M&S JudgeをONにしておくと、最初に選んだ色と相性がいい色のみ表示される。
同じ輪の中で選ぶと、色が違っても統一感が出る。
image.png

カラーホイール、カラーパレットジェネレーター| Adobe Color

丸を動かすと、バランスのいい5色を出してくれる。
image.png

Color Hunt

色の組み合わせをまとめたサイト。差し色も入っていたりするので、統一感は出したいけど、同一色だけってのもな……という人におすすめ。
image.png

Colormind

ランダムでカラーパレットを作成する。気に入った色はロックすると、それに応じて合う色を抽出する。ランダムとはいえ、くすみ系の色合いの印象。
スクロールすると、このように管理画面に自動で色を適応してくれる。
image.png

Happy Hues

パレットの数は少ないけど、実際に色が反映されるので、イメージが湧く。ポップめ。
image.png

NIPPON COLORS - 日本の伝統色

もうデザインがいい。見るだけで楽しい。
image.png

Webフォント

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

Google Fonts

もう神。大体イメージに合うものがあるはずなので、ここで足りてしまう気がする。とはいえ英語しか対応していないものが多い。
日本語専用サイトのページが可愛い。
image.png

Fonts.com

検索ページから無料のものも検索できる。

image.png

デフォルトフォント

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

全標準フォント一覧 / フォントシミュレーター - Dekasu.net

好きな文でフォントを確認できる。
image.png

Font-familyメーカー

使い方が視覚的にわかりやすい。
font-familyを自動で生成してくれるので、そのままCSSにコピペして使える。
image.png

Wordmark.it

好きな文字列で、自分のパソコンにインストールされているフォントを一覧にしてくれる。
GoogleFontは有料らしいので公式で調べよう。
image.png

WEBアイコン

Font Awesome

なんといっても数が多い。太さや大きさを変えたり、アイコンを組み合わせるなど、できることも多い。有料版だと使えるテーマも増える。
image.png

Material Design Icon

登録なしでCDNが使えるので、めちゃくちゃ楽ちん。
同じアイコンに対してテーマも多い。
Image from Gyazo

Ionicons

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

Image from Gyazo

ロゴジェネレーター

hatchful

イメージなどを選択すると、いい感じのロゴを生成してくれる。
image.png
色やフォントなどをカスタマイズできる。ついでに配色の参考にもなる。
image.png

DesignEvo

テンプレートや素材からロゴを作成できる。
image.png
拡張性の高さがすごい。
image.png
500×500のJPGとPNG画像をダウンロードできる。高画質版は有料。
ファビコンや小さなロゴなら無料でも十分。
www.designevo.com_jp_apps_logo__name=black-circle-and-beige-voting-box.png

Canva

ロゴジェネレータというよりは、いろんなテンプレートがあるブラウザデザインツール。
デフォルトで用意されているテンプレートが豊富かつ拡張性が抜群なので、いろいろ調べる必要なく手軽に作成・アレンジできる。背景透過など追加機能には課金が必要だが、無料でも十分使える。
エクスポート可能な形式はPNG, JPG, PDF。
image.png

ロゴメーカー / STORES

タイトル、キャッチコピー、アイコンとそれぞれ一つずつしか選べないものの、簡単にロゴを作ることができる。
120px、240px、480pxのPNGとJPGがダウンロード可能。
image.png

モックアップ素材

Mockup Photos

登録は必要だけど、無料で簡単にモックアップ画像を作成できる。
image.png
サイズ調節などもブラウザ上で可能。Chromeのスクリーンショットなどと組み合わせるとプロ感が出る。
image.png

イラスト素材

unDraw

数がめちゃくちゃ豊富。色をカラーパレットから選べるのもいい。
image.png

Isometric

素材数はちょっと少なめ。
image.png

Illustrations on Blush

いろんなアーティストの方の素材がある。癖が強いけどかわいい。
image.png
かなりカスタマイズ性が高い。
image.png

Icons8 Illustrations

いろんなテイストの素材がある。ベクター素材の組み合わせで一つとして保存もできるし、別々に保存もできる。
image.png
さらに、ブラウザ上で編集できるのがすごい。自由度が高すぎて、これでできないことはないんじゃないかと思える。
image.png

Stories

外国っぽい独特の世界観がある。
image.png

Linustock

シンプルな線画イラスト素材が多数。なんだかシュールだったり、時事っぽい素材があったり。個人的に、画像のタイトルのセンスが好き。
image.png

いらすとや

素材といえばいらすとや。「そこに無ければ無いですね」の代名詞（？）
難点は、どう頑張っても世界観がいらすとやになってしまうこと。
image.png

画像素材

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

ぱくたそ

image.png

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

Icons8

image.png

Free Stock Photos: High-Res Images for Websites & Commercial Use

image.png

Kaboompics

image.png

Unsplash

image.png

Startup Stock Photos

スタートアップっぽい画像がたくさんある。
image.png

その他

一度は読むといい

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

まとめ系おすすめサイト

終わりに

2418
2612
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2418
2612

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?