2023年、UIデザインで人気のツールを調査 -UIデザインやプロトタイプでよく使用されるツール、UIデザイナーがAIをどのように使用しているのかデザインは新たな時代を迎え、デザインツールも新たな時代に入りました。UIデザインに使用されるツール、プロトタイプに使用されるツール、デザインシステム、ホワイトボード、ユーザーテストをはじめ、AIの登場によってどのような影響を与えたのか、2023年のデザインツールの調査結果を紹介します。 昨日、『アドビとFigma、合併契約の終了に両社間で合意』というニュースがありました。これによってどうなるかも注目ですね。
これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました
WebページのURLを入力し、1クリックするだけで、そのページの編集可能なFigmaファイルに変換できる無料プラグインを紹介します。 去年紹介しましたが、先日ver.2にアップデートされました！ 一括インポート、マルチビューポート、マルチテーマ、テキストとカラーのスタイル生成ができるようになり、さらに便利になりました。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma デスクトップとスマホも同時に！ 1クリックでWebページをFigmaに変換 html.to.designの利用方法 html.to.designの使い方 1クリックでWebページをFigmaに変換 html.to.designは、URLを入力して1ク
QRコードをデザインする新しい方法で、かなり自由にデザインしてQRコードを作成できるオンラインツール -QR code designer
QRコードをかなり自由にデザインして作成できるオンラインツールを紹介します。他の今までのツールはエラー訂正レベルを使用していましたが、本ツールは違います。 先日リリースされたばかりの最新ツールです！ カラーを変更したり、文字や図形を加えたり、画像やパターンなどを加えてデザインすることもできます。日本語を使用してデザインすることもできるので、非常に便利です。 QR code designer QR code designer -GitHub QR code designerは、QRコードの中央部分にカスタマイズしたデザインを加えてQRコードを作成できるWebアプリです。文字・図形・背景だけでなく、画像・パターンなどを加えて自由にQRコードをデザインできます。 MITライセンスで、商用プロジェクトでも無料で利用できます。
次世代のCSSグラデーションツールが美しすぎる！ すべての新しい色空間を完全にサポート -CSS HD Gradients
すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか？ #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。 さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。 CSS HD Gradients CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏（@ar
Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3
HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無料アプリで、今までオンラインであちこちの各ツールを利用していた人とかにかなり便利なツールだと思います。 He3: Modern Developer Toolbox He3の特徴 He3のダウンロードとインストール He3の使い方 He3の特徴 He3は、200種類以上のWeb制作に役立つ便利ツールが詰め込まれたデベロッパー向けのツールボックスです。 200種類以上あるツールは、カテゴリ別にまとめられており、スマート検索機能ですぐに
最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
2022年のUIデザインツールのまとめ、注目されているプロトタイプ・デザインシステム・リモートワーク・ユーザーテストなど
2022年現在、UIデザインツールの使用状況を調査した「2022 Design Tools Survey」を紹介します。 急いでいる人用に一言でいうと、Figmaがっょぃ。 2022 Design Tools Survey 2022 Design Tools SurveryはUX Toolsでおこなわれたアンケートの調査結果（4,260人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、10年以上の経験者がもっとも多く、次いで3-5年、6-10年となっています。今年はリモートワークの人がもっとも多く、次いでハイブリッド、オフィス勤務となっています。
ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。 fffuel -free SVG makers fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。 生成した素材は、個人でも商用プロジェクトでも無料で利用できます。 ツールはかなりたくさんあり、その中からいくつか紹介
UIデザインに特化された配色ツール！ Webサイトやスマホアプリで使用する色に悩んだときに便利 -Goodpalette
見栄えの良い4色または5色を組み合わせる配色ツールはいろいろありますが、WebサイトやスマホアプリのUIデザインだとうまく機能しないことがあります。 カラーブランディングに成功しているWebサイトを見ると、そんなに数多くの色は使用されていません。デザインの一貫性を保つには、プライマリーカラーを1つ、アクセントカラーを1つ、あとはニュートラルトーンのベースカラーを使用しています。 この3つのカラーに9つの色合いを組み合わせたカラーパレットを生成する配色ツールを紹介します。 Goodpalette GoodpaletteはUIデザインに特化されたオンラインの配色ツールで、無料で使用できます。登録など面倒なことは一切不要。 使い方は簡単で、上部の「Generate」ボタンをクリックするだけです。生成した配色は、WebサイトやSlackやダッシュボードでどんな感じになるか確認できます。
便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images
次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, GIF）の最適化と圧縮、画像の新しいフォーマット（WebPやAVIF）への変換と最適化が簡単にできるオンラインツールです。 WebPとAVIFは高い圧縮率を備えたフォーマットです。 WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外の
Web制作にすごい役立つ！ コードの軽量化や整形・ファビコンやQRコード作成・PDF変換など、便利ツールが一箇所で利用できる -ToolsOcean
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptのフォーマッター、各種エンコード・デコード、QRコードの生成、カラー値変換、画像の最適化、ファビコン画像生成、ダミーテキスト生成、各種PDF変換など、Web制作に役立つツールがまとめて利用できるToolsOceanを紹介します。 便利なツールが一箇所で利用できるので、ブックマークしておくと便利です。 ToolsOcean ToolsOceanは完全に無料で利用できるオンラインツールが、たくさん用意されています。登録など面倒なことは一切ありません。 いくつか使用してみました。まずは、CSSの軽量化。 CSSだけでなく、HTML、JavaScriptの軽量化、整形も揃っています。
シンプルで使いやすいのが登場！ UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools
指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツールを紹介します。 最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利用できます。 hue.tools hue.tools -GitHub hue.toolsの特徴 hue.toolsはカラーを操作するためのシンプルなツールで、そのカラーの詳細情報、そのカラーを使用したデザインや写真、混色・ブレンド・変換などを簡単に利用できます。MITライセンスで、商用プロジェクトでも無料で利用できます。 hue.toolsには、4つの機能が用意されています。 info 指定したカラーをさまざまな色空間やフォーマットに変換 Dribble、Behance、Pexelsなどで同じ
ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツールが揃っているので、ブックマークしておくと便利です。 SmallDev.tools smalldev-tools -GitHub SmallDev.toolsの特徴 SmallDev.toolsは、Web制作に役立つさまざまなツールが一箇所でまとめて利用できる便利サイトです。完全に無料で利用でき、登録など面倒なことは一切ありません。 最小限のインターフェース🤩 電光石火の速さ⚡ 広告はなし💩 プライバシーフリー🔐（データはすべて、サーバーに
レスポンシブデザインの確認に便利なツールが登場！複数のデバイスサイズで同時確認できる優れもの -Responsivize
Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！ iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。 Windows, macOS, Linux対応のアプリで、しかもオープンソースです！ Responsivize Responsivize -GitHub Responsivizeの特徴 Responsivizeのダウンロード Responsivizeの使い方 Responsivizeの特徴 Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです！ 当方の日本語環境（M1 Mac, Windows10）で問題なく動作しました。 Responsivize レスポンシブWebサイトの確認が簡単にで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
便利なのが登場！ フロントエンドの開発に役立つ最新ツールがひとまとめに利用できる -HTML＆CSS Code Generator
超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo
各ソーシャルメディアに適した画像サイズは102種類！画像を1クリックでトリミングしてくれる無料ツール
Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました
CSS GridとFlexboxの便利なツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Layout Generator
