logo
お知らせ

更新日

Webクリエイターボックスの2022年を振り返る

今年も残りあとわずか！一年間お世話になりました！毎年思いますが早いですね。という事で例年どおり、Webクリエイターボックスが今年1年どんな変貌を遂げたのか、そしてWebクリエイターボックス内でよく読んでもらった記事トップ10などを紹介しようと思います。いくつ覚えていただけてますかね？ :3

2022 年ハイライト

今年あった出来事です。Podcast の開始はこれまでのワークスタイルが変わる転換期でしたね！

アクセスの多かった記事 トップ 10

今年書いたものでアクセスの多かったものトップ 10。これまではデザインや CSS 関連の記事のアクセスが多かったのですが、今年は JavaScript 系の記事もちらほら。

1. モバイル幅で作成された Web サイトの特徴と作例

Web デザインのギャラリーサイトを眺めていると、主に日本国内でこういったレイアウトが増えてるなーと感じてまとめてみました。アクセスするユーザー層によってはアリかなと思います。

2. 素の JavaScript だけでアニメーションを実装する Web Animations API

CSS アニメーションの感覚で JavaScript で動きを実装できる Web Animations API。便利なわりにあまり広まっていないような気がしたので記事にしました。イベントなんかと組み合わせてあれこれできそう！

3. WordPress をヘッドレス CMS にして Next.js でブログを作成する方法とエラー対処法

Next.js でサイトを作る時に、WordPress サイトを移行させるのはかなりめんどくさそうだぞ？と思って調べていた時に出会った方法。エラーが多発したので、備忘録的に対処法も書きました。

4. 「かわいい！」が詰まったスイーツの国内 Web サイト

趣味やギフトにお菓子のサイトを見ることがちょこちょこあったのですが、そういえばかわいいデザインが多いよな？と思ってまとめました。記事を書きながらお腹が空いてきたのはいい思い出です。

5. 初学者向け！Web サイト制作の独学勉強のコツ

オンラインプログラミングスクールでメンターをしている私ですが、よく質問される内容のアンサー記事。私自身、学習していて意識していることなども言語化することで、なんだかスッキリ。

6. ダークモードに対応していない Web サイトを無理やりダークモードにする拡張

とにかく夜間はダークモードじゃないと画面が見えなくなってしまうので、必死に探して試した拡張のレビュー。今もここで紹介した拡張を使用中です。快適快適。

7. DeepL 翻訳で海外の Web サイト制作情報を読みあさろう！

Twitter で流れてきた DeepL 拡張機能の使い方を見て、自分でも試してみたレビュー記事。英語以外にも使えるのがまたいいですよね。

8. Vite + React で新規プロジェクトの開発環境を作ろう

2022 年は React デビューしよう！と 1 月から少しずつ勉強をはじめました。そして Vite と React で環境を作って、なにこれ便利！と思って記事にしました。動画も作ってみましたよ！

9. 少しのコードで実装可能な HTML 小技集

これまで当ブログ開設当初からちょこちょこ書いていた「少しのコードで実装可能な小技集」シリーズですが、そういえば CSS しか書いてないなと気づいて、HTML バージョンも書きました。いろいろできるようになっててびっくり。

10. CSS で画像をハーフトーン（網点）に加工する

CSS でアニメや漫画タッチにできないかと、あれこれ遊んでいてみつけた方法。なにげに掲載用のちょうど見栄えのいい画像を探すのに時間がかかった記憶。猫は正義ということですかね。

検索されたワード トップ 10

検索されたワードは相変わらず CSS 関連が多いですが、ここで初めて「vite react」と JavaScript の記事にたどり着くワードが。2022 年は React の学習に力を入れていて、あれこれ記事にしていたからでしょう。昨年に続き、10 年前に書いた「【一部閲覧注意】いろんな意味でインパクトありすぎる Web サイト 10」にたどり着く「やばいサイト」も健在です w

  1. flexbox
  2. css 縦書き
  3. flexbox チートシート
  4. css 角丸
  5. object-fit
  6. css 画像 トリミング
  7. border-radius
  8. vite react
  9. css 変数
  10. やばいサイト

ビジターの使用ブラウザー トップ 5

ここ数年伸び続けていた Chrome がついに失速。代わりに Safari、Edge が伸びてきました。Edge は Firefox を越して 3 位に。Safari は CSS の扱いが独自に進化しつつあるので、これからシェア数がどうなっていくのか要チェックですね。

  1. Chrome - 65.51% (-3.82)
  2. Safari - 21.72% (+3.27)
  3. Edge - 6.71% (+2.38)
  4. Firefox - 3.57% (-0.98)
  5. IE11 - 0.17% (-0.82)

Web クリエイターボックスの〇〇年を振り返る記事シリーズ

今後も Web クリエイターボックスをよろしくお願いします！