記事一覧

CodeQuest.workの全記事一覧です。HTML、CSS、JavaScript、WordPress、Webデザインなど、フロントエンド開発に関する記事を掲載しています。

新着順 人気順

全254件の記事中、61-90件を表示

構造→視覚→文字で組み立てる、実践的なUIデザインの流れとは

構造→視覚→文字で組み立てる、実践的なUIデザインの流れとは

はじめに｜「なんとなく」から抜け出すために UIデザインを始めたばかりの頃、よくある悩みが「何から手...
続きを読む
AI時代のコーディング学習法｜ClaudeCode・Cursor・Copilotを使った“ズルじゃない”成長戦略

AI時代のコーディング学習法｜ClaudeCode・⁠Cursor・⁠Copilotを使った“...

AI時代のコーディング学習法｜ClaudeCode・Cursor・Copilotを使った“ズルじゃな...
続きを読む
【初心者向け】Viteの特徴・導入・使い方ガイド｜React・Vueなど主要フレームワークに対応した爆速ビルドツール

【初心者向け】Viteの特徴・⁠導入・⁠使い方ガイド｜React・⁠Vueなど主要フレームワーク...

その後の手順： これだけで、Vite開発環境が数十秒で起動します。 ViteとWebpackとの違い...
続きを読む

Figma模写 #7｜配色センスが身につく3色デザイン練習

使用したFigmaテンプレート このテンプレートの特徴 模写のルール（今回の練習方針） 「配色センス...
続きを読む
生成AIは“無能な上司”では使いこなせない理由

生成AIは“無能な上司”では使いこなせない理由

― GPTはあなたの指示次第でバカにも天才にもなる ― はじめに：「生成AIって思ったほど賢くない？...
続きを読む
📷 pictureタグで画像を画面サイズごとに切り替えるレスポンシブ表現【デモ付き】

📷 pictureタグで画像を画面サイズごとに切り替えるレスポンシブ表現【デモ付き】

📷 pictureタグで画像を画面幅ごとに切り替える方法【体験デモ付き】 Web制作において、画像の...
続きを読む
テキストマスクアニメーション｜スクロールで文字が浮かび上がる最新演出をCSSで実装｜Webデザイン入門

テキストマスクアニメーション｜スクロールで文字が浮かび上がる最新演出をCSSで実装｜Web...

Webサイトのファーストビューにおいて、印象的な表現はユーザーの視線を惹きつけ、記憶に残る導線を作り...
続きを読む
質の担保されたキュレーションサイトとは？UI・LPの参考探しに迷わない選び方ガイド

質の担保されたキュレーションサイトとは？UI・⁠LPの参考探しに迷わない選び方ガイド

🧠 導入｜デザイン参考が“ノイズ化”していませんか？ 「PinterestやInstagramで“良...
続きを読む
SUZURIで出品しながらデザインを学ぶ！実践型トレーニング法5選

SUZURIで出品しながらデザインを学ぶ！実践型トレーニング法5選

はじめに｜SUZURIは“学習ツール”としても使える 「デザインを学ぶ」と聞くと、FigmaやPho...
続きを読む
デザインを言語化する練習帳｜“なぜ良いのか”を説明できる力を鍛えよう

デザインを言語化する練習帳｜“なぜ良いのか”を説明できる力を鍛えよう

はじめに｜“あえて”を言い訳にしていませんか？ 「このデザイン、ちょっとごちゃついてませんか？」「い...
続きを読む
HTMLタグ一覧【フロントエンド向け使用例付き】

HTMLタグ一覧【フロントエンド向け使用例付き】

1. はじめに｜タグの意味を“見た目”で決めていませんか？ HTMLを書くとき、つい「見た目」に頼っ...
続きを読む
h1〜h6見出しタグの正しい使い方とSEO対策【完全ガイド】

h1〜h6見出しタグの正しい使い方とSEO対策【完全ガイド】

1. はじめに｜見出しタグが「適当」になっていませんか？ Webサイトやブログ記事を作っていると、&...
続きを読む
OGPとTwitterカードの設定方法【HTML初心者向け】

OGPとTwitterカードの設定方法【HTML初心者向け】

1. はじめに｜SNSでシェアしたときの「見た目」整ってますか？ 「ブログ記事をSNSでシェアしたの...
続きを読む
グリッドレイアウトの基礎｜Webデザインで崩れない設計と使い方解説｜ワイヤーフレーム対応

グリッドレイアウトの基礎｜Webデザインで崩れない設計と使い方解説｜ワイヤーフレーム対応

Webデザインの設計を学ぶ中で、よく見かける失敗の一つに「グリッドレイアウトが崩れている」ことがあり...
続きを読む
黄金比・白銀比・白金比の使い方｜バナーやロゴに応用できるデザイン理論｜初心者向け解説

黄金比・⁠白銀比・⁠白金比の使い方｜バナーやロゴに応用できるデザイン理論｜初心者向け解説

はじめに Webデザインの世界で、「よく見える」と言われるレイアウトには、多くの技術的背景が存在しま...
続きを読む
MEOはなぜ効かなかったのか？店舗以外では無力な“検索最適化”

MEOはなぜ効かなかったのか？店舗以外では無力な“検索最適化”

「MEOをやったけど、まったく効果がなかった」 そんな経験をしたことがある方も多いのではないでしょう...
続きを読む
検索が効かない時代が来る？SEOの違和感とその先にあるもの

検索が効かない時代が来る？SEOの違和感とその先にあるもの

検索が効かない──そんな違和感を覚えたことはありませんか？ 「検索1位なのにアクセスが増えない」「新...
続きを読む

Figma模写 #6：選べる3パターン！シンプルカードレイアウトで模写力を高めよう

Figma模写シリーズ第6弾は、3つのカード型レイアウトのうち、どれか1つを選んで模写できる初級編で...
続きを読む
VSCodeおすすめ拡張機能11選｜フロントエンド開発を効率化する必須ツール｜初心者対応

VSCodeおすすめ拡張機能11選｜フロントエンド開発を効率化する必須ツール｜初心者対応

Web制作やWordPress開発で使われるエディターの中でも、今や定番となったのが「Visual ...
続きを読む
カードフリップアニメーション｜GSAP Flip Motion 実装ガイド【画像切り替え】

カードフリップアニメーション｜GSAP Flip Motion 実装ガイド【画像切り替え】

WebサイトやアプリのUIに「くるっ」とした動きが加わるだけで、体験は一気にリッチになります。今回は...
続きを読む
カードスタックUIアニメーション｜GSAP Stack Motion 実装ガイド【CSS＋JS】

カードスタックUIアニメーション｜GSAP Stack Motion 実装ガイド【CSS＋...

「カードを1枚ずつ、立体的にめくるように動かせたら──」そんなインタラクションにぴったりな演出が、今...
続きを読む
バイブコーディング＝AI時代の新しい学び方

バイブコーディング＝AI時代の新しい学び方

「AIにコードを書かせる時代」が本格的に到来しました。ChatGPTやClaudeのような生成AIに...
続きを読む
【2025年最新版】MacBookを安く買う方法5選｜学生割からセール時期まで徹底比較

【2025年最新版】MacBookを安く買う方法5選｜学生割からセール時期まで徹底比較

「Webデザインツールに最適なMacBookが欲しいけど、価格がネック…」そんなWeb制作者・クリエ...
続きを読む

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

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

Figma模写 #4：旅行サービス系UIを再現！上級者向けレイアウトに挑戦

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

Figma模写 #3：音楽系ランディングページをHTML/CSSで再現してみよう

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

Figma模写 #2：準中級向け 建築系ポートフォリオ風レイアウト

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

Figma模写 #1　Figmaで始める模写コーディング

Web制作スキルを効率的に高める方法の一つが「模写コーディング」 とくに最近では、Figma（フィグ...
続きを読む
読み込み0.1秒？阿部寛公式サイトの衝撃

読み込み0.1秒？阿部寛公式サイトの衝撃

日本最速？阿部寛のホームページが爆速な理由 Web制作やフロントエンドの世界では、「表示速度」や「軽...
続きを読む
【2025年版】ランディングページのSEO対策10選｜1ページでも検索上位を狙う方法

【2025年版】ランディングページのSEO対策10選｜1ページでも検索上位を狙う方法

ランディングページはSEOに弱いって本当？ 「ランディングページ（LP）はSEOに不利」と言われるこ...
続きを読む