模写練習

Figma模写 #5:山と自然をテーマにした中級レイアウトに挑戦!

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

続きを読む →

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(フィグマ)という無料のデザインツールを使って、プロのようなデザインをそのまま模写する学習スタイルが注目され…

続きを読む →

AOS.jsの使い方とサンプルLP|初心者でも簡単スクロールアニメーションを実装

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

続きを読む →

ScrollReveal.jsの使い方とサンプルLP|簡単スクロール演出を実装

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

続きを読む →

ファッション雑誌風LPをHTML/CSSで模写練習|サイドメニュー

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

続きを読む →
Tailwind CSSの学習方法|初心者が最短でマスターする7つのステップ

Tailwind CSSの学習方法|初心者が最短でマスターする7つのステップ

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

続きを読む →