Figma模写シリーズ第3弾は、アーティストのプロモーションサイトを想定した音楽系ランディングページに挑戦します。 視線を惹きつける大胆なヒーロー画像、ストリーミングサービスの導線、シンプルなフォーム…

Figma模写シリーズ第2弾は、建築事務所やプロジェクト紹介向けのミニマルで洗練されたレイアウトに挑戦します。 今回はHTMLとCSSのみを使用し、構造理解とレイアウト設計のスキル向上を目的とした模写…

Web制作スキルを効率的に高める方法の一つが「模写コーディング」 とくに最近では、Figma（フィグマ）という無料のデザインツールを使って、プロのようなデザインをそのまま模写する学習スタイルが注目され…

日本最速？阿部寛のホームページが爆速な理由 Web制作やフロントエンドの世界では、「表示速度」や「軽量化」は日常的に語られる大切なテーマです。しかし、そんな技術的な話題を飛び越えて、**ネタとしても愛…

ランディングページはSEOに弱いって本当？ 「ランディングページ（LP）はSEOに不利」と言われることがあります。確かに、1ページ完結の構造は情報量が限られ、検索エンジンの評価を受けづらいという面もあ…

ノーコードだけじゃ稼げない！フリーランスWeb制作者の成長ステップ 「初心者からフリーランスWeb制作者を目指すには何から学べばいい？」「ノーコードでLPが作れても、仕事は続けられるの？」 この記事で…

このページは、ファッション雑誌の世界観をWeb上で再現したLP（ランディングページ）の模写練習用デモです。HTMLとCSSのみで構成されており、画像の使い方や余白の取り方、雑誌的なタイポグラフィを意識…

1. はじめに：Web制作とデュアルモニターの相性 Web制作の現場では、コードを編集しながらブラウザで表示を確認したり、デザインカンプを見ながら実装を行ったりと、複数の画面を同時に扱う機会が多いもの…

CrossGlide：上下スクロール中に画像がすり替わるスタイリッシュなアニメーションを実装しよう Webサイトに動きのあるビジュアル要素を取り入れたいとき、スクロールに連動するアニメーションは非常に…