記事一覧

はじめに：CSSセレクターを学ぶならツール活用が近道 CSSセレクターは、HTML要素を指定してデザインや動作を適用するためのCSSの基礎知識です。しかし、「書き方は覚えても、実際にどう動くのかが分か...

CF7自動返信が迷惑メールに入らない設定【WP Mail SMTPだけで完了】 「送信元を自社ドメインで“固定”＋SMTP配送」を徹底すれば、CF7（Contact Form 7）の自動返信メールは迷...

「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、「この方向性で合ってるのかな……？」「ちゃんと実務でも通用するレベルだろうか？」 そんな不安を抱えて...

『火華（かか）』｜WebGLとGLSLで描く、炎アニメーション ヒノカミのように、空間を赤く切り裂く。そんな演出を目指して制作したのが、今回ご紹介するWebアニメーション「火華（かか）」です。 マウス...

Rene（連絵）｜画像とテキストが連なって重なるGSAPアニメーション演出 はじめに Webページをスクロールすると、前の要素に次の要素が重なり、奥に沈んでいくように切り替わるアニメーション。それを画...

検索に「答え」が並び、読まれなくなった世界で 最近、検索しても読まれない。記事を書いても流入が来ない。そんな違和感を持った人も多いはずです。かつては検索順位を上げればアクセスが増えるというシンプルな構...

検索しても「読まれない」──その理由が少し見えてきた 前回、「検索順位は上がったのに読まれない」「アクセスが減っている」という違和感について書きました。 ▶ 前回記事：検索が効かない時代が来る？SEO...

200記事、そして起業20年目｜継続がすべてを変えた私のWeb制作キャリア はじめに：このタイミングで書く理由 この記事で、CodeQuest.workとして200本目の記事になります。そしてふと気づ...

1. 模写から「考えるデザイン」へ Figmaでの模写は、Web制作初心者にとって「良いデザインに触れながら、再現力を高められる」最高の練習方法です。しかし、模写だけでは終わりません。次のステップは、...

【初心者向け】Webデザインのためのフォント選び完全ガイド｜迷わない選び方とおすすめ書体 はじめに｜フォント選びに自信がないあなたへ 「フォントを選ぶとき、なんとなくで決めてしまう」「見た目は気になる...

【Figma練習OK】3色配色で作るシンプルで伝わるバナーの作り方 はじめに｜配色に悩むあなたへ 「バナーを作るとき、配色がごちゃごちゃしてしまう」「センスに自信がなくて、毎回色選びで止まってしまう」...

はじめに｜「なんとなく」から抜け出すために UIデザインを始めたばかりの頃、よくある悩みが「何から手をつけていいか分からない」というもの。色を選んでみたり、フォントを変えてみたり、ボタンをそれっぽく置...

AI時代のコーディング学習法｜ClaudeCode・Cursor・Copilotを使った“ズルじゃない”成長戦略 AIエージェント時代、コーディング学習の常識は変わった 「AIを使ったらズルでは？」─...

その後の手順： これだけで、Vite開発環境が数十秒で起動します。 ViteとWebpackとの違い｜どちらを選ぶべきか 項目 Vite Webpack 起動速度 非常に速い 比較的遅い HMR 差分...

使用したFigmaテンプレート このテンプレートの特徴 模写のルール（今回の練習方針） 「配色センスを鍛える」ことがテーマなので、余白や配置も含めて丁寧に再現することを意識しましょう。 HTML / ...

― GPTはあなたの指示次第でバカにも天才にもなる ― はじめに：「生成AIって思ったほど賢くない？」と感じていませんか？ ChatGPTやGeminiなどの生成AIを使ってみたものの、 といった感想...

📷 pictureタグで画像を画面幅ごとに切り替える方法【体験デモ付き】 Web制作において、画像の出し分けは非常に重要です。スマートフォン、タブレット、PCといった異なる画面サイズごとに、最適な画像...

Webサイトのファーストビューにおいて、印象的な表現はユーザーの視線を惹きつけ、記憶に残る導線を作ります。その中でも、「文字の中に背景が透ける」という手法は、視覚的なインパクトがありつつ、情報の伝達性...

🧠 導入｜デザイン参考が“ノイズ化”していませんか？ 「PinterestやInstagramで“良いデザイン”を探しているのに、なんだかピンとくるものが少ない…」 そんな経験はありませんか？ 今や、...

はじめに｜SUZURIは“学習ツール”としても使える 「デザインを学ぶ」と聞くと、FigmaやPhotoshopで練習するイメージが強いかもしれません。でも実は、SUZURI（スズリ）などの出品プラッ...

はじめに｜“あえて”を言い訳にしていませんか？ 「このデザイン、ちょっとごちゃついてませんか？」「いや、あえてこうしてるんです」 ──Webデザインの学習初期にありがちなのが、「“あえて”を理由に根拠...

1. はじめに｜タグの意味を“見た目”で決めていませんか？ HTMLを書くとき、つい「見た目」に頼ってタグを選んでしまうことはありませんか？ こういった悩みは、タグの意味を理解していないことが原因で起...

1. はじめに｜見出しタグが「適当」になっていませんか？ Webサイトやブログ記事を作っていると、<h1>〜<h6>の見出しタグを使う場面が必ず出てきます。しかし、「とりあえず...

1. はじめに｜SNSでシェアしたときの「見た目」整ってますか？ 「ブログ記事をSNSでシェアしたのに、サムネイルが出ない」「タイトルや説明文が変…」こんな経験、ありませんか？ それ、OGPやTwit...

Webデザインの設計を学ぶ中で、よく見かける失敗の一つに「グリッドレイアウトが崩れている」ことがあります。見た目はきれいにみえても、設計の本質において、グリッドの有無は越えては通れないキーポイントです...

はじめに Webデザインの世界で、「よく見える」と言われるレイアウトには、多くの技術的背景が存在します。その一つに、「美しさを数学的に扱う」仕組みとしての「デザイン比率」があります。 金の比率として知...

「MEOをやったけど、まったく効果がなかった」 そんな経験をしたことがある方も多いのではないでしょうか？ 特に、飲食店やサロンではない事業者、あるいはWebメディアの運営者にとって、 MEO（Map ...

検索が効かない──そんな違和感を覚えたことはありませんか？ 「検索1位なのにアクセスが増えない」「新しく書いた記事なのに、誰にも読まれない」「以前は検索流入があったのに、最近は数字が落ち込んでいる」 ...

Figma模写シリーズ第6弾は、3つのカード型レイアウトのうち、どれか1つを選んで模写できる初級編です。 「全部模写するのはちょっと大変…」という方も、1枚だけでもOK！HTMLとCSSの基本だけで完...

Web制作やWordPress開発で使われるエディターの中でも、今や定番となったのが「Visual Studio Code（以下：VSCode）」です。VSCodeは標準でも非常に使いやすいエディター...