UIデザインに最適！ トーンを合わせたカラーでカラーパレットを簡単に生成できる無料ツール -The good colors
WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポートしています。 The good colors The good colorsは、OKLCH色空間を使用してカラーパレットを作成できるオンラインツールです。OKLCH色空間とは、明度（Lightness）、彩度（Chrome）、色相（Hue）の値で構成されるカラーで、LCHに比べて色相と彩度の均一性が改善された色空間です。そのため、明度と彩度が一貫された知覚的変化が保証されます。 OKLCH色空間を使用したカラーパレット 使い方は、簡単です。 「Lightness」と「Chrom
無料でハイクオリティなCC0の3Dモデルやテクスチャをダウンロードしまくれる「ShareTextures」
写真家とアセットクリエイターによるサイト「ShareTextures」では、実際に撮影した写真やロイヤリティフリーの写真から作成した3Dモデルやテクスチャを配布しています。コンテンツはすべてCC0ライセンスのため、個人・商業問わず自由にダウンロードして活用することができます。 CC0 Textures & Models | Share Textures https://www.sharetextures.com/ サイトをスクロールしていくと、ShareTexturesの説明を見ることができます。ShareTexturesではAtlases(複数のテクスチャをひとつにまとめた自然素材)、Textures(テクスチャ)、Models(3Dモデル)の3カテゴリがあります。Atlasesは木や石、貝など、記事作成時点では37種類。 テクスチャは1502種類から選ぶことができます。 また、3Dモデ
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
これでもうUIデザイン用のSVGアイコンに困らない！ 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。 FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。 Iconbuddy -200K+ open source free svg icons Iconbuddyの特徴 SVGアイコンの利用方法 Iconbuddyで利用できるSVGアイコン Iconbuddyの特徴 Iconbuddyは、オープンソースで利用できる200,000種類以上のSVGアイコンを無料で検索、ダウンロード、さらにアイコンのカスタマイズもできるアイコン検索エンジンです。 Iconbuddy -200K+ open source fr
著作権フリーで商用可。AI生成のフリー画像サイトLummi
AIを活用することで、こんな便利なサイトが増えてきそうな予感。 Webサイトや広告バナー、SNSやYouTube用サムネイルなど利用機会の多いフリー画像サイトですが、AIと人間が手を組んだ新しいサイトが登場。 素材はすべてロイヤリティフリーで自由に利用することができ、本物と見分けがつかないほどリアルな見た目も特長です。 AI生成はここまで進化、まるで本物。 「退屈なストック写真はもう要らない（no more boring stock）」をスローガンに掲げ、AI生成テクノロジーを駆使したフリー画像を提供しているフリーストックサイトLummi。 まるでプロの写真家が撮影したような魅力的なビジュアルの画像は、ジャンルごとに手動でカテゴリ分けされており、探す手間をうまく省いてくれます。 クレジット表記も不要で、仕事やクライアントワークにも利用できるのも便利。 仕事にも使える、商用OKなフリーAI画
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。 CSS Tooltips & Speech Bubbles CSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。
ブックマークしておくと便利！ CSSで実装されたローダー、簡単にカスタマイズもできる優れもの -Loadership
自分のデザインに合ったローダーを簡単に実装したい！ そんな要望に応えるオンラインで簡単にカスタマイズができるCSSで実装されたローダーを紹介します。 ローダーはHTMLとCSSをコピペするだけで簡単に実装でき、カスタマイズもオンラインでサイズ・カラー・アニメーションなどを変更できます。 Loadership Loadershipの特徴 Loadershipの使い方 Loadershipのローダー Loadershipの特徴 Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。 ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください
【商用可】HTMLテンプレートを無料ダウンロードできる厳選サイト11個
HTMLテンプレートを無料でダウンロードできるサイトを厳選してご紹介します。 より具体的には、CSSフレームワークに依存しないVanilla CSSテンプレートとなっています。 数あるテンプレート配布サイトの中で、これから以下に挙げるサイトが特にお気に入り。選択基準はこんな感じ。 HTMLテンプレートは、どれも個人・商用ともに無料で利用できる モダンでおしゃれな今っぽい見た目 デモページで表示、確認できる ダウンロードに必要なのは、メールアドレスによるサインアップのみ わたしはこれまでに、無料で利用できるHTMLテンプレートを１０年近く追っかけてきました。数でいうと数百は超えます。 その経験から言えるのは、多くの「無料」テンプレートは、個人利用向けライセンスがほとんど、ということ。 クライアント向けのプロジェクトや営利目的の仕事には、残念ながら使えません。 テンプレートを購入することで商用
無料でダウンロードできるフォントを書体や見た目のイメージから検索できる「モジザイ」
インターネット上ではさまざまなフォントが配布されていますが、何となく使用したいフォントのイメージはあるものの正式名称がわからなかったり、フワッとしたイメージしかなくてどうやって検索すればいいかわからなかったりといったケースはよくあるもの。そんなフォント選びに困った場合に役立つ、書体やイメージワードから300個の日本語フリーフォントを絞り込み検索できるサイトが「モジザイ」です。 モジザイ https://www.mojizai.com/ モジザイを開くとこんな感じ。 モジザイでは「書体から検索」と「イメージワードから検索」があり、それぞれ表示されているタグを選択することでフォントの検索ができます。試しに「明朝体」をクリック。 スクロールすると、明朝体のフォントが絞り込まれて表示されました。記事作成時点では、モジザイでは362種類のフォントへのリンクが含まれており、そのうち明朝体は31件ヒット
Making SVG Loading Spinners: An Interactive Guide | fffuel
Drawing a CircleWe start by defining our workspace. The viewBox attribute controls the coordinate system. Here, 0 0 800 800 sets the origin at the top-left corner with a width and height of 800 units each. We then create a circle element. The cx and cy attributes position the center of the circle at 400 units along both the x and y axes. A radius (r) of 200 units and a stroke width of 40 units giv
無料で使えるシンプルで高速なVPNのWireGuard用の構成ファイルを管理してくれるサービス「WireHub」を使ってみた
「WireHub」は、シンプルで高速なVPNサービスを提供するオープンソースソフトウェアの「WireGuard」用の構成ファイル管理サービスです。無料で使用可能とのことなので使い勝手を確かめてみました。 Social Networking / WireHub https://www.wirehub.org/ WireHubのページへアクセスし、「Join the Beta!」をクリック。 GitHubかGitLabのアカウントでログインできます。今回は「Sign Up with GitHub」をクリックします。 「Authorize wirehubhq」をクリック。 ログインに成功するとこんな感じ。見本として3つのネットワークが既に形成されていますが、今回は「New Network」をクリックして新たなネットワークを作成していきます。 ネットワーク名とそのネットワークに割り当てるCIDRを
App Motion - Mobile motion design gallery
Explore the best, hand-picked mobile app motion design
Webデザインの配色に悩んだときの参考になる！ UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。 Spectrum.Art Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。 Spectrum.Art 2023年9月現在、カラースキームは16種類あり、各カラースキームはページ全体やコンポーネントごとにまとめられています。 では、Color s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
McAnswers
Calligrapher.ai: Realistic computer-generated handwriting
AI text prompt to SVG
これはブックマークしておくと便利！ HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes
MuuMuu Sites — Notionでつくろう、あなたらしいWebサイト。
【総数651件】UI LIBRARY | Webデザインの参考に！UIパーツごとにまとめたギャラリーサイト
