Web・UIデザイナーの私が壁にぶち当たるたびに更新してる素材・情報源をまとめてみた
こんにちは。デザイナー上司のオオクマ🐻です。
毎年のように何かしら壁にぶち当たってるデザイナーです。
皆さんは、壁にぶち当たっとき何されてますか❓
いろいろあると思いますが、その中で一つあるとしたら、素材と情報源のアップデートではないでしょうか。
センスを高めてくれる素材や、自分の知覚・視覚を拡張してくれる情報源に出会えれば、今よりいいデザインができます。
4月に入り、また壁が見えてきて整理したので、共有したいと思います。
[デザイン]全般参考💡
とりあえず、困ったらこのあたりからアイデアを探し。
頼りすぎるとパクリや既視感につながるので要注意。
多角的な視点持つためにも他の情報源も使う。
ググるまたは、
違う視点で見たいときは
・FLYER ARCHIVE JP
・bookma(レスポンシブ）
・RWD JP（レスポンシブ）
・LP参考
[デザイン]アプリ参考📱
基本的には、日常で気になったアプリは入れて試してます。やっぱ体験が一番情報量多いので！
[デザイン]海外トレンド参考🌍
英語圏のがデザインは進んでいるので、日本のサイトばかり見てないで、海外の新しいものもよく見てます。日本語サイトに落とし込むとき、いつも悩んでます😅
・Behance（dribbbleとかぶるしあまり見ない）
・Figma Community（dribbbleとかぶるしあまり見ない）
[デザイン]UI（OSガイドライン）📱
UIデザインやる上で、OSのUIは基準になるので読んどく。
といいつつ、まだ読めてない、、、
[デザイン]アニメーション参考
[デザイン]その他参考
[素材]全般🖼
コスパ最強、とりあえず困ったらここ。
[素材]アイコン🖼
アイコンならflaticon。
Icooon Monoはダサいので、ダサさ出すとき以外は絶対使わない。
その他
・アニメーションアイコン1
・HTMLアニメーションアイコン
[素材]写真🖼
とりあえず、Adobe StockみてダメならshutterstockかiStock見る。
CG系やテクスチャならfreepikでも結構ある。
・[無料]PEXELS
・[有料]shutterstock
・[有料]iStock
・[有料]amana
※PIXTAや写真AC、ぱくたそはクオリティがバラバラなので使用を控えてます。
[素材]テクスチャ🖼
[素材]パターン🖼
[素材]イラスト🖼
イラスト系は、数年でトレンドが馴染んだ感がある。
フラット系か、アイソメトリックか、なるほど系か。一般受けしやすいのは、断然なるほど系！
フラット系
企業によっては受け入れられてない感もある
・unDraw（フラット系）
・Humaaans（フラット系）
・manypixels（フラット系）
・pixeltrue（フラット系）
・Illustration XYZ（フラット系）
・DrawKit（フラット系）
・IRA Design（フラット系グラデ）
・OUCH（フラット系ポップ）
アイソメトリック
・freepik
なるほど系（この名称でいいのか？？？）
・Loose Drawing（なるほど系？）
・ちょうどいいイラスト（なるほど系？）
・ソコスト（なるほど系？）
その他
・Open Peeps（アメコミ系）
・Open Doodles（手書き系）
・絵文字
・クラシックアート
・3Dキャラクター
※イラストACはクオリティがバラバラなので使用を控えてます。
※イラストやはyoutuberやテレビが使いすぎて既視感が強いので控えてます。
[素材]動画🖼
まだ、手を出せてなくて気になってる分野です。
[素材]3D🖼
近年、WebGLで3Dを動かしているサイトをよく見かけますね。
まだ、手を出せてなくて気になってる分野です。
・PIXELSQUID
・isometriclove（アイソメトリック、ポリゴン3D）
・Design Connected
・Dimensiva
・Toy Faces（顔）
・Adobe Stock 3Dアセット
※読みきれてないので後で読む
※Adobe Dimensionが気になっている。
[素材]サムネイル🖼
[素材]フォント🖼
Webフォント使いたいって言ったらとりあえず、Google font。ただ、クオリティがイマイチなものもあるので、他も探してる。
フォントは、デザイナーのもう一つの武器。
デザインの大半が文字だから、フォント選びは超重要。
・Adobe font
・my fonts
・dafont
※フォント管理は、rightfont5使ってます。
[ツールとトレンド]デザイン
・比率計算
・グリッド計算
・文字数計算
・差分チェック
・配色(Adobe Color)
・COOLORS
・Contrast（コントラスト比チェック）
・Alfred
※計算系は覚えて、暗算かAlfredの計算機使うことが多いです
・Adobe Bridge（素材管理）
・Eagle（参考画像・動画収集）
・画面シェア率
・Apple製品画面サイズ
[ツールとトレンド]コーディング
・OGP確認（Facebook）
・OGP確認（Twitter）
・OGP確認（LINE、デバッグあるのか）
・PageMap（Google検索結果）
・Can I use（ブラウザ対応確認）
・ファビコン作成（もう時代遅れな気もするが、、、）
・HTMLエラーチェッカー
・構造化データテストツール（Google）
・Google Search Console（Google）
・Flexboxテスト
・iOSフォント確認
[ツールとトレンド]実装
[ツールとトレンド]分析
あまりやってないのですが、興味あるのでまとめてみました。
・similarweb（競合分析）
・Keywordmap
・ディレクトリマップツール
・AIアナリスト
・UserHeat（ヒートマップ）
・fullstory（ユーザー行動分析）
・Googleオプティマイズ（ABテスト）
・PageSpeed Insights（Google）
・Test My Site（Google 速度改善）
・Smallseotools（類似画像調査）
トレンドワード
HTMLとCSSだけのコーディング時代が終わりつつあると感じてます。デザインは、よりシンプルになり美的センスを求められるようになってきていると感じてます。
技術系トレンド
・遅延ロード（当たり前になりつつある）
・SVGアイコン（当たり前になりつつある）
・パララックスアニメーション（当たり前になりつつある）
・レスポンシブ（PC/SPは古い、これからはフレキシブルに）
・モバイルファースト（SPからPCの順）
・Webフォント（日本語も充実してきた）
・トランジション
・AMP対応（これ落ち目かな？）
・schema.org（リッチな検索結果）
・WebGL（3D、最近めっちゃ見る）
・LINE LIFF
・SPA
・aws
・Vue（もうメジャーですね）
・チャットUI（顧客体験を高めたいなら）
デザイントレンド
・モバイルファースト（PCが1カラムになってきてる）
・ブロークングリッド
・ゴーストボタン
・3Dグラフィック
・ベクターグラフィック
・ヒーローイメージ
・スプリットレイアウト
・フルスクリーンレイアウト
・カードレイアウト
・デュオトーン
・WEBブルータリズム
ちょっと古いけどこれ読んどけばここ数年のトレンド大体わかります
[情報源]WEBデザイナー全般
自分は、FacebookやTwitterとかSNSで流れてくるときに見たりしてるので、フォローしたりしてます。RSSリーダーに登録して読むのもありですね。
[情報源]違う軸がほしいなら
[情報源]海外の情報源
日本は、英語学習遅れてるのか、情報が遅く、
結果、デザイントレンドも遅れているので、
読める人は読んだほうがいい、自分は読めないが、、、
[情報源]マーケティング
[情報源]経済
ある程度、デザインやってると壁にぶち当たる。
マネージメントやビジネスに目を向けるなら、経済ニュース見るのも頭の体操になる。
[情報源]自己啓発本✗、実用本のみ
自己啓発本は、いくつか読んだが意味がない。
実践するには抽象的だし、その人の経験談になってるケースが多く真似できない。買うのは、実用本のみにしようと心がけてます。
[情報源]身近な人
先輩や社長など自分より上のレイヤーの話ができる人たちの情報も重要、また他業種や仕事外のプライベートの友人や家族の話はあたらいいアイデアのきっかけになったりも。
おわりに
アップデートしようと探していたら、今まで知らなかったサイトがたくさん出てきて、整理が追いついてないです。多すぎるので仕事しながら実際に見るサイトのみに整理していきたいと思います。
この情報が少しでもみなさんのお役に立つことを願いつつ…全然進んでいないお仕事に戻りたいと思います。
では、また🐻
この記事が気に入ったらサポートをしてみませんか？