MuuMuu Sites — Notionでつくろう、あなたらしいWebサイト。Notionのアカウントと連携して、Notionに書いたコンテンツを読み込んでWebサイトを作成します。
一行追加でコンタクトフォームを実装できる【Formspree】
2023年11月8日 Webサイト制作, 便利ツール Webサイトにコンタクトフォームを設置する方法として、以前「初心者でも簡単！日本語で手軽に設置できるフォーム作成サービス3選」という記事にて外部サービスを紹介しました。でもHTMLとCSSだけで設置できるなら、初心者でもカスタマイズしやすいですよね。ということで今回は「Formspree」を使った設置方法を紹介します！ ↑私が10年以上利用している会計ソフト！ Formspreeとは FormspreeはPHPなどのサーバーサイドのコーディングなしで、簡単にWebサイトにフォームを設置できるサービスです。どれくらい簡単かというと、通常HTMLでフォームを設置するときに使う form タグに、以下のような action 属性を追加するだけです！ <form action="https://formspree.io/f/あなたのID" me
UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。 Proportio Proportio -GitHub Proportioの特徴 Proportioの使い方 Proportioの特徴 Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。 パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザイン
次世代の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
画像生成AI Midjourney（ミッドジャーニー）とChatGPTの組み合わせ最強説
画像生成AIに興味はあるけど、どうすれば魅力的な仕上がりにできるかお困りの方へ。 このガイドはMidjourneyコミュニティーや、Twitterなどで話題のプロンプトを中心に、実際に試しながら「これは使える！」、と感じた小技やポイントをまとめています。 デッサンや写真撮影のスキルがなくても、誰でも画像生成をはじめることができます。 映画「トップガン」を彷彿とさせる、夕日をバックに飛行するファイタージェット 自分のDiscordサーバーを作成し、カテゴリを分類する方法 大前提としてMidJourneyの画像生成は、Discordサーバーを介して行います。 つい先日、驚異的な需要と無料トライアルの乱用によって、Midjourney無料トライアルは終了。 タイムラインが他のフィードで埋まってしまい、作業がしにくいというデメリットもあります。 自分専用のDiscordサーバーを作成することで、独
作品制作を依頼する側もクリエーター側も質問に答えるだけでサクッと簡単に契約書を作れる文化庁の「著作権契約書作成支援システム」がめちゃ便利
イラストの作成依頼や原稿の執筆依頼などの著作権が関係する契約を結ぶ場合は、二次利用に伴うトラブルなどを防ぐために、著作者と利用者双方の権利を明確にしておく必要があります。しかし、何の前知識もない状態で著作権に関する契約書を作成するのは非常に困難。何か参考になる資料はないかと探していたところ、契約の種類や契約内容を入力するだけで契約書のテンプレートを作成してくれるメチャクチャ便利な文化庁公式サービス「著作権契約書作成支援システム」を見つけたので、実際に使ってみました。 著作権契約書作成支援システム https://pf.bunka.go.jp/chosaku/chosakuken/c-template/ 上記のリンクから著作権契約書作成支援システムにアクセスすると、以下のような画面が表示されます。契約書を作るには、「契約書作成をはじめる」をクリック。 著作権契約書作成支援システムでは、「原稿
無料で動画の好きな位置にリンクや説明文などを追加してインタラクティブ動画の作成・編集ができる「テラドーガ」を使ってみたレビュー
YouTubeやTikTokなどの普及により動画は多くの人にとって身近なものとなりましたが、プロダクトの製品紹介を動画で行ったり、何かしらのやり方を伝えるためのハウツー動画を作ったりするには、高度な編集テクニックと高価な編集ソフトが必要になります。しかし、無料で使える「テラドーガ」なら、専用ソフトのインストールなしでブラウザから動画に説明文やリンクを追加して、インタラクティブ動画を作成することが可能です。テラドーガを使って作成できるインタラクティブ動画とは一体どんなものなのかを確かめるべく、実際に使ってみました。 テラドーガ https://teradoga.jp/ まずはテラドーガのアカウントを作成します。上記リンクからテラドーガにアクセスして、ページ上部中央にある「無料版はこちら」もしくは画面右下に固定で表示される「今すぐ無料版を試す」をクリック。 仮登録画面が表示されるので、メールア
WebアニメーションはRiveが便利！
みなさんは、Web アニメーション使っていますか？ おそらくLottieを使っている人が多いかと思います。 ただ、Lottieには大きな問題がありますね？ そうです。 Adobe の After Effects（AE）がないとアニメーションが作れないという問題です。 たくさんの人たちが嘆き苦しみながら AE を使うために Adobe に課金している事だと思います。 そんな人々を救うため、 最近では AE を使わなくてもアニメーションを作れるようにとLottie Labというサービスが開発されていたりします。 しかし、まだまだ公開には至っていない状態です。（2022/12/07 現在） そこで、Rive 登場 AE で行っていたアニメーションの作成から、書き出しまで全て Web 上で完結できるサービスです。 今回は、アニメーションの設定から React で動かすまでをやってみたいと思います！
無料で簡単にオンライン予約システムを作成できる「SelectType」がコンビニ決済＆銀行振込に対応、クレカがない層にアピール可能＆手数料減で収益アップも
専門知識や予算がない人でも、ブランドイメージや業態に合わせて細かいところまでカスタマイズ可能なオンライン予約フォームをサクッと簡単に作成できるツール「SelectType」が、既存のクレジットカード決済に加えて「コンビニ決済」と「銀行振込」にも対応しました。クレジットカード以外の決済方法を導入することで、これまで訴求しにくかったクレジットカードを持たない顧客にもアピールできるほか、銀行振込を利用すればクレジットカード決済と比較して大幅に手数料を抑えられるとのことで、実際に新たな決済方法を導入してみました。 多彩な支払い方法に対応した決済機能 (クレジットカード/銀行振込/コンビニ決済)| 予約フォーム付き予約システム「SelectType」 https://select-type.com/lp/selecttypePayment/ ・目次 ◆1：コンビニ決済をSelectTypeに導入して
ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。 fffuel -free SVG makers fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。 生成した素材は、個人でも商用プロジェクトでも無料で利用できます。 ツールはかなりたくさんあり、その中からいくつか紹介
グラデーション付き影をコピペ作成 CSS Shadow Gradients とおすすめツール
グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。 2色の配色によるグラデーションをつかった影、シャドウグラデーション（英: Shadow Gradients）を手軽に作成できるオンラインツール「CSS Shadow Gradients」が公開されています。 CSS Shadow Gradientsで作成したグラデーションは、CSSコードとしてワンクリックでコピー、利用できます。 CSS Shadow Gradients https://alvarotrigo.com/shadow-gradients/ 🧑💻 使いかた CSSグラデーションシャドウは、疑似要素をつかって表現しており、backgroundプロパティにlinear-gradient関数を使うことで、手軽にスタイリングすることができるようになりました。 使いかた
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。 このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時
KIYAC | わずか数分でプライバシーポリシーや利用規約を簡単作成
KIYACは、弁護士が監修する法律文書ジェネレータです。いくつかの質問に答えるだけで、プライバシーポリシーや利用規約など、ウェブサイト運営に必須の法律文書を生成できます。さらに、KIYACで生成された文書のリーガルチェックを弁護士に依頼することもできます。
動く流体シェイプをコピペで作成 Blob Animation + SVGおすすめツール
液体が波打つような、ゆるやかなスライムのような曲線をもつBlob流体シェイプ。ウェブサイトに取り入れることで、直線的で無機質な印象から、ナチュラルで優しい印象を与えることができます。 スムーズでなめらかな動きを加えたBlog流体シェイプを手軽に作成できるオンラインツール「Blob Animation」が公開されています。 Blob Animationで作成したアニメーションは、コピペ可能なCSSコードでダウンロード、利用可能です。 Blob Animation https://blobanimation.com/ アクセスすると以下のような画面が表示されます。 左側にBlogアニメーション、右側にアニメーションをより細かく設定できる調整ツールとして、「Animation Speed（アニメーション速度）」、「Gradient（グラデーション）」、「Blob Layers（Blobレイヤー数
誰でも無料で予約時間選択制の予約フォームがサクッと作成できる予約システム「SelectType」レビュー、レンタルスペース・フットサルコート・備品レンタルサービスなど幅広く応用可能
「コストをかけずに予約フォームを導入したい」「難しいことはせずにサクッといい感じの予約フォームを作りたい」という人にとっての心強いツール「SelectType」に、お客さんが「予約の開始時間」と「終了時間」を自由に決められる「予約時間選択方式の予約フォーム」が登場しています。SelectTypeの特長である「豊富なテンプレートのうち好きなものを選ぶだけで予約フォームが完成する」という便利な点はそのままに、より多くの顧客ニーズに対応してさらなる顧客獲得に役立てることができそうだったので、実際に使ってみました。 予約システム SelectType | 高機能でデザインも美しい予約フォーム＆予約台帳付き予約システムを無料で https://select-type.com/reserve.php ・目次 ◆1：SelectTypeで作成できる予約時間選択制フォームはこんな感じ ◆2：無料版アカウン
秘密保持契約書の雛形を作成できる「oneNDA」
企業が自社の機密情報を相手方に開示する際、情報の漏えいや不正利用を防ぐ秘密保持契約(NDA)を結ぶことがあります。このNDAを標準化するプロジェクトにより作成された、秘密保持契約書の雛形を作成できるサイトが「oneNDA」です。 oneNDA https://onenda.org/ oneNDAにアクセスすると以下のような画面が表示されます。「Download」で雛形のダウンロードおよび編集、「Adopt」でコミュニティへの参加、「Create」で雛形の作成およびダウンロードが可能。「Download」と「Create」は手順が異なるだけでできることは同じなので、今回は雛形作成のため「Download」をクリックします。 画面中央の「Download」をクリック。 メールアドレスと企業名を入力。従業員数、業種、地域は適切なものを選択し、「Get oneNDA」をクリックします。なお、ここで
中央に汚い灰色が混ざらずきれいなグラデーションを作成できる「CSS Gradient Generator」レビュー
鮮やかなグラデーションを作成したいのに、なぜか色の移り変わる部分がくすんで灰色っぽくなってしまう……という経験をした人もいるはず。このような事態を避けて色鮮やかなグラデーションを作成可能にするツール「CSS Gradient Generator」が公開されています。CSS Gradient Generatorで作成したグラデーションはCSSのlinear-gradient関数としてコピー＆ペースト可能なので、そのままウェブデザインとしても利用可能です。 CSS Gradient Generator https://www.joshwcomeau.com/gradient-generator/ Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient. https://w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://svghub.vercel.app/
google-font-to-svg-path
Mockover - Online Image Editor for 3D Trasforms
