ネタ探しも仕事の内!フロントエンドのネタさらし!2017春の陣!

ネタ探しも仕事の内!フロントエンドのネタさらし!2017春の陣!

Shinya Okazawa

Shinya Okazawa

春ですね、いや、夏の匂いを感じる人もいることでしょう。
フロントエンド担当、ザワです。

今回は、フロントエンドエンジニアの私が日常的にチェックして情報を得たり、困ったちゃんの時にお世話になっている主なサイトをご紹介します。

フロントエンド系記事

CSS-TRICKS

CSS-TRICKS
https://css-tricks.com/

CSS関連といえばこのサイトではないでしょうか。サイト名もカッコイイですし。CSSでお困りの際に検索すると、大体ヒットしてきます。CSSのTips系の記事や、最新のプロパティに関する記事などが掲載されるので、フロントエンドならマストでチェックしておきたいサイトです。

HTML5Experts.jp

HTML5Experts.jp
https://html5experts.jp/

Web技術に関する最新動向、エキスパートによる見解などが見所のメディアサイトです。最新の技術に関してプロ中のプロ、いわゆるロープーの人たちがどのように技術について考えておられるのかが参考になります。「この技術、今回の案件で採用してみたいけど、不安だなぁ〜」という時にこのサイトに訪れたりしています。

ICS MEDIA

ICS MEDIA
https://ics.media/

フロントエンドエンジニアの方には説明不要なメディアサイトだと思いますが、載せておきます。各記事のクオリティが高く、Canvasなど、描画系のTipsやチュートリアル記事も多いので、よく訪れます。知らない専門用語や技術をここで初めて知って、肥やしにすることが多いです。

週間SVG

週間SVG
http://ssvvgg.net/

SVGについて詳細な日本語記事で、右に出るメディアサイトを知りません。もし他に知っている方がいればこっそり教えてください。案件でSVGで困ったちゃんの時にこのサイトで探すと大体あります。もしくは参考になり解決に繋がることがあります。

Codrops

Codrops
https://tympanus.net/codrops/

ホバー、ローダーなど演出のエフェクトまとめの記事がよく掲載されるので、ネタの宝庫として参考にさせていただいてます。ホバーひとつ取ってもパターンがたくさん用意してあったりするのでこんなこと出来るんだぁくらいの気持ちで見ても楽しいです。

HTML5 ROCKS

HTML5 ROCKS
https://www.html5rocks.com/ja/

Web関連の技術メディアサイトです。Googleさんprojectなので信頼感たっぷりです。トップエンジニアたちは何に目を向け、どんな実験的な試みを普段からしているのかが垣間見れます。

コリス

コリス
http://coliss.com/

こちらもWeb界隈のエンジニアには説明不要の技術系メディアサイトですね。技術ネタももちろんですが、最近発売された本や、おすすめの本を紹介していたりします。私もこちらの本の紹介記事を見て、本を購入したことが多々あります。日々チェックしておいて損はない、いや得しかないサイトです。

LIGブログ

LIGブログ
https://liginc.co.jp/

なんかすみません。自社を取り上げてしまいまして……でも困った時に検索すると、ヒットするんですよね。LIGのフロントエンドエンジニアの技術ブログを参考にすることは日常的によくあります。困ることとか注目することは大体似てますからね。

インスピレーション系記事

CREATIVE BLOQ

CREATIVE BLOQ
http://www.creativebloq.com/

「ART AND INSPIRATION」というコピーの通り、WEBだけでなく、幅広くデザインに関する記事が掲載されています。正直、内容までは読んでません。RSSリーダーに登録しておいて、記事タイトルのみ参考にしています。記事タイトルだけでも、「最近このキーワードよく見るなぁ」などと、海外のトレンドを押さえておく目的で利用しています。デザイナーさんとの会話のネタにもなりますよね。

ギャラリーサイト

S5-Style

S5-Style
http://bm.s5-style.com/

通称「S5(エスゴ)」。小さなアワードを獲るよりS5に掲載される方が価値を見出しているデザイナー、フロントエンドも多いはず。と思われているくらい、クオリティが高いサイトがまとめられています。検索フィルター機能もわかりやすく、カテゴリで探しやすい設計になっています。参考サイトを探すとなったら真っ先に訪れるサイトです。

アワードサイト

AWWWARDS

AWWWARDS
https://www.awwwards.com/

Web製作に携わるデザイナー、エンジニアであれば獲得したい勲章、それがAWWWARDSのSOTD(SITE OF THE DAY)、そしてThe FWAのFOTD(FWA OF THE DAY)の2大アワードだと思います。私も参考サイトを探す際に本サイト内で「WEBGL」などのキーワード検索をして探す場合が多いです。世界で評価されているサイト、今流行っているデザイン、UIやアニメーションはどんなものかを探るのに最適なサイトです。

The FWA

The FWA
https://thefwa.com/

上述したAWWWARDSとセットでいつも私がチェックしているサイトです。アワードサイトによって評価基準が様々だとは思いますが、結果的には世界で評価されているサイトとはどういったものなのか、自分なりに分析するために複数のアワードサイトを見ています。

CSSDesignAwards

CSSDesignAwards
http://www.cssdesignawards.com/

こちらも世界基準のアワードサイトです。サイトデザイン自体がイケてますよね。AWWWARDS、The FWA、CSSDesignAwardsをチェックしていれば、世界の有名なWebサイトを網羅していると言っても過言では無いと思っています。

まとめ

フロントエンド技術や流行の流れはとても、うん、とっても早いです。通勤の電車内など隙間時間を上手に活用して、インプットの時間を作り、素敵なアウトプットをしていきたいものですね。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

Webサイト・アプリケーション制作に従事。エンジニアとして主にフロントエンド領域を担当。

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL