デザインアワード受賞作から読み解くWeb制作の技術トレンド傾向
Qlip（株式会社クリップ）のフロントエンドエンジニアの岡田です。
私たちは、多様なお客様（大手企業、中小企業、自治体、団体）と共に、Webサイト制作・リニューアル等を行なっています。
その中でトレンドを意識して制作する事を心がけています。
記事の概要について
昨今では数多くの技術が利用されてWebサイトが作られています。
代表的なところでWordPressが挙げられますが、その他にも様々なJavaScriptフレームワークや静的ジェネレーターを採用したWebサイトもよく見かけるようになりました。
本記事では、最新のWebサイトではどのような技術が多く採用されているのかを調べ、傾向を把握していきたいと思います。
調査方法
最新のトレンドを知るという事が1つの目的としてありますので、デザインアワード3サイトから各10サイトをピックアップし、Wappalyzerを用いて調査します。
※ツールを用いた調査ですので、若干の誤差が生じる可能性もございます。
【ピックアップについて】
・各サイトの最新10サイト
・Site of the Day以上を受賞したサイト
・重複するサイトは1サイト換算とする
・ノーコードツールを使用していると予測されるサイトは除く
・フレームワークまたは静的ジェネレーターに属さないサイトは、「その他」とする
【デザインアワードサイト】
・Awwwards
・The FWA
・CSS Design Awards
フレームワーク・静的ジェネレーターについて
調査の前に各フレームワーク・ジェネレーターなどの用語について簡単に紹介します。
JavaScriptフレームワークとは？
JavaScriptを使用してウェブアプリケーションやウェブサイトを構築するための基盤を提供するソフトウェアライブラリの事を指します。
代表的なものとして、以下のフレームワークが挙げられます。
・Vue.js : 軽量で使いやすいJavaScriptフレームワークで、ユーザーインターフェイスやシングルページアプリケーション（SPA）の構築に適している
・React：Facebookが開発したライブラリで、ユーザーインターフェイスを構築するために使用される
・Angular : Googleによって開発されたフルスタックのフレームワークで、大規模なシングルページアプリケーション（SPA）の構築に適している
・Svelte：他のフレームワークと異なり、コンパイラとして機能し、リアクティブなコンポーネントを事前にコンパイルして、実行時のオーバーヘッドを最小限に抑える事ができる
静的ジェネレーターとは？
動的なウェブページを生成する代わりに、事前に静的なHTMLファイルを生成するツールのことを指します。
代表的なものとして、以下が挙げられます。
・Astro：JavaScriptを最小限に抑え、ページ読み込みを高速化することを目指し、性能を重視して設計された静的サイトジェネレーター
・Next.js：Reactベースのフレームワークで、静的サイト生成（SSG）だけでなく、サーバーサイドレンダリング（SSR）等も実現できる静的ジェネレーター
・Nuxt.js：Vue.jsをベースにしたフレームワークで、アプリケーションの静的生成やサーバーサイドレンダリングを容易に行うことができる静的ジェネレーター
・Gatsby：Reactをベースにした静的サイトジェネレーターで、GraphQLを使用してデータを取得し、高速なサイト生成を実現できる静的ジェネレーター
各デザインアワードサイトからピックアップ
Awwwards
▼WordPress
▼Vue.js
▼Astro
▼Nuxt.js
▼Next.js
▼その他
The FWA
▼WordPress
▼Nuxt.js
▼Next.js
▼Vue.js
▼Astro
▼その他
CSS Design Awards
▼WordPress
▼Astro
▼Nuxt.js
▼Next.js
▼その他
調査結果
調査の結果それぞれの数と順位は、以下の通りでした。
【1位】その他 (11)
【2位】Next.js (6)
【3位】Nuxt.js、Astro (4)
【4位】WordPress (3)
【5位】Vue.js (2)
Next.jsが1位になると予想していましたが、意外なことに「その他」が一番多い結果となりました。
「その他」の区分けとしては、以下のものがありました。
・フレームワークを使用していない静的なHTML (9)
・lit-html (1)
・Express (1)
「その他」が多い背景として考えられることは、
・仕様上、フレームワークを用いる必要がなかった
・運用コストをあげたくなかった
・フレームワークの余分なコードでサイトが重たくなること避けたかった…等
上記のようなことが予想できます。
フレームワークは、多くの機能と良い開発体験が得られますが、運用コストが高い・余分なコードが含まれてしまう・オーバースペックである事があります。
状況によって静的なHTMLをベースに作成することも検討する方がよさそうです。
しかし、全体的に大きな差はなく昔から使われているWordPressから最近出
てきたAstroまで満遍なく使われている印象です。
合計30サイトを対象とした調査でしたが、大まかな傾向が掴めたと思います。
弊社も仕様や目的に合わせて技術を検討する機会が多く、これまでに行った制作の中でも今回の調査で出てきた技術を利用してきました。
・WordPress : コーポレートサイト等の機能性を充実させるサイトに採用
・Nuxt.js：状態管理が多く、クリエイティブ性の高いサイトに採用
・Astro：LP等の静的サイトに採用
今回の調査を元に今後も要件に沿った選定を心がけていきます。
おわりに
今回の調査を通じて、最新の利用技術情報についてキャッチアップできました。
調査対象としたサイトがデザインアワードを受賞したサイトだったので、比較的最新の技術が取り入れられている傾向もあったと感じています。
コーポレートサイトやランディングページなど一般的なWebサイトでは、まだまだWordPress等の馴染みのある技術がメジャーなのだと思います。
しかし案件特性ごとに最善な選択をするからこそ、より良いクリエティブができます。
これからもQlipは様々な側面を考慮して取捨選択を行なって制作していきます。
10周年を迎えたQlipでは、一緒に働くメンバーを募集しています。
また、プロジェクトを相談してみたいお客様はお気軽にご連絡ください。
-
公式ウェブサイト
採用ページ
この記事が気に入ったらサポートをしてみませんか？