フロントエンドエンジニアになりたい人の Webプログラミング入門

webのトレンドを追うためにインプットを絞ってみる

2020年4月27日

スポンサーリンク

マークアップエンジニアの独学をサポートします。

ARUTEGAの平尾です。

webのトレンドの流れはとても早いです。
デザインとエンジニアリングの両方のトレンドを追うとなるとそれはとても大変。
なおかつアウトプットし続けるなんてもっと大変。。

この記事はどうやってインプットしていいか悩んでいる方の参考になります。

私の場合はこれらを普段からインプットしています。

webデザイン
インタラクション
マーケ・ブランディング

これらに加えて、自分が興味あることを含めると100本近くのブログを購読しています。

でも、この三つを重点的にインプットしているのですが、ちょっと追い切らないので情報ソースを絞ろうと思います。
そして、絞った上で“グラフィックデザイン”も追加したいと思います。

これからwebデザイナーになる方に向けて、どのようなことをインプットすれば良いか一介のwebデザイナーの一人として、模範になならないけど参考になればと思います。

目次

webデザイン
インタラクション
webマーケティング・ブランディング
グラフィックデザイン
まとめ：インプットに溺れるとだめ

webデザイン

webデザインはFeedlyでブログをRSS登録しているのですが、更新が止まってしまっているブログもたくさん見受けれます。
なので、情報のインプットを下記に絞ります。

https://uxmilk.jp

UX MILKは国内外のUX情報をお届けする、全てのクリエイターのためのUXメディアです。デザイン、プログラミング、マーケティングなど、Webやアプリづくりにまつわる様々な情報を配信しています。

WEBマーケティングブログ

WEBマーケティングブログ

http://web-marketing.zako.org

WEBマーケティングブログは、WEB担当者やWEBが大好きな方々へ、旬な海外の情報を中心に消費者の立場から情報発信をするブログです。日々の「これはおもしろい。」をお届けします。

bagelee（ベーグリー）

bagelee (ベーグリー) - デザインと技術のおはなし

https://bagelee.com

プログラミングやデザインの最新情報、入門記事をお届けしています。初心者から経験者までわかりやすく、おいしい記事をご用意しています。

Web Design Inspiration S5-Style

【S5-Style】Webデザインギャラリー / Web Design Inspiration

https://bm.s5-style.com

ハイクオリティなWebデザインをブックマークしたWebデザインギャラリー。トレンド・業種・テイスト別にまとめた、Webデザイナーに役立つWebサイトのリンク集です。

SANKOU! | Webデザインギャラリー･参考サイト集

https://sankoudesign.com

Webデザイン制作の参考になる、ステキなWebサイト･LP(ランディングページ)･コンテンツページを集めたデザインギャラリー。いろいろな業種･テイストのデザインを更新中！

www.cssdesignawards.com

CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards

~~https://www.cssdesignawards.com~~

CSS Design Awards. Be inspired, Be inspiring. Submit your website to the world's best CSS awards for a chance to win Site of the Day, UI awards UX awards and more from a panel of 200+ international web designers and developers.

Awwwards - Website Awards - Best Web Design Trends

https://www.awwwards.com

Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.

インタラクション

インタラクションはデザインの一部なので、デザイン性を模範できるものをピックアップ。

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

http://photoshopvip.net

PhotoshopVIPは、世界中からあつめた優れたフリーフォントなどの無料素材や、フォトショップの使い方、最新デザインニュースをお届けするブログメディアです。

https://tympanus.net/codrops/

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.

codepen.io

Attention Required! | Cloudflare

~~https://codepen.io~~

webマーケティング・ブランディング

VISUAL SHIFT｜ビジュアルシフト

VISUAL SHIFT｜ビジュアルシフト | 戦略的なビジュアルでビジネスの課題を解決する...

https://visual-shift.jp

「VISUAL SHIFT」は株式会社アマナが運営するブログメディアです。ビジュアルやコンテンツ制作に携わる全てのビジネスパーソンに向けて、「伝わるコンテンツ」を生み出すために役立つノウハウやサービス情報を発信していきます。

ビートラックス (btrax) : freshtrax ブログ

ビートラックス (btrax) : freshtrax ブログ

https://blog.btrax.com/jp/

freshtraxはサンフランシスコに本社を構えるbtrax(ビートラックス)が最新のデザイン、テクノロジー、スタートアップに関する情報を毎週発信しているオウンドメディアです。

BACKYARD

BACKYARD

~~https://backyard.imjp.co.jp~~

BACKYARDは、デジタルマーケティングを行う株式会社アイ・エム・ジェイが、独自の知見や経験、最新のデジタル動向等をお届けするニュースメディアです。「デジタルマーケティング業界に従事する方の攻略本」となることを目指し、現場の裏側をご紹介していきます。

株式会社コムニコ

SNS運用のヒントが見つかるメディア We Love Social｜株式会社コムニコ

https://blog.comnico.jp/we-love-social

Twitter、Instagram、Facebook を中心に、SNS運用担当者のヒントになる情報を発信しています

マーケティングリサーチキャンプ|市場の旬を調査で切る！

マーケティングリサーチキャンプ|市場の旬を調査で切る！

https://marketing-rc.com

マーケティングリサーチキャンプでは旬なマーケティング情報を「リサーチ」という観点から切り取って、皆さんにお届けします。情報収集に、リサーチ活用の参考に、ぜひご活用ください。

https://goodpatch.com/blog/

Goodpatch Blogは株式会社グッドパッチが運営するブログです。主にUXUIデザインに関する情報をお届けします。他にもデザイン思考、デザインプロセス、プロトタイピング、FinTechデザインについてのノウハウや、Prott、ReDesignerなど自社サービスの紹介も行っています。

グラフィックデザイン

常識をそれたアーティスティックなものをピックアップ。
こういうもの見ていないと、枠にハマりすぎるから大切。

www.behance.net

Best of Behance

https://www.behance.net

Projects featured today by our curators

www.siteinspire.com

siteInspire - Web Design Inspiration

https://www.siteinspire.com

A CSS gallery and showcase of the best web design inspiration, featuring over 2,500 websites searchable by type, subject, and style.

まとめ：インプットに溺れるとだめ

毎日インプットしないといけないと思うけど、見ているだけでは何も見にはつかない。
なので、webデザインアーカイブサイトを見る、という行為に加えて、スクショを撮ってフォルダに管理するということをはじめました。

一年後の自分のスキルアップに期待！

ほなね