グレースケール変換ツール｜画像を簡単にモノクロ加工【無料】
はじめに 写真や画像を白黒に加工したい時、手軽にグレースケール変換ができるツールがあれば便利ですよね。そこで、今回紹介するのが 「グレースケール変換ツール」 です。 このツールは、画像をドラッグ＆ドロ…
続きを読む →
記事一覧
CSS Flexbox Generator｜初心者でも簡単！レスポンシブレイアウト作成ガイド
CSS Flexboxジェネレーターとは？ CSS Flexbox Generatorは、Flexboxのプロパティを選択して、リアルタイムでレイアウトを確認しながらCSSコードを生成できるツールです…
【CSS Gridジェネレーター】レスポンシブ対応のレイアウトをGUIで自動生成
CSS Gridジェネレーターとは？ CSS Gridジェネレーターは、ブラウザ上でグリッドレイアウトを視覚的に設計し、コピペ可能なHTML＋CSSコードを即時出力できる無料ツールです。 行・列の数、…
CF7自動返信が迷惑メールに入らない設定｜WP Mail SMTPだけで完了
CF7自動返信が迷惑メールに入らない設定【WP Mail SMTPだけで完了】 「送信元を自社ドメインで“固定”＋SMTP配送」を徹底すれば、CF7（Contact Form 7）の自動返信メールは迷…
模擬案件プラン｜デザイン1回＋コーディング1回の合計2回の添削付き！優秀作品はCodeQuestに掲載
「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、「この方向性で合ってるのかな……？」「ちゃんと実務でも通用するレベルだろうか？」 そんな不安を抱えて…
流行りに乗ります。WebGLの呼吸 弐ノ型 kaka（火華）
『火華（かか）』｜WebGLとGLSLで描く、炎アニメーション ヒノカミのように、空間を赤く切り裂く。そんな演出を目指して制作したのが、今回ご紹介するWebアニメーション「火華（かか）」です。 マウス…
流行りに乗ります。GSAPの呼吸 壱ノ型 Ren-e（連絵）
Rene（連絵）｜画像とテキストが連なって重なるGSAPアニメーション演出 はじめに Webページをスクロールすると、前の要素に次の要素が重なり、奥に沈んでいくように切り替わるアニメーション。それを画…
SEO・AEO・GEOとは？検索最適化3軸の役割と設計戦略
検索に「答え」が並び、読まれなくなった世界で 最近、検索しても読まれない。記事を書いても流入が来ない。そんな違和感を持った人も多いはずです。かつては検索順位を上げればアクセスが増えるというシンプルな構…
検索は「引用される時代」へ。AEOとGEOという新しい視点
検索しても「読まれない」──その理由が少し見えてきた 前回、「検索順位は上がったのに読まれない」「アクセスが減っている」という違和感について書きました。 ▶ 前回記事：検索が効かない時代が来る？SEO…
200記事、そして起業20年目｜継続がすべてを変えた僕のWeb制作キャリア
200記事、そして起業20年目｜継続がすべてを変えた僕のWeb制作キャリア はじめに：このタイミングで書く理由 この記事で、CodeQuest.workとして200本目の記事になります。そしてふと気づ…
Figma模写 #8｜自分だけの広告デザインを作ろう！3色×コンセプト練習
1. 模写から「考えるデザイン」へ Figmaでの模写は、Web制作初心者にとって「良いデザインに触れながら、再現力を高められる」最高の練習方法です。しかし、模写だけでは終わりません。次のステップは、…
【初心者向け】Webデザインのためのフォント選び完全ガイド｜迷わない選び方とおすすめ書体
【初心者向け】Webデザインのためのフォント選び完全ガイド｜迷わない選び方とおすすめ書体 はじめに｜フォント選びに自信がないあなたへ 「フォントを選ぶとき、なんとなくで決めてしまう」「見た目は気になる…
【Figma練習OK】3色配色で作るシンプルで伝わるバナーの作り方
【Figma練習OK】3色配色で作るシンプルで伝わるバナーの作り方 はじめに｜配色に悩むあなたへ 「バナーを作るとき、配色がごちゃごちゃしてしまう」「センスに自信がなくて、毎回色選びで止まってしまう」…
構造→視覚→文字で組み立てる、実践的なUIデザインの流れとは
はじめに｜「なんとなく」から抜け出すために UIデザインを始めたばかりの頃、よくある悩みが「何から手をつけていいか分からない」というもの。色を選んでみたり、フォントを変えてみたり、ボタンをそれっぽく置…
AI時代のコーディング学習法｜ClaudeCode・Cursor・Copilotを使った“ズルじゃない”成長戦略
AI時代のコーディング学習法｜ClaudeCode・Cursor・Copilotを使った“ズルじゃない”成長戦略 AIエージェント時代、コーディング学習の常識は変わった 「AIを使ったらズルでは？」─…
【初心者向け】Viteの特徴・導入・使い方ガイド｜React・Vueなど主要フレームワークに対応した爆速ビルドツール
その後の手順： これだけで、Vite開発環境が数十秒で起動します。 ViteとWebpackとの違い｜どちらを選ぶべきか 項目 Vite Webpack 起動速度 非常に速い 比較的遅い HMR 差分…
Figma模写 #7｜配色センスが身につく3色デザイン練習
使用したFigmaテンプレート このテンプレートの特徴 模写のルール（今回の練習方針） 「配色センスを鍛える」ことがテーマなので、余白や配置も含めて丁寧に再現することを意識しましょう。 HTML / …
生成AIは“無能な上司”では使いこなせない理由
― GPTはあなたの指示次第でバカにも天才にもなる ― はじめに：「生成AIって思ったほど賢くない？」と感じていませんか？ ChatGPTやGeminiなどの生成AIを使ってみたものの、 といった感想…
📷 pictureタグで画像を画面サイズごとに切り替えるレスポンシブ表現【デモ付き】
📷 pictureタグで画像を画面幅ごとに切り替える方法【体験デモ付き】 Web制作において、画像の出し分けは非常に重要です。スマートフォン、タブレット、PCといった異なる画面サイズごとに、最適な画像…
ScrollTextMask｜文字に背景が透けるスクロール演出
Webサイトのファーストビューにおいて、印象的な表現はユーザーの視線を惹きつけ、記憶に残る導線を作ります。その中でも、「文字の中に背景が透ける」という手法は、視覚的なインパクトがありつつ、情報の伝達性…
質の担保されたキュレーションサイトとは？UI・LPの参考探しに迷わない選び方ガイド
🧠 導入｜デザイン参考が“ノイズ化”していませんか？ 「PinterestやInstagramで“良いデザイン”を探しているのに、なんだかピンとくるものが少ない…」 そんな経験はありませんか？ 今や、…
SUZURIで出品しながらデザインを学ぶ！実践型トレーニング法5選
はじめに｜SUZURIは“学習ツール”としても使える 「デザインを学ぶ」と聞くと、FigmaやPhotoshopで練習するイメージが強いかもしれません。でも実は、SUZURI（スズリ）などの出品プラッ…
デザインを言語化する練習帳｜“なぜ良いのか”を説明できる力を鍛えよう
はじめに｜“あえて”を言い訳にしていませんか？ 「このデザイン、ちょっとごちゃついてませんか？」「いや、あえてこうしてるんです」 ──Webデザインの学習初期にありがちなのが、「“あえて”を理由に根拠…
HTMLタグ一覧【フロントエンド向け使用例付き】
1. はじめに｜タグの意味を“見た目”で決めていませんか？ HTMLを書くとき、つい「見た目」に頼ってタグを選んでしまうことはありませんか？ こういった悩みは、タグの意味を理解していないことが原因で起…