Figma模写シリーズ第6弾は、3つのカード型レイアウトのうち、どれか1つを選んで模写できる初級編です。 「全部模写するのはちょっと大変…」という方も、1枚だけでもOK！HTMLとCSSの基本だけで完…

Figma模写シリーズ第5弾は、山・登山・ハイキングをテーマにした縦長ランディングページの模写に挑戦します。 大自然の写真を大胆に使った背景演出や、ナンバリング付きのセクション構成など、中級レベルにふ…

Figma模写シリーズ第4弾は、旅行・観光系のWebサービスをテーマにした本格的なUI構成に挑戦します。 構造は一見シンプルに見えますが、検索フォームやセクションごとのカードUIなど、設計・再現ともに…

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

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

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

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

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

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