NxWolrd 2016 Year in Review

  • Posted on
  • Category : Blog
NxWolrd 2016 Year in Review

もうすぐ2016年も終わりということで、今年当ブログで多くの方々に見ていただいたエントリーを紹介しつつ1年間を振り返ってみようと思います。

2016年の公開エントリー数

今年は去年とは違ってこれぐらい書くといった具体的な数での目標は立てず、書けそうなら書くというスタンスで1年間ブログを書いてきました。
ただ、結果的にこのエントリーや個人的なブックマーク代わりで書いているカテゴリー(Bookmarks)含めてではありますが、今年も「150」エントリーを公開することができ、3年連続で150以上のエントリーを公開することができました。
キッチリした目標は設定しないとはいえ、できればひと月10エントリーぐらいは書けたらぐらいには思っていたので、個人的には割と頑張れたなと思います。

来年は今年以上にアウトプットよりもインプットする方に時間を割きたいと思っているのと個人的に新しいことに挑戦しようと思っていたりもするので多少更新ペースが落ちるような気がしていますが、引き続きマイペースに更新していこうと思います。

今年たくさんの方々に見ていただいたエントリー TOP10

当ブログで今年公開したエントリーでたくさんの方々に見ていただいたTOP10です。
去年(NxWolrd 2015 Year in Review)に引き続き、今年も上位にはCSS関連のエントリーが多めでした。

背景にひと手間加えたい時に便利なスクリプト 10+

1.背景にひと手間加えたい時に便利なスクリプト 10+

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい…」という時に便利そうだと思うスクリプトをまとめているエントリーです。

バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました

2.バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました

TOP10で唯一のデザイン関連のエントリーです。
バナー制作時のフローやよく利用されていると思うレイアウトやデザインパターンの紹介、デザインに詰まったときに参考になるギャラリーなどを紹介しています。

CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10

3.CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10

画像は使用せずにCSSのみを使ってハンバーガーメニューアイコンの見栄えを作ったり、クリック・ホバー時のエフェクトも実装したものをなど全10種類紹介しています。

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

4.CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えを背景画像で表示させる方法を紹介したエントリーです。

CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10+

5.CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10+

可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトをまとめたエントリーです。
手書き風ボーダー・ステッチ装飾・ふわっと浮く・回転するボタンなど10種類以上紹介しています。

CSS:角丸のテーブルを作成する方法

6.CSS:角丸のテーブルを作成する方法

以前は何かと面倒だった角丸のテーブルを、CSSを使って簡単に実装できる方法を紹介しているエントリーです。

gulp:とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル

7.gulp:とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル

主にこれからgulpを使い始めよう(使い始めた)という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例を紹介しているエントリーです。

CSSのみで実装するシンプルなドロップダウンメニュー

8.CSSのみで実装するシンプルなドロップダウンメニュー

JavaScriptは使用せず、CSSのみで実装したシンプルなドロップダウンメニューのサンプルを全5種類紹介しています。
展開時のちょっとしたアニメーションなどについてもCSSを用いて実装しています。

ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ

9.ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ

transitiontransformなどを利用することで、これまでできなかったエフェクトやアニメーションがCSSを使って簡単に実装できるようになりました。
このエントリーでは、そういったCSSでちょっとした動きを付けたいときに参考になるようなデモやチュートリアルをまとめています。

フォント検索・ワイヤーフレーム化・グリッド表示など、Web制作時に便利なブックマークレット 15

10.フォント検索・ワイヤーフレーム化・グリッド表示など、Web制作時に便利なブックマークレット 15

Web制作時に便利なブックマークレットを紹介しているエントリーで、閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするなど全15種類紹介しています。

ちなみに、今年当ブログを閲覧してくれた方々が使用しているブラウザとして一番多かったのは去年に引き続きChromeで、あとはFirefox、Safari、IE、Edgeと続いていたのですが、ChromeはFirefoxの5倍以上と圧倒的に利用ユーザーが多かったです。
IEは去年に比べれば少なくなっていましたが、それでもまだ8や9でアクセスしている人も意外といるようでした。
また、モバイル環境からのアクセスは年々増加してるのもあって今年も去年より若干ではありますが増えており、iOSとAndroidでの比較では圧倒的にiOSが多かったです。

以上、今年当ブログで公開したエントリー数と多くの方々に見ていただいたエントリーを紹介してきましたが、今年はブログに関することだけでなく個人的な来年の目標や今年印象的だったことについても書いておこうと思います。

とりあえず試してみる

ブログや情報サイトなどを通じてほぼ毎日のように新たな技術や制作時に役立つ新しいツール・サービスなどを目にしていますが、今までは普段の業務ですぐに使わないと判断したら特にそれについて調べたり使ってみるといったことはせず、基本的にどうしても必要になったらとか時間ができたら使ってみるというスタンスでした。
あとは、単純に今の使い慣れた自分の制作環境やフローを崩すのに多少抵抗があったり…。

ただ、今年は実際に使ってみるともっと早く導入するべきだったと感じたり、いざ必要になったときにあまり理解していなかったせいで業務に支障をきたしたりなど、たまたまかもしれませんが今年は個人的にそう感じることが多かったです。
中には後々何らかの理由でそれが使わなく(使われなく)なって結果的に無駄に時間を使わずに済んだということももちろんありましたが、後回しにしたりすぐにやってみなかったことで後悔するよりはマシかなとも思ったので、来年はそういった新しいツールやサービスをはじめ、これまであまり必要としていなかったタイプの技術的なことだったとしても、少しでも気になったらとりあえず試してみるという感じでいきたいなと考えています。

今年は沢山の方々とお会いできました

これまでも勉強会やWebに関するちょっとしたイベントには参加してきたのですが、いつも特に誰とも接することもなくただセッションを見て帰るという感じだったので、今年は思い切って参加するだけでなく機会があれば何人かの方々と会ってお話しようと思っていました。
実際に今年は大きいイベントとしては「WordCamp Kansai」と「WordCamp Tokyo」に参加してきたのですが、普段からTwitterを通じてやりとりしていた方をはじめ、頻繁に利用させてもらっているサービスや定期的に読ませてもらっているブログを運営している方など、一度お会いしたと思っていた方々とお会いしたり少しですがお話する機会もあったりで、いろいろと勉強になったり沢山の刺激をもらえました。
また、中にはブログ見てるとかいつも更新を楽しみにしてるといったことを直接言ってくださる方もいてすごく嬉しかったです。

来年も様々なところで勉強会やイベントがあると思いますが、参加することで出会いがあったり刺激も沢山もらえるというのを今年はすごく感じたので、来年も参加できそうなものはできれば参加したいなと思います。

最後になりますが、来年もマイペースに更新していくと思いますので、よくわからないことを書いていたり間違った内容などある場合はどんどん突っ込んでもらいつつ見守ってもらえると嬉しいです。
今後もNxWolrdをよろしくお願いします :)

みなさま、よいお年を!

Back to Top

NxWolrd 2016 Year in Review

NxWolrd 2016 Year in Review

/ Blog

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。