WEBデザイナー必見!トレンドキャッチ&スキルUPできる素材・デザインサイト55

WEBデザイナー必見!トレンドキャッチ&スキルUPできる素材・デザインサイト55

「男性の恋愛・仕事を応援するメディア・FIGONA」に移転。

デザインの領域はトレンドの移り変わりが激しい。

昨日までの流行があっという間に過去のものになったり、または以前のトレンドに巡り巡って回帰することもある。

そして筆者がトレンドのキャッチアップと同様に重視しているのが素材サイトだ。

デザインは素材によってクオリティが大きく左右される。

高品質かつWEBサイトに適した素材をどう発見するかが、デザイナー業務の効率化につながると言って良い。

そこで、新人デザイナーからベテランに至るまで、社内・知人のデザイナー陣に以下の質問を投げ掛けてみた。

現役デザイナーに聞いたおすすめのデザイン関連サイト

  • どういったデザインサイトを参考にしているか?
  • どんな素材サイトを愛用しているか?
  • 最新、ヒントを得たデザイン記事はあるか?

など。

その結果から更に厳選した素材サイト・デザイン関連サイト55選を一挙にご紹介しよう。

ここに、デザイナー10数人分の知見が溜まっているといっても過言ではない。

以下のような構成でお届けしたい。

  • 作業を効率化!高品質&お手軽な素材サイト
  • デザインのトレンドを実例で知る!高品質なサイトデザイン事例
  • WEBデザイナー必見!お役立ちツール
  • トレンドを深く掘下げる、デザイン系の注目記事

ボリュームがあるため、それぞれの細かい説明は省いたところもあるが、一度は見て損がないものばかりをピックアップしたつもりだ。

常に感性を新しく保ち続けるために、ぜひ参考にしてもらいたい。

ちなみにWEBデザインのトレンド×ユーザビリティの問題は常に議論を呼ぶものだと思うが、そういった考え方のヒントになりそうな海外記事も取り上げている。

では早速見ていこう。

目次

作業を効率化!高品質&お手軽な素材サイト

高品質&お手軽な素材サイト
WEB上には素材サイトが大量にあるが、その中でも、特に高品質・お手軽に使えると思う素材サイトをピックアップした。

優れた素材サイトは、デザインのクオリティを高めてくれる。

また、眺めているだけでもインスピレーションを刺激してくれるものだ。

  • 写真素材
  • ベクター素材・画像素材

の2パートに分けてご紹介したい。

1.PEXELS

PEXELS
https://www.pexels.com/

筆者が、写真素材サイトの中でかなりオススメだと思っているのがPEXELSだ。

世界中の高品質な無料写真(CC0ライセンス)が揃っているストックフォトサービスで、UIもシンプルで使いやすい。

日本語では素材が見つかりにくいが、英単語に翻訳して検索するとスムーズだ。

2.Girly Drop

Girly Drop
http://girlydrop.com/

女性向けのガーリーなデザインには非常に役立つ素材集。

若い女の子の写真、雑貨やファッションの写真素材が無料でDLできる。

クレジット不要、商用利用可なのも嬉しい。

注意点として、女性の画像はほぼ同一人物のため、顔が映っていないものばかり(後ろ姿・横顔・寄りの写真)になる。

3.Ramica

Ramica
http://www.ramica.net/

こちらの「Ramica」も、ガーリーなデザインとの相性が良い素材がまとまっている。

インスタで加工したような、色褪せたレトロ感のある画像を探している方には特におすすめだ。

4.GATAG

GATAG
http://www.gatag.net/

自然な風景や動物や人物などの高画質画像が大量にある素材サイト。

4.0までバージョンがあり、全体から検索できないのが少し不便だが、それを補って余りある素材数がある。

各写真に、評価が付いているため、素材を支持しているユーザーがどれだけ多いか分かる。迷ったときは一つの基準にもなるだろう。

検索機能も日本語対応しているため、使いやすい素材サイトだ。

5.CUPCAKE

CUPCAKE
http://cupcake.nilssonlee.se/

スウェーデン在住の写真家が撮った写真サイト。

提供される写真素材は基本的に加工されたもので、雰囲気が良い背景写真が多い。

加工無しでそのままWEBサイトに利用することができる点が魅力だ。

6.REALISTIC SHOTS

REALISTIC SHOTS
http://realisticshots.com/

小物やアイテム写真を探すときに重宝する素材サイト。

毎週画像が追加されており、素材が増えているのもありがたい。ショップ・インテリア関連のWEBサイトを手掛ける方には非常に役立つだろう。

7.shutterstock

shutterstock
https://www.shutterstock.com/ja/

有料だが、こちらのshutterstockも世界的に有名な写真・動画素材サイトだ。

個人的に、PIXTA等より高品質なストックフォトが大量に見つかる。

注意点として

  • 日本人素材は少ない
  • オンデマンド購入はかなり割高になる:月額・年間契約だと安くなる

という点がある。

8.iStock by gettyimages

iStock by gettyimages
http://www.istockphoto.com/jp

shutterstock同様、有料だが大量の高品質ストックフォトがまとまっているのがgettyimagesが提供する「iStock」だ。

日本人の人物素材はこちらの方が多いだろう。

こちらも注意点があり、写真素材は「Essential(標準)」「Signature(高品質)」に分かれており、Signature素材をオンデマンド購入しようとすると単品で数千円はする。

amana imagesほどではないが、定額プランに比べると割高感は否めない。

9.fancy crave

fancy crave
http://fancycrave.com/

他の素材サイトで、イメージ通りの画像が見つからない、少し変わった画像がほしいという場合はこちらをチェックしてみよう。

カテゴリー分けがしっかりされており、高画質の風景・建築物写真を探しやすい。

10.MMT STOCK

MMT STOCK
http://mmtstock.com/

くすんだような雰囲気のある写真や、ナチュラルな自然の写真がほしいならオススメの素材サイト。

海外の建物や自然の写真が充実している。

11.Free Nature Stock

Free Nature Stock
http://freenaturestock.com/

「Free Natural Stock」は、その名の通り、高画質の自然写真を扱う素材サイト。

幅広く使える風景素材がそろっており、WEBサイトの背景素材としてもオススメ。

更新頻度も高いため、定期的にチェックしておきたい。

12.Barn Images

Barn Images
http://barnimages.com/

海外の街並みや旅行系の素材を探しているならこちらがオススメだ。

欧米諸国を旅行者目線でとらえた写真が多く、雰囲気の良い写真ばかりでどれにしようか目移りしてしまう。

ただし、屋内の写真は少ないので要注意だ。

ここからは、ベクター素材・画像素材サイトをご紹介しよう。

コンセプトが一目で伝わるものは、サイト名のみ紹介させてもらうことにする。

13.ICOOON MONO

ICOOON MONO
http://icooon-mono.com/

最近筆者がもっとも利用しているアイコン素材サイトがこちら。6,000個以上のモノクロアイコン素材を無料でダウンロードできる。

もちろん、アイコンは後から色変更もできるので柔軟性が高い。素材は商用利用OKだ。

人の表情を扱ったアイコン素材はほとんどないのが辛いところだが、乗り物・建物・医療系などのアイコンはかなり充実している。

14.リボンフリークス – リボン素材天国

リボンフリークス
http://ribbon-freaks.com/

15.TOWN illust:街、建物系イラスト専門サイト

TOWN illust
http://town-illust.com/

16.ダ鳥獣ギ画 – 鳥獣戯画ベクター素材サイト

ダ鳥獣ギ画
http://www.chojugiga.com/

17.イベント向けの無料イラスト素材配布サイト「EVENTs Design」

EVENTs Design
http://event-pre.com/

18.デザイン枠、飾り罫素材専門サイト「Frame Design」

Frame Design
http://frames-design.com/

19.背景パターン配布&作成サイト「Bg-Patterns」

Bg-Patterns
http://bg-patterns.com/

20.吹き出し素材専門サイト「フキダシデザイン」

フキダシデザイン
http://fukidesign.com/

フキダシ素材の基本的なものパターンはここで全て見つかるといっていいだろう。

ファイル形式もai・png・jpgと揃っており使い勝手が良い。

個人的に、素材名が番号になっているため、後で素材を使おうと思ったときにどれか分からないことがある。

固有のファイル名をつけて保存することをおすすめする。

21.「Flode illustration」花・植物イラスト素材集

Flode illustration
http://flode-design.com/

23.シルエットデザイン

シルエットデザイン
http://kage-design.com/

リアルなベタ塗りのシルエット素材を探している場合、ここをまず見てみよう。

商用利用可能かつ汎用性が高いシルエット素材が大量にそろっている。

23.FLAT ICON DESIGN

FLAT ICON DESIGN
http://flat-icon-design.com/

24.human pictogram 2.0

human pictogram 2.0
http://pictogram2.com/

25.FLAT ICON

FLAT ICON
http://www.flaticon.com/

26.罫線・飾り罫ライン素材「FREE LINE DESIGN」

FREE LINE DESIGN
http://free-line-design.com/

検索すると単発の素材は大量に見つかるが、意外とまとまっているのが少ない罫線素材。

シンプルな罫線から「これ罫線か?」と思うようなユニークな素材まで手に入る。

27.ECサイト・ネットショップ素材「EC design」

EC design
http://design-ec.com/

28.やじるし素材天国「矢印デザイン」

矢印デザイン
http://yajidesign.com/

こちらも「シルエットデザイン」と同様、デザイナーが制作した大量の矢印素材を保管・公開しているサイト。

同じくai・png・jpg形式でDLできる。

ファイル名が特徴を表していない、という注意点も共通なので保存の際は気をつけよう。

29.Sketch APP SOURCES

Sketch APP SOURCES
http://www.sketchappsources.com/

Sketchを使っている人にはこちらの無料素材サイトがオススメだ。

一部有料なものもあるが、Sketchで使いやすい形式でクリエイターが素材を公開している。

iOS、AndroidのUI素材も多数あるのも嬉しい。

30.Freepik

Freepik
http://www.freepik.com/

31.VectorStock

VectorStock
https://www.vectorstock.com/

デザインのトレンドを実例で知る!高品質なサイトデザイン

高品質なサイトデザイン事例
※引用:http://www.acsl.co.jp/

情報サイトや専門誌でWEBのトレンドを知ることはできても、実用に落とし込むのはなかなか難しい。

今回ご紹介した中にもそのテーマを扱った記事があるが、

  • トレンドを重視するか?
  • UI/UXを重視するか?

は難しいところで、独りよがりに陥ってしまうことも珍しくない。

そのため、トレンドを取り入れたサイト実例を見て参考にするのがやはり確実だと思う。

ここでは、筆者や複数のデザイナーが選定した、トレンドを取り入れた高品質なサイトデザインを紹介したい。

筆者が考える今の日本のデザイントレンドには特に

  • グラデーション
  • アニメーション
  • 日本語ウェブフォント

があると思っており、そういった視点でチョイスをしている。

あなたの制作のヒントになれば幸いだ。

2017年のWEBデザインのトレンドについては下記の記事に充実してまとまっているため、まだ見ていない方は目を通してみてほしい。

「2017年版・海外のWebデザインの13のトレンド」
2017年版・海外のWebデザインの13のトレンド
https://blog.hubspot.jp/web-design-trends-2017

では、参考になったサイトデザインを紹介していきたい。

32.funplex

funplex
https://funplex.co.jp/

現在のトレンドとして、グラデとアニメーション、そしてスクロールの時のアクションがあると思っている。

このサイトは上記を高いクオリティで備えていると感じる。

シンプルで、余白も丁寧に作りこまれており好印象。フォントにも作り手のこだわりが見て取れる。

33.PIXMOB

PIXMOB
https://pixmob.com/en/

アニメーションの線画とビビッドカラーも最近のトレンドだ。

作りには粗さも感じるものの、全体的な色使いが美しいため目を引かれる。

34.A is for Albert

A is for Albert
http://www.aisforalbert.com/

アニメーションのトレンドを取り入れたサイト。PCで見るとセパレートに近い作りになっているため、そのトレンドの影響も感じられる。

A is for Albert2

  • ターゲット層が分かりやすい点
  • 細部まで作りこまれたアニメーション

に好感を抱いた。

35.RINGO LUCUA OSAKA

RINGO LUCUA OSAKA
http://ringo-applepie.com/

上記のサイトと同様、アニメーションを大きく使った手法。

鮮やかな色使いと質感たっぷりのアニメーションが、焼きたての美味さとお洒落さをインパクト大にして伝えている。

36.Medycoat

Medycoat
http://www.petline.co.jp/medycoat/

写真・テキスト・背景画像の全体配置が整っており、バランスが良く見やすい。

パララックスエフェクトを使用し画像に少し動きを出す手法で、犬の躍動感を表現しているのが好印象。

37.B&B

B&B
http://bookandbeer.com/

トレンドのアニメーションを多用するサイトが増える中、あえて文字のフォントや配置のみで構成された点が潔い。本屋らしい洗練されたお洒落さを表現しているデザインだ。

38.BAKE CHEESE TART

BAKE CHEESE TART
https://cheesetart.com/

フロアナビゲーションを設置し、フラットデザインでも「どこまで見ているか」を分かりやすくしている。

チーズタルトという素材に合わせた配色で商品をオシャレにブランディングしている点が技ありだと思う。

割れたタルトのカットも全体とリンクしている。

39.LSCM

LSCM
http://www.littstar.co.jp/

トレンドのアニメーションを使用しつつ、今や必須となってきた英語対応を併記する形でフラットデザインの中にバランスよく記載している。

番外:すべり込み発表!昨日チェックした美麗サイトデザイン

ここからは筆者が昨日チェックした中で、ぜひ紹介しておきたいサイトデザインをまとめた。

説明は割愛させてもらうが、ぜひ時間がある人はサイトを訪れて見てほしい。

40.FORH

FORH
http://forh.jp/

41.Garden Eight

Garden Eight
https://garden-eight.com/

42.DACCI

DACCI
http://www.dacci.co.jp/

43.MONO SENDAI

MONO SENDAI
http://www.sendai-miyage.jp/

WEBデザイナー必見!お役立ちツール&サービス

お役立ちツール&サービス
WEBデザイナーにとって、紙媒体とは違って「閲覧環境・ユーザーによっても見え方が違う」のが面白いところでもあり、同時に難しいところだ。

モバイルサイトが最速で表示されるように画像最適化したりと、気をつけるべき点は多い。

これらの作業を手助けしてくれる愛用ツール・サービスをご紹介しよう。

44.Googleモバイルサイト速度テストツール

Googleモバイルサイト速度テストツール
https://testmysite.withgoogle.com/intl/ja-jp

Googleが提供する、モバイルサイトの表示速度を計測するツール。

筆者がモバイルサイトのチェックをする際は、このツールを使っている。

モバイルサイトの表示速度が遅くなると、ユーザーの離脱・読了率を低下させる要因になってしまうため、必ずチェックしたい。

45.Optimizilla:画像ロスレス圧縮ツール

Optimizilla
http://optimizilla.com/ja/

サイトの表示スピードを大きく左右するのが画像サイズだ。

jpg、pngのロスレス圧縮をしたい場合、オンラインイメージ最適化ツールが便利だ。

「Tinypng(https://tinypng.com/)」も有名だが、個人的にはこちらの方が使い勝手に優れているためオススメだ。

トレンドを深堀りする、デザイナー注目記事&メディア

デザイナー注目記事&メディア
とはいえ、デザイントレンドの動向や優れた企業事例を知るのに、メディア記事は有効だ。

定期的な情報収集先をして持っておくと、トレンド情報やフォント情報、サービスローンチの取りこぼしがなくなる。

最後に、

  • 筆者が現在注目しているデザイン関連記事
  • 日ごろ情報収集に活用しているデザインメディア

をピックアップした。

46.「DANGEROUS DESIGN TRENDS 2017」

DANGEROUS DESIGN TRENDS 2017
https://medium.muz.li/dangerous-design-trends-2017-c388ce9e735a

海外メディアの記事だが「とりあえずデザイントレンドを追いかけることで陥る危険性」について警鐘を鳴らしている。

2017年のデザイントレンドについて

  • 陥りがちな失敗
  • OK事例
  • NG事例

が体系立ててまとめられており、非常に興味深い。簡単な英語なので一読の価値ありだ。

47.「CSSの引き出しを増やしておこう!最近見かけたスタイルシートのアイデア・テクニックのまとめ」

http://coliss.com/articles/build-websites/operation/css/awesome-css-techniques-2017-jun.html

48.UX MILK

UX MILK
http://uxmilk.jp/

49.ferret plus

ferret plus
https://ferret-plus.com/

50.haconiwa:女子クリエイターのためのライフスタイルつくりマガジン

haconiwa
http://www.haconiwa-mag.com/

51.Webクリエイターボックス

Webクリエイターボックス
http://www.webcreatorbox.com/

52.コリス

コリス
http://coliss.com/

53.AWWWARDS

AWWWARDS
http://www.awwwards.com/

54.dribbble

dribbble
https://dribbble.com/

55.MUUUUU.ORG

MUUUUU.ORG
http://muuuuu.org/

さいごに

ここまでご紹介した素材サイト・デザインサイトを一覧にまとめてみた。

2017年冬以降のトレンドも随時追いかけていく予定だが、素材サイトについては常に新しいものがリリースされるわけではないため、今回ご紹介したサイトはブックマークしておくと数年役立つと思う。


作業を効率化!高品質&お手軽な素材サイト(写真) PEXELS
Girly Drop
Ramica
GATAG
CUPCAKE
REALISTIC SHOTS
shutterstock
iStock by gettyimages
fancy crave
MMT STOCK
Free Nature Stock
Barn Images
作業を効率化!高品質&お手軽な素材サイト(ベクター・画像素材) ICOOON MONO
リボンフリークス
TOWN illust
ダ鳥獣ギ画
EVENTs Design
Frame Design
Bg-Patterns
フキダシデザイン
Flode illustration
シルエットデザイン
FLAT ICON DESIGN
human pictogram 2.0
FLAT ICON
FREE LINE DESIGN
EC design
矢印デザイン
Sketch APP SOURCES
Freepik
VectorStock
トレンドがわかるサイトデザイン事例 2017年版・海外のWebデザインの13のトレンド
funplex
PIXMOB
A is for Albert
RINGO LUCUA OSAKA
Medycoat
B&B
BAKE CHEESE TART
LSCM
FORH
Garden Eight
DACCI
MONO SENDAI
お役立ちツール&サービス モバイルサイト速度テストツール
Optimizilla
デザイナー注目記事&メディア DANGEROUS DESIGN TRENDS 2017
CSSの引き出しを増やしておこう!
UX MILK
ferret plus
haconiwa
Webクリエイターボックス
コリス
AWWWARDS
dribbble
MUUUUU.ORG

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です