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日発売で、予約受付中です！
『挫折しないReactの教科書 作りながら学ぶWeb開発』読みました！ www.webcreatorbox.com/books/246
初学者にちょうどいいレベル感のアプリを作りながら学習できるので、HTMLやJavaScriptの基礎学習が終わった人に良さそう。また、「なんとなくウヤムヤにしてたけどそういえばなんだっけこれ？」という場面に出くわしがちな中級者さんにも。
コラムにあった「エンジニアの仕事はプログラムを書くのではなく、書いて何かを作ること」というのが印象的。じゃあ何を作ったらいいの？という制作物のアイデアや作業効率化のコツまで書かれています。コラムも要チェック！
初学者にちょうどいいレベル感のアプリを作りながら学習できるので、HTMLやJavaScriptの基礎学習が終わった人に良さそう。また、「なんとなくウヤムヤにしてたけどそういえばなんだっけこれ？」という場面に出くわしがちな中級者さんにも。
コラムにあった「エンジニアの仕事はプログラムを書くのではなく、書いて何かを作ること」というのが印象的。じゃあ何を作ったらいいの？という制作物のアイデアや作業効率化のコツまで書かれています。コラムも要チェック！
February 16, 2026 at 12:59 AM
『挫折しないReactの教科書 作りながら学ぶWeb開発』読みました！ www.webcreatorbox.com/books/246
初学者にちょうどいいレベル感のアプリを作りながら学習できるので、HTMLやJavaScriptの基礎学習が終わった人に良さそう。また、「なんとなくウヤムヤにしてたけどそういえばなんだっけこれ？」という場面に出くわしがちな中級者さんにも。
コラムにあった「エンジニアの仕事はプログラムを書くのではなく、書いて何かを作ること」というのが印象的。じゃあ何を作ったらいいの？という制作物のアイデアや作業効率化のコツまで書かれています。コラムも要チェック！
初学者にちょうどいいレベル感のアプリを作りながら学習できるので、HTMLやJavaScriptの基礎学習が終わった人に良さそう。また、「なんとなくウヤムヤにしてたけどそういえばなんだっけこれ？」という場面に出くわしがちな中級者さんにも。
コラムにあった「エンジニアの仕事はプログラムを書くのではなく、書いて何かを作ること」というのが印象的。じゃあ何を作ったらいいの？という制作物のアイデアや作業効率化のコツまで書かれています。コラムも要チェック！
Webサイト制作：個人サービスのホスティング代、年1,500円まで削れた — 6サービス比較した結果 zenn.dev/helloworld/a...
個人サービスのホスティング代、年1,500円まで削れた — 6サービス比較した結果
zenn.dev
February 16, 2026 at 12:07 AM
Webサイト制作：個人サービスのホスティング代、年1,500円まで削れた — 6サービス比較した結果 zenn.dev/helloworld/a...
拙著『1冊ですべて身につくPhotoshop入門講座』が2月27日に発売！フリーハンドやペンツールでペイントする方法も。色や形を変えて配置するだけで、おしゃれな感じになりますよー！
www.webcreatorbox.com/blog/wcb-book8
www.webcreatorbox.com/blog/wcb-book8
February 15, 2026 at 6:04 AM
拙著『1冊ですべて身につくPhotoshop入門講座』が2月27日に発売！フリーハンドやペンツールでペイントする方法も。色や形を変えて配置するだけで、おしゃれな感じになりますよー！
www.webcreatorbox.com/blog/wcb-book8
www.webcreatorbox.com/blog/wcb-book8
拙著『1冊ですべて身につくPhotoshop入門講座』が2月27日に発売！今日から少しずつ内容を紹介していきます！レイヤーや合成については我が家のにゃんこをモデルに制作してみましょう！（ノートにラフ画が残ってた）
www.webcreatorbox.com/blog/wcb-book8
www.webcreatorbox.com/blog/wcb-book8
February 14, 2026 at 7:29 AM
拙著『1冊ですべて身につくPhotoshop入門講座』が2月27日に発売！今日から少しずつ内容を紹介していきます！レイヤーや合成については我が家のにゃんこをモデルに制作してみましょう！（ノートにラフ画が残ってた）
www.webcreatorbox.com/blog/wcb-book8
www.webcreatorbox.com/blog/wcb-book8
ニュース：OpenAIの研究者がChatGPTの広告を理由に辞任、「Facebook」と同じ道を歩むことを警告 gigazine.net/news/2026021...
OpenAIの研究者がChatGPTの広告を理由に辞任、「Facebook」と同じ道を歩むことを警告
OpenAIの元研究者で2年間にわたりAIモデルの構築や価格設定、安全性の策定に携わってきたゾーイ・ヒッツィグ氏が、広告の導入がユーザーの信頼を損ない、かつてFacebookが辿った過ちを繰り返すリスクがあるとして、ニューヨーク・タイムズ紙の寄稿を通じてOpenAIがChatGPT内での広告テストを開始したのと同じ日に辞職したことを明らかにし、警鐘を鳴らしています。
gigazine.net
February 13, 2026 at 12:01 AM
ニュース：OpenAIの研究者がChatGPTの広告を理由に辞任、「Facebook」と同じ道を歩むことを警告 gigazine.net/news/2026021...
Webサイト制作：Drupal 2.0、コード不要のビジュアルエディタ搭載 webdesigning.book.mynavi.jp/article/27420/
Drupal 2.0、コード不要のビジュアルエディタ搭載 - Web Designing Web
Drupal 2.0が登場。25年の歴史で最大の進化を遂げ、ノーコードエディタやAIを活用してでサイトを構築できるようになりました。
webdesigning.book.mynavi.jp
February 13, 2026 at 12:00 AM
Webサイト制作：Drupal 2.0、コード不要のビジュアルエディタ搭載 webdesigning.book.mynavi.jp/article/27420/
開発：【WebF】React/Vue/Svelteがそのままネイティブアプリになるよ qiita.com/rana_kualu/i...
February 11, 2026 at 11:33 PM
開発：【WebF】React/Vue/Svelteがそのままネイティブアプリになるよ qiita.com/rana_kualu/i...
CSS：PinterestやDribbbleで見かけるおしゃれなボタンをTailwind CSSだけで再現してみた qiita.com/kskwtnk/item...
PinterestやDribbbleで見かけるおしゃれなボタンをTailwind CSSだけで再現してみた - Qiita
概要 2024年か2025年頃からでしょうか、PinterestやDribbbleでUIデザインを調べると、エフェクトやテクスチャが多いものを見かけるようになったと思います。 こういったUIは、見た目はおしゃれですが「実装するときどうするの？」という意見がよく出ます。 見...
qiita.com
February 11, 2026 at 11:31 PM
CSS：PinterestやDribbbleで見かけるおしゃれなボタンをTailwind CSSだけで再現してみた qiita.com/kskwtnk/item...
運営：ニュースレターを5年間配信して学んだことをまとめてみた。 www.nejimakiblog.com/entry/substa...
ニュースレターを5年間配信して学んだことをまとめてみた。 - 世界のねじを巻くブログ
Substackの振り返り サブスタックでニュースレターの配信を始めて5年以上経ち、6年目に突入した「ねじまき通信」。 nejimaki.substack.com せっかくなので、最近流行り(?)のニュースレターを配信してよかったことや、どうやって書いているのかなどをシェアしていきたいなと。 メリット・よかったこと ニュースレターの長所として思ったことを箇条書きでざっと書いていきます。 ・"ちゃん...
www.nejimakiblog.com
February 11, 2026 at 11:27 PM
運営：ニュースレターを5年間配信して学んだことをまとめてみた。 www.nejimakiblog.com/entry/substa...
フォント：なんだか勢い感じる無料フォント。カタカナ・英数字・一部記号対応。商用利用可。【ドゥードゥルドゥ】 ymnk-design.booth.pm/items/7932107
ドゥードゥルドゥ - ymnk-design - BOOTH
「ドゥードゥルドゥ」は、カタカナ・英数字のみのフリーフォントです。 X (旧twitter)で、@ymnkdesignworksをフォローしていただければ商用利用可能です。 各種ロゴや商品パッケージなどにご利用ください。 カタカナ・英数字・記号 OpenTypeフォント 商用利用可能なロイヤリティフリー書体 個人•商用デザイン用途にご使用いただけます。 ・印刷物、WEB、映像作品等で使用すること ...
ymnk-design.booth.pm
February 10, 2026 at 12:14 AM
フォント：なんだか勢い感じる無料フォント。カタカナ・英数字・一部記号対応。商用利用可。【ドゥードゥルドゥ】 ymnk-design.booth.pm/items/7932107
HTML：モーダルやツールチップで役立つ! HTMLのcommandとinterestfor属性を使って、JSを減らすスマートなUI開発 ics.media/entry/260209/
モーダルやツールチップで役立つ! HTMLのcommandとinterestfor属性を使って、JSを減らすスマートなUI開発 - ICS MEDIA
HTMLとCSSは進歩していますが、以前はJavaScriptが必須だった機能も、今ではHTMLとCSSだけで実現できることも増えています。HTMLの新属性command属性とcommandfor属性、そしてinterestfor属性を使うとダイアログやポップオーバーをHTMLのみで操作できます。
ics.media
February 10, 2026 at 12:11 AM
HTML：モーダルやツールチップで役立つ! HTMLのcommandとinterestfor属性を使って、JSを減らすスマートなUI開発 ics.media/entry/260209/
Webサービス：AIが人間をレンタルできるサービス。働ける人間として登録可能。【RentAHuman】 rentahuman.ai
RentAHuman.ai - AI Agents Hire Humans for Physical Tasks
The marketplace where AI agents rent humans. MCP integration, REST API, flexible payments. Book humans for real-world tasks your AI can't do.
rentahuman.ai
February 10, 2026 at 12:11 AM
Webサービス：AIが人間をレンタルできるサービス。働ける人間として登録可能。【RentAHuman】 rentahuman.ai
SEO：長いページは全体がクロールされなくなる？ Googleがクロール制限を15MB→2MBに縮小 internet.watch.impress.co.jp/docs/yajiuma...
長いページは全体がクロールされなくなる？ Googleがクロール制限を15MB→2MBに縮小【やじうまWatch】
Googlebotがウェブサイトをクロールするにあたってのファイルサイズの制限が、これまでの15MBから2MBに減らされたことが明らかになり、波紋を呼んでいる。
internet.watch.impress.co.jp
February 10, 2026 at 12:02 AM
SEO：長いページは全体がクロールされなくなる？ Googleがクロール制限を15MB→2MBに縮小 internet.watch.impress.co.jp/docs/yajiuma...
開発：Herokuが事実上のメンテナンスモードに移行。新機能の導入よりも品質と運用の維持に重点を置くと発表 www.publickey1.jp/blog/26/hero...
Herokuが事実上のメンテナンスモードに移行。新機能の導入よりも品質と運用の維持に重点を置くと発表
Salesforce傘下でPlatform as a Service（PaaS）を展開しているHerokuは、事実上のメンテナンスモードへ移行することを明らかにしました。 今後は新機能の導入よりも品質と運用の維持に重点を置くとしています。 ...
www.publickey1.jp
February 9, 2026 at 12:07 AM
開発：Herokuが事実上のメンテナンスモードに移行。新機能の導入よりも品質と運用の維持に重点を置くと発表 www.publickey1.jp/blog/26/hero...
調査：JavaScriptの利用状況に関するアンケート結果2025年版【State of JavaScript 2025】Viteがwebpackに追いつきそう！ 2025.stateofjs.com/ja-JP/
State of JavaScript 2025
The 2025 edition of the annual survey about the latest trends in the JavaScript ecosystem.
2025.stateofjs.com
February 8, 2026 at 11:48 PM
調査：JavaScriptの利用状況に関するアンケート結果2025年版【State of JavaScript 2025】Viteがwebpackに追いつきそう！ 2025.stateofjs.com/ja-JP/
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...