はてなブックマーク

最近、このブログのお問い合わせフォームや、Webスクール体験レッスン、メルマガ登録などのフォームにスパムボット（広告・宣伝などを自動で送信するプログラム）と思われる送信があまりにも多いため、対策をしています。 メールフォームのスパムポット対策と言えばGoogleの「reCAPTCHA」が有名ですが、 そういったものは使用せず、HTMLとサーバー側のPHPを工夫することで対策をしました。 reCAPTCHAを使わない理由 スパムボットを防ぐ有名な方法にGoogleのreCAPTCHAがありますが、以下の理由から私はできれば使用したくありません。 理由1: ユーザーに負担をかける reCAPTCHAでは、ボットかどうか疑わしい場合、人間であることを確認するためのパズルが表示されます。 しかし、例えばメールマガジン登録フォームにメールアドレスを入力して送信しようとした際に、そのようなパズルが現れ

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが

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との競争への大きな一歩」である ベクターグラフィックツール「Affinity Designer」写真編集ツール「Affinity Photo」などがCanvaに買収された件について、思うことをまとめています。メインビジュアルは Affinity team の写真です。 はじめに 2024年3月26日、CanvaがAffinityを買収したことが発表されました。 この買収は、AdobeがFigmaを買収しようとした時とは異なり、既に完了しています。 私は2019年頃から日本でAffinityの普及活動に携わってきていたので、ユーザーの方が心配しそうなことへの回答と、個人的にこの買収について思うことをまとめたいと思います。 ユーザーの方が心配しそうなことに対する回答 まず最初に落ち着いていただきたいのですが、Affinity開発元のSerif社

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo

XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある［マスクとして使用］アイコ

DeepLを超えるやさしい翻訳アプリとGPTsを作りました 苦手な分野の英文を理解するのを助けてくれます。 なぜ翻訳アプリを作ったのか 私は最近ChatGPTのような大規模言語モデルに興味があり、AI開発者の方や、大規模言語モデル関連の情報を発信している方をフォローしていました。 すると最新の論文（英語）や英語のツイートが次々に流れてくるのですが、それらをGoogle翻訳したり、DeepLで翻訳しても、意味不明な場合が多いということに気づきました。 特に海外の方の1行だけのツイートなどは、DeepLで翻訳しても全く意味がわからない場合が多くて困っていました。 AI関連の論文は専門用語が多く、いちいち調べながら読んでいると、1日の大半の時間が情報収集だけで終わってしまいます。 これは要するに「自分の専門分野でない分野の英文を理解するのは大変」ということなので、例えば「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ブロックテーマで一新された、ブログデザインと制作フロー 2023年12月に、このブログのWordPressテーマをリニューアルしました。 その際、あえてこれまでのWordPressテーマ制作手法と違う手法で制作したため、この記事では新しいWordPressのテーマ形式である「ブロックテーマ」について解説をします。 今回のWordPressテーマ制作手法 今回のブログリニューアルの際に、あえて行った手法は以下の通りです。 これまで主流だったクラシックテーマではなく、これから主流になる（と思われる）ブロックテーマと呼ばれる新しいテーマ制作手法で制作する FigmaやAdobe XDのようなデザインツールを使用しない WordPressのフルサイト編集機能でデザインする HTMLとCSSを書いてからWordPressテーマに変換しない functions.php にコードを追加

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma Adobeによる3兆円規模のFigma買収についてEUの規制当局が独占禁止法違反で訴訟を起こす予定だと判明 「EU当局はこの買収が、大企業が競合他社を排除するために中小企業を買収する『キラー買収』であるとの懸念を強めています」とのこと。 AdobeはFigmaを買収するために、Adobe XDの売却を検討しているようです。 関連: Figma買収を狙うAdobeが「Creative CloudパッケージにFigmaを入れない」「競合のAdobe XDを売却」などを規制当局に提案との報道 – GIGAZINE 業務アプリにAIデザイナー「Microsoft Designer」を統合

JavaScript、PHP、Pythonを動かした時や、ターミナルに表示されたエラーメッセージなどをペーストするだけで原因を解説し、解決方法を教えてくれる「エラー相談室」というGPTsを作りました。よかったら使ってみてください。 以下のページからお試し頂けます。もしChatGPTにログインしているにもかかわらずログイン画面になった場合は、Webブラウザーの［戻る］ボタンをクリックしてください。 ChatGPT – エラー相談室 GPTsとは 「GPTs」は、OpenAIが開発したChatGPTの新機能で、開発者が自分だけのオリジナルのChatGPTを作成するためのツールです。 2023年11月時点では、GPTsの利用にはChatGPT Plusという有料プランへの登録（月額20ドル）が必要です。 もし好評で利用者の方が多かった場合、ChatGPT Plusの登録なしで利用できるWebアプ

2023年10月5日頃、X (Twitter) でOGP画像が設定されたWebページの URLをツイート（ポスト）しても従来のようにページのタイトルや概要が表示されなくなり、OGP画像とドメイン名だけが表示されるようになりました。 このままでは、画像の投稿 なのか、リンクの投稿なのかが分かりにくくなり、「画像だと思ってタップしたら外部のページに遷移してしまった」とか、逆に「リンクだと思ってタップしたら画像だった」ということで困っている方もいらっしゃるようです。 Webメディアを運用している方や、 私のようにブログを運用している場合などは、 このままではサイトへの流入が減少するため困ると言う方もいらっしゃると思います。 そこで、この記事では、「閲覧者側」と「メディア運営者側」と「ツイート（ポスト）投稿者側」それぞれにできる対策をまとめました。 投稿者側の対策については、閲覧者側の対策の下に書

この記事は、Twitter（X）に投稿していたMacのTIPSをまとめたもので、最新のmacOS Ventura用に書き直しています。 前半はテキスト入力関連、後半はそれ以外についてまとめています。 iPhoneやMacで日本語変換がおかしくなったら iPhoneやMacで日本語変換がおかしい場合は、設定画面から「学習のリセット」をおすすめします。学習データベースが壊れている場合がほとんどだからです。 Macの場合、日本語入力をオンにして、メニューバーの［あ］をクリックし、下の方にある［”日本語 – ローマ字入力（またはかな入力）” 設定を開く］をクリックします。 表示された画面で、左側の［日本語 – ローマ字入力（またはかな入力）］をクリックし、右側の画面を下までスクロールして［リセット…］ボタンをクリックします。 装飾付きテキストをスタイルなしでペーストする テキストをコピペしたときに

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 生成塗りつぶしとは 生成塗りつぶしとは、2023年6月に発表されたPhotoshopの新機能です。 発表された当初は［ジェネレーティブ塗りつぶし］という呼び方をされていましたが、この記事の執筆時点では［生成塗りつぶし］という名前に変更になっています。 この新機能はPhotoshopデスクトップ(Beta)版でのみ使用できる機能なので、通常版のPhotoshopとは別にBeta版の

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 これはAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。 デザイン・UI・Figma Adobeによるデザインツール「Figma」買収についてEUが独占禁止法違反の調査実施へ 最終的には買収の合意が頓挫する可能性もある とこの記事を引用してツイートしたところかなり反響がありました。 私は、おそらくFigmaは買収されるとは思っています。ただ、Adobeの想定より時間がかかったり面倒なことになる可能性はあるかもしれません。 Figmaのチームとプロジェクトの違いって？ 料金体系を含めわかりやすく解説 – ICS MEDIA UIは閲覧画面からつくろう。｜Shino

ChatGPT, Bing AI, Bardは大規模言語モデルと呼ばれ、一般的には「チャットAI」や「会話AI」などと呼ばれます。 これらは様々な調べごとや、ちょっとした作業をするのにも適してるということは既にご存じだと思います。 Web制作者はもちろん、Web制作やプログラミングなどを勉強中の方も、ChatGPTなどの大規模言語モデルを使いこなすことで学習や仕事をスムーズに進めたり、あるいは手助けになりそうな予感がしたので、色々と試してみました。 これはAIをイメージしたAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。 今回試した大規模言語モデル ChatGPT(3.5 turbo): 無料で利用できるChatGPTの基本モデルです。2021年9月までの情報をもとに学習しています。 GPT-4: ChatGPT Plusに加入し、月額20ドル支払

このブログでは、今年1月頃からWebニュースのまとめ記事などでAI生成画像を使用しています。たとえば以下のようなものです。 今メルマガ登録頂くと、このようなAI生成画像による毛糸風の画像素材を配布します。 以下のような画像が220枚以上ありますので、ブログや技術記事などで使いやすいと思います。 PCのある部屋 カフェと人々 ロボット・AI 建物の外観 青い鳥 抽象的 島と船 部屋 こちらは無料で利用でき、改変可能、商用利用可能、著作権表記やリンクは不要です。 メルマガ登録でどなたも利用できます。 この画像素材は、メールマガジンに登録いただければどなたでも無料で利用できます。 メールマガジンは、スクールや動画講座のお知らせが月1回程度配信予定です。 そのほか、無料の動画講座や画像素材などの特典も不定期で配信予定です。 メール登録は以下からどうぞ。自動返信メールに画像素材のダウンロードURLを

「Google Bard」は、GoogleがChatGPTやBing AIなどに対抗して公開した、大規模言語モデルを使用した、いわゆるチャットAIです。 昨日までは日本語で質問しても英語で返答していましたが、本日未明の「Google I/O」というイベントに合わせて、日本語での質問や返答にも対応しました。 早速多くの方がBardを試していますが、「回答の精度にがっかりした」という感想もみられます。 しかしがっかりする前に試して頂きたいことがあります。 それは回答の右上に表示されている［他の回答案を表示］をクリックして別の回答案を見ることと、数時間前の情報についてまとめて解説してもらうことです。 ［他の回答案を表示］について ChatGPTの場合、1つの質問に対して回答を1つ生成し、別の回答を見たい場合は［Regenerate trsponse］ボタンをクリックする必要があります。 それに対

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 私が最近学んでいること、「デザインシステム」について書きたいと思います。 なぜデザインシステムを学んでいるのか。ですが、デザインの制作時にFigmaを使う機会が増えて、今までPhotoshopやXDで作業していたときよりも、コンポーネントを意識するようになったからです。 まだWeb制作を学び始めたばかりだから、デザインシステムとか難しそう。と思っている人もいるかもしれませんが、学

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 この画像は、Stable Diffusionの woolitize というモデルを使用して生成しました。最近はAI関連の話題がとても増えていますね。 コーディング Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！ ChromeやEdgeでCSSのネスト（入れ子）が利用できるようになりました。 SassがなくてもSassのような開発ができるようになるのは良いですね。 CSS Nesting | Can I use… Support tables for HTML5, CSS3, etc CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説 ユーザー操作

この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H

ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは

2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは事前に「Adobe XDは今後どうなるのか」についての発表をおこなっておらず、ある日突然製品一覧から消したため、利用者が混乱しているというのが現状です。 このブログや私のTwitterでは過去に「Adobe XDのアップデートは止まっており、今にも消えそう」であることを書いていますが、そのことを知らず、突然何が起きたのか分からずに騒いでいる方もいらっしゃるようです。 そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。 追記: 2023年5月に再度確認したところ、Adobeのすべての製品一覧