Web制作

• 問い合わせフォームをボットの踏み台にさせない｜CAPTCHA・送信制限・自動返信の見直し方

  

  Webサイトの問い合わせフォームに、意味の分からない英語の文章や、広告のURLばかりが並んだ送信が毎日のように届く。あるいは、サーバー会社から「お客様のサイトから大量のメールが送信されています」という連絡が来る。問い合わせフォームを設置している会社やお店にとって、こうしたトラブルは決して珍しいものではありません。原因の

• CSS変数をトークンとして運用するときの決め方

  

  デザインカンプが更新され、メインカラーの青を16か所、余白の数値を30か所修正することになった。検索して一つずつ書き換えたものの、1か所だけ修正が漏れていて、確認の段階で差し戻される。こうした経験は、Web制作の現場で珍しくありません。数値をCSSの中に直接書いていると、デザインの変更があるたびに、同じ作業を繰り返すこ

• BEMとFLOCSS、現場では何を先に揃えるか

  

  案件のキックオフで、「CSSはBEMでお願いします」という声と、「FLOCSSで揃えてください」という声が同時に上がることがあります。どちらもクラスの命名に関する話に聞こえるため、その場では「どちらかに決めれば済む」と受け取られがちです。しかし、この2つが扱っている範囲は同じではありません。BEMは、ひとつの部品をブロ

• CSSアニメーションを多用するとパフォーマンスが落ちるのか？

  

  キーフレームを追加するたびに、ページは華やかに見えるようになります。一方で、スクロールするたびに数十個の要素が同時に動くような状態では、見た目とは別に、ブラウザの描画処理に負荷がかかっていきます。CSSアニメーションを多用すると常にパフォーマンスが落ちる、と明確に示した一次情報は見当たりません。パフォーマンスが落ちやす

• CSSの命名規則FLOCSSとは

  

  案件ごとにクラス名の付け方が違い、同じボタンに .btn、.c-button、.p-mv__btn という3種類のクラスが混在している。修正のたびに検索して上書きを重ね、詳細度がどんどん高くなっていく。こうした状況は、制作の現場で珍しくありません。命名のルールを揃えるだけで、CSSの崩れがすべて防げるわけではありません

• 2026年の国産CSSフレームワーク - Lism CSS -

  

  「国産のCSSフレームワークを、2026年の案件でどう見るか」。聞かれたとき、名前だけ並べて終わる。利用者数の順位や、これ一本に置き換わる、という話ではないです。この記事では、日本発の Lism CSS を、公式ドキュメントに書かれている範囲で整理しようと思います。導入すれば設計が不要になる、とは言いません。何を引き受

• 【Webサイト診断】あなたのホームページ、問い合わせまでの導線を確認していますか？ - 訪問者を迷わせる「消えたボタン」とCVR低下の罠 -

  

  綺麗で今風にしたのに、問い合わせが増えない。アクセスはあるのに、次の行動が起きない。Web担当の場でよく出る悩みです。見た目の完成度と、問い合わせやすさは、同じではありません。しかし、おしゃれさと CV が逆相関する、という話でもありません。途中で案内が途切れると、探してまで送る人は少ない、という話です。結論です。ユー

• 【Webサイト診断】あなたのホームページ、検索エンジン（とAI）に正しく伝わっていますか？ - 見落とされがちな「見出しの崩壊」と構造化データの罠 -

  

  PC やスマホで綺麗に見えているから、検索にも AI にも同じように伝わっている。そう限りません。人は色と配置で読みます。クローラーと生成 AI は、見出しの順、テキスト、マークアップされた事実を手がかりにします。支離滅裂な文章になっている、とという話ではありません。見た目の階層と、HTML の階層がずれているページは

• 【Webサイト診断】あなたのホームページ、スマホで見にくくなっていませんか？ - デザイナーがやりがちな「小さすぎるUI」とiOSフォームズームの罠 -

  

  この記事をスマートフォンで読んでいるなら、先に自社のホームページを、同じ端末で開いてみてください。PC のブラウザ幅を狭めただけ、エミュレータだけ、で終わっていないか。レスポンシブになっていることと、指で使えることは、同じではありません。結論です。PC では整って見えても、実機では文字が小さい、ボタンが隣と近い、入力の

• Webサイトの「動き」はどこまで必要？時代は繰り返す。2026年のモーションデザインとUX - アニメーションがCVRと表示速度を阻害する理由 -

  

  スクロールするたびに要素がフワッと出る。画面を替えるたびに長いローダー。それはユーザーのためか、カンプを賑やかにするためか。意識していない意図が混ざっていることがあります。ブランディングや演出が目的のサイトでは、動きそのものが価値になることもあります。成果（問い合わせ、購入、速度）が必要とされるサイトでは、演出のための

• 【修正指示に爆速対応】カンプ崩しゼロ！flocss思想でつくる自作SCSSユーティリティ一式

  

  デザインカンプの見た目どおりに組んだあとに、「余白だけ +10px」「SP だけ折り返すな」と修正が来ます。クラスを検索して上書きし、ブロックの修飾子が増えていく。その時間は、よくあります。カンプ崩しゼロ、修正が激減、とは言いません。ブロックの名前は触らず、例外だけを短いクラスで足す用意があると、後工程の差分が小さくな

• 【発注側も知っておくべき】2026年のWeb制作で失敗しないための「要件定義」と「アクセシビリティ」 - クライアント編 -

  

  「Web制作はプロに任せておけば安心」「安くて見栄えが良ければいい」。発注の場で、よく出る言葉です。見た目の発注は、必要です。それだけで足りるかは、別です。見た目のデザイン性だけしか見ずに発注すると検索にも AI にも載らない可能性はあります。画面の外（キーボード、読み上げ、シェアカード、機械向けの型）まで範囲に入れる

• 【案件炎上を防ぐ】Web制作の見積もりに必ず含めるべき「見えない工数」の正体と算出法

  

  デザインがいつまでも固まらない。組んでから大幅に修正が入る。公開前後に「ついでに」が増える。現場で繰り返すパターンです。毎回赤字になる、とは言いません。起きやすいのは、作業費（デザイン・コーディング）だけを書いて、調査・合意・検証・境界の外の修正を、無償の隙間に入れていることです。結論です。これらは予測不能な事故、だけ

• 【最終工程だからこそできる】今必要とされる構造化データとアクセシビリティ - コーダー編 -

  

  ペルソナも CV の説明もなく、渡されるのは Figma や XD だけ。「指示が無いから、見た目どおりに組む」。その進め方になっていませんか。見た目の一致は仕事の一部です。それだけで足りるかは、別です。2026年に、トレースだけのコーダーが AI とローコードに必ず代替される、という事実はありません。画面に無い意味（

• 【デザイン以外の知識が必要？】今必要とされる構造化データとアクセシビリティ - デザイナー編 -

  

  デザイナーだからそんなセリフ、言った覚えや思ったことありませんか？デザインの勉強をしてきたから。コードは難しくて苦手。ウェブデザイナーでもデザイン専業の方からよく聞く言葉です。デザイナーでもコードは人並み以上にできている制作会社にいた時に「苦手、嫌い、できない」と言ってたデザイナーは多くいました。でも、いざコードを書く

• 【公開前まで放置しない】今必要とされる構造化データとアクセシビリティ - ディレクター編 -

  

  仕様書って数年前から同じフォーマットじゃないですか？2026年現在、ウェブサイト制作には数年前には無かった対応すべき項目があります。アクセシビリティの必須、AI検索などへの対応に構造化データ追加などです。でも指示書・仕様書って数年前から同じフォーマットじゃないですか？実際、コーディング・開発だけ依頼されることが多いです

• 【納期だけを見て進めるな】デザイン未確定のまま開発を進めると過剰工数が爆発する理由と「分離発注」の防衛策

  

  「納期が近いから、デザインは途中でも先に組んでほしい」「社内でデザインするから、開発だけ安くお願いしたい」。現場ではよく出る言葉です。急いで受けたくなる気持ちは分かります。未確定のまま納期だけを見て着手することが、必ず炎上する最短ルートだ、とは言い切れませんがトラブルが起こる可能性は非常に高いと言えます。起きやすいのは

• Jamstackはやりすぎ？Next.jsに疲れたWeb制作者へ贈る「PHP × microCMS」で作る超軽量・静的JSONキャッシュ型サイトのすすめ

  

  Jamstack や Next.js を提案してみたものの、ビルド、デプロイ、ライブラリ更新で疲れていませんか。WordPress のテーマ自作はできる。include で部品も分けたい。ただ、Node のビルドとインフラの費用が、案件の規模に乗らない。静的 HTML だけに戻るのも気が重い、という層向けです。結論です

• 【AIに検索・引用されるには？】自社の一次情報と第三者の裏付けを紐づけてGEO（AI検索最適化）を成功させる運用手法

  

  一次情報を出しているのに、ChatGPT や Perplexity のソースに自社 URL が無い。サイトの文章が、自画自賛に見えていないか。E-E-A-T や GEO の話を聞くほど、何を足せばよいかがわかりません。結論です。AI が「自社データ×第三者の裏付け」で公式に評価している、という公開仕様はありません。 人