美しいQRコードを作成できる「qrframe」
QRコードと言えば、黒と白のドットが無機質に並んだものというのが一般的なイメージとしてあります。このQRコードに色づけしたり形を変えたりして装飾できる「qrframe」というページが公開されていたので使ってみました。 qrframe.kylezhe.ng/ https://qrframe.kylezhe.ng/ 上記のURLにアクセスすると以下のような画面が現れます。 テキストボックスに何らかの文字列を入れるとすぐに対応するQRコードが生成されます。 下部にはQRコードの表示パターンのプリセットがいくつか用意されていて、選択するといろいろなデザインのQRコードを表示させることが可能。 デザインによってはQRコードには見えないものもありますが、ちゃんとQRコードとして認識することができます。 ページをスクロールするとカラーや表示パターンを自分で変更可能。 背景色を変更する「Backgroun
CSSで美しいメッシュグラデーションを作成できる無料ツール、アニメーションで動くメッシュグラデーションも簡単 -MSHR
最近のWebサイトやスマホアプリでよく見かけるのが、メッシュグラデーションです。メッシュグラデーションとは複数のポイント間でカラーをさまざまな方向に流し込んだグラデーションで、動きや変化を表現する方法として人気があります。 この美しいメッシュグラデーションをCSSで簡単に作成できるツールを紹介します。メッシュグラデーションはスタティックの動かないものだけでなく、アニメーションで動くメッシュグラデーションも簡単に生成できます。 MSHR MSHRは、CSSで作成されたメッシュグラデーションのコレクションで、個人でも商用でもあらゆるプロジェクトで無料で利用できます。2024年8月現在、282種類のメッシュグラデーションが登録されており、そのまま利用するだけでなく、カスタマイズして独自のメッシュグラデーションを作成することもできます。
How to design icons in Figma
An in-depth guide to icon creationDesign should be democratic, that's why our team refuses to hide the process behind our art. So here we are, ready to reveal all our tricks in what has become by its own merits a great home for any icon designer: Figma. What you need to know before designingWe want to make sure that this article is interesting for those who are already familiar with the icon desig
ノーコード開発ツール「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で地図を作る 一番の肝は
【脱！イケてない動画】動画制作・映像制作の流れを解説！| 株式会社LIG
こんにちは！WebクリエイタースクールデジタルハリウッドSTUDIO by LIG(通称：デジLIG)運営スタッフのるりです。 今やSNSは幅広い年齢層の間で欠かせない存在になっていますが、その中でも特に動画に関するコンテンツは最も主流となっていますよね。 また、その流れで動画がかなり身近になったことから、最近では社内の事業紹介や今後の展開についてのミーティング、イベントなどビジネスに関することでも動画を制作・利用することを検討されている方も多くなっています。 今回は、実写・アニメーション両方における動画制作における流れを具体的な3ステップでご紹介していきます。 制作のポイントも記載しておりますので、動画を見るのが好きで動画制作に興味が湧いている方や、今後動画コンテンツを活用したい方、動画制作をする必要に迫られているが何からはじめたら良いのかわからない方は、ぜひこの記事をご活用いただけます
一行追加でコンタクトフォームを実装できる【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はデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。 パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザイン
イラレ(Illustrator )でアウトライン化は超簡単！わかりやすく図解 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webデザイナーのまっつーです。 「Illustrator（イラレ）でアウトライン化する方法」について、イラレ初心者の方向けに、実際の画像をお見せしながらわかりやすく解説していきます！ 「文字をアウトライン化すると、何かが起きそうで不安……」 という方は、これから紹介する手順に沿ってアウトライン化すれば問題ありません！ この記事を読めば、アウトライン化の目的や方法が理解できます。 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 「とりあえずスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 文字のアウトライン化はなぜ必要？ 主にデザインデー
次世代の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 で動かすまでをやってみたいと思います！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebサイトやスマホアプリのUIに！ 抽象的で美しいSVGの背景デザインを簡単に作成できる無料ツール -Mossaik.app
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
MuuMuu Sites — Notionでつくろう、あなたらしいWebサイト。
https://svghub.vercel.app/