vibe coding とは？原義と実務用法の違い・AIのコードを受け入れる判定手順
vibe coding（バイブコーディング）とは、AIが生成したコードの差分を読まずに受け入れながら...
続きを読む 
中級 フロントエンド学習の基本
実務寄りの中級レベル課題集です。WordPressテーマ開発（テンプレート階層・カスタム投稿）、GA4/GTM計測、FLOCSS・CSSネスト・Tailwind CSS v4移行といったモダンCSS、PHPMailerによるメール送信、Electron・3Dカルーセルなど、案件で必要になるテーマを扱います。模写コーディング全体は 模写コーディング練習サイト も参照してください。
全150件の記事中、91-120件を表示
WEBマーケティングの本質は三方良し｜江戸時代から続く普遍的原則と実践法
三方良しとは、施策を打つ前に「やらない」を決める判断基準である 三方良しとは、売り手・買い手・世間の...
続きを読む 
CSSとJavaScriptで作る3Dカルーセル|キーボード操作対応のインタラクティブギャ...
Webサイトに奥行きと立体感を与える3Dカルーセル。単なる平面的なスライダーとは違い、空間の中でカー...
続きを読む 
WordPress/STUDIO/HTMLコンタクトフォームおすすめツールと実装方法
WordPress/STUDIO/HTMLでLP(ランディングページ)を制作する際、お問い合わせフォ...
続きを読む 
知らないと危険！YouTubeロゴやSNSロゴをHPに掲載する前に必ず確認すべきこと
「よく見るロゴだし、そのまま使っても大丈夫でしょ？」 ちょっと待ってください！それ、実は規約違反かも...
続きを読む 
クエリファンアウトとは？AI検索時代のSEO設計完全ガイド
「検索1位なのにクリックされない」「記事を書いても読まれない」──そんな違和感を覚えたことはありませ...
続きを読む 
sameAsとは？SNSとサイトの紐づけを自分で検証する手順
SNSのプロフィールに自分のサイトURLを置き、サイト側からもSNSへリンクする。この「つなぎ方」が...
続きを読む 
LPが検索に出ない原因の特定手順｜HTMLとSearch Consoleで診断
LP（ランディングページ）を公開したのに、社名やサービス名で検索しても出てこない。原因を「1ページし...
続きを読む 
AIOSEOのFAQスキーマと自作FAQが競合したときの解決方法
背景 WordPressでFAQを実装する際、AIOSEO（All in One SEO） を使って...
続きを読む 
Web制作者のためのSRE入門｜無料の外形監視とSLOの決め方
Web制作者にとってのSREとは、作ったサイトが落ちたことを依頼主より先に検知し、どこまでの停止を許...
続きを読む 
PageSpeed Insightsの見方と改善実務｜スコアを上げる手順とチェックポイント
PageSpeed Insights（PSI）は、Googleが提供する無料のページ計測ツールです。...
続きを読む 
E-E-A-Tとは？Web制作とSEO対策で検索評価と信頼性を高める方法
E-E-A-T（イーイーエーティー）とは、Googleの検索品質評価ガイドラインで示される、Expe...
続きを読む 
Core Web Vitals改善ガイド｜LCP・INP・CLSを最適化する2026年版チ...
Core Web Vitalsとは、Googleが定めるユーザー体験を測る3つの指標（LCP・INP...
続きを読む 
関連記事ウィジェットは内部SEOではない｜本文内部リンクの棚卸し手順
内部リンクの棚卸しとは、グローバルナビ・パンくず・関連記事ウィジェットのようなテンプレート由来のリン...
続きを読む 
Web広告を出す前に整える4つの受け皿｜出稿可否を数値で判定する
「広告を出せば問い合わせが増えるはずだ」と考えて出稿し、増えたのがアクセス数だけだった。この結末にな...
続きを読む 
販路の切り替え先の決め方｜EC・展示会・検索を数値で選ぶ
販路の切り替え先は、勘ではなく数字で決められます。見るのは3つだけです。自社の商材カテゴリのEC化率...
続きを読む 
値引きしないと通らない時の判定｜商品と価格の決め直し方
値引きしないと通らない状態の原因は、販路の数ではありません。自分が売っているものが「中身」「価格」「...
続きを読む 
模擬案件プラン｜デザイン＋コーディングを計2回添削。優秀作品はサイト掲載
「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、...
続きを読む 
SEO・AEO・GEOの投資配分｜3軸をどう組み合わせるかの設計手順
SEO・AEO・GEOの違いを調べて理解したあと、必ず次の壁にぶつかります。「で、どれにどれだけ手を...
続きを読む 
構造→視覚→文字を守れたかを検品する｜色・ぼかし・強弱の3テスト
「UIは構造→視覚→文字の順で組み立てる」という進め方は、手を動かす前の指針としては役に立ちます。と...
続きを読む 
Viteの特徴・導入・使い方ガイド｜React・Vue対応の爆速ビルドツール
その後の手順： これだけで、Vite開発環境が数十秒で起動します。 ViteとWebpackとの違い...
続きを読む 
GSAPカードアニメーション実装ガイド｜フリップ＆スタック2パターン【CSS＋JS】
WebサイトやアプリのUIに「くるっ」とした動きが加わるだけで、体験は一気にリッチになります。今回は...
続きを読む 
Figma模写 #5：山と自然をテーマにした中級レイアウトに挑戦！
Figma模写シリーズ第5弾は、山・登山・ハイキングをテーマにした縦長ランディングページの模写に挑戦...
続きを読む 
ECサイト構築の費用比較｜月商から選ぶモール出店・ASP・自社EC
ECサイトの費用とは、初期費用と月額固定費、そして売上に比例して増える変動費（決済手数料・システム利...
続きを読む 
Web制作者のための基本知識｜HTML・WordPress・メールのサーバー構成まとめ
1つのドメインに対して、Webの表示を担当するサーバーとメールを担当するサーバーは、DNSの別々のレ...
続きを読む 
ノート風ハンバーガーメニューをCSSで作る｜キーボード対応まで
ノート風ハンバーガーメニューとは、repeating-linear-gradient で罫線を、疑似...
続きを読む 
模写中級 #006 | ScrollReveal.jsの使い方とサンプルLP
Webサイトにアニメーションを取り入れたいとき、軽量で手軽に導入できるライブラリがあると便利です。こ...
続きを読む 
Electronで作るクリップボード履歴アプリ開発入門
この記事は、Electron と HTML/CSS/JavaScript を使って開発した「クリップ...
続きを読む 
CSSネスト完全ガイド｜基本構文からBEM×FLOCSS実践まで
CSSネストとは、Sassなどのツールを使わずにCSSだけでセレクタを入れ子に書ける標準機能です。2...
続きを読む 
Viteの基礎知識｜高速フロントエンド開発の仕組みと導入方法を解説｜モダン環境対応
1. はじめに：Viteとは？ Vite（ヴィート）は、フロントエンド開発のビルドツールです。Vue...
続きを読む