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どのデバイスでも見ることが
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
ChatGPT, Bing AI, BardはWeb制作者を助けてくれるAIとなるか？
ChatGPT, Bing AI, Bardは大規模言語モデルと呼ばれ、一般的には「チャットAI」や「会話AI」などと呼ばれます。 これらは様々な調べごとや、ちょっとした作業をするのにも適してるということは既にご存じだと思います。 Web制作者はもちろん、Web制作やプログラミングなどを勉強中の方も、ChatGPTなどの大規模言語モデルを使いこなすことで学習や仕事をスムーズに進めたり、あるいは手助けになりそうな予感がしたので、色々と試してみました。 これはAIをイメージしたAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。 今回試した大規模言語モデル ChatGPT(3.5 turbo): 無料で利用できるChatGPTの基本モデルです。2021年9月までの情報をもとに学習しています。 GPT-4: ChatGPT Plusに加入し、月額20ドル支払
Google Bardを試すなら2つのことを試してほしい
「Google Bard」は、GoogleがChatGPTやBing AIなどに対抗して公開した、大規模言語モデルを使用した、いわゆるチャットAIです。 昨日までは日本語で質問しても英語で返答していましたが、本日未明の「Google I/O」というイベントに合わせて、日本語での質問や返答にも対応しました。 早速多くの方がBardを試していますが、「回答の精度にがっかりした」という感想もみられます。 しかしがっかりする前に試して頂きたいことがあります。 それは回答の右上に表示されている［他の回答案を表示］をクリックして別の回答案を見ることと、数時間前の情報についてまとめて解説してもらうことです。 ［他の回答案を表示］について ChatGPTの場合、1つの質問に対して回答を1つ生成し、別の回答を見たい場合は［Regenerate trsponse］ボタンをクリックする必要があります。 それに対
デザインシステム入門！Web制作初心者が知るべき基本原則とFigma活用法
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 私が最近学んでいること、「デザインシステム」について書きたいと思います。 なぜデザインシステムを学んでいるのか。ですが、デザインの制作時にFigmaを使う機会が増えて、今までPhotoshopやXDで作業していたときよりも、コンポーネントを意識するようになったからです。 まだWeb制作を学び始めたばかりだから、デザインシステムとか難しそう。と思っている人もいるかもしれませんが、学
ChatGPTを使用して「Web制作者の疑問に答えるWebアプリ」を作りました
ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは
Adobe XDは利用できなくなるのか、Adobeに問い合わせました | Stocker.jp / diary
2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは事前に「Adobe XDは今後どうなるのか」についての発表をおこなっておらず、ある日突然製品一覧から消したため、利用者が混乱しているというのが現状です。 このブログや私のTwitterでは過去に「Adobe XDのアップデートは止まっており、今にも消えそう」であることを書いていますが、そのことを知らず、突然何が起きたのか分からずに騒いでいる方もいらっしゃるようです。 そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。 追記: 2023年5月に再度確認したところ、Adobeのすべての製品一覧
Affinity Photoで、写真をFUJIFILMのフィルムシミュレーション風の色にする – Affinity Manual
「FUJIFILM Xシリーズ」とよばれるカメラでは、写真をProvia、VelviaといったFUJIFILMのフィルムのような色で撮影できます。 これを「フィルムシミュレーション」と呼びます。 LightroomやCapture Oneのような写真現像ソフトは、FUJIFILM Xシリーズで撮影したRAWデータを現像する際、フィルムシミュレーションの色で現像できます。 これは、FUJIFILMと共同開発しているためです。 Affinity Photoはフィルムシミュレーションの色で現像する機能はありません。 しかし、「LUT」とよばれるファイルをダウンロードしてAffinity Photoで読み込むことにより、写真をフィルムシミュレーション風の色にできます。 以下の動画は手順を説明したもので、それ以降のテキストでも手順を説明しています。 動画は音声ありですのでご注意ください。 以下、Ma
AI描画ソフト「Stable Diffusion」はWeb制作の役に立つか？
最近AIによる描画ソフトがかなり盛り上がっており、その中でも特に「Stable Diffusion」はWeb制作者にとってもインパクトが大きく、使い方によっては制作の役に立つかもしれないと思っています。 まずはStable Diffusionで制作した画像をご覧ください。 これらの画像は写真のように見えるかもしれませんが、どれもAI描画ソフトから出力されたものです。出力後に一切補正はしていません。 「こういう画像が欲しい」と頭で考えてから出力が完了するまでの時間は、約30分程度です。 以下のような、自分でつくるのはちょっと面倒なアイソメトリック風イラストや3DCG風の画像も制作できます。 建築イメージのような画像も制作できます。 自分で作るのは面倒な、タイリング画像（縦横に繰り返し表示できる画像）も制作できます。さらに合わせ技として、「アイソメトリック風のタイリング画像」の制作もできます。
AdobeのFigma買収とAdobe XDのこれから
2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで
画像で分かる、新しいCSS
この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac
CSSで三角形のいろいろな実装例
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング
「MicrosoftがIE11のサポートを終了」って本当ですか？
ここ数日、「MicrosoftがInternet Explorer 11のサポートを終了」というニュースが話題になっていましたが、誤解されている方も多いようですのでこの記事で解説します。 この記事はWeb制作者の方、およびWeb制作を依頼される方向けに書いています。 追記: IE11のサポートは2022年 6月 15日で終了しました この記事を書いた後、IE11のサポートは2022年 6月 15日で終了し、それ以降はIE11を起動しようとするとGoogle Chromeと同じブラウザーエンジンを使用したEdgeが強制的に起動することが発表されました。 関連ニュースは以下のページをご覧ください。 2021年5月の、これだけは押さえておきたいWeb関連の動き | Stocker.jp / diary IE11がなくなるわけではない このニュースを見て「IE11のセキュリティアップデートが終了す
WordPressで制作したサイトが「モバイルフレンドリーではありません」と表示されたら
先日、Google検索結果でこのブログが表示されたときに「モバイルフレンドリーではありません」という表示が出ていることに気づきました。 気になって以下のページにURLを入力して調べたところ、WordPressのプラグインから出力されているCSSがGoogleにインデックスされないようブロックされており、それによってレイアウトが崩れてしまったようです。 モバイル フレンドリー テスト – Google Search Console この記事では、そのような場合の対処法について書いています。 対処法 最初に結論を書くと、昔から使用しているWordPressの場合、WordPressインストールしたフォルダー（ディレクトリ）にある robots.txt というファイル内に以下のように書かれている場合があります。 （最近新しくインストールしたWordPressではこの行はないはずです） Disal
「Webデザイナーはコーディングできるべきか」という議論に対する私の考え
過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。 かなり悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。 コーディングとはどこまでを指すか 「コーディング」といっても、人によって指しているものが違うと思います。 ここでは4つの段階に分けてみます。 ごく基礎的なHTMLやCSSを書くことができるコーディングのトレンドなども抑えた上でモダンなHTMLやCSSを書くことができるHTMLやCSSに加え基礎的なJavaScriptを書くこともできるHTMLやCSSはもちろん、本格的なWebアプリケーションの開発もできる このうち1に関しては、私は「議論の余地なくWebデザイナーも書けるべき」だと思っ
私が「Web制作にはMacが適している」と思う理由
先日 iMac 2019のレビュー記事 に「Web制作にMacが適していると思っている理由は別の記事に書きます」と書いたところ結構反応があったため、この記事にまとめることにしました。 先に、Web制作のためにWindows PCを買った方のために説明しておきますが、Windows PCでもWeb制作はできますのでご安心ください。 ただ、私はいくつかの理由でWeb制作にはMacの方がメリットが多いと感じています。 私がMacでWeb制作するようになったきっかけ 私はWindows 95の頃からWindows PCをずっと使用していました。 Windows 95や98の頃はMacでWeb制作するメリットを感じておらず、多くのWebサイトを問題なく閲覧できるWindows PCがベストだと思っていました。 その後Windows XPやWindows Vistaが搭載されたPCをメインで使用してい
Web制作で気になることのアンケート結果（2019年版）
Web技術 Web制作で気になることのアンケート結果（2019年版） Thursday, October 24th, 2019 Web制作で以前から気になっていたことについて、Twitter の投票機能でアンケートを採ってみました。 アンケートの実施期間は2019年1月〜10月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100〜300件前後で、私のフォロワーの方が多いと思われます。 （ご回答いただき、ありがとうございます。） 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日本全国様々な地域の方がいます。 98% が日本在住の方です。 性別（推定）は 71% が男性、29% が女性となっています。 Webデザイン・コーディ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Illustrator の「テキストからベクター生成（AI生成機能）」で、統一感のあるアイコンを制作する方法
