Webフォームのスパム対策: ユーザーに優しく、ボットに厳しく、reCAPTCHAを使わない方法
最近、このブログのお問い合わせフォームや、Webスクール体験レッスン、メルマガ登録などのフォームにスパムボット（広告・宣伝などを自動で送信するプログラム）と思われる送信があまりにも多いため、対策をしています。 メールフォームのスパムポット対策と言えばGoogleの「reCAPTCHA」が有名ですが、 そういったものは使用せず、HTMLとサーバー側のPHPを工夫することで対策をしました。 reCAPTCHAを使わない理由 スパムボットを防ぐ有名な方法にGoogleのreCAPTCHAがありますが、以下の理由から私はできれば使用したくありません。 理由1: ユーザーに負担をかける reCAPTCHAでは、ボットかどうか疑わしい場合、人間であることを確認するためのパズルが表示されます。 しかし、例えばメールマガジン登録フォームにメールアドレスを入力して送信しようとした際に、そのようなパズルが現れ
Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
2024年3月の、これだけは押さえておきたいWeb関連の動き
2024年3月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma・UI Canva、Affinityを買収 Adobe対抗のデザインツール大手 個人的に注目のニュースだったので、記事を書きました。 CanvaによるAffinity買収は「Adobeとの競争への大きな一歩」である – Stocker.jp/diary Iconbuddy — 100K+ open source icons アイコン素材検索サイトです。 Figmaが生成AI機能を強化へ、アイデア出しや付箋の要約などをサポート／ディラン・フィールドCEOが「Figma」の今後の展望を語る 「UIの色を変えただけで大量のクレ
CanvaによるAffinity買収は「Adobeとの競争への大きな一歩」である
CanvaによるAffinity買収は「Adobeとの競争への大きな一歩」である ベクターグラフィックツール「Affinity Designer」写真編集ツール「Affinity Photo」などがCanvaに買収された件について、思うことをまとめています。メインビジュアルは Affinity team の写真です。 はじめに 2024年3月26日、CanvaがAffinityを買収したことが発表されました。 この買収は、AdobeがFigmaを買収しようとした時とは異なり、既に完了しています。 私は2019年頃から日本でAffinityの普及活動に携わってきていたので、ユーザーの方が心配しそうなことへの回答と、個人的にこの買収について思うことをまとめたいと思います。 ユーザーの方が心配しそうなことに対する回答 まず最初に落ち着いていただきたいのですが、Affinity開発元のSerif社
なぜコーディングにVSCodeを使うのか。 私がVSCodeを選んだ理由
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo
2024年2月の、これだけは押さえておきたいWeb関連の動き
2024年2月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Adobe・Figma・フォント アドビ、「Adobe Creative Cloud」を最大30％の値上げ ～3月5日から適用／コンプリートプランや単体プラン、フォトプランや「Lightroom」が対象 開催中のAmazonのセールでも割引率はわずか10%、しかも新規の方のみで既存ユーザーは不可です。 「これをきっかけに、制作費用を上乗せした方がよいのでは」という意見も見かけました。 Illustratorでアイコンなどを余白も含めた正方形サイズでSVG書き出しするベストプラクティス｜DTP Transit 別館 モリサワ、100
XDからFigmaへ移行したい人のためにFigmaの機能を紹介
XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある［マスクとして使用］アイコ
DeepLを超えるやさしい翻訳アプリとGPTsを作りました
DeepLを超えるやさしい翻訳アプリとGPTsを作りました 苦手な分野の英文を理解するのを助けてくれます。 なぜ翻訳アプリを作ったのか 私は最近ChatGPTのような大規模言語モデルに興味があり、AI開発者の方や、大規模言語モデル関連の情報を発信している方をフォローしていました。 すると最新の論文（英語）や英語のツイートが次々に流れてくるのですが、それらをGoogle翻訳したり、DeepLで翻訳しても、意味不明な場合が多いということに気づきました。 特に海外の方の1行だけのツイートなどは、DeepLで翻訳しても全く意味がわからない場合が多くて困っていました。 AI関連の論文は専門用語が多く、いちいち調べながら読んでいると、1日の大半の時間が情報収集だけで終わってしまいます。 これは要するに「自分の専門分野でない分野の英文を理解するのは大変」ということなので、例えば「Web制作初心者の方が海
2024年1月の、これだけは押さえておきたいWeb関連の動き
2024年1月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 1月上旬はブログ記事が更新されづらいため、今月は記事が少なめです。 HTML・CSSコーディング Tailwind CSSを使う時の疑問と解決方法 2024年のCSSの書き方、ワークフローとツールについて あっ、そうだ！モダンCSSをまとめておこう HTML, CSS, JavaScriptの標準の仕様書はどこにあるのか CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する デザイン・フォント 無料でダウンロードできるフォントを書体や見た目のイメージから検索できる「モジザイ」 知識０から、ちょ
2023年12月の、これだけは押さえておきたいWeb関連の動き
2023年12月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Adobe・Figma Adobe、Figma買収を撤回 欧州で当局の承認見込めず – 日本経済新聞 買収に必要な承認が得られないため、AdobeとFigmaは相互に買収契約を破棄することで合意したとのことです。AdobeはFigmaに対して違約金を支払うとのこと。 Figma公式Webサイトによると「FigmaとAdobeは、提案されていた合併を中止することにしました。」とのことです。 画像のALTに、ChatGPTによる日本語の要約をまとめたものを入れています。https://t.co/d1otCUX3LI pic.twit
WordPressブロックテーマで一新された、ブログデザインと制作フロー
WordPressブロックテーマで一新された、ブログデザインと制作フロー 2023年12月に、このブログのWordPressテーマをリニューアルしました。 その際、あえてこれまでのWordPressテーマ制作手法と違う手法で制作したため、この記事では新しいWordPressのテーマ形式である「ブロックテーマ」について解説をします。 今回のWordPressテーマ制作手法 今回のブログリニューアルの際に、あえて行った手法は以下の通りです。 これまで主流だったクラシックテーマではなく、これから主流になる（と思われる）ブロックテーマと呼ばれる新しいテーマ制作手法で制作する FigmaやAdobe XDのようなデザインツールを使用しない WordPressのフルサイト編集機能でデザインする HTMLとCSSを書いてからWordPressテーマに変換しない functions.php にコードを追加
2023年11月の、これだけは押さえておきたいWeb関連の動き
Webニュース 2023年11月の、これだけは押さえておきたいWeb関連の動き Friday, December 1st, 2023 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma Adobeによる3兆円規模のFigma買収についてEUの規制当局が独占禁止法違反で訴訟を起こす予定だと判明 「EU当局はこの買収が、大企業が競合他社を排除するために中小企業を買収する『キラー買収』であるとの懸念を強めています」とのこと。 AdobeはFigma
エラーメッセージをペーストするだけで、丁寧に解決方法を教えてくれるGPTsを作りました
AI エラーメッセージをペーストするだけで、丁寧に解決方法を教えてくれるGPTsを作りました Wednesday, November 15th, 2023 JavaScript、PHP、Pythonを動かした時や、ターミナルに表示されたエラーメッセージなどをペーストするだけで原因を解説し、解決方法を教えてくれる「エラー相談室」というGPTsを作りました。よかったら使ってみてください。 以下のページからお試し頂けます。もしChatGPTにログインしているにもかかわらずログイン画面になった場合は、Webブラウザーの［戻る］ボタンをクリックしてください。 ChatGPT – エラー相談室 GPTsとは 「GPTs」は、OpenAIが開発したChatGPTの新機能で、開発者が自分だけのオリジナルのChatGPTを作成するためのツールです。 2023年11月時点では、GPTsの利用にはChatGPT
X (Twitter) で従来のようにOGP画像にタイトル等のテキストを表示する方法まとめ
2023年10月5日頃、X (Twitter) でOGP画像が設定されたWebページの URLをツイート（ポスト）しても従来のようにページのタイトルや概要が表示されなくなり、OGP画像とドメイン名だけが表示されるようになりました。 このままでは、画像の投稿 なのか、リンクの投稿なのかが分かりにくくなり、「画像だと思ってタップしたら外部のページに遷移してしまった」とか、逆に「リンクだと思ってタップしたら画像だった」ということで困っている方もいらっしゃるようです。 Webメディアを運用している方や、 私のようにブログを運用している場合などは、 このままではサイトへの流入が減少するため困ると言う方もいらっしゃると思います。 そこで、この記事では、「閲覧者側」と「メディア運営者側」と「ツイート（ポスト）投稿者側」それぞれにできる対策をまとめました。 投稿者側の対策については、閲覧者側の対策の下に書
新JavaScript基礎講座（動画講座）受講生募集中！
この講座は、HTMLやCSSの基礎を既に学んだ方を対象としたJavaScript入門講座です。 古いJavaScriptやjQueryは使用せず、最新のJavaScriptの基礎を学びます。 その後、制作物としてメニューボタン付きナビゲーション、タブ切り替えのUI、スライダー（カルーセル）を作成します。 制作物の動作例など、詳しくは以下の動画（音声あり）または、その下のテキストをご覧ください。 講座の内容と価格について この講座には、JavaScriptの基礎 + 3つの制作物を作る実習 + 特典映像が含まれています。 基礎と実習の動画は合計約5時間、特典映像が約30分です。 JavaScriptの基礎 変数と定数 関数 条件分岐 ループ処理（Webページ上の複数の要素に対してそれぞれ処理をする） HTMLの特定の要素にclassを付けたり外したりする 制作物 スマートフォンサイトでメニュ
Macを使いこなすために知っておきたい14のTIPS
この記事は、Twitter（X）に投稿していたMacのTIPSをまとめたもので、最新のmacOS Ventura用に書き直しています。 前半はテキスト入力関連、後半はそれ以外についてまとめています。 iPhoneやMacで日本語変換がおかしくなったら iPhoneやMacで日本語変換がおかしい場合は、設定画面から「学習のリセット」をおすすめします。学習データベースが壊れている場合がほとんどだからです。 Macの場合、日本語入力をオンにして、メニューバーの［あ］をクリックし、下の方にある［”日本語 – ローマ字入力（またはかな入力）” 設定を開く］をクリックします。 表示された画面で、左側の［日本語 – ローマ字入力（またはかな入力）］をクリックし、右側の画面を下までスクロールして［リセット…］ボタンをクリックします。 装飾付きテキストをスタイルなしでペーストする テキストをコピペしたときに
2023年7月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・UI・Figma Adobeの2兆8000億円超でのFigma買収についてEUの規制当局が間もなく詳細な調査を開始 アメリカ司法省は独占禁止法違反の疑いでAdobeを提訴する準備を進めています イギリスはAdobeが独占禁止法違反に関する救済策を提示しなかったため、より長期的な審査を開始すると発表 とのことです。ひょっとしたら、Figma買収完了までに一悶着あるかもしれませんね。 デザインからコードへ ──デザインのデータの見方を覚えてコーディングしてみよう！ Figmaを通じたデザインの始め方について書かれています。 UIは閲覧画面からつくろう。｜Shino | Software Desi
Photoshopの「生成塗りつぶし」はWeb制作の現場で使えるのか
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 生成塗りつぶしとは 生成塗りつぶしとは、2023年6月に発表されたPhotoshopの新機能です。 発表された当初は［ジェネレーティブ塗りつぶし］という呼び方をされていましたが、この記事の執筆時点では［生成塗りつぶし］という名前に変更になっています。 この新機能はPhotoshopデスクトップ(Beta)版でのみ使用できる機能なので、通常版のPhotoshopとは別にBeta版の
2023年6月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 これはAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。 デザイン・UI・Figma Adobeによるデザインツール「Figma」買収についてEUが独占禁止法違反の調査実施へ 最終的には買収の合意が頓挫する可能性もある とこの記事を引用してツイートしたところかなり反響がありました。 私は、おそらくFigmaは買収されるとは思っています。ただ、Adobeの想定より時間がかかったり面倒なことになる可能性はあるかもしれません。 Figmaのチームとプロジェクトの違いって？ 料金体系を含めわかりやすく解説 – ICS MEDIA UIは閲覧画面からつくろう。｜Shino
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Illustrator の「テキストからベクター生成（AI生成機能）」で、統一感のあるアイコンを制作する方法
