Figma模写 #4：旅行サービス系UIを再現！上級者向けレイアウトに挑戦
Figma模写シリーズ第4弾は、旅行・観光系のWebサービスをテーマにした本格的なUI構成に挑戦します。 構造は一見シンプルに見えますが、検索フォームやセクションごとのカードUIなど、設計・再現ともに…
続きを読む →
記事一覧
Figma模写 #3：音楽系ランディングページをHTML/CSSで再現してみよう
Figma模写シリーズ第3弾は、アーティストのプロモーションサイトを想定した音楽系ランディングページに挑戦します。 視線を惹きつける大胆なヒーロー画像、ストリーミングサービスの導線、シンプルなフォーム…
Figma模写 #2：準中級向け 建築系ポートフォリオ風レイアウト
Figma模写シリーズ第2弾は、建築事務所やプロジェクト紹介向けのミニマルで洗練されたレイアウトに挑戦します。 今回はHTMLとCSSのみを使用し、構造理解とレイアウト設計のスキル向上を目的とした模写…
Figma模写 #1 Figmaで始める模写コーディング
Web制作スキルを効率的に高める方法の一つが「模写コーディング」 とくに最近では、Figma（フィグマ）という無料のデザインツールを使って、プロのようなデザインをそのまま模写する学習スタイルが注目され…
読み込み0.1秒？阿部寛公式サイトの衝撃
日本最速？阿部寛のホームページが爆速な理由 Web制作やフロントエンドの世界では、「表示速度」や「軽量化」は日常的に語られる大切なテーマです。しかし、そんな技術的な話題を飛び越えて、**ネタとしても愛…
【2025年版】ランディングページのSEO対策10選｜1ページでも検索上位を狙う方法
ランディングページはSEOに弱いって本当？ 「ランディングページ（LP）はSEOに不利」と言われることがあります。確かに、1ページ完結の構造は情報量が限られ、検索エンジンの評価を受けづらいという面もあ…
【初心者向け】PHPMailerの使い方まとめ｜安全なメール送信を簡単に実装！
PHPMailerとは？ PHPMailer（ピーエイチピーメーラー）は、PHPでメールを送信するためのライブラリです。通常、PHP標準のmail()関数でもメール送信は可能ですが、以下のような制限が…
AOS.js・IntersectionObserver・GSAPでアニメーション制御する方法
Webサイト制作において、スクロールに応じて要素をアニメーションさせる表現は今や定番です。この記事では、代表的なアニメーションライブラリである AOS.js、Intersection Observer…
CSSでフォントを自在に操る！基本から応用まで徹底解説
Webデザインにおいて「フォント」は第一印象を左右する重要な要素です。この記事では、CSSでのフォント指定方法から応用テクニックまでを初心者にもわかりやすく解説します。Google Fontsの使い方…
【比較】formrun・Tayori・Googleフォーム｜無料で使える問い合わせフォーム3選を徹底解説
はじめに 問い合わせフォームを設置する際、どのツールを選べばいいか迷う方も多いのではないでしょうか？この記事では、formrun・Tayori・Googleフォームの3つの人気フォームツールを徹底比較…
モール出店だけでは危険？自社ECも必要な理由とは？
Amazon、楽天市場、Yahoo!ショッピングなどのECモールは、集客力が高く初心者でも始めやすい一方で、自社ECサイトを持たないことのリスクも徐々に明らかになっています。 本記事では、ECモール出…
ECサイト構築の費用比較｜フルスクラッチ・オープンソース・クラウド型の違いと選び方
ECサイト構築の費用相場と方法別メリット比較ガイド ECサイトを構築する際、「どの方法を選ぶべきか？」と悩む方は少なくありません。開発手法によって費用も機能も大きく変わるため、自社の目的や規模感に合っ…
ノーコードだけじゃ稼げない！フリーランスWeb制作者の成長ステップ
ノーコードだけじゃ稼げない！フリーランスWeb制作者の成長ステップ 「初心者からフリーランスWeb制作者を目指すには何から学べばいい？」「ノーコードでLPが作れても、仕事は続けられるの？」 この記事で…
diffツール5選｜GUI＆オンラインでコード差分比較【初心者OK】
diffツール5選｜GUI＆オンラインでコード差分比較【初心者OK】 プログラミングをしていると、”どこを修正したのか”を確認したい場面は必ずあります。Gitのdiffコマンド…
MindMeisterとTrelloで学習効率を高める方法
MindMeisterとTrelloで学習効率を高める方法 現代の学習では、「やみくもに勉強する」のではなく、頭の中を整理し、タスクを可視化することが効率化の鍵です。 この記事では、人気のマインドマッ…
ColorRotor｜カラフルに回転するCSSローディング
🎨 ColorRotor｜カラフルに回転するCSSローディングアニメーション ColorRotorは、シンプルながらも視線を引きつける、CSSだけで完結するローディングアニメーションです。回転する3つ…
Web制作者のための基本知識｜HTML・WordPress・メールのサーバー構成まとめ
はじめに Web制作をしていると「HTMLはどのサーバーで動くの？」「WordPressは何が必要？」「メールってどう送られているの？」という基本的な疑問に直面します。この記事では、HTMLサイト・W…
Animate.cssの使い方｜Web制作を彩るCSSアニメーションライブラリと再現練習
✅ Animate.cssとは？ Animate.cssは、HTML要素にクラスを追加するだけで、簡単にアニメーションを実装できるCSSアニメーションライブラリです。JavaScript不要で導入も簡…
ちょい休憩記事。あの黄色ノート、ハンバーガーメニューにしてみた。
なぜか昔ほしかった、あの「黄色いノート」 子供のころ、なぜか無性に欲しかった“黄色いノート”ってありませんでしたか？（あるかなぁ。。。ないだろ） リングで綴じられていて、表紙はくすんだ黄色。大学ノート…
WordPressでJavaScriptを正しく読み込む方法｜wp_enqueue_scriptの使い方と条件分岐も解説
WordPressで独自のJavaScriptファイルを読み込みたいとき、どのように書くのが正解でしょうか？ 実は wp_enqueue_script() 関数を使うことで、WordPressに最適な…
WordPressでCSSを読み込む正しい方法｜linkタグとwp_enqueue_styleの違いとは？
WordPressでテーマを作成していると、「CSSファイルってどうやって読み込ませるのが正解？」という疑問にぶつかる方は多いでしょう。実は、CSSを読み込むには主に2つの方法があります。 この記事で…