基礎練習

JavaScriptの配列メソッド（map、filter、reduce、find、sort等）を実践的な10問の練習問題で完全攻略。ヒント・解答例付き。

「レストランのWebサイト、一度は作ってみたい」と思いながら、どこから手をつければいいかわからない—...

デザインツールを学びたいと思ったとき、多くの人がYouTubeや書籍で独学をスタートします。でも、こ...

インディーメーカーとは？ 「インディーメーカー」という言葉を聞いたことはありますか？ 大企業や投資家...

WordPress/STUDIO/HTMLでLP(ランディングページ)を制作する際、お問い合わせフォ...

SaaS風ランディングページ模写 模写上級シリーズ第6弾は、SaaS風のCTA特化ランディングページ...

はじめに Photoshopの最新機能「生成AI」を使えば、これまでにない表現を短時間で実現できます...

はじめに Photoshopでデザインをするとき、ちょっとした工夫で大きな違いが出るのが「影（シャド...

はじめに Photoshopの文字加工やバナー制作は、Webデザインの現場で頻繁に求められるスキルで...

はじめに WebサイトやSNSでよく目にする「バナー」。限られたスペースの中で情報を伝えるには、デザ...

はじめに Photoshopの魅力のひとつは、写真に臨場感あるエフェクトを簡単に加えられることです。...

はじめに Photoshopを学び始めたばかりの方にとって「どんな練習から始めればいいのか分からない...

「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、...

1. 模写から「考えるデザイン」へ Figmaでの模写は、Web制作初心者にとって「良いデザインに触...

使用したFigmaテンプレート このテンプレートの特徴 模写のルール（今回の練習方針） 「配色センス...

導入｜デザイン参考が“ノイズ化”していませんか？ 「PinterestやInstagramで“良いデ...

はじめに｜SUZURIは“学習ツール”としても使える 「デザインを学ぶ」と聞くと、FigmaやPho...

1. はじめに｜タグの意味を“見た目”で決めていませんか？ HTMLを書くとき、つい「見た目」に頼っ...

1. はじめに｜見出しタグが「適当」になっていませんか？ Webサイトやブログ記事を作っていると、&...

はじめに Webデザインの世界で、「よく見える」と言われるレイアウトには、多くの技術的背景が存在しま...

Figma模写シリーズ第6弾は、3つのカード型レイアウトのうち、どれか1つを選んで模写できる初級編で...

Web制作やWordPress開発で使われるエディターの中でも、今や定番となったのが「Visual ...

Figma模写シリーズ第5弾は、山・登山・ハイキングをテーマにした縦長ランディングページの模写に挑戦...

Figma模写シリーズ第4弾は、旅行・観光系のWebサービスをテーマにした本格的なUI構成に挑戦しま...

Figma模写シリーズ第3弾は、アーティストのプロモーションサイトを想定した音楽系ランディングページ...

Figma模写シリーズ第2弾は、建築事務所やプロジェクト紹介向けのミニマルで洗練されたレイアウトに挑...

Web制作スキルを効率的に高める方法の一つが「模写コーディング」 とくに最近では、Figma（フィグ...

Webサイト制作において、スクロールに応じて要素をアニメーションさせる表現は今や定番です。この記事で...

このページは、ファッション雑誌の世界観をWeb上で再現したLP（ランディングページ）の模写練習用デモ...

近年のフロントエンド開発において、スクロール位置に応じてコンテンツが動くスクロールアニメーションは、...