模擬案件プラン|デザイン1回+コーディング1回の合計2回の添削付き!優秀作品はCodeQuestに掲載 「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、「この方向性で合ってるのかな……?」「ちゃんと実務でも通用するレベルだろうか?」 そんな不安を抱えて... 続きを読む →
Figma模写 #7|配色センスが身につく3色デザイン練習 使用したFigmaテンプレート このテンプレートの特徴 模写のルール(今回の練習方針) 「配色センスを鍛える」ことがテーマなので、余白や配置も含めて丁寧に再現することを意識しましょう。 HTML / ... 続きを読む →
Figma模写 #6:選べる3パターン!シンプルカードレイアウトで模写力を高めよう Figma模写シリーズ第6弾は、3つのカード型レイアウトのうち、どれか1つを選んで模写できる初級編です。 「全部模写するのはちょっと大変…」という方も、1枚だけでもOK!HTMLとCSSの基本だけで完... 続きを読む →
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は、クラス名を組み合わせて直感的にデザインを組み立てられる「ユーティリティファーストCSSフレームワーク」です。初心者でも理解しやすく、CSSが苦手な方でも実装力がつくため、学... 続きを読む →
Tailwind CSSで作る!製品LP|Swiper・アニメーションも解説 近年、Tailwind CSSの人気はますます高まり、ランディングページ(LP)の制作においても大きな力を発揮しています。本記事では、実際に公開しているスマホ製品LP(デモはこちら)を例に、Tailw... 続きを読む →
Dockerとは?初心者でもわかる仮想コンテナ技術の基礎と使い方 1. Dockerとは? 仮想マシンとの違い Dockerは、アプリケーションとその依存関係をひとまとめにして、どこでも同じように動作させることができるコンテナ型の仮想化技術です。従来の仮想マシン(V... 続きを読む →
Bootstrapでポートフォリオを模写練習|初心者向けに解説 1. はじめに Web制作を学ぶ際に 模写練習 は非常に効果的な方法です。特に Bootstrap を活用すれば、効率よくレスポンシブなデザインを実装できます。本記事では、Bootstrapを使ってシ... 続きを読む →
模写練習:GSAPとScrollTriggerで実現するスクロール連動リバースアニメーション 近年のフロントエンド開発において、スクロール位置に応じてコンテンツが動くスクロールアニメーションは、ユーザーエンゲージメントを高めるために欠かせない要素になっています。特に、「GSAP (GreenS... 続きを読む →
ジムサンプルサイト サイトのポイント レスポンシブデザインの実装 デバイスごとに見やすいレイアウトを提供。 スマートフォンからPCまで一貫したユーザー体験を実現している。 フェードアップの視覚効果 スクロール時に要素が自... 続きを読む →
ポートフォリオサンプルサイトーpagepiling このサイトのポイント 1. ページピリング(Page Piling)の実装 2. ローディング時のシャッターアニメーション 3. スムーズなスクロールアニメーション 4. レスポンシブ対応 5. モダ... 続きを読む →
写真館サンプルサイト <picture> タグ HTMLの<picture>タグは、レスポンシブデザインやパフォーマンス向上に非常に役立つ画像要素です。 1. レスポンシブデザインへの対応 2. パ... 続きを読む →
茶屋サンプルサイト 1. カルーセルとは jQueryで作るカルーセルは、複数の画像やコンテンツをスライドショーのように切り替えながら表示する機能のことを指します。カルーセルはWebサイトでよく使われるUIパターンで、訪... 続きを読む →
サンプルサイトーフッター編 第4回: footer 1. Flexboxの基礎 Flexboxは、従来のfloatやinline-blockなどでは難しかった以下のようなレイアウトが簡単にできます。 複雑なレスポンシブデザインが... 続きを読む →
サンプルサイトーセクション編 第3回: gridセクション 1. グリッドレイアウトの基礎 このページは、CSSのgridプロパティを使ってレイアウトが整えられています。グリッドレイアウトは、行と列を使ってページを分割し、それぞれ... 続きを読む →
HTML中級 #001|解説と実装のポイント 演習課題 このページでは、演習課題「HTML中級 #001」で出題された内容を解説します。サンプルコードを確認しながら、HTMLマークアップの考え方や実装のポイントを整理していきましょう。 演習課題の... 続きを読む →
サンプルサイトーヒーロー編 第2回: ヒーローセクション 「ヒーロー」セクションでは、カーテンアニメーションを実装しています。このアニメーションは、ページが読み込まれた際に視覚的なインパクトを与える効果を狙ったものです。 カーテ... 続きを読む →
ポートフォリオサンプルサイトスクロールGSAP 1. HTML構造 2. CSSによるデザイン 3. JavaScriptの利用 4. パフォーマンス最適化 5. アクセシビリティ GSAPによるアニメーション効果でウェブデザインを進化させる方法 ... 続きを読む →
模写ー基礎練習005 HTMLの基本タグや文法を学べるガイドです。このガイドでは、HTML文書の基本構造や主要な要素の使い方を、実際のJavaScriptコードを用いたスクロールボタンの例とともに解説しています。初心者にも... 続きを読む →
サンプルサイトーヘッダー編 第1回: ヘッダーとナビゲーション4回に分けて部分的に作成して4回目には1枚のLPが完成するようになっています。 模写サンプルサイト elementary001 続きを読む →
模写ー基礎練習004 jQueryとは jQueryは、JavaScriptを簡単に操作できるようにした軽量のJavaScriptライブラリです。2006年にJohn Resig(ジョン・レジグ)によって開発され、Java... 続きを読む →
模写ー基礎練習003 JavaScriptとは JavaScript(ジャバスクリプト)は、ウェブページに動的な機能を追加するためのプログラミング言語です。HTMLとCSSで作成したウェブページに、JavaScriptを使... 続きを読む →
模写ー基礎練習002 CSSとは CSS(Cascading Style Sheets)は、HTMLで作成されたウェブページにスタイルやデザインを適用するためのスタイルシート言語です。CSSを使うことで、文字の色やサイズ、... 続きを読む →