見出し画像

【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新

ryota_funakoshi

こんにちはデザイナー社長の船越です！久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から

「どこから画像を引っ張ってくればいいかわからない😭」

「日々の情報収集どうすればいいの？🤔」

という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました！デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです！たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ！」というのがあればぜひコメントで教えてください！

日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉しいです！

僕が代表を務める東京フリーランスではwebデザイン、UIデザインと営業方法をオンラインで学習できるサービスを運営してます👍

1.デザイナーならこれは読むべきメディア

[Blog｜Goodpatch グッドパッチ]

[UX MILK]

[PhotoshopVIP | フォトショップやデザインの無料素材、ニュースをお届けするブログ]

[コリス]

[デザイン会社 ビートラックス: ブログ freshtrax]

[ブログ | 東京のWeb制作会社・ホームページ制作会社｜株式会社ベイジ｜baigie inc.]

[UI/UX & Web | Adobe Blog]

[STUDIO Blog]

デザインツールまとめサイト(20211004)

海外の有名なデザイナー探し(20211004)


[伝わるデザイン｜研究発表のユニバーサルデザイン]

2.デザインギャラリーサイト

▼LP、ネイティブアプリなど幅広く検索できる。他にも「ログイン画面」や「オンボーディング画面」などパターンごとにも検索できる

[Collect UI]

▼シャレオツなウェブサイト集。日本のものと海外のもの色々。

[81-web.com]

▼ネタに困ったらここでPinterest

▼ネイティブアプリUI集。有名なアプリだったらここで画面デザイン全部確認できるよ。

[Mobbin - Latest Mobile Design Patterns]

▼アプリアニメーション参考サイト

▼アニメーション

[UI Movement]

3.figmaの使い方

▼整列機能の使い方

[4-2. オブジェクトの整列 | UI/UXデザインツール『Figma』入門]

▼コンポーネント化機能の使い方

[3-4. コンポーネント化 | UI/UXデザインツール『Figma』入門]

4.配色

▼配色の原理

[デザインに関わるすべての人が知っておくべき色と配色の基本 | ベイジの社長ブログ]

▼補色の説明に使えるよ

[代表的な色同士の組合せ 補色とは - カラーコーディネートの基本]

▼コントラストについての解説

[WEBデザイナー必見！デザインにおけるコントラストの話 | SEO対策なら株式会社ペコプラ]

▼コントラストチェッカーサイト

[Colorable]

▼ペルソナごとの配色

[カテゴリー別配色アイデア100]

▼グラデーション集

[uiGradients - Beautiful colored gradients]

5.配置

[レイアウト]

[全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選 - LITERALLY]

[レイアウトデザインの視点を増やす 思考＆Tips｜ハラヒロシ｜note]

6.素材の加工方法とツール

▼画像の配置方法

[商業写真で首切りと串刺しがダメな理由]

▼画像軽量化

[Compress PNG Images Online]

▼人物画像の切り抜きツール(20211004)

▼人物写真の使い方

[商業写真で首切りと串刺しがダメな理由]

7.フォント

▼カーニングについて

[カーニングのプロ技を学ぶ！文字組みに必要な9つのテクニックまとめ - PhotoshopVIP]

▼ジャンプ率について

[【初心者向け】ジャンプ率を利用して効果的なデザインを作成しよう | ビジネスとIT活用に役立つ情報]

▼フォントの大きさ、余白の取り方

[8の倍数ルールでデザインする理由とメリット・デメリット | Yuya Kinoshita]

8.画像素材サイト

▼王道という感じの海外サイト。無料。

[Beautiful Free Images & Pictures | Unsplash]

▼日本人の素材はここ

[無料の写真素材はフリー素材のぱくたそ]

▼比較的安い価格で日本人の写真使うならここ

[写真素材・ストックフォト | 日本最大級の画像素材サイト - PIXTA]

▼女子向け写真素材サイト（数はあんまない）

[おしゃれなフリー写真素材 | GIRLY DROP(ガーリードロップ)]

▼モックアップデータいっぱい

[Mockup World | The best free Mockups from the Web]

▼アイコン素材

[Flaticon, the largest database of free vector icons]

▼カラー変えられるイラスト(20211004)

▼著作権フリーになったアート素材(20211004)

▼マテリアルアイコン。SVGで全部ダウンロードできるよ

[Material Icons]

▼幾何学的な背景生成ツール(20211004)

▼シンプルでポップな背景自動生成ツール(20211004)

▼無料アイコン素材(20211004)

▼参考例いっぱい

[Design notes]

9.UX

▼5段階モデルについて。とりあえずの基本的な話です。

[UXの5段階モデルにおける各段階での具体的なデザイン手法とは？｜Blog｜Goodpatch グッドパッチ]

▼英語ですが良質なUX情報が得られるイケてるサイト

[UX Movement: User experience design articles]

10.EC

11.LPO

[Parts. - SaaS/コーポレートサイトのパーツ別Webデザイン集]

[縦長LPはコンバージョンに寄与するのか？BtoBにおけるランディングページ(LP)のベストプラクティスに関する調査｜WACUL TECHNOLOGY & MARKETING LAB | 株式会社WACUL]

[「研究レポート」記事一覧｜WACUL TECHNOLOGY & MARKETING LAB | 株式会社WACUL]

[100サイト以上のSaaS型サービスのランディングページを分析した結果（海外記事）]

[スマートフォン版ランディングページ制作のポイント | lp制作・改善のコンバージョンラボ]

12.見た方がいいサービスサイト👀

[The Okura Tokyo](https://theokuratokyo.jp/)

[採用情報 │ 株式会社 FiNC Technologies（フィンクテクノロジーズ）]

[その仕事、Slack で。]

[乗りたいときに、確かに、つかまる。｜タクシー配車アプリ]

[オンライン営業システム「ベルフェイス」とは｜ベルフェイス（bellFace） - チームで売上を最大化する国内No.1のオンライン営業システム]

https://bell-face.com/reason/

[SmartHR（スマートHR）｜シェアNo.1のクラウド人事労務ソフト]

[業種別効く！シリーズ｜サイボウズのグループウェアは税理士・会計士のしごとに効く！]

[【28件】SaaS LP｜おすすめの画像 | Lp デザイン, Webデザイン, マーケティングオートメーション]

[Chatwork | ビジネスコミュニケーションをこれ一つで]


[CE（カスタマーエンゲージメント）プラットフォームRepro（リプロ）]

[Sansan - 法人向けクラウド名刺管理サービス]

[スピードと効率で採用を強くする | HRMOS（ハーモス）採用]

[経費精算システム「マネーフォワード クラウド経費」

[タスク管理、ファイル共有もできるプロジェクト管理ツールBacklog]

[Uber プラットフォームの詳細 | Uber]

[インターネットビジネスのためのオンライン決済処理 - Stripe]

[AWA - 音楽ストリーミングサービス｜ギガを使わず『7,000万曲』以上の音楽が聴き放題！無料でも楽しめる！]

13.おすすめの書籍📕

UX初学者向け売れるデザインとはなんなのか全くの未経験でも理解できるような内容で説明してくれます。


UX研究の第一人者の安藤先生の本。デザイン勉強するために大学に行きたいかも！という人は読んでみて欲しい一冊。けっこう学術的で難しいかも…


心理学を使ったデザインのテクニックが学べる。なぜ人は隅の席に座るのか、人はなぜイケメンが好きなのか学術的に絶対に変わらない生物学的な心理を解説してくれます。


ユーザビリティーのお話。読みやすいテキストとか


心理学で最も著名なダンアリエリー氏の一番売れている本　人は合理的に全く行動しないことを再認識できて、ユーザーがいかにコントロールしづらいか理由がわかります。


デザインは一度作ったら終わりではありません。市場や流行りに合わせて常日頃改善する必要があります。リーン


他にも「結局よはく」「なるほどデザイン」など有名な書籍はありますが紙媒体よりな本のため今回は割愛しています。

14.息抜き🌬

▼カーニング(余白調整)するゲーム

[Kern Type, the kerning game]

▼神ゲー

[User Inyerface - A worst-practice UI experiment]

15.contributer


この記事が気に入ったらサポートをしてみませんか？