サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
stocker.jp
最近、このブログのお問い合わせフォームや、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
2024年2月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Adobe・Figma・フォント アドビ、「Adobe Creative Cloud」を最大30%の値上げ ~3月5日から適用/コンプリートプランや単体プラン、フォトプランや「Lightroom」が対象 開催中のAmazonのセールでも割引率はわずか10%、しかも新規の方のみで既存ユーザーは不可です。 「これをきっかけに、制作費用を上乗せした方がよいのでは」という意見も見かけました。 Illustratorでアイコンなどを余白も含めた正方形サイズでSVG書き出しするベストプラクティス|DTP Transit 別館 モリサワ、100
翻訳したい文章 翻訳する 翻訳結果 ここに解説と翻訳結果が表示されます 停止 全体コピー 太字部分のみコピー コピーしました 追加の質問または修正依頼 質問する 質問への回答 ここに質問への返答が表示されます。 OpenAI APIキー: 登録 登録解除
XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある[マスクとして使用]アイコ
DeepLを超えるやさしい翻訳アプリとGPTsを作りました 苦手な分野の英文を理解するのを助けてくれます。 なぜ翻訳アプリを作ったのか 私は最近ChatGPTのような大規模言語モデルに興味があり、AI開発者の方や、大規模言語モデル関連の情報を発信している方をフォローしていました。 すると最新の論文(英語)や英語のツイートが次々に流れてくるのですが、それらをGoogle翻訳したり、DeepLで翻訳しても、意味不明な場合が多いということに気づきました。 特に海外の方の1行だけのツイートなどは、DeepLで翻訳しても全く意味がわからない場合が多くて困っていました。 AI関連の論文は専門用語が多く、いちいち調べながら読んでいると、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) を指定する デザイン・フォント 無料でダウンロードできるフォントを書体や見た目のイメージから検索できる「モジザイ」 知識0から、ちょ
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ニュース 2023年11月の、これだけは押さえておきたいWeb関連の動き Friday, December 1st, 2023 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma Adobeによる3兆円規模のFigma買収についてEUの規制当局が独占禁止法違反で訴訟を起こす予定だと判明 「EU当局はこの買収が、大企業が競合他社を排除するために中小企業を買収する『キラー買収』であるとの懸念を強めています」とのこと。 AdobeはFigma
Webデザイン Adobe Fonts、Google Fontsで無料で使える個性豊かなフォントたち Wednesday, November 22nd, 2023 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。そのほかストックイラストレーター、グッズデザインなどしております。 無料で使えるフォントにも日本語のフォントが増えてきた印象です。 Adobe Fonts、Google Fontsの中から、いくつかピックアップして紹介していきます。 Adobe Fonts 黒薔薇シンデレラ 薔薇の棘があるようなデザ
AI エラーメッセージをペーストするだけで、丁寧に解決方法を教えてくれるGPTsを作りました Wednesday, November 15th, 2023 JavaScript、PHP、Pythonを動かした時や、ターミナルに表示されたエラーメッセージなどをペーストするだけで原因を解説し、解決方法を教えてくれる「エラー相談室」というGPTsを作りました。よかったら使ってみてください。 以下のページからお試し頂けます。もしChatGPTにログインしているにもかかわらずログイン画面になった場合は、Webブラウザーの[戻る]ボタンをクリックしてください。 ChatGPT – エラー相談室 GPTsとは 「GPTs」は、OpenAIが開発したChatGPTの新機能で、開発者が自分だけのオリジナルのChatGPTを作成するためのツールです。 2023年11月時点では、GPTsの利用にはChatGPT
Illustrator に「テキストからベクター生成」というAI生成機能が搭載されました。 この記事では「統一感のある、ゲーム風ベクターアイコンの制作」を例に使い方を解説します。
2023年10月5日頃、X (Twitter) でOGP画像が設定されたWebページの URLをツイート(ポスト)しても従来のようにページのタイトルや概要が表示されなくなり、OGP画像とドメイン名だけが表示されるようになりました。 このままでは、画像の投稿 なのか、リンクの投稿なのかが分かりにくくなり、「画像だと思ってタップしたら外部のページに遷移してしまった」とか、逆に「リンクだと思ってタップしたら画像だった」ということで困っている方もいらっしゃるようです。 Webメディアを運用している方や、 私のようにブログを運用している場合などは、 このままではサイトへの流入が減少するため困ると言う方もいらっしゃると思います。 そこで、この記事では、「閲覧者側」と「メディア運営者側」と「ツイート(ポスト)投稿者側」それぞれにできる対策をまとめました。 投稿者側の対策については、閲覧者側の対策の下に書
この講座は、HTMLやCSSの基礎を既に学んだ方を対象としたJavaScript入門講座です。 古いJavaScriptやjQueryは使用せず、最新のJavaScriptの基礎を学びます。 その後、制作物としてメニューボタン付きナビゲーション、タブ切り替えのUI、スライダー(カルーセル)を作成します。 制作物の動作例など、詳しくは以下の動画(音声あり)または、その下のテキストをご覧ください。 講座の内容と価格について この講座には、JavaScriptの基礎 + 3つの制作物を作る実習 + 特典映像が含まれています。 基礎と実習の動画は合計約5時間、特典映像が約30分です。 JavaScriptの基礎 変数と定数 関数 条件分岐 ループ処理(Webページ上の複数の要素に対してそれぞれ処理をする) HTMLの特定の要素にclassを付けたり外したりする 制作物 スマートフォンサイトでメニュ
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 これはAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。 デザイン・UI・Figma ユーザーが直感的に理解できる「待ち時間」の適切なUIの選択方法まとめ アドビ共同創設者のジョン・ウォーノック氏、82歳で死去。PostScript・Illustrator・PDFの生みの親、DTPの祖 | テクノエッジ TechnoEdge コーディング imgタグの変化 – 気づいたら時代遅れなHTMLを書いてた – Qiita CSSでaspect-ratioを指定していれば、img要素にwidth, height書かなくてもレイアウトシフトは起きないようです。 朗報! C
この記事は、Twitter(X)に投稿していたMacのTIPSをまとめたもので、最新のmacOS Ventura用に書き直しています。 前半はテキスト入力関連、後半はそれ以外についてまとめています。 iPhoneやMacで日本語変換がおかしくなったら iPhoneやMacで日本語変換がおかしい場合は、設定画面から「学習のリセット」をおすすめします。学習データベースが壊れている場合がほとんどだからです。 Macの場合、日本語入力をオンにして、メニューバーの[あ]をクリックし、下の方にある[”日本語 – ローマ字入力(またはかな入力)” 設定を開く]をクリックします。 表示された画面で、左側の[日本語 – ローマ字入力(またはかな入力)]をクリックし、右側の画面を下までスクロールして[リセット…]ボタンをクリックします。 装飾付きテキストをスタイルなしでペーストする テキストをコピペしたときに
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・UI・Figma Adobeの2兆8000億円超でのFigma買収についてEUの規制当局が間もなく詳細な調査を開始 アメリカ司法省は独占禁止法違反の疑いでAdobeを提訴する準備を進めています イギリスはAdobeが独占禁止法違反に関する救済策を提示しなかったため、より長期的な審査を開始すると発表 とのことです。ひょっとしたら、Figma買収完了までに一悶着あるかもしれませんね。 デザインからコードへ ──デザインのデータの見方を覚えてコーディングしてみよう! Figmaを通じたデザインの始め方について書かれています。 UIは閲覧画面からつくろう。|Shino | Software Desi
この記事について この記事は、スマートフォン時代の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
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 これはAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。 Webデザイン・UI 文字と行間の大きさは何が良い?読みやすさとKPI両立への挑戦 | Yahoo! JAPAN Tech Blog Yahoo! JAPANの調査によると、文字17pxと行間1.6 付近が読みやすいと感じる方が多いようです。 AdobeのジェネレーティブAI Photoshopの「ジェネレーティブ塗りつぶし」は、現時点ではPhotoshopベータ版のみの機能ですのでご注意ください。 写真の余計なものを削除したり、写真の周囲を描いたりといった用途にはとても向いているようです。 詳しくは記事
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デザイン制作・Webサービス・Webデザインレッスン :: Stocker.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く