PlaceholderJS PlaceholderJSはReactやNext.jsアプリにシームレスに統合できるシンプルで軽量なオープンソースのダミー画像生成ツールです。 よくある従来のダミー画像生成サービスと同様に以下のようなフォーマットで任意のダミー画像を生成する事が出来る、というもの。 <img src="https://placeholderjs.com/500x500&text=Hello+World!&color=_FF0000&background=_000000"> 例えばNext.jsでは以下のように使います。 import { Placeholder } from "placeholder"; <Placeholder width="500" height="500" text="Hello World!" color="#FF0000" background="#00

ChatGPT、Gemini、Apple Intelligenceなどなど、AIツールの進化がめまぐるしいですが、世界中のAIツール・サービスを収集し、機能や使い方と合わせて紹介してくれているAIツールのまとめサイト「AIナビ」がとても便利だったのでご紹介。 AIナビ – AIツールのまとめサイト AIナビ – AIツールのまとめサイト AIナビは、数千以上あるAIを使った様々なツールやサービスを、キーワードやカテゴリから探すことができます。 各ツールはそれぞれ、概要や用途、特徴、機能から使い方まで詳細に紹介してくれています。 世界中の新しいAIツール・サービスが日々追加され、すべて日本語で解説をしてくれているところがありがたいです。 各AIツールは「自動化」「マーケティング」「コンテンツ生成」「チャットボット」「開発」「アプリ開発」「生産性向上」「画像生成」といった70以上のカテゴリで分

最近のWebサイトやスマホアプリで見かける、ウェーブやポリゴンやブロブなどの抽象的で美しいSVGの背景デザインを簡単に作成、カスタマイズできる無料ツールを紹介します。 カスタマイズはかなり柔軟性があり、色や形、数、角度、カラーモードなどを変更でき、サイズはデスクトップ用、タブレット用、スマホ用が揃っています。 Mossaik.app Mossaikは、Webサイトやスマホアプリ、デスクトップ、タブレット、スマホ用の抽象的で美しいデザインの背景を作成できるオンラインツールです。作成したデザインは、SVGとPNGでエクスポートでき、商用でも無料で利用できます。

Motiffは、中国スタートアップが開発したAI搭載のUIデザインツールです。一般的なデザインツールと同様に手を動かしてUIデザインが作成できる他、一部AIを活用したデザイン生成が可能です。 今回は、Motiffの基本情報やAI機能についてご紹介したいと思います。 Motiffは、中国スタートアップが開発したAI搭載のUIデザインツールです。一般的なデザインツールと同様に手を動かしてUIデザインが作成できる他、一部AIを活用したデザイン生成が可能です。 クラウド上での複数人での作業や、プロトタイピングの機能も一通り提供されており、使用感としてはかなりFigmaに近い形になっています。 ブラウザ上で動作するデザインツールですが、デスクトップアプリやスマホアプリも提供されていて、アプリで作業を行ったりスマホからプレビューを確認することが可能です。 現在はベータ版ですが、AIによるデザイン作成や

この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次デザインツールWeb便利ツールFigma・モックアップツールユニーク・面白ツール デザインツール KRESKA.art – Drawing and Painting あらゆるブラウザ上で動作する無料のお絵描き＆ペイントツールで、シンプルで使いやすいインターフェースと、超リアルな書き心地や豊富なブラシコレクションが特長。 Public Work by Cosmos

Next.jsのような開発体験 100%静的なファイルSSG Vite v4をビルドツールとして採用 MDX v2を統合 相対パスに対応 TypeScriptでの開発 ビルド後のHTMLは読みやすく整形 ページに必要なCSSとJSを個別でエントリー・生成 画像の最適化、リモート画像のダウンロード 複数のSVGアイコンファイルをスプライト化 非同期関数でAPIからデータを取得してページ生成 部分的なReact Component化で動的なエリアを作成 納品用のページリストやZipファイルの生成を自動化 シンプルなフレームワークながら、静的サイトジェネレーターとして必要な機能が一通り揃えられていて、画像の最適化やMarkdownによるコンテンツ作成など細かな所まで機能として提供されています。 上記のような機能の中から、いくつかの特徴をピックアップしてご紹介していきたいと思います。 JSXで記述

Animation Studio Animation StudioはCSSのkeyframesとanimationをプレビューを見ながら簡単な操作で編集、調整できるOSSのWebアプリです。 右ペインのメニュー、keyframesタブでn%及び変化の内容を設定し、animationタブでanimation-nameやduration、そのほかタイミングをベジェ曲線を使ったマウス操作でcubic-bezierを設定、TargetタブでCSSとHTMLを書いてアニメーションさせる要素を設定、Exportタブでコードをコピペする、という流れになります。 単純にアニメーションのセッティングが出来るだけでなく、ややこしいcubic-bezierを直感的な操作で設定出来たり任意のCSSとHTMLを指定出来たりと実践的なアプリという印象でした。 使い慣れるまでも特に学習コストはかかりませんし、導入も難し

最近のWebサイトやスマホアプリでよく見かけるのが、メッシュグラデーションです。メッシュグラデーションとは複数のポイント間でカラーをさまざまな方向に流し込んだグラデーションで、動きや変化を表現する方法として人気があります。 この美しいメッシュグラデーションをCSSで簡単に作成できるツールを紹介します。メッシュグラデーションはスタティックの動かないものだけでなく、アニメーションで動くメッシュグラデーションも簡単に生成できます。 MSHR MSHRは、CSSで作成されたメッシュグラデーションのコレクションで、個人でも商用でもあらゆるプロジェクトで無料で利用できます。2024年8月現在、282種類のメッシュグラデーションが登録されており、そのまま利用するだけでなく、カスタマイズして独自のメッシュグラデーションを作成することもできます。

Webサイトでよく使用されるグリッド、カード、ボタン、ヘッダ、セパレータなどのUIコンポーネントをコピペで簡単に実装できるコードをまとめたIndieUIを紹介します。 たとえばボタンだと、基本となるベースのボタンをはじめ、シンプルなものからトレンドを取り入れたもの、きらめき効果や光沢感やグラデーションをアニメーション化したボタンなどが揃っています。 Indie UI Indie UI -GitHub IndieUIの特徴 IndieUIで実装したUIコンポーネント IndieUIの使い方 IndieUIの特徴 IndieUIはWebサイトでよく使用されるUIコンポーネントを迅速かつ最小限の労力で構築するのに役立つコードをまとめたサイトです。コードをコピペするだけで簡単に実装できます。 IndieUIのUIコンポーネントには、シンプルなものからトレンドを取り入れたものまで揃っており、必要に応

WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化されたUIコンポーネント animataの使い方 Animataの特徴 Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カ

最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。

Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。

それ、もっと便利にできますし、多分レビューされた側は苦労しますよ・・・ 今回紹介する「AUN」を使うことによって、「視覚的に分かりやすく修正点を伝えること」ができるので、 WebデザインやWeb制作でレビューする立場にある人にはかなり重宝します。 私自身は「AUN」をもう5年ほど愛用しており、Webディレクションの際はもちろん、自分が出しているコーディング練習課題でも1000人以上のレビューに使用してきました。

フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ

SNSやブラウザ、CMS、ソフトウェア、AIなど様々なサービスのロゴをSVGのアイコン形式でコピーまたはダウンロードすることができる「Svgl」がとても便利に活用できそうだったのでメモ書きとして紹介します。 A beautiful library with SVG logos – Svgl A beautiful library with SVG logos – Svgl 各サービスのロゴはSVG形式でコピーまたはダウンロードすることができます。 「Svgl」では下記のジャンルに分かれた形で様々なサービスロゴが400種類以上も提供されています。 ※2024年5月28日現在 ・AI – 人工知能 ・Browser – ブラウザ ・CMS – コンテンツ管理システム ・Community – コミュニティ ・Compiler – コンパイラ ・Crypto – 暗号 ・Database – デ

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。

新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。 そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。 主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。 プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。 この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メール

- import { useState } from 'react' - import reactLogo from './assets/react.svg' - import viteLogo from '/vite.svg' - import './App.css' + import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"; function App() { - const [count, setCount] = useState(0) return ( - <> - <div> - <a href="https://vitejs.dev" target="_blank"> - <img src={viteLogo} className="logo" alt="Vite logo" /