今月で2020年も終わりとなります12月、WEBディレクターの皆さまいかがおすごしでしょうか。
WEBディレクターの方々におすすめな記事(2020年12月編)をご紹介します。
1. グラフ表示を簡単に実現する
![](https://labo.flap.jp/wp-content/uploads/2020/12/www.chartjs.org_.png)
グラフをきれいに表示することができるjsファイルになります。
数字をグラフとしてきれいにだしたいけど、都度コーディングするほどのリソースは、、、という場合の利用がイメージされますが、カスタマイズも豊富でかなり整った表示をしてくれるので、手っ取り早くとりあえずこれをいれてみて、そっからどうするか考えるというやり方でも使えます。
基本の棒グラフ、円グラフだけでなく、様々なグラフタイプに対応しているので、サンプルを見てるだけでもおもしろいですね。
![](https://labo.flap.jp/wp-content/uploads/cocoon-resources/blog-card-cache/10d18bb47b599b5569a0d21c56f77916.png)
2. Chart.jsのカラーをきれいに見せる
![](https://labo.flap.jp/wp-content/uploads/2020/12/nagix.hatenablog.com_entry_2018_11_26_183950.png)
さきほど紹介したChartjsは非常に使いやすくきれいではあるものの、グラフ内で表示する個々の項目の色を適当に設定してしまうと、それだけで台無し感が半端ないコンテンツになってしまうという問題があります。
それを解決するために、デザイナーをアサインしてもらってもいいのですが、そうではない解決方法もあります。
それがこのカラーパレット読み込みjsファイル。自分でカラーを指定しなくても、自動的にいい感じのカラーを割り当てて表示してくれます。
jsを読み込ませるだけで実行できるので、Chartjsと一緒にソース内に書き込んで使いましょう。
また、jsは使わないでこのカラーパレットのカラーだけ適宜参考にするという使い方も有効です。
3. Instagramの企業アカウントの情報まとめ
![](https://labo.flap.jp/wp-content/uploads/2020/12/webtan.impress.co_.jp_e_2017_12_19_27504-1.png)
2017年の記事になりますが、Instagramの企業アカウントを、業界別にまとめてフォロワー数などを記載してくれています。成功事例として取り上げられる有名なアカウントばかりで、この頃からすごかったんだなと。
また、2017年から今に至る過程でどれくらいユーザーが増えているのか?を知れる情報でもありまして、例えば、無印良品だとフォロワー数が、70万→259万人と3年で3倍以上に増加しています。個々の企業のがんばりもあると思いますが、インスタがそれだけたくさんの方に使われるようになったというのも言えると思います。
![](https://labo.flap.jp/wp-content/uploads/cocoon-resources/blog-card-cache/d8208e59b05d86533049341e548397fe.png)
4. PageSpeed Insightsの点数計算方法の説明
![](https://labo.flap.jp/wp-content/uploads/2020/12/qiita.com_miyanaga_items_d38124cdd64a1999fed9.png)
誰もがお世話になっている、GoogleのPageSpeed Insights。
ただ点数を示すだけでなく、悲しい点数であっても、ダメな点を指摘してくれるありがたいサービスですが、点数の向上を狙うだけであれば、指摘への対応をするしないはあまり関係ないというのがわかる記事になっています。
このあたりの知識が前提にあるかないかは関係各位の話をスムーズに進めるにあたって重要となってきますので、便利なサービス+点数の計算方法まで認識を合わせておくとよいでしょう。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UGFnZVNwZWVkJTIwSW5zaWdodHMlRTMlODElQUUlRTclODIlQjklRTYlOTUlQjAlRTMlODElQUYlRTMlODElQTklRTMlODElQUUlRTMlODIlODglRTMlODElODYlRTMlODElQUIlRTglQTglODglRTclQUUlOTclRTMlODElOTUlRTMlODIlOEMlRTMlODElQTYlRTMlODElODQlRTMlODIlOEIlRTMlODElOEIlRTMlODAlODIxMDAlRTclODIlQjklRTMlODIlOTIlRTMlODElQTglRTMlODIlOEIlRTMlODElOUYlRTMlODIlODElRTMlODElQUUlRTYlOUQlQTElRTQlQkIlQjYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWQ4YzU5NDlmMDZjNzJlNzQ0NWYwYWI2M2ZhZjc3MzE2&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtaXlhbmFnYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTRmYWQxYzNjMjI4MDk3MzM3YzgxN2Q3NzEzODM1N2Q&blend-x=142&blend-y=486&blend-mode=normal&s=6d1106649237388d1436973e6dd70c01)
5. mybest
![](https://labo.flap.jp/wp-content/uploads/2020/12/スクリーンショット-2020-12-08-13.40.37.png)
冷蔵庫やパソコンからiPhone用カラスフィルムといったものまで商品カテゴリごとで商品を検証し、評価した情報を提供しているWEBサイトになります。
普段の生活でも役に立つ(そもそもそのためのサービスなので)のですが、仕事においても、自分たちの作っている商品が、また、受託的な視点でも、この商品のWEBサイトを作りたいというときに、利用者がどういう視点で評価するのか、気にするのかを知れるサイトでもあります。
推しはこれだと思っいていたけど、そこよりもこっちのが利用者は気にしているんだといった知見を、例えばサイト作りに反映するといった形での活用ですね。
最近ヤフーのZホールディングスとの資本業務提携も発表され、これからがさらに楽しみです。
![](https://labo.flap.jp/wp-content/uploads/cocoon-resources/blog-card-cache/0c64164b20c117f6b4842e9bd0e4969c.png)
終わりに
以上、WEBディレクターの方におすすめする記事、2020年12月編お届けましました!
気になった記事がありましたら、ぜひ、チェックしてみてくださいね。