デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援するパスファインディング・メディア「WPJ」がオープンしたのは2016年7月20日のこと。この半年間で公開した記事は400本あまり。HTML、JavaScript、UXデザイン、SEOなどのテクニカルな記事から、クリエイターへのインタビューまで、さまざまな記事を公開してきました。
オープン初年度によく読まれたのはどんな記事だったのか？ トップ20を紹介します。
1位■まだChrome使ってるの？ Web開発者専用ブラウザー「Blisk」に惚れた！
1位は、Web開発者向けの専用ブラウザー「Blisk」。レンダリングエンジンにBlinkを採用し、エンドユーザー向けの機能は最低限に、開発者向けの便利な機能を搭載したブラウザーです。国内ではほぼ無名のブラウザーでしたが、この記事がソーシャルで話題になり、その後、他のメディアでも紹介されるようになりました。2017年も新しいツールをどんどん紹介していきたいですね。
2位■「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選
「変態的 CSS トリック」（by Kite）というスライドをきっかけにこの夏、話題になったのが「変態的CSS」。海外では強者たちがCodePenにたくさんの「変態的CSS」を投稿して腕を競っています。その中から「これは」と思うものを編集部がピックアップして紹介しました。実用度はともかく、柔軟な発想と根気強さ、あとは気合があればここまでできるのかと驚くものばかりでした。
3位■エンジニアのデザインが10倍よくなる！「余白恐怖症」を克服する方法とは？
「デザインには余白が重要」とはよく言われることですが、具体的にどう余白を使うと効果的か、なぜ余白が大切なのかを実例を挙げながら解説した記事。この記事はSitePointのライセンス記事ですが、普遍的なデザイン原則に関する記事はソーシャルでも人気が高いので、2017年はオリジナル記事も企画したいと思っています。
4位■もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）
HTML5を書くにあたって最低限必要になるタグをまとめた、もっともシンプルなテンプレートを紹介する記事。実はオリジナルは2013年にSitePointで公開されたもので、今春、内容をアップデートしたのがこの記事。そのため、最近はあまり使わなくなってきたHTML shivの組み込みなども含まれていて、「2016年っぽくない」との声もいただきました。記事では1つ1つのコードの意味を解説していますので（前に挙げたHTML shivについても前提条件などの説明があります）、なぜそのコードが必要なのか、ぜひ確認しながら読んでもらえればと思います。
5位■ノンデザイナーがもっと知りたい！センスより大切なデザイン心理学のルール＋3つ
こちらもノンデザイナー向けのデザイン原則に関する記事。何年か前に「CTAボタンは緑色がいい」といの話が流行っていましたが、色に限らず、ある特定の条件下で成功した結果をそのまま真似しても、うまくいかないことがほとんど。検証、改善していくための仮説として、この記事の「原則」を持ち込んでみてはどうでしょうか。
6位■「安倍マリオ」で話題に！世界中でマリオがいかに愛されているかがわかるCSSまとめ
リオ五輪の閉会式に突然現れた、安倍マリオ。マリオってどれぐらい世界中に人気なんだろう？ ということをCodePenで探して紹介した記事です。そういえばずいぶんと話題になったのに、流行語大賞はノミネートすらされませんでしたね…。
7位■WordPressコアコントリビューターに聞く「ぼくのかんがえた最強の開発環境」
50本近く公開した WordPress関連記事の中で、ぶっちぎりの1位だったのがこちらの記事。内容は、仮想環境を使う、コマンドラインを使う、IDEを使う、コーディング規則をツールでチェックする、といったもの。Twitterではいろいろなコメント（もっといいツールがある、など）が寄せられ、議論を呼んだ記事でもありました。
8位■jQueryの次に学びたい！D3.jsはWebデザイナーの最高の武器になる
海外ではとても人気の高いJavaScriptライブラリー「D3.js」。今年は米大統領選の報道でデータビジュアライズが流行りましたが、2017年は日本でも利用は増えるのでしょうか。
9位■Slackだけじゃなかった！働き方を劇的に変える海外製7つのツール
コラボレーションツールの話題も多かった2016年。Slackは人気を通り越してすでに定番化していますが、それ以外にも便利なツールがいろいろまとまっています。
10位■UIデザイナーがSketchを使う理由と導入方法
人気デザインツール「Sketch」の入門記事の第1回。Standardの吉竹遼さんに現場の勘所を交えて解説してもらいました。本来はプレミアムメンバー限定コンテンツですが、 第2回までは無料開放しています。ぜひこの冬休みにどうぞ。
＃
11位以下はタイトルだけ、ざっと紹介します。
11位■JavaScriptエンジニアなら知ってるよね？ エラー処理のいい書き方、悪い書き方
12位■カッコいいグラフがむちゃくちゃ簡単に描ける！Chart.js 2.0がスゴい
13位■知ってる？Web開発者がJavaScriptでゲームを作るときのはじめの一歩
14位■えふしん「現場に必要なのは『フルスタック』より『デュアルスタック』エンジニア」
15位■UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと
16位■セミコロンは省略？人気スタイルガイドに学ぶJavaScriptのコーディング規則
17位■便利すぎてしびれた！あなたが知らないCSS関数トリック8選
18位■「いらすとや」だけじゃない！ Webデザインで使える無料イラスト素材サイト11選
19位■Webディレクターが知らないとマズい！Googleの注目プロジェクトPWAって何？
20位■ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール
こうして振り返ってみると、1位になったBliskの記事を除くと、JavaScriptの書き方や、デザイン原則など、定番ネタが多かった2016年。個人的にはもっと新しいツールの話題が上位に来るのかなと思っていたので、ちょっと意外でした。
2016年はWPJをご愛読いただき、ありがとうございました。2017年の更新は1月6日からの予定です。来年も定番ネタから最新技術・ツールの情報まで、デザイナー、エンジニア、マーケターのみなさんのお仕事に役立つ記事をお届けしたいと思います。どうぞよろしくお願いします。
