初級 HTMLとCSSの基礎

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

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

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

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

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

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

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

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

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

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

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

続きを読む →
なぜグリッドレイアウトはWebデザインの要なのか?

なぜグリッドレイアウトはWebデザインの要なのか?

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

続きを読む →
黄金比・白銀比・白金比から学ぶWebデザイン構図理論

黄金比・白銀比・白金比から学ぶWebデザイン構図理論

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

続きを読む →

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

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

続きを読む →
【2025年版】VSCode拡張機能11選|Web制作が快適に!

【2025年版】VSCode拡張機能11選|Web制作が快適に!

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

続きを読む →
CSSでフォントを自在に操る!基本から応用まで徹底解説

CSSでフォントを自在に操る!基本から応用まで徹底解説

Webデザインにおいて「フォント」は第一印象を左右する重要な要素です。この記事では、CSSでのフォント指定方法から応用テクニックまでを初心者にもわかりやすく解説します。Google Fontsの使い方…

続きを読む →