AIとの協働コーディング入門｜プロンプトの書き方で結果が変わる理由
AIコーディングで起きている「プロンプト格差」 ChatGPTやClaudeを使ったコーディングが当...
続きを読む
記事一覧
CodeQuest.workの全記事一覧です。HTML、CSS、JavaScript、WordPress、Webデザインなど、フロントエンド開発に関する記事を掲載しています。
全254件の記事中、1-30件を表示
模写上級 #006 | CTA特化LPをNext.jsで作る
SaaS風ランディングページ模写 模写上級シリーズ第6弾は、SaaS風のCTA特化ランディングページ...
続きを読むAI時代に必要なディレクターとは何か｜制作もでき判断もできる人だけが実務で残る
AI時代に起きている「制作と判断の分離」 AIの進化によって、デザインやコードは誰でも作れる時代にな...
続きを読む営業経験とWEB制作をつなぐと、文学国語だった
ライティングとマーケティングに共通する「言葉の本質」 営業とWEB制作は、まったく別の仕事に見えるか...
続きを読む2025年以降のWEB制作はどう変わるのか｜UX中心時代の今後の展開
2025年以降、WEB制作はどう変わるのか WEB制作の世界は、いま大きな転換期に入っています。 こ...
続きを読む本のようなページめくりUIを実装する方法
本をめくるような自然な操作感を持ったページめくりUI Webサイトで「本のようなページめくりUI」を...
続きを読むネタ記事：SEO的に“本当に不利なのはどっち？阿部寛 vs いとうまい子の公式サイトで比較...
はじめに Web制作界隈で、定期的にバズる話題があります。 一方で、同じ芸能人公式サイトでも、いとう...
続きを読むCSSだけで作る写真系UIノイズ｜レトロ感を自然に加えるドット表現
レトロ感を自然に加えるドット表現の考え方 Webサイトで写真を使っていると、 ・綺麗すぎて無機質に見...
続きを読むファンアウトクエリとは？AI検索時代のSEOと構造化・ロングテール・WordPress実務...
AI検索が広まり始めてから、「ファンアウトクエリ」という言葉を耳にする機会が増えました。これは単なる...
続きを読むSNSとHPのリンク効果とは？実はGoogle向けだった設計の話
SNSとHPのリンク、実はGoogle向けの設計でした SNSとHPをリンクさせる理由として、「集客...
続きを読むLP（ランディングページ）の広義・狭義と、SEO集客との関係
LPだけでは成果が出にくい理由と、広告と併用するべき理由 Web集客において「LP（ランディングペー...
続きを読む
DIRECTORS TEAM RINIA
DIRECTORS TEAM RINIA 戦略立案から制作、運用まで一貫してサポートするディレクタ...
続きを読むSEOライティングの本質｜Do／Know／Buy／Goで書き方が変わる理由
SEOライティングにおいて最も重要なのは「検索意図（Search Intent）」を理解することです...
続きを読む
STUDIO.motion｜モーション事例で学ぶWebアニメーション設計の教科書
※本記事の掲載にあたっては、Webサイト「STUDIO MOTION」運営者様より掲載許可をいただい...
続きを読むSEOディレクターとWEB解析士の違い｜提案で終わらない実践型SEO職とは
SEOディレクターとWEB解析士の違い ― データを“読む人”と、“動かす人”の境界 ― はじめに ...
続きを読む制作スキルの有無で分ける「ディレクション」と「ディレクター」の違い
Web業界では「ディレクション」と「ディレクター」という言葉が混同されやすく、役割が曖昧なまま使われ...
続きを読む
GOAL – Graphic Designer
GOAL – Graphic Designer あなたの課題をデザインで解決します。 ...
続きを読むWordPress + ACFで管理画面をカスタマイズ！投稿一覧にカスタムフィールドを表示...
はじめに WordPressの管理画面は標準でも便利ですが、案件によっては「もっと運用しやすくしたい...
続きを読むiOS風「Liquid Glass」をWebで再現する方法
CSSとWeb Componentsで作るガラスモーフィズムUI Webデザイン初心者でも取り入れや...
続きを読むAIOSEOのFAQスキーマと自作FAQが競合したときの解決方法
背景 WordPressでFAQを実装する際、AIOSEO（All in One SEO） を使って...
続きを読むHTMLのidとclassの違い・使い分けと構造タグの基本
はじめに HTMLを書くときによく迷うのが「idとclassの使い分け」そして「構造タグ（heade...
続きを読むクリティカルCSSとインラインCSSの最適化でLCP・FCP・CLSを改善！
はじめに「クリティカルCSSとインラインCSSとの違い」 Webサイトの表示速度はSEOにもユーザー...
続きを読む【Photoshopエフェクト編】生成AIで泡を作り光を加える方法
はじめに Photoshopの最新機能「生成AI」を使えば、これまでにない表現を短時間で実現できます...
続きを読む【Photoshopエフェクト編】影を作って立体感を出す方法
はじめに Photoshopでデザインをするとき、ちょっとした工夫で大きな違いが出るのが「影（シャド...
続きを読む【Photoshop文字加工編】1つのレイヤー内で文字の色を変える方法
はじめに 文字デザインでよく使われるテクニックのひとつが「文字の一部だけ色を変える」方法です。キャッ...
続きを読む【Photoshop文字加工編】文字を分割して自由に回転させるデザイン方法
はじめに 文字を使ったデザインに少し変化を加えるだけで、印象は大きく変わります。Photoshopを...
続きを読む【Photoshopバナーデザイン編】効果的なデザインのための4つの基本テクニック
はじめに WebサイトやSNSでよく目にする「バナー」。限られたスペースの中で情報を伝えるには、デザ...
続きを読む【Photoshopバナー編】画像合成テクニックで魅力的な広告を作る
はじめに Webデザインに欠かせない要素のひとつが「バナー制作」です。Photoshopを使えば、写...
続きを読む【Photoshopエフェクト編】水の効果で迫力ある作品を作る方法
はじめに Photoshopの魅力のひとつは、写真に臨場感あるエフェクトを簡単に加えられることです。...
続きを読む【Photoshopペイント編】ペイントドリップ加工を試してみよう！
はじめに Photoshopを学び始めたばかりの方にとって「どんな練習から始めればいいのか分からない...
続きを読む