2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。
素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。
本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。
話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。
この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。
整理したカテゴリは以下の通り。
Web制作向け便利ツール・素材リスト
デザインやグラフィック制作に役立つ便利ツールも一緒にいかがでしょう。
サクサク爆速で作業をこなす最新ツール、素材まとめ
Web便利ツール
HTML・CSSの知識は不要。デザインを調整するだけで、お好みのパーツをサイトに取り入れることができるスニペット集。現在、252件。
ボタンやローディング、アコーディオン、FAQなど、UIパーツごとに分類されており、プレビュー機能も便利。
CSSをコピペするだけで実装できる、およそ100種類のリボンデザインが揃ったライブラリ。
div要素ひとつで作成でき、ありとあらゆるスタイルを手軽に表現できて便利。
次世代のグラデーションとして呼び声の高い、OKLCHカラーを利用したグラデーション作成ツール。UIデザイン向けプリセットも豊富で、だれでも簡単にカスタマイズできます。
イージング関数をつかえば、より実生活での動きに近いアニメーションを表現できます。
このページは、各イージングのサンプルデモや使い方を詳しく解説したガイドとして活用できます。
Material Design for Web Components
Material 3デザインシステムを使用したWebコンポーネント。v1.0ではボタンやチェックボックス、テキストフィールドなどを含む19のUIコンポーネントを収録。
プロフェッショナル向けに構築された人気JavaScriptアニメーションライブラリがリブランディングし、より親しみやすいデザインに。より詳しい使い方ドキュメンテーションも公開中。
ブラウザサイズの変化に合わせて、文字サイズも流動的に変化するCSS Clamp計算ツール。お好みの文字サイズを決めるだけで、面倒な作業もありません。
TailwindCSSを使用して、お好みの色の補色を簡単に見つけることができるオンラインツールです。
色が決まっていないときは、スペースキーを押すとランダムなカラーパレットを生成できます。Fimgaプラグインあり。
画像やロゴをアップロードするだけで、無料でファビコンを生成してくれるツール。ファイル形式にも豊富に対応していて、とにかく手軽。
Web制作の「あったらいいな」的な機能が、ずらり揃った便利ツール。RGBからHEXカラーの変換や、IPを調べたり、画像ファイル形式の変換、パスワード生成など。
Sizzy — The browser for web developers
ウェブ開発者のためのブラウザ。必要なツールはすべて1か所に集まり、レスポンシブデザインも楽々、コンテキストの切り替えも不要です。
スクリーンショットをコード (HTML/Tailwind CSS、React、Vue、Bootstrap) に変換できるアプリ。GPT-4 Vision を使用してコードを生成し、DALL-E 3 を使用して同様の画像を生成します。
Bunny Fonts | Explore Faster & GDPR friendly Fonts
ユーザーのプライバシーを第一に考え、CDNを使用しているため高速。GoogleのフォントAPIと互換性があるため、切り替えも簡単。
CSSフレームワーク・デザインシステム
RippleUI | TailwindCSS Components
モダンなインターフェースを構築するためのコンポーネントとユーティリティのコレクション。Tailwind CSSの上に構築されています。
実際に製品のユーザーインターフェース開発に使われているデザインシステムで、オープンソースによる公開。
デザイン設計の原則やサンプルと共に、25種類のUIコンポーネントやアイコンがセットに。
Webチュートリアル
Progressively Enhanced WebGL Lens Refraction
レンズの屈折をリアルに表現したCSSとReact Three Fiberを活用したレスポンシブなWebGLレイアウトを作成する方法を学びます。デモページ
Some Ideas for Fullscreen Image Slideshow Animations
フルスクリーン画像のスライドショーのトランジション集には、
全部で16種類のデモが公開中。デモページ
Getting Creative with Infinite Loop Scrolling
無限に続くループスクロールアニメーションを、GSAPと軽量スクロールライブラリLenisで作成するお手軽チュートリアル。
On-Scroll Perspective Grid Animations
こちらもスクロールベースのアニメーションで、ページをスクロールすると、グリッド状に並んだ画像が面白い動きの流れに沿って変形します。デモページ
Scroll-Based Layout Animations
GSAPのScrollTriggerとFlipを使用し、さまざまなスクロールベースのレイアウト切り替えアニメーションを実現します。デモページ
GSAPのスクロールトリガーとフリップを、SVGフィルターと組み合わせたスクロールエフェクト。画像にSVGフィルターを適用し、スクロールに合わせて表示します。デモページ
最新版Chrome 114に搭載された新機能で、コンテンツの一番上に重ねて表示するUI「ポップオバー」。補足の情報やユーザーにアクションを促すことができます。具体的な使い方や実装例を紹介。
HTML/CSSスニペット
iPhone 15 Pro紹介ページのCTAボタン
コンテナスタイルクエリとスクロール駆動型アニメーションを使えば、JavaScriptゼロでAppleスタイルのダイナミックなCTAを作成できます。
See the Pen Apple Style CTA Reveal with CSS scroll-driven animations by Jhey (@jh3y) on CodePen.
アニメーション付き「いいね」ボタン
先日行われたAppleイベントで利用されていた、アニメーション付きの「いいね」ボタンは、いくつかのプロパティをもったスプライトCSSで再現できます。
See the Pen Apple Event CSS Sprite Button by Jhey (@jh3y) on CodePen.
七色の輝くローディングアニメーション
暗闇にひときわ目立つ、レインボーカラーのローディング画面は、読み込み時間のストレスの軽減に。
See the Pen Card hover effect by Aaron Iker (@aaroniker) on CodePen.
CSSでコピペできるスタイリッシュなボタン用コード45選
See the Pen Modern Button Styles – 45 CSS Only Buttons by Vincent Van Goggles (@Gogh) on CodePen.
ビギナー基本ガイド
The Guide To Responsive Design In 2023 and Beyond
これからの新しいレスポンシブWebデザインを考察したガイド記事。
ユーザーの好みをチェックするメディアクエリや、メディアクエリを使わなくても流動的なレイアウトを実現できる方法など、実用的ですぐに使えるテクニック満載。
【保存版】心地よいWeb遷移アニメーションの基本ルール6個まとめ
トランジション・アニメーションの原則ルール6個をまとめて紹介します。基本的で分かりやすいサンプル付なので、誰でもデザイン・プロセスですぐに応用できます。
Web遷移アニメーションの実用ガイドブックとして活用してみましょう。
Webデザインの中核であるアクセシビリティを学ぶオンライン無料コンテンツ。配色や書体、レイアウトなど分かりやすく整理され、分かりすく情報を網羅、まとめています。
CSS Selectors: A Visual Guide & Reference | fffuel
よく使われるCSSセレクタのビジュアルガイド。
重要なセレクタが詳しく説明、視覚化されており、「このCSSセレクタ、何だっけ」と忘れがちなものまで網羅しているので、チートシートとして活用できます。
Webデザイン
【総まとめ】2023年世界で話題になったWebデザイン・ベスト50選
「このWebサイト、素敵。」と感じさせるモノとは、一体何でしょう。
この1年間で、デザイン制作の参考にしたいWebサイトを２００以上紹介してきました。
この記事では、デザインアイデアにしたり、トレンドを分析したり、２０２３年の振り返りに最適な５０のWebデザインを厳選してご紹介します。
2023年に紹介したWebデザイン一覧は、こちらからどうぞ。
UIアニメーション
3D Animation of the Location Selection Interface by Barry for Zajno
各惑星の詳細をダイナミックなアニメーションで魅せることで、ユーザーは壮大なSF映画を見ているような没入感を体験できます。
フリー素材
Furnics – Furniture Store HTML Template
オンライン家具ストアをコンセプトに設計されたHTMLテンプレート。カスタマイズしやすいBootstrap 5フレームワーク採用で、美しい見た目を実現できます。
Vaso – Interior Decor Free Bootstrap 5 eCommerce Website Template
インテリア雑貨のオンラインショッピングサイトを想定した、Bootstrap 5フレームワーク採用のHTMLテンプレート。
Plantly – Free Plant Selling Website Template
観葉植物の販売を想定したEコマースサイトのHTMLテンプレート。無料デモ版ではトップページのみダウンロード可。
Archi: Free Architect Portfolio HTML Template
建築やインテリア向けポートフォリオを想定したHTML／CSSテンプレートは、全部で7ページ。スライドショーやお問い合わせなど、サイトに必要な機能が揃います。
Foodmart – Free Bootstrap 5 eCommerce HTML Template
生鮮食品などを販売するオンラインマーケットのHTMLテンプレート素材で、人気フレームワーク Bootstrapで作成されているので、カスタマイズにも柔軟に対応できます。デモページ
WordPress 6.4 – Twent Twenty-Four
作家やアーティストから起業家まで、明確な使用ケースを念頭に置いて設計された、エレガントで汎用性の高いWordPressデフォルトテーマ。
Holographic Material for Three.js – by Anderson Mancini
Threejs 用の使いやすいホログラフィック素材で、React Three Fiberとしてダウンロードできます。
Astro + View Transitions Photo Gallery
WebフレームワークAstroと、連続性のある画面遷移アニメーションを実現できるWeb新技術 View Transitions APIを活用した、写真ギャラリー用テンプレート。ソースコードも公開中。
インスピレーション
Godly — Astronomically good web design inspiration
デザイン性の高いWebサイトだけを集めたギャラリーサイトで、動きやインタラクションをGIFで確認できるのもポイント。
Footer — The only footer gallery on earth.
さまざまなサイトの素敵な「フッター」デザインのみを集めたWebギャラリー。どんなコンテンツを記載するか迷ったときの参考に。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
