この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
最適化されていない画像は、特に初めて読み込むときに、ウェブサイトのパフォーマンスが低下する主な原因のひとつです。解像度と画質によっては、Webサイトの合計サイズの70%以上を画像が占めることもあります。 最適化されていない画像を本番環境でも使用したことで、ウェブサイトの読み込みスピードが大幅に遅くなったということもしばしば。経験の浅いデベロッパーは、あまりこの潜在的な問題を認識していないかもしれません。同じように、画像の最適化に便利なツールや解決アプローチを持ち合わせていないでしょう。 この記事では、Web用に画像を最適化するための便利ツールと解決アプローチをまとめてご紹介します。 コンテンツ目次 JPG画像ファイルサイズの計算方法 オンライン画像最適化サービスの利用 自動化ソリューション 画像読み込みの最適化 CDNの利用 乾いたインクスタイル WebP画像形式 高ピクセル密度画面（Re
Building an adaptive favicon Stay organized with collections Save and categorize content based on your preferences. In this post I want to share thinking on how to build an adaptive favicon with SVG. Try the demo. Browser tabs shown adapting to MacOS system light and dark theme changes. Try the Demo If you prefer video, here's a YouTube version of this post: Overview A custom favicon is a great wa
ぼくの職場の新人さん向けに、サイト制作（とくに静的サイト）を作るのに便利なサービスをまとめたので記事にしました。 もう少しあるので、あとで加筆修正するかもしれません。 静的サイトジェネレーター『Hugo』『Middleman』などお好みで StaticSiteGen 静的サイトジェネレーターは、結局生成されるのはhtml+css+jsなので、好みの物を使えばいいと思います。 このブログではHugoを利用していて、確かにビルドはめっちゃくちゃ早いですが、スクラッチで制作・開発するなら慣れているRuby+Middlemanのほうがサクっと作れます。そんな感じで使い分けても良いと思います。SPA(Single Page Application)に近いものを作るなら、VueとかReactなどを採用したフレームワークを使えばいいですし。 ホスティング『Netlify』 Netlify: All-in
会社のアドベント用です 最近アイコンなどでよくみかけるSVG画像。 ラスターのpng/gifと違い、ベクターなのでどんな拡大縮小にも耐えることができます。Retina対応が当たり前な今どきのWEB製作時に、１つのファイルのみで対応できるので大変ありがたいです。 ※写真等色と形が複雑なものは引き続きjpg（最近はWebPという選択肢も）が優秀です。 各要素のお役目をメモっておきました。svgアニメをかけるとき理解しておくと便利＆イラレ等編集ソフトを使わずエディター内で画像編集を終わらせることができて結構便利。 軽量化 SVGOMG – SVGO’s Missing GUI Svgの時点でよほどのことがない限りpngより軽くなっているとは思うのですが、上記ツールで不要箇所を削除できます。 ちなみに手動でするときはタグに下記4点があればOKだと思っています。 viewBox= xmlns="ht
SVGcode: a PWA to convert raster images to SVG vector graphics SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format. It uses the File System Access API, the Async Clipboard API, the File Handling API, and Window Controls Overlay customization. (If you prefer watching over reading, this article is also available a
Jose Felix Posted on Jun 7, 2020 • Updated on Sep 20, 2020 • Originally published at jfelix.info Resources are extremely important for a programmer since they can greatly improve productivity while coding. I have been collecting many links throughout months and I wish to share some of them with you. Hopefully, they will be as useful to you as they have been to me. Without further ado here some gre
Thinking Outside the Box with CSS Grid | Frontend Horse | Creative Web Development
Thinking Outside the Box with CSS Grid Featuring Andy Barefoot The support of CSS Grid in modern browsers has opened up layout possibilities like never before. We can create more complex designs with fewer elements than we could with Flexbox alone. But when you think of CSS Grid, you generally think of a boxy layout, right? Some of the layouts on Rachel Andrew’s excellent Grid by Example. Andy Bar
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG | Codrops
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition. To better explain that title right off the bat, here’s what we’re about to learn, and it’s easier than you think. Give it a go, change the shirt from yellow to b
Kasper Andreassen for Enterspeed Posted on Sep 19, 2022 • Originally published at enterspeed.com That's right, I said it. Making a fast website is super easy, barely an inconvenience. I've built a website that gets a perfect score in Google Lighthouse and that can be deployed right to the edge. It's built completely in a high-performant, battle-tested language that will last for ages. Want to see
In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. Last weeks, we’ve covered CSS auditing tools, CSS generators and accessible front-end components. This time around, let’s look at SVG generators — for everything from shapes and backgrounds to SVG path visualizers and SVG → JSX generators. Table of ContentsBelow you’ll find an alphabetical
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
フロントエンドコーディング時に便利なジェネレーターサイト（随時更新） - Qiita
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-後編 | POSTD
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD
【2019年最新版】今さら聞けない！画像最適化の鉄板テクニック6つまとめ
Building an adaptive favicon | Articles | web.dev
平成最終版。僕が静的サイトを作る時に使う便利ツールやサービスまとめ – すきせか
SVGで一筆書き - Qiita
SVGcode: a PWA to convert raster images to SVG vector graphics
40+ High-Quality Free Resources for Web Development
Making a fast website is SUPER EASY 😏
SVG Generators — Smashing Magazine