SVG Path VisualizerはSVGのパスデータを可視化するWebアプリです パスを定義するd属性を入力すると、それぞれのパラメーターが何をどのように描いているかを可視化、解説してくれる、というもの。解説文の数値等にマウスホバーするとどこを解説してるのかも分かるようになっています まあそれだけなんですがSVGの学び初めに良いと思ったので備忘録。ライセンスの明記はありませんがソースコードがGithubで公開されています SVG Path Visualizer
ウェブサイトにアクセスするユーザーを分析できるGoogleアナリティクスでは、ウェブサイトのURLに「UTMパラメーター」を追加することでユーザーのアクセス経路を細かく分析することができます。記事作成時点で6種類あるUTMパラメーターが持つ役割の違いと、UTMパラメーターを使ってURLを生成する方法をまとめてみました。 How to use UTM parameters to grow your audience by Kirill Zubovsky on SmashNotes https://smashnotes.com/updates/how-to-use-utm-parameters-to-grow-your-audience カスタムURLでキャンペーンデータを収集する - アナリティクス ヘルプ https://support.google.com/analytics/answe
用意された項目を数値入力や操作していくだけで簡単に見栄えが再現でき、必要なCSSコードなどを出力してくれるCSS関連のジェネレータのまとめです。 CSSが苦手な人は上手く利用すればスタイル作成の時間短縮になりますし、CSSを勉強中またはこれから勉強しようと思っている人の学習ツールとして使えるものもあります。 ツールによってはもう少しシンプルに実装できると感じるコードが出力されるので、その辺を判断できる人はそのまま出力コードを使うのではなくベースとして使用するのが良いかもしれません。 また、公開されてからしばらく経っているなどの理由で、現在ではほとんどの場合で不要なプレフィックスが出力されるものもあります。 各プロパティのプレフィックス有無の判断が難しい人は、「Can I use...」などと併用して試してみてください。 Neumorphism/Soft UI CSS shadow gene
スプレッドシートでは一括抽出できない? ところがどっこい、Googleセンセによると、ExcelでVBA組む方法が一般的なようで、現状スプレッドシートだけでなんとかするのは難しい※みたいなんですよね。 LIGではG Suiteを導入しているので、残念ながらExcel含めMicrosoftのソフトはPCに入っていません。入っていたとしてもバックオフィスなど一部のメンバーだけなんです。 「そんなんうそやん」とスプレッドシートの可能性を信じて、30分くらいあれこれ試してみたんですけど、だめでした。ちなみに無料で使えるExcel Online(エクセルオンライン)でやろうとしてログイン情報探してデータ作った挙げ句マクロが使えないことに気づいて諦めるまでに、さらに30分ほどかかっています。ここまできたら意地でも方法を見つけようと、追加で30分は無駄な時間を過ごしています。 スプレッドシートのハイパー
気になるウェブサイトをPocketやInstapaperといった「後で読む」サービスに保存したり、削除されてしまったウェブサイトをインターネットアーカイブで閲覧したりしたことがある人は少なくないはず。無料のオープンソースサービス「Webrecorder」を使うと、閲覧したウェブサイトのコンテンツをそのままキャプチャし、後で閲覧することができます。 Webrecorder | Homepage https://webrecorder.io/ Release Webrecorder Desktop 2.0.1 · webrecorder/webrecorder-desktop · GitHub https://github.com/webrecorder/webrecorder-desktop/releases/tag/v2.0.1 Webrecorderにはクラウド版とデスクトップ版がありま
無料のアイコンはたくさんありますが、中でもオープンソースで利用できるアイコンは非常に使い勝手がよく、重宝します。商用のプロジェクトでも無料で利用できる、オープンソースのSVGアイコンのライブラリを紹介します。 10 open source SVG icon libraries that you can use for your next project by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は先日、reddit上でお気に入りのアイコンライブラリはどれですか?というスレッドを立ち上げました。このスレはすぐに人気がでて、私が知らないオープンソースの素晴らしいアイコンライブラリがたくさんあることを知りました。スレに基づいて、オープンソースのアイコンライブラリのベスト10をリストしたいと思い
予約フォーム作成サービス「Book Like A Boss」は、曜日や時間帯ごとに予約可能時間を細かく設定でき、予約する側は会員登録の必要なく、メールアドレスと名前を入力するだけで予約が可能なサービスです。 Free Online Appointment Scheduling Software | Meeting Scheduling Tool | Book Like A Boss https://booklikeaboss.com/ 使い始めるには、まず「START YOUR 14DAY FREE TRIAL」をクリック。 まずは予約フォームのURLにしたい文字、ユーザー名とメールアドレス、パスワード、「私はロボットではありません」のチェックを入れて「CREATE MY ACCOUNT」をクリック。 アカウントを作成すると、すぐにBook Like A Bossのページが作成されます。
こんにちは、デザイナーの花ちゃんです! アイキャッチやバナー、プレゼン資料などにも欠かせない写真素材、みなさんはどうしていますか? もちろんできることならぜんぶ自分で用意するのに越したことはないのですが、実際に撮影用のセットを組んだり現地に行って撮影したりするのは、時間や予算の関係でなかなか難しいときもありますよね。 そんなとき、役に立つのがロイヤリティフリーの写真素材です。私は素材を組み合わせたり、合成をしたりしてフル活用しています! でも、イメージに合う素材を見つけるのってなかなか大変で、探し始めたらあっという間に1、2時間過ぎてしまうことも……。なんとか作業時間を短縮できないか……と思い、無料で使えて、商用利用もできる素材サイトと効率的な写真の探し方をまとめてみました! 未経験からWebデザイナーを目指すなら…… Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教え
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
国内ASP唯一のレンタルECサイトプラットフォーム 「aishipRENTAL」を試しみたらやりたいこと全部できた。 こんにちは、Webディレクターのともぞうです。 いきなりですがWebサイトをゼロから制作するって大変ですよね。特にECサイト……。 さらに近年増えてきたのが、 カーシェアや民泊などシェアリングエコノミーの盛り上がりにより、年々大きくなるレンタル市場。特にファッション業界では、結婚式やパーティーに来ていくドレスだけでなく、普段着もレンタルして常に最新のものを!という人も増えてきたそう。さらにキャンプ用品や家具、ドローン、GoPro、カメラ、自転車など様々な業種でのレンタルが盛り上がっているとのこと。 同年代の20代女性に聞いてみたところ、結婚式に来ていくドレスをネットでレンタルして、毎回違う格好で参加することが当たり前になっているそうです。 このような時代の変化により、レンタ
Night Eyeは任意のWebサイトのダークモード用CSSを自動生成してくれるジェネレーターです 使い方も簡単でURLを入力するだけ。自動で解析し、ダークモードに対応したCSSを生成してくれます あとはダウンロードするなりコードをコピーするなり、といった感じ。試しに本ブログで作ってみました このように十分ダークモードとして機能してくれました 本ブログはテキストとCSSがメインとなっているので作りやすかった可能性も高く、他サイトではテストしてませんが、精度は悪くない印象でした 動作も軽量で、入力したら即作成されました。ユーザー登録も不要で無料で了する事が出来ます 尚、ライト/ダークモードの切り替えが可能なスクリプトも以前ご紹介したので必要でしたら合わせてご参照ください Night Eye
Webサイトでよく使うのがお問い合わせフォームです。他は静的なコンテンツでいいのに、お問い合わせフォームがあるために動的にしなければならない…なんてこともあります。Googleフォームで代用できますが、デザイン的に他と合わないのが問題です。 そこで使ってみたいのがAirformです。Airformはメールアドレスだけ指定すれば、あっという間にフォームが作成できます。なお、同名サービスで使えるフロントエンド側のコードを公開しているのみで、サーバ側のコードは公開されていません。 Airformの使い方 AirformのHTMLコードは次のようになります。 https://airform.io/ の後ろに自分のメールアドレスを指定するだけです。 <form action="https://airform.io/your@email.com" method="post"> <input type=
プレスリリース(PR)配信 無料サービス&サイトを活用してプレスリリースやニュースリリースの告知、広報を成功させる 本記事では、ニュースリリースやプレスリリース情報を告知するための代表的なプレスリリース配信サービスである 「PR TIMES」を無料で配信する方法 など、プレスリリースを無料で効果的に配信したい方 に向けて、以下3つのカテゴリに分類した サービス&サイト を紹介しています。 有料プレスリリース配信サービスの無料プラン 完全無料のプレスリリース配信サービス 無料でプレスリリースを受付中のメディア 完全無料のプレスリリース配信サービスも取り上げていますので、予算の都合で無料のリリース配信サービスを探している方はもちろん、有料プランを検討中という方もお試しで使ってみることをおすすめします(無料でプレスリリースを効果的に成功させる方法 もあわせてご覧ください)。 プレスリリース とは
YouTubeなどの動画投稿サイトにムービーを投稿したり同人ゲームを作ったりしている人にとって、作品中で自由に使用できる楽曲を見つけることは非常に重要です。「dig.ccMixter」は、クリエイティブ・コモンズ・ライセンスに基づき再利用可能な各種音源を提供するコミュニティ「CcMixter」に登録された楽曲から、ムービーやゲームなどに利用できる楽曲や、商用利用可能な楽曲もダウンロードできるウェブサイトとなっています。 dig.ccMixter Home http://dig.ccmixter.org/ 上記URLから「dig.ccMixter」にアクセスして…… ページの下部にスクロールすると、「Instrumental Music for Film & Video(映画やビデオに打ってつけのインスト曲)」「Free Music for Commerical Projects(商用利用可
Screen Share Partyはインストールやユーザー登録一切不要でスクリーンキャストをリアルタイム共有できるWebアプリです WebRTCが採用されており、ブラウザのみで完結可能で、エクステンションやソフトウェアのインストール等、ユーザー登録やログインなども一切不要となっています アクセスするとチャットツールのように部屋が自動作成されるのでこのURLを共有相手に伝えればいいだけです あとはClick to Share Your Screenを押せばデスクトップ上で起動中のアプリや画面全体などの選択肢が出るので選べばいいだけ 最大10人までですが、動画配信などよりもハードルは低いのは気軽でいいですね。チーム間のナレッジ共有なんかに一役買ってくれそうです Screen Share Party
どうも、まさとらん(@0310lan)です! 今回は、ごく普通の静的なWebサイトにユーザー認証機能を手軽に組み込める無料のサービスをご紹介します。 特に難しいプログラミングは必要なく、単純なHTMLの属性を付与するだけで誰でも簡単に高度な認証機能を実装できるのが大きな特徴です。 また、ログインユーザー向けのコンテンツを作成したり、自動的に画面を遷移させるなど便利な機能もたくさん盛り込まれています。HTMLの基本的な知識があれば誰でも活用できるので、Web開発にご興味ある方も含めてぜひ参考にしてみてください! なお、paizaラーニングでは、動画で学べる「HTML/CSS入門編」の講座を公開していますので、まずHTMLの基本を学びたいという方にはこちらもおすすめです。 【 Authpack 】 ■「Authpack」の使い方 それでは、「Authpack」の基本的な使い方について具体的に見
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く