Retinaディスプレイとレスポンシブ画像の基本｜なぜ2倍サイズの画像が必要なのか
Retinaディスプレイでなぜ画像がぼやけるのか、その仕組みをピクセルの基礎から解説。srcset・picture・si…
初心者・挫折経験者・Web担当者向け
Web制作を、やさしく、
実務で使える知識に。
HTML/CSS、WordPress、SEO、GA4、そして生成AI活用まで。
「何から始めればいいかわからない」を解消するWeb制作How toサイトです。
新着記事
最新の記事
301リダイレクトとは｜URLを変えたときにSEO評価を引き継ぐ方法
301リダイレクトの意味と302との違い、WordPressでの設定方法（.htaccess・Redirectionプラ…
WordPressのバックアップ方法｜プラグインと手動の2パターン
WordPressのバックアップ方法を「プラグイン（UpdraftPlus・BackWPup）」と「手動（FTP＋php…
NotebookLM入門｜PDFや資料を読み込んでAIに質問する方法
GoogleのAIノートツール「NotebookLM」の使い方を初心者向けに解説。PDFや資料をアップロードしてAIに質…
カテゴリ
初心者向けweb講座
HTML / CSS / JS まとめ｜コーディングの落とし穴・SEO・セマンティックタグの使い分け
HTML・CSS・JavaScriptの学習を締めくくる総まとめ記事。コーディングでよく起こるトラブルの対処法、SEOの…
jQueryプラグインの使い方｜導入手順・スライドショー作成・探し方まとめ
jQueryプラグインとは何か、どうやって導入するのか、slick.jsを使ったスライドショーの作り方、目的に合ったプラ…
JavaScriptとjQueryの基礎｜DOM操作・イベント・アニメーションを理解する
JavaScriptとjQueryの基礎を解説。DOMの仕組み・イベントハンドラ・スクロールアニメーション・ハンバーガー…
レスポンシブWebデザインの基本｜メディアクエリ・ブレイクポイント・モバイルファースト
ウェブサイトをPC・スマホ・タブレットで快適に見せるレスポンシブWebデザインの基本を解説。viewportの設定、メデ…
HTMLページ制作の基礎と実践 ― Webサイト構成・meta要素・フォルダ管理・CSS初期設計
WebサイトはヘッダーCSSリセット・フォルダ構成・meta要素など、コーディング前の設計が完成度を左右します。実践的な…
HTML+CSS応用：position・transform・animation・擬似クラスの使い方
CSSのposition・transform・animation・擬似クラス・擬似要素を体系的に解説。要素の自由な配置か…
HTML+CSS レイアウト基礎 ─ ボックスモデル・Flexbox・Grid を理解する
ボックスモデル・Flexbox・Gridを中心に、CSSレイアウトの基本を体系的に解説。ブロック/インラインボックスの違…
VS Codeの導入と基本操作ガイド｜拡張機能からHTML/CSS演習まで
Web制作の現場標準エディタ「VS Code」の導入手順から、日本語化・おすすめ拡張機能・基本操作、HTML/CSSレイ…
CSS基礎：セレクタ・プロパティ・値から詳細度まで徹底解説
CSSはHTMLの見た目を整えるデザイン指示書です。セレクタ・プロパティ・値の基本構文から、クラス・IDの使い分け、カス…
HTML・CSS・JavaScriptとは？Web制作に必要な3言語の役割と最初の一歩「Hello World」
Web制作に欠かせない3つの言語——HTML・CSS・JavaScript（jQuery）の役割をわかりやすく整理します…
カテゴリ
良く使うJSコード集
jQueryタブ切り替えサンプル集｜シンプル・フェード・スライドアンダーライン・直リンク対応
jQueryで作るタブ切り替えの4パターンをコピペ可能なコード付きで解説。シンプル・フェードアニメーション・スライドアン…
ロールオーバーでメニューオープン（ドロップダウンメニュー）
マウスオーバーで下層メニューが表示されるナビゲーションです。無駄なCSSは取り除いたシンプルなサンプルコードで掲載。※ペ…
モーダルウィンドウ（プラグイン不要/デザインカスタマイズOK）
リンクをクリックしたら、ページ上にウィンドウが表示されるモーダルウィンドウの実装方法。プラグインなどを利用するとデザイン…
カテゴリ
WordPress
301リダイレクトとは｜URLを変えたときにSEO評価を引き継ぐ方法
301リダイレクトの意味と302との違い、WordPressでの設定方法（.htaccess・Redirectionプラ…
WordPressのバックアップ方法｜プラグインと手動の2パターン
WordPressのバックアップ方法を「プラグイン（UpdraftPlus・BackWPup）」と「手動（FTP＋php…
WordPressテーマ開発で使い回せるAIプロンプト集【コピペOK・24パターン】
uni-logのWordPressテーマ開発で実際に使ったAIプロンプトを24パターン紹介。テーマ初期設定・ハンバーガー…
WordPress保守って何？メンテナンスが重要な理由と、セキュリティ対策の基本
WordPressを作ったら終わり、と思っていませんか？実は定期的な保守・メンテナンスが必要です。放置するリスク、一般的…
CMSとの上手な付き合い方｜WordPressを安全・快適に運用するメンテナンス術
WordPressを安全・快適に運用するための定期メンテナンス項目と、トラブルを未然に防ぐための管理術を解説します。
WordPressテーマのカスタマイズをAIで加速させる実践的な方法
「AIにコードを生成してもらったけど、どこに貼ればいいかわからない」「そもそもWordPressのテーマってどうやって作…
WordPressテーマ選びの基準｜デザイン性と保守性を両立するチェックポイント
WordPressテーマを選ぶ際に確認すべき7つのチェックポイントを解説。デザイン・パフォーマンス・セキュリティのバラン…
ページネーション（ページ送り）の設置【プラグイン不要】
ブラグインを使わずページネーションを追加する方法。投稿（post）、カスタム投稿タイプでも動きます。また固定ページに作成…
カテゴリ
web制作のポイント
Retinaディスプレイとレスポンシブ画像の基本｜なぜ2倍サイズの画像が必要なのか
Retinaディスプレイでなぜ画像がぼやけるのか、その仕組みをピクセルの基礎から解説。srcset・picture・si…
Figmaの基本操作｜デザインカンプの見方と素材の書き出し方
コーダー・Web担当者向けにFigmaの基本操作を解説。デザインカンプの見方・右パネルの読み方・画像の書き出し方・Ins…
jQueryタブ切り替えサンプル集｜シンプル・フェード・スライドアンダーライン・直リンク対応
jQueryで作るタブ切り替えの4パターンをコピペ可能なコード付きで解説。シンプル・フェードアニメーション・スライドアン…
Google Fontsの使い方｜linkタグ・@import・複数フォント・ウェイト指定
Google Fontsの読み込み方法（linkタグ推奨・@import）、複数フォントの一括読み込み、ウェイト指定まで…
モダンCSS関数サンプル集｜aspect-ratio / calc / clamp / min / max
aspect-ratio・calc()・clamp()・min()/max() の4つのモダンCSS関数をプレビュー＋コ…
背景に動画を設置する方法｜videoタグ＋position/flex 2パターン解説
HTMLのvideoタグを使って背景動画を設置する方法を2パターン解説。position: absolute方式とfle…
CSS Gridパターン・レイアウト集｜よく使う10パターンをコード付きで解説
CSS Gridのよく使うパターンをプレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記事。等幅カラム・a…
Flexboxパターン・レイアウト集｜よく使う配置からサイト構成まで
Flexboxのよく使うパターンとサイトレイアウトを、プレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記…
サーバーの選び方｜目的・規模・将来性で最適なサーバーを選ぼう
Webサイト公開に必要なサーバーの選び方を解説。共有サーバー・VPS・クラウドサーバーの違いと比較表、個人情報を扱うサイ…
CSS floatパターン集｜レイアウトの仕組みと現代との比較
float: left/right の基本からclearfix・2/3カラムレイアウトまで、float時代のCSS技術を…
カテゴリ
SEO
301リダイレクトとは｜URLを変えたときにSEO評価を引き継ぐ方法
301リダイレクトの意味と302との違い、WordPressでの設定方法（.htaccess・Redirectionプラ…
静的WebサイトのXMLサイトマップの作り方【手動・自動どちらも解説】
静的WebサイトでXMLサイトマップを作る方法を、手動・無料ツール・コマンドの3パターンで解説。Google Searc…
検索にヒットしない時にやるべき5つの対応
「検索してもサイトが出てこない」「記事を書いたのにGoogleに載らない」——そんな悩みを抱えていませんか？この記事では…
見出し（hタグ）の正しい使い方｜SEOと読みやすさを両立する構造設計
hタグ（見出しタグ）はページの骨格です。正しく使えばGoogleがコンテンツを理解しやすくなり、読者にとっても読みやすい…
タイトルタグとmeta descriptionの書き方｜クリック率を上げるSEOライティング入門
検索結果に表示される「タイトル」と「説明文」は、SEOの中でも最初に取り組むべき基本です。正しく書くだけでクリック率（C…
AIオーバービュー時代のSEO戦略｜Googleの生成AI検索に対応するコンテンツ設計
Googleが検索結果の上部にAIが生成した回答を表示する「AIオーバービュー（旧SGE）」が本格的に展開されています。…
Google Search Consoleの使い方入門｜web担当者が毎週確認すべき3つのレポート
Google Search Console（GSC）は無料で使えるSEO分析ツールの中で最も重要なものです。Google…
ページ速度改善の基本｜初心者でもできる表示速度アップの7つのチェックポイント
ページの表示速度はSEOのランキング要因であり、ユーザー体験にも直結します。1秒の遅延でコンバージョン率が約7%低下する…
サイトマップの作り方と送信方法｜XMLサイトマップでクロールを最適化する
XMLサイトマップはGoogleにサイトのページ構成を伝えるファイルです。特にページ数が多いサイトや新しいサイトでは、ク…
AIに引用されるコンテンツの書き方｜LLMO時代のWebライティング術
ChatGPTやPerplexityなどのAIが検索の代わりとして使われる機会が増えています。AIの回答に自社コンテンツ…
カテゴリ
LLMO
AIオーバービュー時代のSEO戦略｜Googleの生成AI検索に対応するコンテンツ設計
Googleが検索結果の上部にAIが生成した回答を表示する「AIオーバービュー（旧SGE）」が本格的に展開されています。…
AIに引用されるコンテンツの書き方｜LLMO時代のWebライティング術
ChatGPTやPerplexityなどのAIが検索の代わりとして使われる機会が増えています。AIの回答に自社コンテンツ…
AIに「選ばれる」時代へ——AIO / LLMOとは何か【2026年最新版】
検索行動の変化が企業のコンテンツ戦略を根底から問い直している。SEOの次世代として注目されるAI最適化（AIO / LL…
カテゴリ
サイト解析
GA4解析レポートを自分で作る方法｜毎月の定点観測から改善提案まで
GA4解析レポートの作り方を解説。チェックすべき5つの基本指標・レポートの構成テンプレート・数値から改善アクションを導く…
Googleアナリティクスで何がわかるのか？実例レポートをもとに改善提案の方法を解説
Googleアナリティクス（GA4）を導入しているけれど、どこを見ればいいかわからない方へ。観光・小売系・BtoB製造業…
GA4とSearch Consoleの使い分け｜2つのツールを連携させた効果測定の方法
GA4とGoogle Search Consoleそれぞれの特徴と使い分け、さらに連携させることで何がわかるかを、初心者…
GA4の基本と使い方入門｜Web担当者が押さえるべきレポートと設定方法
GA4（Google Analytics 4）の基本的な考え方から、実務で最初に押さえるべきレポートと設定まで、初心者で…
検索にヒットしない時にやるべき5つの対応
「検索してもサイトが出てこない」「記事を書いたのにGoogleに載らない」——そんな悩みを抱えていませんか？この記事では…
Googleアナリティクス基礎｜GA4の設定から読み解き方まで入門ガイド
Google Analytics 4（GA4）の基本設定方法と主要指標の読み解き方を解説。データを活用してWebサイトを…
LPのA/Bテスト実践法｜仮説設定からデータ分析まで改善サイクルを回す手順
ランディングページのA/Bテストを実践するための進め方を解説。仮説の立て方、ツールの選び方、結果の読み方まで具体的に紹介…
カテゴリ
デザイン制作
Retinaディスプレイとレスポンシブ画像の基本｜なぜ2倍サイズの画像が必要なのか
Retinaディスプレイでなぜ画像がぼやけるのか、その仕組みをピクセルの基礎から解説。srcset・picture・si…
Figmaの基本操作｜デザインカンプの見方と素材の書き出し方
コーダー・Web担当者向けにFigmaの基本操作を解説。デザインカンプの見方・右パネルの読み方・画像の書き出し方・Ins…
Google Fontsの使い方｜linkタグ・@import・複数フォント・ウェイト指定
Google Fontsの読み込み方法（linkタグ推奨・@import）、複数フォントの一括読み込み、ウェイト指定まで…
背景に動画を設置する方法｜videoタグ＋position/flex 2パターン解説
HTMLのvideoタグを使って背景動画を設置する方法を2パターン解説。position: absolute方式とfle…
CSS Gridパターン・レイアウト集｜よく使う10パターンをコード付きで解説
CSS Gridのよく使うパターンをプレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記事。等幅カラム・a…
Flexboxパターン・レイアウト集｜よく使う配置からサイト構成まで
Flexboxのよく使うパターンとサイトレイアウトを、プレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記…
デザインの基本原則｜余白・配色・タイポグラフィで伝わるWebデザインを作る
Webデザインで重要な三大要素、余白・配色・タイポグラフィの基本原則を解説。初心者でも実践できる具体的なポイントをまとめ…
ヘッダー・フッターの設計原則｜ユーザーを迷わせないサイト共通部品の作り方
Webサイトのヘッダーとフッターの設計原則を解説。ユーザーの迷子を防ぐナビゲーション設計とUXのベストプラクティスを紹介…
レスポンシブデザイン入門｜スマホ・タブレット対応に必要なメディアクエリの基本
レスポンシブデザインの基本概念とメディアクエリの使い方を初心者向けに解説。モバイルファーストの設計思想も紹介します。
配色選びの実践テクニック｜カラーホイールと心理効果を活かした色の選び方
Webデザインにおける配色の基本理論から実践的な選び方まで。カラーホイールの活用法と色が与える心理的効果を解説します。
カテゴリ
生成AI活用
NotebookLM入門｜PDFや資料を読み込んでAIに質問する方法
GoogleのAIノートツール「NotebookLM」の使い方を初心者向けに解説。PDFや資料をアップロードしてAIに質…
AIを使った画像生成入門｜Web担当者が知っておくべき基礎知識
AI画像生成ツールの基礎知識をWeb担当者・初心者向けに解説。Adobe Firefly・Canva・ChatGPTなど…
WordPressテーマ開発で使い回せるAIプロンプト集【コピペOK・24パターン】
uni-logのWordPressテーマ開発で実際に使ったAIプロンプトを24パターン紹介。テーマ初期設定・ハンバーガー…
AIでスクロール読了率を表示するプログレスバーを作る【CSS＋JS生成】
AIでスクロール読了率プログレスバーを生成する方法。scrollYとscrollHeightを使ってwidthを動的に変…
AIでテキストが1文字ずつ打ち込まれるタイピングアニメーションを作る【CSS＋JS生成】
AIでタイピングアニメーションを生成する方法。1文字ずつ表示するJS・カーソル点滅CSS・複数フレーズのループまでプロン…
AIで星評価（レーティング）UIを作る【CSS＋JS生成】
AIで星評価UIを生成する方法。ホバーで点灯・クリックで確定するインタラクションをCSS+JSで実装。プロンプト例・コー…
AIでボタンのホバーエフェクトを作る【CSS生成・5パターン】
AIでボタンのホバーエフェクトを5パターン生成する方法。スライド・アウトライン・矢印・リップル・フロートの各CSSをプロ…
AIでローディングスピナーをデザインする【CSS生成】
AIでローディングスピナーのCSSアニメーションを生成する方法。@keyframesとborderを使ったスピナーをプロ…
AIで画像クリックで拡大表示するライトボックスを作る【CSS＋JS生成】
AIで画像クリック拡大ライトボックスを生成する方法。フェードアニメーション・ESCで閉じる・背景クリック対応のCSS+J…
AIでh1タイトルをグラデーションにする方法【CSS自動生成】
AIを使ってh1タイトルをグラデーション文字にするCSSを自動生成する方法を紹介。既存HTMLへの追加と、HTMLごと生…
人気記事
よく読まれている記事
WordPressテーマのカスタマイズをAIで加速させる実践的な方法
「AIにコードを生成してもらったけど、どこに貼ればいいかわからない」「そもそもWordPressのテーマってどうやって作…
AIに「選ばれる」時代へ——AIO / LLMOとは何か【2026年最新版】
検索行動の変化が企業のコンテンツ戦略を根底から問い直している。SEOの次世代として注目されるAI最適化（AIO / LL…
AIでローディングスピナーをデザインする【CSS生成】
AIでローディングスピナーのCSSアニメーションを生成する方法。@keyframesとborderを使ったスピナーをプロ…
Contact
Web制作でのご相談・お問い合わせ
サイト制作・改善・WordPressカスタマイズなど、お気軽にご相談ください。