模写練習

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

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

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

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

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

Webサイトに動きをつけたい。でもJavaScriptを書くのはハードルが高い…そんなときにおすすめなのが AOS.js（Animate On Scroll） です。 この記事では、AOS.jsの基本…

Webサイトにアニメーションを取り入れたいとき、軽量で手軽に導入できるライブラリがあると便利です。この記事では、ScrollReveal.jsの基本的な使い方と、実践的なサンプルとしてデモサイトを紹介…

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

Tailwind CSSは、クラス名を組み合わせて直感的にデザインを組み立てられる「ユーティリティファーストCSSフレームワーク」です。初心者でも理解しやすく、CSSが苦手な方でも実装力がつくため、学…