Webクリエイター ボックス
@webcreatorbox.com
Webデザイン、Web制作に関する記事を発信しています。拙著『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』他。 https://www.webcreatorbox.com/
Pinned
Webクリエイター ボックス
@webcreatorbox.com
· Jan 4
書籍執筆しました！『1冊ですべて身につくPhotoshop入門講座』
これまでHTMLやCSS、WordPress、JavaScript、デザインの入門書を書いてきた私ですが、このたび新たにAdobe Photoshopの入門書、『1冊ですべて身につくPhotoshop入門講座』という本を執筆しました！2026年2月27日発売で、予約受付中です！
www.webcreatorbox.com
Webクリエイターボックス新着記事：書籍執筆しました！『1冊ですべて身につくPhotoshop入門講座』 www.webcreatorbox.com/blog/wcb-book8
スマートフォンのおかげで写真はとっても身近な存在になりましたが、「もっとキラキラしてたはずなのに！」とか「バナーに使いたいからもう少し余白が欲しい」なんていう、なんだか惜しい感じに撮れちゃうこともありますよね。そんなちょっとした調整から、大胆なデザインの作成まで、写真をベースにした作品づくりの第一歩目を一緒に進められる書籍です。2026年2月27日発売で、予約受付中です！
スマートフォンのおかげで写真はとっても身近な存在になりましたが、「もっとキラキラしてたはずなのに！」とか「バナーに使いたいからもう少し余白が欲しい」なんていう、なんだか惜しい感じに撮れちゃうこともありますよね。そんなちょっとした調整から、大胆なデザインの作成まで、写真をベースにした作品づくりの第一歩目を一緒に進められる書籍です。2026年2月27日発売で、予約受付中です！
AI：Anthropic、Claudeに広告を入れないと宣言。「ノートや黒板に広告がないように、Claudeもそうあるべき」とのこと。（英語） www.anthropic.com/news/claude-...
Claude is a space to think | Anthropic
We’ve made a choice: Claude will remain ad-free. We explain why advertising incentives are incompatible with a genuinely helpful AI assistant, and how we plan to expand access without compromising use...
www.anthropic.com
February 5, 2026 at 11:19 PM
AI：Anthropic、Claudeに広告を入れないと宣言。「ノートや黒板に広告がないように、Claudeもそうあるべき」とのこと。（英語） www.anthropic.com/news/claude-...
ユーザビリティ：「×」ボタンをタップしても消えない――「UI偽装広告」が壊すデジタル社会の常識 www.itmedia.co.jp/news/article...
「×」ボタンをタップしても消えない――「UI偽装広告」が壊すデジタル社会の常識
ネット広告の中に、OSやアプリの操作画面を装った悪質なものが増えている。「×」で閉じられると思ったら広告の一部で、タップすると詐欺サイトへ誘導。長年築かれてきたUIの常識が崩れれば、スマホもPCも安心して使えなくなる。この問題の本質と対策を考える。
www.itmedia.co.jp
February 5, 2026 at 11:12 PM
ユーザビリティ：「×」ボタンをタップしても消えない――「UI偽装広告」が壊すデジタル社会の常識 www.itmedia.co.jp/news/article...
ロゴ：ロゴ事例6選｜実はスゴい！身近なロゴデザインに秘められた「なるほど！」 liginc.co.jp/674447
ロゴ事例6選｜実はスゴい！身近なロゴデザインに秘められた「なるほど！」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ロゴデザイン事例6選！サントリー、キヤノン、コカ・コーラなど有名企業のロゴに秘められたストーリーと意味を解説。「へぇ〜！」が止まらない、ロゴの奥深い世界をデザイナーまきまきがご案内します。
liginc.co.jp
February 4, 2026 at 12:19 AM
ロゴ：ロゴ事例6選｜実はスゴい！身近なロゴデザインに秘められた「なるほど！」 liginc.co.jp/674447
ツール：「Adobe Animate」終了へ 「Flash Pro」後継も幕引き ユーザーは「困る」と悲鳴 www.itmedia.co.jp/news/article...
「Adobe Animate」終了へ 「Flash Pro」後継も幕引き ユーザーは「困る」と悲鳴
個人のゲーム開発者やアニメ制作関係者などから、「まだ使っているのに困る」と悲鳴が上がっている。
www.itmedia.co.jp
February 4, 2026 at 12:12 AM
ツール：「Adobe Animate」終了へ 「Flash Pro」後継も幕引き ユーザーは「困る」と悲鳴 www.itmedia.co.jp/news/article...
Webデザイン：バイブコーディングでWebデザイン勝負! どのAIエージェントが一番「刺さる」モックアップを作れるか www.watch.impress.co.jp/docs/topic/2...
バイブコーディングでWebデザイン勝負! どのAIエージェントが一番「刺さる」モックアップを作れるか
AIによるコーディングエージェント(AIエージェント)のおかげで、ちょっとしたツールなら誰でも簡単に作れるようになりました。スマホやパソコンを使っているなかで、かゆいところに手が届かないな、と思ったときに文章でお願いすれば、プログラミングコードにほとんど触れることなく自分の望むものが手に入ります。
www.watch.impress.co.jp
February 4, 2026 at 12:11 AM
Webデザイン：バイブコーディングでWebデザイン勝負! どのAIエージェントが一番「刺さる」モックアップを作れるか www.watch.impress.co.jp/docs/topic/2...
AI：『AIでゼロからデザイン』が 無料で全文公開中。 2月4日（水）まで！ www.shoeisha.co.jp/book/fullvie...
コンテンツ詳細
www.shoeisha.co.jp
February 3, 2026 at 12:19 AM
AI：『AIでゼロからデザイン』が 無料で全文公開中。 2月4日（水）まで！ www.shoeisha.co.jp/book/fullvie...
Webクリエイターボックス新着記事：CSSカスタムプロパティをグリグリ動かせる「slideVars」が便利 www.webcreatorbox.com/blog/slidevars
Webデザインの勉強や実験をしているとき、色や余白を微調整しながら試行錯誤すること、ありますよね。そのたびにCSSの数値を書き換えて、プレビューが更新されるのを待って…というのは、正直ちょっと面倒だったりします。今回は、そんな悩みを解決してくれる「slideVars」というライブラリを紹介します！これを使うと、CSSカスタムプロパティをブラウザー上で直接いじれるコントローラーが自動で生成されますよ！
Webデザインの勉強や実験をしているとき、色や余白を微調整しながら試行錯誤すること、ありますよね。そのたびにCSSの数値を書き換えて、プレビューが更新されるのを待って…というのは、正直ちょっと面倒だったりします。今回は、そんな悩みを解決してくれる「slideVars」というライブラリを紹介します！これを使うと、CSSカスタムプロパティをブラウザー上で直接いじれるコントローラーが自動で生成されますよ！
CSSカスタムプロパティをグリグリ動かせる「slideVars」が便利
Webデザインの勉強や実験をしているとき、色や余白を微調整しながら試行錯誤すること、ありますよね。そのたびにCSSの数値を書き換えて、プレビューが更新されるのを待って…というのは、正直ちょっと面倒だったりします。今回は、そんな悩みを解決してくれる「slideVars」というライブラリを紹介します！これを使うと、CSSカスタムプロパティをブラウザー上で直接いじれるコントローラーが自動で生成されますよ...
www.webcreatorbox.com
February 2, 2026 at 10:59 PM
Webクリエイターボックス新着記事：CSSカスタムプロパティをグリグリ動かせる「slideVars」が便利 www.webcreatorbox.com/blog/slidevars
Webデザインの勉強や実験をしているとき、色や余白を微調整しながら試行錯誤すること、ありますよね。そのたびにCSSの数値を書き換えて、プレビューが更新されるのを待って…というのは、正直ちょっと面倒だったりします。今回は、そんな悩みを解決してくれる「slideVars」というライブラリを紹介します！これを使うと、CSSカスタムプロパティをブラウザー上で直接いじれるコントローラーが自動で生成されますよ！
Webデザインの勉強や実験をしているとき、色や余白を微調整しながら試行錯誤すること、ありますよね。そのたびにCSSの数値を書き換えて、プレビューが更新されるのを待って…というのは、正直ちょっと面倒だったりします。今回は、そんな悩みを解決してくれる「slideVars」というライブラリを紹介します！これを使うと、CSSカスタムプロパティをブラウザー上で直接いじれるコントローラーが自動で生成されますよ！
ツール：Google Antigravityでエンジニアが今すぐ作るべきSkills 5選 zenn.dev/t_kanazawa/a...
Google Antigravityでエンジニアが今すぐ作るべきSkills 5選
zenn.dev
February 2, 2026 at 12:20 AM
ツール：Google Antigravityでエンジニアが今すぐ作るべきSkills 5選 zenn.dev/t_kanazawa/a...
Google AIとGoogle WorkspaceのGeminiとGoogle AI Studioは全部別物け？
January 30, 2026 at 6:32 AM
Google AIとGoogle WorkspaceのGeminiとGoogle AI Studioは全部別物け？
マーケティング：GA4で「AI検索」を計測する方法 www.hatena.ne.jp/ownedmedia/a...
ChatGPTやGeminiからの流入はどれだけある？ GA4で「AI検索」を計測する方法 - オウンドメディア戦略ラボ by はてな
GA4でChatGPTやGeminiなど「AI検索」からの流入数は分かりますか？ オウンドメディア担当者が気になる現状の確認方法と、カスタムチャネルグループやLooker Studioで流入を「見える化」する方法を解説します。
www.hatena.ne.jp
January 30, 2026 at 12:15 AM
マーケティング：GA4で「AI検索」を計測する方法 www.hatena.ne.jp/ownedmedia/a...
開発：突撃！隣のClaude Code！！ www.m3tech.blog/entry/charge...
突撃！隣のClaude Code！！ - エムスリーテックブログ
AI・機械学習チームの髙橋です。 みなさま、コーディングライフいかがお過ごしでしょうか。 エムスリーでは、昨年初夏頃からエンジニアに対してClaude Codeの業務における無制限使用が解禁されています。 現在ではほぼすべてのエンジニアが普段からClaude Codeを利用し、AIレビューやチーム内でのプラグインによるSkill共有が進んでいます！ ということで今回は、以前の突撃！ 隣のキーボード...
www.m3tech.blog
January 30, 2026 at 12:14 AM
開発：突撃！隣のClaude Code！！ www.m3tech.blog/entry/charge...
ツール：「メモ帳」の対応で脚光を浴びるMarkdown AI時代の“文書共有のスタンダード”になるか www.itmedia.co.jp/news/article...
「メモ帳」の対応で脚光を浴びるMarkdown AI時代の“文書共有のスタンダード”になるか
Windowsの「メモ帳」が昨年6月、軽量マークアップ言語「Markdown」に対応した。これまで主に開発者の間で使われてきたMarkdownだが、標準エディタの対応で一般への普及が加速する可能性がある。文書共有の新たなデファクトスタンダードになるのか。
www.itmedia.co.jp
January 30, 2026 at 12:14 AM
ツール：「メモ帳」の対応で脚光を浴びるMarkdown AI時代の“文書共有のスタンダード”になるか www.itmedia.co.jp/news/article...
Error.isError… →【JavaScript】ES2026の新機能全部解説する qiita.com/rana_kualu/i...
【JavaScript】ES2026の新機能全部解説する - Qiita
JavaScriptの仕様は、TC39というところで決められています。 ブラウザベンダや関係者が定期的に会合を行い、様々な新機能について話し合って今後のJavaScriptの方向性を決めていきます。 ここでは2025年にFinishedになったproposalについて紹介し...
qiita.com
January 29, 2026 at 12:11 AM
Error.isError… →【JavaScript】ES2026の新機能全部解説する qiita.com/rana_kualu/i...
AI：Google AI Plus を提供開始（月額1,200円、新規登録の方は最初の2ヶ月間50%オフ） blog.google/intl/ja-jp/c...
Google AI Plus を提供開始
本日より、最新の Google AI をより手軽に利用できる Google AI Plus プランを日本にて提供開始します。Google AI Plus は、よりお求めやすい価格で、生産性と創造性を向上する AI ツールを自由にご利用いただけます。Google AI Plus は、Gemini アプリでの Gemini 3 Pro や …
blog.google
January 29, 2026 at 12:04 AM
AI：Google AI Plus を提供開始（月額1,200円、新規登録の方は最初の2ヶ月間50%オフ） blog.google/intl/ja-jp/c...
AI：「この時間帯なら全員空いてます」――GeminiがGoogleカレンダーの日程調整手伝う新機能 www.itmedia.co.jp/aiplus/artic...
「この時間帯なら全員空いてます」――GeminiがGoogleカレンダーの日程調整手伝う新機能
米GoogleがGoogleカレンダーに、生成AI「Gemini」を活用した日程調整の支援機能を追加した。ユーザーが会議などのスケジュールを設定する際、参加者全員が対応できる時間帯をAIが調べ、候補として提示する。オフィススイート「Google Workspace」のユーザーなどに提供し、段階的に利用可能にしていく。
www.itmedia.co.jp
January 28, 2026 at 12:37 AM
AI：「この時間帯なら全員空いてます」――GeminiがGoogleカレンダーの日程調整手伝う新機能 www.itmedia.co.jp/aiplus/artic...
Webクリエイターボックス新着記事：Antigravityを使ってコーディング（ほぼ）なしで目標設定アプリ作った www.webcreatorbox.com/blog/ai-phas...
月間目標を決めたら、それを4つの段階に細分化して提案してくれるWebサイトをAntigravityで作ってみたよ！
月間目標を決めたら、それを4つの段階に細分化して提案してくれるWebサイトをAntigravityで作ってみたよ！
Antigravityを使ってコーディング（ほぼ）なしで目標設定アプリ作った
今年はWebアプリやWebサイトを10個作ってみるぞー！とやる気に満ちて新年を迎えましたよ。ということで、1つ目のアプリ。月間目標を決めたら、それを4つの段階に細分化して提案してくれるWebサイト『AI Phase Planner』を公開しました！
www.webcreatorbox.com
January 27, 2026 at 11:42 PM
Webクリエイターボックス新着記事：Antigravityを使ってコーディング（ほぼ）なしで目標設定アプリ作った www.webcreatorbox.com/blog/ai-phas...
月間目標を決めたら、それを4つの段階に細分化して提案してくれるWebサイトをAntigravityで作ってみたよ！
月間目標を決めたら、それを4つの段階に細分化して提案してくれるWebサイトをAntigravityで作ってみたよ！
マーケティング：突然YouTube担当になった新米マーケターが登録者1万人増やすためにやったこと liginc.co.jp/667276
突然YouTube担当になった新米マーケターが登録者1万人増やすためにやったこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
YouTube未経験から1年で登録者4,000人→16,700人に成長させた実践ノウハウを公開。サムネイルABテスト、VSEO対策、継続のコツまで。企業チャンネル運用に悩む方必見の具体的な施策を紹介します。
liginc.co.jp
January 27, 2026 at 12:23 AM
マーケティング：突然YouTube担当になった新米マーケターが登録者1万人増やすためにやったこと liginc.co.jp/667276
Tips：Claude Codeで「AI部下10人」を作ったら、勝手にバグ直して「違反は切腹」ルールを追加してきて、オレは適当にしゃべるだけになった zenn.dev/shio_shoppai...
Claude Codeで「AI部下10人」を作ったら、勝手にバグ直して「違反は切腹」ルールを追加してきて、オレは適当にしゃべるだけになった
zenn.dev
January 27, 2026 at 12:09 AM
Tips：Claude Codeで「AI部下10人」を作ったら、勝手にバグ直して「違反は切腹」ルールを追加してきて、オレは適当にしゃべるだけになった zenn.dev/shio_shoppai...
Figma：Figma MCPを使ったWebページの初期AI実装フロー zenn.dev/yuichirohara...
Figma MCPを使ったWebページの初期AI実装フロー
zenn.dev
January 26, 2026 at 12:33 AM
Figma：Figma MCPを使ったWebページの初期AI実装フロー zenn.dev/yuichirohara...
フォント：LINEのUIに使っているフォント【LINE Seed JP】がGoogle Fontsに登場 fonts.google.com/specimen/LIN...
LINE Seed JP - Google Fonts
fonts.google.com
January 26, 2026 at 12:02 AM
フォント：LINEのUIに使っているフォント【LINE Seed JP】がGoogle Fontsに登場 fonts.google.com/specimen/LIN...
CSS：Liquid Glassジェネレーター。SVGフィルターとCSSのコードをコピペできます。 aethercss.lovable.app
Liquid Glass CSS Generator | Free Glassmorphism & Neumorphism Tool
Create stunning liquid glass, glassmorphism and neumorphism CSS effects with our free online generator. Live preview, instant code export, and beautiful presets.
aethercss.lovable.app
January 23, 2026 at 12:14 AM
CSS：Liquid Glassジェネレーター。SVGフィルターとCSSのコードをコピペできます。 aethercss.lovable.app
セキュリティ：非公式7-Zip Webサイトにて公開されているインストーラによる不審なファイルの展開 wizsafe.iij.ad.jp/2026/01/2075/
非公式7-Zip Webサイトにて公開されているインストーラによる不審なファイルの展開
wizsafe.iij.ad.jp
January 22, 2026 at 11:47 PM
セキュリティ：非公式7-Zip Webサイトにて公開されているインストーラによる不審なファイルの展開 wizsafe.iij.ad.jp/2026/01/2075/
Webサービス：月980円、家族5人OK。「Apple Fitness+」が日本でサービスイン pc.watch.impress.co.jp/docs/news/20...
月980円、家族5人OK。「Apple Fitness+」が日本でサービスイン
アップルは、「Apple Fitness+」のサービスを、2026年1月21日から、日本で開始すると発表した。
pc.watch.impress.co.jp
January 21, 2026 at 11:52 PM
Webサービス：月980円、家族5人OK。「Apple Fitness+」が日本でサービスイン pc.watch.impress.co.jp/docs/news/20...
Webサービス：note、自動での多言語対応が開始予定 note.com/info/n/n5efb...
自動での多言語対応をはじめます！世界中の読者に届けやすく｜note公式
日本語で書いた記事を、そのまま世界中の読者に届けられる「自動での多言語対応」のテスト運用をはじめます。 これにより、海外の検索結果やSNSから見つけてもらえる機会が広がり、クリエイターのみなさんのコンテンツがより多くの読者に届きやすくなります。まず英語から対応し、その後、ほかの言語にも広げていく予定です。 ご自身のコンテンツを翻訳するかどうかは、クリエイター自身で選べます（設定方法は後日ご案内...
note.com
January 21, 2026 at 11:48 PM
Webサービス：note、自動での多言語対応が開始予定 note.com/info/n/n5efb...
デザイン：デザインの作り方まとめてみたよ（よこざわ編） note.com/yokozawaa/n/...
デザインの作り方まとめてみたよ（よこざわ編）｜よこざわ
デザインのお仕事をしています。横澤です。 表現を設計する意味でのデザイン、コンセプトや情報設計から表現まで一貫したデザイン、どちらのアサインもお受けしています。VI／ロゴ／グラフィック／Web／APP／OOHなど幅広く担当させていただいています。 今回は主に、前者「表現部分のデザイナー」としての動き方・作り方についてまとめていきます。企画やコンセプト、WFまではすでにある前提です。結論からいい...
note.com
January 20, 2026 at 11:59 PM
デザイン：デザインの作り方まとめてみたよ（よこざわ編） note.com/yokozawaa/n/...