
僕がおすすめするデザイン系Webサービスまとめ
2020年1月時点で僕がブックマークしているデザイン系のWebサービスのまとめです。
おすすめしたいデザイン系Webサービスを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます(課金した場合のみ通知を受け取れる仕様)。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。
(※2019.11.03 追記)こちらのnoteですが、公式マガジン「#デザイン 記事まとめ」に掲載されました。ありがとうございます。
昨日投稿したnoteが公式マガジンに掲載されました👏
— TAK (@tak_dcxi) November 2, 2019
うれしい!https://t.co/FE8aT19j4t pic.twitter.com/nmnvUNhht9
(※2019.11.11 追記)「先週もっとも多くスキされた記事の1つ」に選ばれました。ありがとうございます。
サービスまとめnote記事が先週もっとも多くスキされた記事の1つになりました。ありがとうございました。https://t.co/FE8aT19j4t pic.twitter.com/q9hoJFHWEN
— TAK (@tak_dcxi) November 11, 2019
# ギャラリーサイト
## よく見ているサイト
Webデザインの参考になるギャラリーサイト。デザインのインプットとしてほぼ毎日見る。
***
## マネるデザイン研究所
ツイートがバズった。
マネるデザイン研究所https://t.co/XwwisaDhR5
— TAK (@tak_dcxi) September 4, 2019
ただ優れたサイトを掲載するだけでなく、そのサイトのどこが優れているのか「マネしたいデザイン」をポイントに絞って纏めている。それがどんなサイトで応用できるのか、またそれを実装するにあたっての注意点も分かりやすく文章にされているので好き。
***
## Bootstrap Expo
CSSフレームワーク案件を受け持った時のために。
Bootstrap Expohttps://t.co/0RqnMo1P5O
— TAK (@tak_dcxi) October 7, 2019
Bootstrapで話題なので
Bootstrapで作られた海外サイトのギャラリーです
CSSフレームワークを使っても現代的で綺麗なwebサイトは作れますが、予めフレームワークを意識したデザインをしないと導入が難しくなる場合があります。一部機能を使うなら別ですが
***
## フッターデザイン.com
フッターはサイトマップの役割やお問い合わせのためだけでなく、ページのエンディング的な役割を持つ大切なコンテンツ。
フッターってデザインや情報設計が難しいんですが、いわばエンディング的なポジションなので終わりがダメだとユア・ストーリーみたくなりかねないので気を付けるべきところ。
— TAK (@tak_dcxi) November 1, 2019
「フッターデザイン.com」ならいろんなフッターのデザインをインプットできるのでブクマしてる。https://t.co/AuzvPBbuh0 https://t.co/PYtRlFCTQy
***
## 404 Error Page - Awwwards
オシャレな404ページを掲載したギャラリー。404も凝った感じにしたい。
***
## Webframe
Webサイトの特定のパーツをジャンル分けして掲載しているギャラリーサイト。
***
## バナーデザイン
僕は基本的にバナーを作らないけど万が一のためにブックマークしている。
***
## Pinterest
最強。基本的にこれ見てればいい気がする。
---
# 写真素材・ラスタ素材
## Unsplash
個人的に一番好きなクリエィティブ・コモンズ写真素材サービス。Trelloの背景画像はUnsplashが使われている。
***
## Pixabay
安定の素材配布サイト。WordPressプラグインもある。
***
## CREATIVE COMMONS PHOTO SEARCH in Flickr
Flickrの中から商用利用可能な写真素材を探せる。クレジット表記必須。
***
## 100% Free Patterns
パターン画像のフリー素材配布サイト。
---
# ベクタ素材
## Font Awesome
いつもの。Font AwesomeはPCにインストールしてデザインカンプで使えるようにしたほうがいい。
インストールしたらFont Awesomeのチートシートをブックマークしておく。
***
## ICON BOX
パスが編集できる商用フリーのアイコン素材集。日々新しい素材が追加されている。
***
## Animated Icons
Lottie、GIF、およびAfter Effects形式のJSONをダウンロードできるフリーのアイコン素材集。JSONはCDNで利用可能。
***
## Linustock
シンプルで加工・商用利用可能なフリー線画イラスト集。
Linustockhttps://t.co/JYKFGtsEng
— TAK (@tak_dcxi) September 9, 2019
シンプルで加工・商用利用可能なフリー線画イラスト集。どこで使うんだこれ?って感じのイラストも多くあるが、オシャレでいい感じだと思います(ボキャ貧) なんとなくコーポレートサイトで使えそうな素材が多い気がする。ネタ素材も多いけど。
***
## 500+ CSS Icons
(※2020.01.06 追加)
CSSで作成されたオシャレなアイコン集。Font Awesomeと同様に、CDNを読み込んでclassを付与するだけで利用できる。カラーの変更や塗りなどのカスタマイズも簡単。
https://t.co/2Ucep672Tv
— TAK (@tak_dcxi) January 4, 2020
CSSで作成されたオシャレなアイコン集。CDNを読み込んでclassを付与するだけで使える。Font Awesomeに近いので、それ使ってる人なら扱いやすいかも。カスタマイズ性も高い。
---
# 動画素材
## Mixkit
商用利用可のフリー映像素材サイト。webサイトに動画埋め込む際などに。
商用利用可のフリー映像素材サイトhttps://t.co/oSYZg9Lnnc
— TAK (@tak_dcxi) September 8, 2019
videoタグ使ってキービジュアルに動画埋め込む機会はあるので、そういったものを作る時の練習やプロダクトの仮動画とかに。videoタグの使い方は下記の記事がめっちゃわかりやすい。web兄さんはリアルでも神ですhttps://t.co/0OJDbDpkBG
---
# 音楽素材
## unminus
商用利用可のフリー音源サイト。動画作る時のBGMなどに。
商用利用可のフリー音源サイトhttps://t.co/MZ7IOl8QjP
— TAK (@tak_dcxi) September 8, 2019
動画作る時のBGMなどに。audioタグ使って音楽流れるwebサイトとか作ってみたいけど機会が無い。ユーザーの承諾無しにwebサイトで勝手に音を出すのはユーザビリティ面が最悪なので、流す時は選択制にしましょうね。
---
# 配色見本サービス
## Adobe Color CC
色同士の関係性から優れた配色パターンを生成することが可能な有名サービス。PhotoshopやIllustratorなどの標準スウォッチやカラーパレットから選ぶよりこっちで選んだ方が絶対に良い。
***
## Coolors
5色の配色パターン見本をランダムで表示してくれるカラーパレット生成サービス。スペースバーで切り替え。
***
## ColorSpace
指定の色とマッチする色を提案してくれるサービス。
***
## Color Hunt
世界中のユーザーが投稿した4色の配色パターン見本を掲載。人気順に並べ替えることも可能。
***
## NIPPON COLORS
日本の伝統色が一目で分かり、カラーコードなども調べられる。
***
## WEB色見本 原色大辞典
カラーコード検索サービス。色の名称とコードを調べる時にあると便利。
***
## Cool Backgrounds
グラデーション背景を作る際によく使ってる。Particles.js興味あるんだけど使う機会が無くてかなしい。
***
## WebGradients
グラデーションの配色参考サービス。グラデーションは自力で頑張るとダサくなりがちなので見本を参考にした方がいいと思われ。
グラデーションは一歩間違えるとめっちゃダサくなってしまうので、グラデーションのギャラリーサイトを参考にするのがベストだと思います。例えばWebGradientsとか。https://t.co/8NhlK7jsQP
— TAK (@tak_dcxi) October 20, 2019
CSSもコピーできるから偉い👏
***
## Gradient Magic
個性的な見栄えのグラデーションがCSSのサンプル付きでまとめられているギャラリーサイト。
***
## snook.ca – Colour Contrast Check
高齢者や色弱・色盲の方が文字を読み取るのに十分なコントラストが確保できているかをチェックできるツール。アクセシビリティ対策は大切。
***
配色の注意事項は「個人的に実践しているWebデザインガイドライン② 配色編」を見てね。
---
# レイアウト関連
## METALLIC RATIO
貴金属比の計算サービス。使用頻度高め。貴金属比の大切さについては「個人的に実践しているWebデザインガイドライン③ レイアウト編」を参照。
***
## Gridpx
グリッドデザインの計算ツール。カンプ制作時のグリッドのサイズ計算などに。
***
## ダミーテキストジェネレータ
ダミーテキスト生成サービス。仮テキストに。
---
# 画像関連
## waifu2x-multi
古い画像にありがちなサイズの小さい写真をAIを使って綺麗に拡大してくれるサービス。一括ダウンロード可能。
***
## Placehold.jp
ダミー画像生成サービス。画像をダウンロードしなくても使えるのがえらい。
***
## Mockup Photos
モックアップ作成サービス。転職の時に紙のポートフォリオを作ったときにお世話になった。
***
## ScreenSpace Mockup
3Dモックアップを数秒で作成できるサービス。
***
## TinyPNG
JPEGとPNGの画像圧縮サービス。JPEGとPNGの画像圧縮はWebで利用するときは必須なので要ブクマ。
***
## SVGOMG
SVGファイル最適化サービス。不要なデータを取り除ける。SVG使うならブクマ推奨。
***
## Favicon Generator. For real.
ファビコン自動生成ツール。iOSのホームスクリーン用のapple-touch-iconなども生成してくれる。基本ここに丸投げしてる。
***
## Brandmark Logo Maker
それっぽい企業ロゴを素早く制作できるツール。ロゴ決まってない案件などに。
***
## SVG Artista
SVGアニメーション作成ツール。イージングなどを調整でき、コードも出力してくれる。
***
余談だけどMac使ってるならターミナルで簡単に画像処理できるsipsコマンドを覚えておくといいかも?
Macだったらcdで画像フォルダに移動して、例えば「sips -Z 800 *.jpg」ってコマンドを実行したら画像フォルダの全JPEGファイルを比率を保ちつつ縦横どちらか大きい方を800pxにリサイズしてくれます。へぇーって感じですね
— TAK (@tak_dcxi) August 16, 2019
---
# フォント関連
## Google Fonts
いつもの。Webフォントを使う場合はライセンスの心配が少ないGoogle Fontsを率先的に使う。
FontBaseというフォント管理ソフトを使うとGoogleフォントを取り込んでオフラインで使えるので便利。
***
## Yaku Han JP
「」や『』など約物が半角にできるフリーフォント。約物の空きが気になるデザイナーに。
***
## モジサイ
日本語のフリーフォントを検索できる。書体やイメージワードから理想的なフォントを表示してくれる。ライセンスに必ず注意。
***
## Modulator
レイアウトのバランスを決める際のフォント周りの数値の参考になるシミュレーター。
***
## Type Scale
フォントサイズのバランスの良い比率を計算できるサービス。フォントのジャンプ率や見出しのサイズを考えるときなどに。
見出し(h1〜h6)のサイズは黄金比を基準に決定するとバランスが良くなるのでオススメ。Type Scale[https://t.co/k2hP9wSqwt]で指定のフォントサイズから黄金比の計算が可能👍ちなみにPhotoshopのデフォルトのテキストサイズ値は黄金比。さすがAdobe。
— TAK (@tak_dcxi) October 17, 2019
***
## Wordmark.it
デバイスにインストールされているフォントを一覧表示してくれるサービス。トンマナを考える時などに。
---
# オンラインデザインツール
## Canva
グラフィックデザインツール。高機能かつデザインに優れたテンプレートを選べるので非デザイナーの方におすすめ。バナーとか僕が頑張って作るよりこっちでやったほうがいいものが作れる気がしてかなしい。
***
## Figma
話題のオンラインUI/UXデザインツール。一度フリーで案件を受託した時に使った。デバイス問わず使えてオンラインで共有もできるので今後使っていきたいなって思った。
***
## STUDIO
プロトタイプデザインツール。プロトタイプやワイヤーフレームを制作するならいいサービスだと思った。
***
## Zeplin
Adobe Photoshop、Adobe XD、Sketch、Figmaなどで利用可能なデザインのFBツール。
---
そのうちコンテンツを追加します。ここで記事は終了ですが、もし更新した際の通知を受け取りたい方がいらっしゃいましたら、課金よろしくお願いいたします。
Twitterでも有益な情報をちょくちょく発信しています。
ここから先は
¥ 100
愛と平和