
200以上のデザインに役立つ情報を1つにまとめてみました。(2020/02更新)
(* 2020/02/16 記事更新 *)全編無料です!
こんにちは、ねいびと申します。
タイトルにあるとおり、200以上のデザインに役立つ情報をこのnote にまとめました。中にはおそらく「それ、知ってるよ」という情報もあるかと思います。
私が普段みているサイトや、制作の際に役立つような情報を全てまとめて、
『とりあえずココに来たら全部見れる』
ような場所になればと思いつくりました。
このnote は、以下のような方たちに役立てればと思い書きました。
・デザインに興味がある人
・デザインを勉強してる人
・デザイナーを目指している人
・すでにデザイナーの人
ひとりでも多くの方に活用していただければ幸いです。
──
* 目次から読みたい項目に飛べます *
-- メディアサイト --
──
▷ クリエイター総合
・キャリアハック
IT、テック系ではたらく人のためのWebメディア。起業家やビジネスに関する情報などを発信している。
・VISUAL SHIFT
動画やビジュアル、コンテンツ制作全般に携わる人向けのWebメディア。業界のトレンドをイチ早く知れる。
・withnews
日々の ”気になる” ニュースを取り上げるメディア。疑問やふしぎを解決してくれるサイト。
・WIRED
テクノロジーやカルチャー、未来についての情報を発信するメディア。世界の最新技術やトレンドを知れる。
・ferret
「マーケターのよりどころ」をコンセプトにした、Webマーケティングメディア。マーケティングに関するさまざまな情報を発信している。
・CreatorZine
企業ではたらくクリエイターに向けたWebマガジン。デザインとビジネスにまつわる記事が多い。
・URAGAWA
様々な企業のクリエイターの裏側に注目したメディアサイト。
・株式会社ロフトワーク
クリエイティブを通じて、社会に新しい価値を生み出すロフトワーク。さまざまな企業の課題解決を紹介している。
・AXIS
クリエイティブ版 WIREDに近いメディア。社会や暮らしに潜むクリエイティブにスポットをあてている。
・AdGang
国内外のおもしろい広告や、クリエイティブな情報を発信しているサイト。
・UNLEASH
未来につながる経済生態系をつくるメディア。これからのメディアやクリエイティブのあり方について発信している。
・BAUS
あらゆるクリエイターにスポットをあてたメディア。いろんなクリエイターの制作実績を見ることができる。
・KAI-YOU
KAI-YOU.net は、「ポップ」を探求しながら常に世界と遊び続けるポップポータルメディア。芸能やカルチャーに関する情報を発信している。
・haconiwa
「世の中のクリエイティブを見つける、届ける」をコンセプトに、女性クリエイターの方たちが情報発信しているサイト。
・CINRA.JOB
様々なクリエイターのインタビュー記事を掲載。働く現場の情報を知れるサイト。
・mini
名刺管理サービスなどを取り扱うSansanのメディアサイト。現場で働く今の人に密着した記事を掲載。
・THE BAKE MAGAZINE
チーズタルトなど様々なスイーツを展開するBAKEのメディアサイト。製菓業界のクリエイティブな情報を知ることができます。
▷ デザイン総合
・Photoshop VIP
デザインに関する最新トレンドや、制作に役立つフリー素材などを発信している。デザイナーは必読しておきたいサイト。
・コリス
デザインに役立つテクニックや、お得なセール情報などを発信しているサイト。こちらもデザイナーは必読しておきたいサイト。
・サルワカ
デザインやWebにまつわることを、イラストや図でわかりやすく紹介しているメディア。更新頻度は少ないが、情報の質が高い。
・Webクリエイターボックス
WebデザイナーのManaさんが運営するサイト。Webデザインに関する情報や、週イチでツイッターで話題になった情報をまとめて発信している。
・Web Design Trends
Webのトレンドに関する情報を発信しているメディア。まとめ記事が多く、制作の際に参考になる。
・UX MILK
UX(ユーザー・エクスペリエンス)に関する情報を、毎日更新している。海外の翻訳記事が多く、質の高い情報を発信している。
・MdN Design Interactive
MdNが運営するデザイン全般の情報を発信しているサイト。アートやイベント情報なども取り扱っている。
・freshtrax
世界のデザインやテクノロジーに関する、情報を発信しているメディア。スタートアップ企業向けの記事が多数あり。
・ひらくデザイン
デザインがもつ新たな可能性を模索するメディア。イベントのレポートなどためになる情報を発信している。
・はたらくビビビット
学生に向けた、はたらくクリエイターに関する情報を発信するメディア。さまざまな人のポートフォリオなども公開している。
・アプリマーケティング研究所
アプリビジネスを行う人のためのマーケティング情報サイト。サービスの立ち上げから成功までの道のりを紹介している。
・JDN
国内外のデザインに関するニュースや情報を発信しているサイト。
・Workship magazine
フリーランスで活動するクリエイター向けのメディアサイト。
・peeji
日常にあるデザインを解説、紹介しているブログ。隠れた名店のようなイイデザイン情報が知れます。
▷ 企業デザイナーズブログ
・Goodpatch Blog
グッドパッチが運営するブログ。デザイン、アプリ、サービス全般に関する情報を発信している。
・LIG
独自の路線でコンテンツを発信しているメディア。クリエイターは必読しておきたいサイト。
・BIZREACH
ビズリーチが運営するデザイナーズブログ。若いデザイナーが日々情報を発信している。月イチで本の紹介をしている。
・クラウドワークス デザイナーブログ
クラウドワークスが運営するデザイナーズブログ。デザインや社内の取り組みなどを紹介している。
・PSYENCE:MEDIA
リクルートが運営するブログ。エンジニアや開発者向けの情報を多く発信している。
・knowledge / baigie
株式会社ベイジが運営するブログ。デザインやWebに関する、情報量の高い記事を発信している。
・キャリハック:デザイン
キャリアハックのデザイナー向けの記事一覧。いろんなクリエイターのインタビュー記事が掲載されている。
・デザイン事務所AMIX
デザイン事務所AMIXのトミナガハルキさんが運営するブログ。デザイナー目線で日々の感じたことや体験を発信している。
・BRISK
東京のホームページ制作会社が運営するブログ。解説や図解が豊富でとてもわかりやすく記事を紹介している。
・STUDIO Blog
デザインツールSTUDIOが運営するブログ。デザインやSTUDIOのサービスに関する情報を発信している。
・ReDesigner Magazine
デザイナーに関するインタビュー記事などを発信している。
・BUROKI
フリーランスデザイナーのBUROKIさんが運営しているブログ。デザインと日々の日常を織り交ぜた情報を発信している。
・人間のブログ
おもしろいコトをしている株式会社人間のブログ。「はやすぎる年賀状」など日々おもしろを提供している会社です。
・メルカン
メルカリの ”中の人” たちを伝えるメディア。メルカリで働く人達の日常を知ることができます。
・eureka.design
マッチングアプリPairsを運営するeurekaのデザインブログ。UIに関する記事などが多く発信されている。
▷ Adobe関連
・Adobe Blog
アドビの最新情報を発信しているブログ。アップデート情報や、最新技術などを知ることができる。
・DESIGN TREKKER
9人の現役デザイナーが、PhotoshopやIllustratorで使えるテクニックを日々発信しているサイト。更新頻度が高くオススメ。
・DTP Transit
アドビソフトでDTPをする際の、役立つテクニックや設定方法などを紹介している。公式ツイッターも一緒にフォローしておきたい。
・本日のイラレ
イラレのアピアランスの可能性を日々開拓していサイト。イラレ関連は大体ココで解決できる。とりあえずツイッターはフォローしておく。
・レタッチャー / 大谷キミトさん
レタッチャーで有名な大谷キミトさんのnote。Photoshopのレタッチに関するプロの技術が学べる。
・CGメソッド
Photoshopのコアなテクニックや、作業を効率化してくれるスクリプトなどを多く発信しているサイト。
・amity
ProcreateなどのiPadのソフトを使った、テクニックや情報を発信しているサイト。
・Adobe XD Tips
Adobe XDの基本操作、便利な使い方などをまとめたツイッターリスト。
-- ツイッターアカウント --
──
▷ メディア関連
・コリス
お得なセール情報をスグにキャッチ!
この値引き率はあまりないので、お見逃しなく!
— コリス🍡 (@colisscom) February 1, 2020
Amazon 2月のタイムセール祭りで、Adobe CC コンプリート 12か月版が35%オフの激安価格です!!
更新の人はさらにお得で、38%オフhttps://t.co/KCcDW2uoL4 pic.twitter.com/gQcxQVAVLM
・Photoshop VIP
最新のトレンドやテクニックをスグにキャッチ!
ビジュアルで勝負!2020年に確認しておきたい重要デザイントレンド7個まとめ https://t.co/bb5nDTQ48r pic.twitter.com/aODrP7DXIs
— Photoshop VIP (@photoshopvip) January 20, 2020
・アドビ
アドビの最新情報を配信。
Adobe XDをもっと使いこなすヒント! 第44回 オブジェクトに複数のインタラクションを指定する https://t.co/VqMc2hiRGR #CreativeCloud
— アドビ クリエイティブ クラウド (@creativecloudjp) January 23, 2020
・アドビ(学生向け)
学生向けのテクニックを紹介している。
#写真好き #写真初心者 の皆さん、 #水たまり を見かけたらぜひ試してみてください。 #スマホ で映える水たまり #写真 を撮る方法と #SNS映え する仕上げ方をこちらで解説😎⇒https://t.co/GBxWXEqfxS #Lightroom pic.twitter.com/6WcYSBZc5q
— Adobe Students Japan (@AdobeStudentsJP) December 4, 2019
・MdN BOOKS
MdNの最新の書籍情報などを配信。プレゼント企画なども実施している。
【新刊情報】素敵な「紙の本」ができました!メモ帳のように一枚づつ切り離せます!ラッピングやペーパークラフト、便箋に使ったりと活用方はさまざま!詳細はコチラ→https://t.co/1Smr1jvKVd
— MdN BOOKS (@mdn_books) January 29, 2020
「ペーパーブック・シリーズ」は2020年2月3日に3冊同時発売予定です。 pic.twitter.com/oRU22I6e6V
・ライフハッカー
生活やガジェットまわりの役立つ情報を配信。
iPadをセカンドモニターとして設定する方法|Sidecar | ライフハッカー[日本版]#LH #なるほど豆知識 https://t.co/2nj9cluO4L
— ライフハッカー[日本版] (@lifehackerjapan) January 29, 2020
・ギズモード
ガジェットに関する情報を配信。Amazonのセール情報なども知れる。
幻となったAppleのAirPowerが、miniになって登場するウワサ https://t.co/cVRKiTSWLn pic.twitter.com/1824uSFvsr
— ギズモード・ジャパン (@gizmodojapan) January 31, 2020
・アプリマーケティング研究所
定期的にイラストで若者の傾向などを紹介している。これぞマーケティング。
2019年に印象的だったスマホのトレンドをまとめました。
— アプリマーケティング研究所 (@appmarkelabo) January 7, 2020
1. 計画立てないイマ思考
2. 耳の暇と音声コンテンツ
3. 位置共有アプリ
4. 映え多様化
5. 情報多すぎ選択疲れ
6. 時間のコスパ感覚
7. スマホ時代の考察ドラマ
8. メルカリのバラバラ消費
9. ブランディングの民主化https://t.co/MubUtrJC8f pic.twitter.com/vQBf1b3dzS
・INSPI
世界中の広告にまつわるデザインなどを紹介している。思わず目に止まる広告が見れる。
ミニマルなデザインを追求していく昨今のマクドナルドの広告、最後に行き着く先やいかに。 pic.twitter.com/lfL91H0xVE
— INSPI(インスピ)|広告デザインとアイデアの教科書 (@inspi_com) January 31, 2020
・UNIQLO
ツイートのバナーのデザインなどが勉強になる。
\これでもう迷わない‼️/
— ユニクロ (@UNIQLO_JP) January 6, 2020
お出かけ前にチェック👀
季節&着用シーン別の「ヒートテック早見表」で、今日どれ着よう🤔❓というお悩みともさようなら👋この表を目安に、保温性能の異なる3つのヒートテックをうまく使い分けて、快適な毎日を🎵https://t.co/uweijN0qh1 pic.twitter.com/PuktQONEpb
・GU
ユニクロと同じく。
\来週の新着商品をいち早くご紹介🤩/
— GU(ジーユー) (@gu_global) January 31, 2020
1枚は持っておきたい羽織アイテム「ミリタリーシャツ」が登場💫
あなたの気になるのはどれ❓
投票は下のアンケートから🔽 pic.twitter.com/l05uDjxmJI
▷ デザイナー関連
・すぴかあやか さん
デザインを作るとき、要素が多いと配置に苦労します。いろんな解決法がありますが、例として3つ作ってみました。 pic.twitter.com/4TlDKMSfnI
— すぴかあやか/角田綾佳@キテレツ (@spicagraph) January 25, 2020
・Go Ando さん
データ視覚化のポイント3つ
— Go Ando / THE GUILD (@goando) May 8, 2018
1. 伝えたいメッセージを明確にする
2. データの大きさを表すには比較する
3. どういう形が一番メッセージを表現できるか考える#goando_datasketch pic.twitter.com/ZqrTYQz9sJ
・トミナガハルキ さん
illustratorとphotoshopってなにが違うの?と訊かれる事が時々ありますが、その時に見せるのがこれです。
— トミナガハルキ/デザイン事務所AMIX (@asobodesign) January 25, 2020
左がillustratorが得意な事。右はphotoshopが得意な事。
※ちなみに遊びで作った千葉県のエンブレムです。 pic.twitter.com/oFV6BWUnc4
・広野 萌 さん
パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめてみた。みんなで車輪の再発明やめよ〜!(以下ひとつずつ解説) pic.twitter.com/2S3PlFeQzC
— 広野 萌 (@hajipion) September 26, 2019
・わりえもん さん
ひとりひとりに最適な栄養素が入ったパーソナライズ液体サプリメント Fine のアートディレクション・パッケージデザインを担当しました。ひとの健康に寄り添う存在であれるように、生活に溶け込むような、クリーンかつ「色のない」デザインを施しました。 | https://t.co/gNctE2BBRt pic.twitter.com/QVBDmxI8sn
— わりえもん (@wariemon) May 7, 2019
・カトウヒカル さん
[色を選ぶのが苦手なあなたへ]
— カトウヒカル@1on1レッスンチャンネル (@design_hikaru) January 20, 2020
色をじっくり選ぶ暇が無いとき、最速で決める時短ワザ。
➀白い文字が置ける背景色を探す
➁[線]と[面]の2カ所で使う
➂文字に使う時は少し濃くする
赤・青・緑・茶・橙・紫・ピンクはこれでサクッと決めて、定時で帰ろー!
※黄色には使えません…! pic.twitter.com/PeDWVcR8Gg
・タカヤ・オオタ さん
東京オリンピック・パラリンピック、エンブレム製作者の野老氏によるポスターが素敵だな。シンボルを作った本人が1番良い見せ方を知っている感がある。https://t.co/rZ8rZbCWap pic.twitter.com/7cJOS5sYaa
— タカヤ・オオタ (@198Q) January 6, 2020
・上司ニシグチ さん
【デザイナーは手書きラフを描こう】
— 上司ニシグチ (@jyoushi_n) January 31, 2020
①仕上がりが早い
②思考が整理される
③物事の理解が深まる
④集中して取り組むことができる
⑤見返したときに思い出しやすくなる
⑥ノートとペンがあればどこでも始められる
相手に見せたときに「デザイナーとしての安心感」を与える事ができるのでオススメ! pic.twitter.com/AKr6OFVpQg
・コロ さん
#本日のイラレ
— コロ / イラレ職人 (@coro46) March 31, 2019
ふざけて作ったけど妙に評判いいので。2〜3分でそれっぽいロゴのつくりかたー。 pic.twitter.com/qyaGj7u0eA
・しぶみゃむ さん
ワープや複雑なアピアランスは使いません!
— しぶみゃむイラレのAI(愛)人* (@shibuyamiam) January 8, 2020
ヒロアカ風なロゴの作り方(*´ェ`*)
まずは下の段の部分から。#イラレ知恵袋#AdobeIllustrator愛 pic.twitter.com/V8NBaCr2RI
・ホリウチ ショウゴ さん
カロリーメイトの広告
— ホリウチ ショウゴ / SHOGO HORIUCHI (@syo_design) April 22, 2019
めちゃくちゃ上手いなーと思ったのが
「捕色の使い方」
紺色ブレザーの集団中に
捕色に近い黄色の箱を置くと
それだけでとにかく目立つので
小さいのに存在感が半端ない。
黄色を立たせるために
あえて学生達を地味な色にしてるのかなと勝手に想像。#世界が嫉妬するデザイン pic.twitter.com/B3aK7Wo68R
・長谷川哲士 さん
さ、ひっくり返そう。
— コッピー✏️長谷川哲士゛ (@aseetsu) December 31, 2019
西武そごうの正月広告がカッコイイhttps://t.co/t382HGkHKN pic.twitter.com/atIyobBYl7
・佐藤ねじ さん
赤ちゃんがいないと遊べないゲーム「0歳ボドゲ」の話です。https://t.co/pQGjwSEddK pic.twitter.com/85xRcyXgcY
— 佐藤ねじ🌲ブルーパドル (@sato_nezi) February 1, 2020
・カイシトモヤ さん
JAGDAが配布した「グラフィックデザイナーのための知的財産権ガイドブック」わずか64Pでクリエイターが知るべき著作権などポイント絞って弁護士がめっちゃ分かりやすく書いていて凄い。例えば、ロゴなど著作権譲渡前提の仕事をポートフォリオに載せて良いのかなど、あるあるの疑問にズバッと答えてる。 pic.twitter.com/PAZdBH5vM3
— カイシトモヤ (@room_composite) January 18, 2020
・amity sensei さん
配色の知識ない人も、
— iPad Pro@amity sensei (@amity_sensei) December 18, 2019
Procreateの「カラーハーモニー」が便利!
勝手に、補色や類似色を選んでくれるよー😍#procreate5 pic.twitter.com/HtlY6Prhly
・松下 絵梨 さん
益子さん(@takahiromashiko)が紹介された、スクロールすると小さくなるスティッキーヘッダーの作り方。「スクロールに位置を固定」にチェックを入れるのがポイント。「スクロール時に位置を固定」は、デザインモード・プロタイプモードどちらにもあります。#cssnite #adobexd pic.twitter.com/H4YozCmRqR
— Eri Matsushita 松下 絵梨 (@matsu_eri) February 8, 2020
-- YouTube --
──
・amity_sensei さん
・トミナガハルキ さん
・おとうさんスイッチ さん
・ダストマンTips さん
・PiXimperfect
・Yusuke Okawa さん
-- note --
──
▷ アカウント
▷ マガジン
-- フリー素材 --
──
▷ 写真
・Unsplash
世界中のハイクオリティの写真が無料で使える。
・O-DAN
世界中のフリー写真を横断検索できるサイト。
・ぱくたそ
汎用性の高い日本のフリー写真を集めたサイト。
・GIRLY DROP
女性向けのフリー素材を集めたサイト。
▷ アイコン
・ICOOON MONO
種類の豊富なアイコンを集めたサイト。
・シルエットイラスト
いろんなシーンで使える豊富なアイコンを集めたサイト。
・iconmonster
海外のおしゃれなアイコンを集めたサイト。
・Ikonate
アイコンのサイズや色をカスタマイズできるサイト。
・ICONSVG
こちらもカスタマイズができるサイト。
・SVG Backgrounds
背景に使えるパターンを生成できるサイト。
・SVG PATTERN MAKER
こちらもカスタマイズができるサイト。
・Neumorphism.io
話題の ”Neumorphism” というデザイントレンドが再現できるジェネレーター。
▷ イラスト
・Linustock
シンプルでおしゃれな線画イラストが使えるサイト。
・イラストダウンロード
シンプルで可愛いイラスト素材が豊富のサイト。
・リボンフリークス
リボンの装飾素材を集めたサイト。
・TOWN illust
町並みや建物のイラスト素材を集めたサイト。
・Bg-Pattrens
背景などに使えるおしゃれなパターンを集めたサイト。
・フキダシデザイン
デザインにアクセントをつけるフキダシだけを集めたサイト。
・manypixels
海外のおしゃれなイラストを集めたサイト。色の変更などが可能。
・unDraw
サービスの紹介などで使えそうなイラストを集めたサイト。
・Isometric
アイソメ(立体的)のイラストを集めたサイト。
・avataaars generator
パーツを選択するだけで、アバターイラストが作成できるサイト。
▷ 動画・映像
・Mixkit
高品質な動画・アニメーションがダウンロードできるサイト。
・covverr
Webサイトの背景などにも使用できる映像素材サイト。
・Mazwai
ハイクォリティの映像素材を集めたサイト。
-- ギャラリーサイト --
──
▷ PC向け
▷ スマホ向け
▷ 研究・その他
▷ UI・モーション
▷ 海外向け
-- クローム拡張機能 --
──
・FireShot
手軽に画面をスクショ。PDF書き出し可能。
・ColorZilla
画面の気になる色を抽出。
・CSS Paper
サイトの気になる要素のCSSを表示。
・Fonts Ninja
サイト内の気になるフォントを検索
・Pinterest 保存ボタン
Web上の画像を直接ピンタレストに保存。
・Responsive Viewer
いろんなデバイス幅にあわせた画面のチェックが可能。
・Search Preview
検索結果にプレビュー画像(サムネイル)を表示してくれる。
・グーグル翻訳
サイトに行かず手軽に翻訳が行える。
・ライナー(LINER)
Webサイトのテキストにハイライトをつけられる。
・Speed Dial 2(ブックマーク管理)
ブックマークをサムネイルで表示できて、視覚的に管理ができる。
-- 配色関連 --
──
-- フォント --
──
-- 書籍 --
──
▷ 参考書
▷ デザイン思考
▷ 生活・健康
▷ マンガ
◎ 更新について
* 2020/02/16 より
更新通知用として有料記事(100円)に設定いたしました。通知を受け取りたい方は購入して頂くとオススメです。(ブックマーク管理の特典付き)
定期的に情報を更新していこうと思います。良いサイトや情報を更新したり、新しいカテゴリーも追加できたらと思います。
ほかにデザインに役立つような情報やサイトがありましたら、コメント欄に書いていただけたら嬉しいです!😄
note や Twitter をフォローしていただくと、更新情報などを発信した際に受け取りやすくなるかと思います✨
☆ 有料特典 (ブックマーク管理)
記事内で紹介した情報を、ブックマーク管理ができる ”Speed Dial 2” を使って作成してみました。(メディアサイト系とほか一部)


Speed Dial 2 はブックマークを視覚的(サムネイル)に管理できる拡張機能です。上記のようにフォルダ分けや、整理整頓などの機能も豊富で使いやすいです。
PCでクロームをお使いの方は、拡張機能をインストールしてご自身で作成することも可能です。
以下の記事で詳しい導入方法が掲載されいてます。
いちいちURLを開いて登録するのが面倒な方は、私が作成したブックマークリストをお使いください。(コード化されたテキストをコピペするだけ)
* ここからは有料部分になります *
テキストファイルをダウンロードしていただき、テキストを全てコピー。
Speed Dial 2 のオプション画面を開き ”インポートとエクスポート” を選択。→ ”設定のインポート” をクリックして、テキストエリアに先程コピーしたコードをペースト。

”設定のインポート” をクリックして、以下の画面が表示されたら、”了解” にチェックをつけて、”続ける” を選択。しばらくするとインポートが完了されます。

クロームを更新して以下のリストが表示されたら完了です!

※もしうまくいかない方はコメントやツイッターのDMよりご連絡ください。
次回更新以降にテキストファイル(ブックマーク)も更新していきます✨
購読ありがとうございました!😊
いいなと思ったら応援しよう!
