「Webサイト制作がもっと楽になる方法ってないの？」
「Web制作の最新ツールを試してみたい」
そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。
「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。
2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。
一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。
コピペ系CSSツール
60 CSS 3D Buttons Free Collection
CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。
Harmony – A different kind of color picker
色の基本ルールをもとに、マウスドラッグするだけで美しい配色のグラデーションを作成できるReactアプリ向けのカラーピッカー。１つのメインカラーだけでなく、その色と調和する色を自動で同時取得してくれます。
Gradientor – A minimalist, beautiful Radial Background Generator
マウスカーソルを動かしながら美しいCSSグラデーション背景をプレビュー、Enterで色の変更、スクロールでサイズの変更、Spaceバーでコードをそのままコピー。直感的に色を選択、カスタマイズできるツール。
Tailwind CSS button collection – Click-to-copy integration
Tailwindを利用していればクリックでコピーできるボタン80種類以上を集めたライブラリ。
Free Bootstrap & Vanilla CSS Background Snippets for Web Developers
Bootstrap、CSS変数、CSSのみで作成されたモダンな背景パターン集。リアルタイムでプレビューでき、クリックでコピーできます。
Grid Item Reveal Animation on Hover
Metalabで実装されているリンクにホバーすると、スクリーンいっぱいにグリッド状で画像が表示されるアニメーションを再現。デモページ
Experimental On-Scroll Text Animations with SVG Clip-Path
SVGクリップパスを使った、スクロール追従型のタイポグラフィー用Webエフェクト。画像を文字で切り抜く「ノックアウト」技術とスクロールアニメーションにより、ダイナミックなタッチを与えることができます。 デモページ
Making CSS View Transitions Easy with Velvette
Web アプリケーションのユーザー エクスペリエンスを向上させるために設計された便利なライブラリ Velvette をつかって、CSSビュー遷移を簡単に実装する方法を学びます。 デモページ
On-Scroll Animation Ideas for Sticky Sections
要素がビューポートから出るときに、固定セクションをどのようにアニメーションできるか、いくつかのアイデアをご紹介。 デモページ
404s — gallery of error 404 page designs
あらゆる種類の404エラーページのみを集めた、404専門Webギャラリー。「3D」や「アニメーション」など複数キーワードによる絞り込み検索が便利。
最新ウェブデザインをいち早くチェックできる、オススメWebギャラリーサイトをまとめて、随時アップデートしています。
インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にもどうぞ。
GitHub – Lunakepio/Mario-Kart-3.js
JavaScriptとWebGLをつかって、あのゲームをそのまま再現するプロジェクト。現在、全体の50％ほどまで仕上がった未完バージョン、MITライセンス。
NEAT, beautiful 3D gradients for your website
Webサイト用の美しいグラデーションアニメーションを生成する無料ツールです。使いやすく、幅広いカスタマイズオプションを提供します。
ThreeJS Rooms – a Collection by Ricardo Oliva Alonso
ThreeJSで作成されたキューブ状の部屋たちを覗くことができるページ、デザインアイデア次第で無限の可能性を感じる作品ばかり。
Supasnap — Create beautiful screenshots in seconds for free
画面を撮影したスクリーンショットをドラッグ＆ドロップすれば、背景などジユにカスタマイズ、美しく仕上げてくれます。作業は30秒もかかりません。
CLONE UI | design – Generate UI components with simple prompts
AIをつかって再利用可能なコンポーネントのHTMLコードを生成できるサービス。簡単なプロンプトで要求されたコンポーネントのバージョンの生成も可能。
魅力的なLottieアニメーションを編集、ダウンロードし、どんなWebサイトにも導入できます。GIFやMP4ファイルに比べ、ページの読み込み速度が5倍以上改善されるJSONファイル。
Lottieアニメーションを作成、編集し、アプリやウェブサイト用に準備してくれる専用アプリ。複数人のチームによるリアルタイム同時編集でき、だれでも簡単に魅力的なアニメーションを作成できます。
ClassyFont – Font CSS Generator
フォントファイルをアップロードすれば、あっという間にCSSクラスに変換してくれる自動ツール。サンプルフォントで試してみるとよいでしょう。
「Webサイトのインスピレーション欲しい」「デザインのアイデア共有したい」「打ち合わせの見本資料があれば、、」
そんなときは、優れたデザインで話題となっている国内外の最新Webデザインをチェックしてみましょう。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
