登録すべきブックマーク - デザイン編
デザイン学習するその前に！
こんにちは、オニビメイです。
デザインをしたことない方はデザインしようと思ったら
いきなりフォトショやイラレを開いてしまうのではないでしょうか。
それ、ちょっと待ってください。
デザインはある程度順序や定石が決まっています。それは先駆者たちがある程度Webや本に残してくれています。
本は買わないといけませんが、先駆者たちの情報をとりあえずブクマしてその後読み込むことはタダでできます。
まずはブックマークしましょう。そして、必要に応じて本を読んでみましょう。
とりあえず目を通しておくことにより、「何がわからないかわからない…」という状況に陥りにくくなると思います。
今回は、デザイン初心者が独学する際に役立つブックマーク「デザイン編」を紹介します。
マークアップ編については、また後日書く予定です。
ブックマークの簡単な使い方
今回ブラウザはchromeを使用する前提でお話しします。
アドレスバーの右の星マークを押すことでブックマークができます。
またブックマークはブックマークマネージャーから管理することができ、HTMLファイルでインポートエクスポートができます。
当サイトブックマークの採点の意味
星★はサイト、デザインの質ではなく、私がよく使うかどうかです。
ギャラリーサイト - おすすめブックマーク
デザインの参考を探す時に使います。
デザイナーさん以外にもデザインを発注しなければならない発注元さんも参考になると思います！
紙＆WEB↓
ピンタレスト ★★★
デザインの参考を探す時に使います。
アイディア探すSNS、質はピンキリだったり、無断転載する悪い人もいます。
WEB↓
Parts. - パーツ別Webデザイン集 ★★★
よく使う、本当によく使います
ECサイト･オンラインショップ | SANKOU! | Webデザインギャラリー･参考サイト集 ★★
新規開発はあまりしないから自分はあまり見ないです。
SANKOU! sp | スマホ向けのWebデザインギャラリー･参考サイト集 ★★
スマホのメインビューのデザイン
よくわからなくなるからその時使う
» ECサイト| 縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG ★
新規開発はあまりしないから自分はあまり見ないです。
ランディングページ（LP）集めました。 ★★★
オシャレなギャラリーサイトより、自分はこちらの方が実作業で使っている気がします。
優れたスマートフォンサイトデザイン集 - iPhoneデザインボックス ★
あんま見てなかったけどだいぶいいですねこれ、
スマホのメインビューデザインは毎回迷うのでその時に使用しようと思います！
小売・卸売 | 業界 | Webデザインギャラリー | Choicely ★
新規開発はあまりしないから自分はあまり見ないです。
BANNER LIBRARY ★★★
本当によく使います、ただ、おしゃれすぎる感じはあります。
バナー広場 ★★
今知ったけど親しみやすいデザインが多くてよさそう。
UI Pocket | アプリのUIデザインギャラリー ★★
有名企業のUIが一覧で見られます。大変重宝します、アプリデザインしたことないけど。。
UXArchive - Made by Waldo ★
大変美しいデザインで、良さそうだが、英語がわからなくてあんまり使ってない。
紙↓
パンフレット&チラシデザイン見本帳 ★★
結構よく見ますが、おしゃれすぎる感じはあります。
チラシ・広告・キャンペーン・クーポン情報満載｜シュフー Shufoo! ★★★
大変参考になります！
デザイン事務所さまの実績↓
「ブクマ登録！」というよりは「見てみてください！」という感じです。
こういったデザイン事務所さまの実績はとても参考になります。
ちなみに、飲食のポスターデザインするときは有名食品会社のパッケージが参考にすることがあります。
技術まとめサイト - おすすめブックマーク
基礎からデザインを勉強したいあなたに。
The Blog | Welcome to Adobe Blog
Adobe公式ブログ マジで最高なのだがあんまり知られていない気がする。
デザイン庁
デザインシステムのFigmaデータを見ることができる。
レイアウトデザインの視点を増やす 思考＆Tips
超オススメ。→作者様自身のまとめ デザインの視点・思考
デザイナー育成について｜広告制作会社｜たき工房
名古屋の大手広告制作会社のブログです。無料公開していいのですか？？というレベルです。
Blog Top | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
有名なデザイン事務所兼デザインスクールのブログです。
マナギャリー | デザイン研究所
tipsが中心で どちらかというとtwitter（現X）から見ることが多いです。
（あしらいをピンタレストで検索するのをやめてこっちを見るようにしたいね。。）
価格表記のフォント - 中原企画立案事務所
値組はよく出てくる割にあんまり考えられていない気がします。
フォント・アイコン - おすすめブックマーク
フォントには定石があります。最初のうちは好みではなくみんなが使ってるやつを使いましょう。いろいろなデザインを見てると使われているフォントって似通っているはずです。 お金があればモリサワが欲しいところです。
Adobe Fonts ★★★
必須
Browse Fonts - Google Fonts ★★★
必須
Material Symbols & Icons - Google Fonts ★★★
GoogleFontにはアイコンも用意されています。Font Awesomeよりこっちのが私は扱いやすいです。
Font Awesome ★★
アイコンといえばこれ、一般的に使われています
モリサワフォント ★
お金持ちはぜひ。。。
フォントの魅力をさらにひきだす「合成フォント」で和欧混植にチャレンジしよう（サンプルデータあり） ★★★
Adobe公式が出してる合成フォント（混植）の記事です。
下にあるサンプルファイルを開くと幸せになれます。
https://sankoufont.com/ ★★★
フォントを探すのに使います
Wordmark - Helps you choose fonts! ★
PCにインストールされているフォントをブラウザ上で一覧表示できるウェブサービス、便利そうだけどあまり使ってない。。
ストック - おすすめブックマーク
ストックは高い方が品質がいいです（あたりまえ体操）
Adobe Stock★★★（有料）
無料イラスト・フリー素材なら「イラストAC」★★★（無料）
写真素材なら「写真AC」無料（フリー）ダウンロードOK★★★（無料）
iStock（有料）★
ぱくたそ（無料）★
AdobeFirefly（生成AI 無料）★★
配色 - おすすめブックマーク
Adobe Color説明不要必須★★★
Happy Hues - Curated colors in context.★★★webデザインには最高
Colorable★文字と背景
原色大辞典★★★辞典です。和名もあってうれしい
COOL COLORS ★★★サルワカの人が運用してます
色のコントラストチェッカー★★★ユニバーサルデザインの時代です
最後に
いかがでしたでしょうか。
ネットによくあるAdobeツールの説明ではなく実務ベースで使えるサイトの説明をしてみたつもりです。
スクールなど私は行ったことないですが、もしツールの勉強をしたいという方はAdobe公式をよくみてみるのがおすすめです！
ブックマークの説明では色々と不足していると思いますので、
「ブックマーク - マークアップ」編、「デザイン手順（アトリビュート、デザインブリーフ）」編、「意外と知らない用語集」編「イラレフォトショの設定」編の記事を書きたいなーと思っています。
頑張って明るく勉強していきましょう！
この記事が気に入ったらサポートをしてみませんか？