/WEBデザイナー必見!トレンドキャッチ&スキルUPできる素材・デザインサイト55tweetfacebookGoogle+はてブPocketLINE仕事WEBデザイナー必見!トレンドキャッチ&スキルUPできる素材・デザインサイト552017年6月12日2017年9月20日Tweet「男性の恋愛・仕事を応援するメディア・ナレソメ.com」に移転。デザインの領域はトレンドの移り変わりが激しい。昨日までの流行があっという間に過去のものになったり、または以前のトレンドに巡り巡って回帰することもある。筆者がトレンドのキャッチアップと同様に重視しているのが素材サイトだ。デザインは素材によってクオリティが大きく左右される。高品質かつWEBサイトに適した素材をどう発見するかが、デザイナー業務の効率化につながると言って良い。そこで、新人デザイナーからベテランに至るまで、社内・知人のデザイナー陣に以下の質問を投げ掛けてみた。いったデザインサイトを参考にしているか?どんな素材サイトを愛用しているか?最新、ヒントを得たデザイン記事はあるか?など。その結果から更に厳選した素材サイト・デザイン関連サイト55選を一挙にご紹介しよう。ここに、デザイナー10数人分の知見が溜まっているといっても過言ではない。以下のような構成でお届けしたい。作業を効率化!高品質&お手軽な素材サイトデザインのトレンドを実例で知る!高品質なサイトデザイン事例WEBデザイナー必見!お役立ちツールトレンドを深く掘下げる、デザイン系の注目記事ボリュームがあるため、それぞれの細かい説明は省いたところもあるが、一度は見て損がないものばかりをピックアップしたつもりだ。常に感性を新しく保ち続けるために、ぜひ参考にしてもらいたい。ちなみにWEBデザインのトレンド×ユーザビリティの問題は常に議論を呼ぶものだと思うが、そういった考え方のヒントになりそうな海外記事も取り上げている。このような記事も一緒に読まれています作業を効率化!高品質&お手軽な素材サイトWEB上には素材サイトが大量にあるが、その中でも、特に高品質・お手軽に使えると思う素材サイトをピックアップした。優れた素材サイトは、デザインのクオリティを高めてくれる。眺めているだけでもインスピレーションを刺激してくれるものだ。写真素材ベクター素材・画像素材の2パートに分けてご紹介したい。1.PEXELShttps://www.pexels.com/筆者が、写真素材サイトの中でかなりオススメだと思っているのがPEXELSだ。世界中の高品質な無料写真(CC0ライセンス)が揃っているストックフォトサービスで、UIもシンプルで使いやすい。日本語では素材が見つかりにくいが、英単語に翻訳して検索するとスムーズだ。Drophttp://girlydrop.com/女性向けのガーリーなデザインには非常に役立つ素材集。若い女の子の写真、雑貨やファッションの写真素材が無料でDLできる。クレジット不要、商用利用可なのも嬉しい。注意点として、女性の画像はほぼ同一人物のため、顔が映っていないものばかり(後ろ姿・横顔・寄りの写真)になる。3.Ramicahttp://www.ramica.net/こちらの「Ramica」も、ガーリーなデザインとの相性が良い素材がまとまっている。インスタで加工したような、色褪せたレトロ感のある画像を探している方には特におすすめだ。4.GATAGhttp://www.gatag.net/自然な風景や動物や人物などの高画質画像が大量にある素材サイト。4.0までバージョンがあり、全体から検索できないのが少し不便だが、それを補って余りある素材数がある。各写真に、評価が付いているため、素材を支持しているユーザーがどれだけ多いか分かる。迷ったときは一つの基準にもなるだろう。検索機能も日本語対応しているため、使いやすい素材サイトだ。5.CUPCAKEhttp://cupcake.nilssonlee.se/スウェーデン在住の写真家が撮った写真サイト。提供される写真素材は基本的に加工されたもので、雰囲気が良い背景写真が多い。加工無しでそのままWEBサイトに利用することができる点が魅力だ。SHOTShttp://realisticshots.com/小物やアイテム写真を探すときに重宝する素材サイト。毎週画像が追加されており、素材が増えているのもありがたい。ショップ・インテリア関連のWEBサイトを手掛ける方には非常に役立つだろう。7.shutterstockhttps://www.shutterstock.com/ja/有料だが、こちらのshutterstockも世界的に有名な写真・動画素材サイトだ。個人的に、PIXTA等より高品質なストックフォトが大量に見つかる。注意点として日本人素材は少ないオンデマンド購入はかなり割高になる:月額・年間契約だと安くなるという点がある。gettyimageshttp://www.istockphoto.com/jpshutterstock同様、有料だが大量の高品質ストックフォトがまとまっているのがgettyimagesが提供する「iStock」だ。日本人の人物素材はこちらの方が多いだろう。こちらも注意点があり、写真素材は「Essential(標準)」「Signature(高品質)」に分かれており、Signature素材をオンデマンド購入しようとすると単品で数千円はする。imagesほどではないが、定額プランに比べると割高感は否めない。cravehttp://fancycrave.com/他の素材サイトで、イメージ通りの画像が見つからない、少し変わった画像がほしいという場合はこちらをチェックしてみよう。カテゴリー分けがしっかりされており、高画質の風景・建築物写真を探しやすい。STOCKhttp://mmtstock.com/くすんだような雰囲気のある写真や、ナチュラルな自然の写真がほしいならオススメの素材サイト。海外の建物や自然の写真が充実している。Stock」は、その名の通り、高画質の自然写真を扱う素材サイト。幅広く使える風景素材がそろっており、WEBサイトの背景素材としてもオススメ。更新頻度も高いため、定期的にチェックしておきたい。Imageshttp://barnimages.com/海外の街並みや旅行系の素材を探しているならこちらがオススメだ。欧米諸国を旅行者目線でとらえた写真が多く、雰囲気の良い写真ばかりでどれにしようか目移りしてしまう。屋内の写真は少ないので要注意だ。ここからは、ベクター素材・画像素材サイトをご紹介しよう。コンセプトが一目で伝わるものは、サイト名のみ紹介させてもらうことにする。MONOhttp://icooon-mono.com/最近筆者がもっとも利用しているアイコン素材サイトがこちら。6,000個以上のモノクロアイコン素材を無料でダウンロードできる。アイコンは後から色変更もできるので柔軟性が高い。素材は商用利用OKだ。人の表情を扱ったアイコン素材はほとんどないのが辛いところだが、乗り物・建物・医療系などのアイコンはかなり充実している。Design」http://frames-design.com/19.背景パターン配布&作成サイト「Bg-Patterns」http://bg-patterns.com/20.吹き出し素材専門サイト「フキダシデザイン」http://fukidesign.com/フキダシ素材の基本的なものパターンはここで全て見つかるといっていいだろう。ファイル形式もai・png・jpgと揃っており使い勝手が良い。個人的に、素材名が番号になっているため、後で素材を使おうと思ったときにどれか分からないことがある。固有のファイル名をつけて保存することをおすすめする。illustration」花・植物イラスト素材集http://flode-design.com/23.シルエットデザインhttp://kage-design.com/リアルなベタ塗りのシルエット素材を探している場合、ここをまず見てみよう。商用利用可能かつ汎用性が高いシルエット素材が大量にそろっている。DESIGN」http://free-line-design.com/検索すると単発の素材は大量に見つかるが、意外とまとまっているのが少ない罫線素材。シンプルな罫線から「これ罫線か?」と思うようなユニークな素材まで手に入る。design」http://design-ec.com/28.やじるし素材天国「矢印デザイン」http://yajidesign.com/こちらも「シルエットデザイン」と同様、デザイナーが制作した大量の矢印素材を保管・公開しているサイト。ai・png・jpg形式でDLできる。ファイル名が特徴を表していない、という注意点も共通なので保存の際は気をつけよう。SOURCEShttp://www.sketchappsources.com/Sketchを使っている人にはこちらの無料素材サイトがオススメだ。一部有料なものもあるが、Sketchで使いやすい形式でクリエイターが素材を公開している。iOS、AndroidのUI素材も多数あるのも嬉しい。30.Freepikhttp://www.freepik.com/31.VectorStockhttps://www.vectorstock.com/デザインのトレンドを実例で知る!高品質なサイトデザイン※引用:http://www.acsl.co.jp/情報サイトや専門誌でWEBのトレンドを知ることはできても、実用に落とし込むのはなかなか難しい。今回ご紹介した中にもそのテーマを扱った記事があるが、トレンドを重視するか?UI/UXを重視するか?は難しいところで、独りよがりに陥ってしまうことも珍しくない。そのため、トレンドを取り入れたサイト実例を見て参考にするのがやはり確実だと思う。ここでは、筆者や複数のデザイナーが選定した、トレンドを取り入れた高品質なサイトデザインを紹介したい。筆者が考える今の日本のデザイントレンドには特にグラデーションアニメーション日本語ウェブフォントがあると思っており、そういった視点でチョイスをしている。あなたの制作のヒントになれば幸いだ。2017年のWEBデザインのトレンドについては下記の記事に充実してまとまっているため、まだ見ていない方は目を通してみてほしい。「2017年版・海外のWebデザインの13のトレンド」https://blog.hubspot.jp/web-design-trends-2017では、参考になったサイトデザインを紹介していきたい。32.funplexhttps://funplex.co.jp/現在のトレンドとして、グラデとアニメーション、そしてスクロールの時のアクションがあると思っている。このサイトは上記を高いクオリティで備えていると感じる。シンプルで、余白も丁寧に作りこまれており好印象。フォントにも作り手のこだわりが見て取れる。33.PIXMOBhttps://pixmob.com/en/アニメーションの線画とビビッドカラーも最近のトレンドだ。作りには粗さも感じるものの、全体的な色使いが美しいため目を引かれる。Alberthttp://www.aisforalbert.com/アニメーションのトレンドを取り入れたサイト。PCで見るとセパレートに近い作りになっているため、そのトレンドの影響も感じられる。細部まで作りこまれたアニメーションに好感を抱いた。OSAKAhttp://ringo-applepie.com/上記のサイトと同様、アニメーションを大きく使った手法。鮮やかな色使いと質感たっぷりのアニメーションが、焼きたての美味さとお洒落さをインパクト大にして伝えている。36.Medycoathttp://www.petline.co.jp/medycoat/写真・テキスト・背景画像の全体配置が整っており、バランスが良く見やすい。パララックスエフェクトを使用し画像に少し動きを出す手法で、犬の躍動感を表現しているのが好印象。37.B&Bhttp://bookandbeer.com/トレンドのアニメーションを多用するサイトが増える中、あえて文字のフォントや配置のみで構成された点が潔い。本屋らしい洗練されたお洒落さを表現しているデザインだ。TARThttps://cheesetart.com/フロアナビゲーションを設置し、フラットデザインでも「どこまで見ているか」を分かりやすくしている。チーズタルトという素材に合わせた配色で商品をオシャレにブランディングしている点が技ありだと思う。割れたタルトのカットも全体とリンクしている。39.LSCMhttp://www.littstar.co.jp/トレンドのアニメーションを使用しつつ、今や必須となってきた英語対応を併記する形でフラットデザインの中にバランスよく記載している。番外:すべり込み発表!昨日チェックした美麗サイトデザインここからは筆者が昨日チェックした中で、ぜひ紹介しておきたいサイトデザインをまとめた。説明は割愛させてもらうが、ぜひ時間がある人はサイトを訪れて見てほしい。SENDAIhttp://www.sendai-miyage.jp/WEBデザイナー必見!お役立ちツール&サービスWEBデザイナーにとって、紙媒体とは違って「閲覧環境・ユーザーによっても見え方が違う」のが面白いところでもあり、同時に難しいところだ。モバイルサイトが最速で表示されるように画像最適化したりと、気をつけるべき点は多い。これらの作業を手助けしてくれる愛用ツール・サービスをご紹介しよう。44.Googleモバイルサイト速度テストツールhttps://testmysite.withgoogle.com/intl/ja-jpGoogleが提供する、モバイルサイトの表示速度を計測するツール。筆者がモバイルサイトのチェックをする際は、このツールを使っている。モバイルサイトの表示速度が遅くなると、ユーザーの離脱・読了率を低下させる要因になってしまうため、必ずチェックしたい。45.Optimizilla:画像ロスレス圧縮ツールhttp://optimizilla.com/ja/サイトの表示スピードを大きく左右するのが画像サイズだ。jpg、pngのロスレス圧縮をしたい場合、オンラインイメージ最適化ツールが便利だ。「Tinypng(https://tinypng.com/)」も有名だが、個人的にはこちらの方が使い勝手に優れているためオススメだ。トレンドを深堀りする、デザイナー注目記事&メディアとはいえ、デザイントレンドの動向や優れた企業事例を知るのに、メディア記事は有効だ。定期的な情報収集先をして持っておくと、トレンド情報やフォント情報、サービスローンチの取りこぼしがなくなる。日ごろ情報収集に活用しているデザインメディアをピックアップした。2017」https://medium.muz.li/dangerous-design-trends-2017-c388ce9e735a海外メディアの記事だが「とりあえずデザイントレンドを追いかけることで陥る危険性」について警鐘を鳴らしている。2017年のデザイントレンドについて陥りがちな失敗OK事例NG事例が体系立ててまとめられており、非常に興味深い。簡単な英語なので一読の価値ありだ。plushttps://ferret-plus.com/50.haconiwa:女子クリエイターのためのライフスタイルつくりマガジンhttp://www.haconiwa-mag.com/51.Webクリエイターボックスhttp://www.webcreatorbox.com/52.コリスhttp://coliss.com/53.AWWWARDShttp://www.awwwards.com/54.dribbblehttps://dribbble.com/55.MUUUUU.ORGhttp://muuuuu.org/さいごにここまでご紹介した素材サイト・デザインサイトを一覧にまとめてみた。2017年冬以降のトレンドも随時追いかけていく予定だが、素材サイトについては常に新しいものがリリースされるわけではないため、今回ご紹介したサイトはブックマークしておくと数年役立つと思う。「この記事を人に教えたい!」と思ったらシェアをお願いします。reserved.wpDiscuz。