MuuMuu Sites — Notionでつくろう、あなたらしいWebサイト。Notionのアカウントと連携して、Notionに書いたコンテンツを読み込んでWebサイトを作成します。
ノーコード開発ツール「FlutterFlow」とは？機能や特徴を解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の菊池です。 この記事ではGoogle社が提供するブラウザベースのノーコード開発ツール「FlutterFlow」について解説します。 FlutterFlowの機能を知りたい どういったケースで採用すればいいのか知りたい というみなさんは、ぜひご参考になさってください。 FlutterFlowとは FlutterFlowとは、Google社が提供しているノーコード型モバイルアプリケーション開発サービスです。 特徴はGUI操作で直感的にハイブリッドアプリケーション開発をおこなえること。作成されたアプリはFlutterというプログラミング言語で構築され、コードのエクスポートも可能です。 Flutterについて Flutterとは、Google社が作成したクロスプラットフォーム用のプログラミング言語です。開発者は単一のコードベースでiOS、Android、Web、およびデスク
非エンジニアの自分がウェブ地図サイトを公開するまで - Qiita
9/7 タイトルを修正&一部加筆しました。 非エンジニアでもできる！ウェブ地図サイトの作り方 → 非エンジニアの自分がウェブ地図サイトを公開するまで こんな風にグリグリ動かせるウェブ地図サイト、作ってみたいけどハードルが高いなぁ…という方もいらっしゃるのではないでしょうか。 実際、自分もサイトを作るまではそう思っていました。 しかし意外と簡単に、オープンソースのソフトのみで作れてしまうんです！ （サーバ代や取得するのであればドメイン代等はかかりますが…） 非エンジニアのデザイナーの自分ですがサイト公開までできたのでやり方を共有します！ ※自分のスキルとしては関してはgithubもVScodeも使えない、CSSとhtmlぐらいならツギハギでなんとか…(10年前ぐらいの知識)というレベルなので、特に後半のサーバ周りに関してもっと楽なやり方があるかもしれません。 QGISで地図を作る 一番の肝は
一行追加でコンタクトフォームを実装できる【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サーバーを作成することで、独
プレゼンの内容もスライドもCanvaのAI機能で作ってみた
2023年3月27日 便利ツール Canvaは、用意された多数のテンプレートから、オンライン上で簡単にグラフィックデザインができるツールです。無料でも利用可能ですよ！そのCanvaにAIであれこれ便利に作れちゃう機能が追加されたと耳にしたので、さっそく使ってみました！ ↑私が10年以上利用している会計ソフト！ 文章を考えてもらえる！ Canvaのアカウントを作成し、ログインすると、作成したいコンテンツのジャンルを選べるようになっています。文章を作りたいので、「Docs」から「Docs to Decks」を選択しましょう。 こんな感じのデフォルトの文章が用意されています。画面上部のオプションバーから書式の選択ができますし、慣れている人はマークダウン形式でサクサク書き進められますよ。 ひとまず拙著『1冊ですべて身につくJavaScript入門講座』の文章をコピペして挿入してみました。 さて、こ
Pure CSS Loader Generator
Copy Code.loader { width: 50px; aspect-ratio: 1; border-radius: 50%; padding: 1px; background: conic-gradient(#0000, #1E4D92) content-box; mask: repeating-conic-gradient( #0000 0deg, #000 1deg calc(360deg/10 - 10deg - 1deg), #0000 calc(360deg/10 - 10deg) calc(360deg/10) ), radial-gradient( farthest-side, #0000 calc(98% - 10px), #000 calc(100% - 10px) ); mask-composite: intersect; -webkit-mask-comp
作品制作を依頼する側もクリエーター側も質問に答えるだけでサクッと簡単に契約書を作れる文化庁の「著作権契約書作成支援システム」がめちゃ便利
イラストの作成依頼や原稿の執筆依頼などの著作権が関係する契約を結ぶ場合は、二次利用に伴うトラブルなどを防ぐために、著作者と利用者双方の権利を明確にしておく必要があります。しかし、何の前知識もない状態で著作権に関する契約書を作成するのは非常に困難。何か参考になる資料はないかと探していたところ、契約の種類や契約内容を入力するだけで契約書のテンプレートを作成してくれるメチャクチャ便利な文化庁公式サービス「著作権契約書作成支援システム」を見つけたので、実際に使ってみました。 著作権契約書作成支援システム 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レイヤー数
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://svghub.vercel.app/
google-font-to-svg-path