記事一覧

Web業界の職種と役割まとめ【成果物でわかる一覧】 導入 Web業界には「Webデザイナー」「フロントエンドエンジニア」「ディレクター」など多くの職種があります。しかし、これから学び始める人にとっては...

導入 「Webデザイナー＝見た目担当」「ディレクター＝進行役」。日本のWeb業界では、このようなイメージが定着しています。 しかし、海外、とくにGoogleやApple、Meta（旧Facebook）...

この記事でわかること なぜ「秒までの日時」を付与するのか？ 結果として、運用コストを下げつつ、利用者・管理者双方にわかりやすい受付番号を付けられます。 実装方法（最短ショートコード版） WordPre...

はじめに Web制作とSREをどう並行させる？学習ロードマップと実務での活かし方 Web制作をしていると「もっと安定的にサイトを運用したい」「クラウドやインフラにも強くなりたい」と思う瞬間があるはずで...

はじめに Webサイトの表示速度は、ユーザー体験やSEOに直結する重要な要素です。特にスマホでは、読み込みが3秒以上かかると約半数のユーザーが離脱するとも言われています。高速化はデザインや機能以上に成...

はじめに 「モバイルファースト」と聞くと、PCデザインをスマホ風にすることだと誤解している人をよく見かけます。しかし本来の意味はまったく異なり、Googleの公式施策（モバイルファーストインデックス：...

はじめに SEOの世界に「AIO」「AEO」「GEO」「LLMO」といった新しい言葉が登場しています。これらはすべてAI時代の検索や情報最適化を表す概念ですが、違いを正しく理解しておかないと混乱しやす...

E-E-A-Tとは？SEOに必須の評価基準をわかりやすく解説 E-E-A-Tとは何か？ E-E-A-TはGoogleの検索品質評価ガイドラインで示される重要な概念で、「Experience（経験）」「...

はじめに GoogleがSEOの評価基準として導入している「Core Web Vitals」は、ユーザー体験を数値化した重要な指標です。ページの読み込み速度や操作性、デザインの安定性を測るため、これら...

Webライターとディレクター負のスパイラル ― なぜ稼げないのか？ AIの普及によって「Webライターはもう稼げないのではないか」という声をよく耳にします。確かに、調べた情報をまとめただけの記事や、文...

導入 「WEBマーケター＝SNS運用屋」──そんな誤解が広まっています。しかし実際のマーケティングは、広告やSNSといった運用の一部だけで語れるものではありません。 本シリーズでは、営業・経営・販路・...

導入 SNS運用、広告配信、SEO施策…。これらは確かにマーケティングの一部ですが、それだけをやっていては「運用屋」に留まってしまいます。 これまで解説してきたように、 これらを兼ね備えて初めて、本当...

導入 マーケティングを「広告運用」や「SNS施策」だけだと思っていると、気づけないことがあります。それは、「販路を見直すだけで売上が大きく伸びる」ケースが多い ということです。 広告の運用方法を工夫す...

導入 「マーケティングは広告やSNS運用のこと」──そんな誤解がはびこる一方で、経営の視点から見ればマーケティングはもっと本質的な役割を担っています。 経営の仕事は「商品力を磨く」こと。営業の仕事は「...

導入 マーケティングを語るときに「広告運用」「SNS施策」ばかりが取り上げられがちです。しかし、現場で顧客に向き合った経験がなければ、戦略はどうしても机上の空論になってしまいます。 私自身、広告やSN...

導入 ここ数年で「WEBマーケター」という肩書きを名乗る人が一気に増えました。SNS広告を運用したり、InstagramやTikTokの投稿を分析・改善したり、SEOでアクセスを伸ばしたり…。確かにそ...

Canva・Figma・STUDIOの使い分け完全ガイド｜ 導入 「WebサイトやLPを作りたいけど、プログラミングはハードルが高い…」そんなときに役立つのが ノーコードツール です。 特に Canv...

はじめに ここ数年で生成AIは驚異的なスピードで進化し、文章の生成にとどまらず、画像・動画・音楽とあらゆる領域に広がっています。「ChatGPT」という名前を耳にした人は多いと思いますが、それ以外にも...

HTMLアウトラインチェッカーとは？正しい文書構造を学ぶための無料ツール Web制作において、見出しタグ（h1〜h6）やsectionタグを正しく使うことは、SEOとユーザー体験の両面で非常に重要です...

はじめに：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色配色で作るシンプルで伝わるバナーの作り方 はじめに｜配色に悩むあなたへ 「バナーを作るとき、配色がごちゃごちゃしてしまう」「センスに自信がなくて、毎回色選びで止まってしまう」...