Webデザインの独学は何から？基礎の練習課題と学習の進め方

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

Webデザインを独学で始めるなら、最初の目標を「全部のソフトを覚える」ではなく、「必要な情報が伝わる一画面を作り、自分で直せるようになる」にすると進めやすくなります。観察、文字と余白の練習、ツールでの小さな制作、表示幅を変えた確認という順番で、学んだことを作品に使っていきましょう。

独学は、自分のペースで進められる一方、教材を見るだけになったり、見た目の良し悪しを判断できず止まったりしやすい学び方です。大切なのは、教材を増やすことよりも、練習課題と確認方法を一組にすることです。「今日は動画を三本見た」より、「同じ内容を、文字の優先順位を変えて二案作った」と言える方が、次の課題を見つけやすくなります。

この記事では、Webページの画面設計を学びたい初心者向けに、小さな課題を使って基礎を身につける手順を紹介します。デザインデータまで作る学習と、HTML・CSSでブラウザー上へ実装する学習は途中で分けます。最初から両方を完璧にする必要はありませんが、最終的にどこまで担当したいかは意識して進めてください。

練習の期間や合格条件は当ブログが作成した学習例で、採用基準や収入の保証ではありません。本文の課題は架空の題材を使い、画像は説明用の生成イメージです。特定ソフトの実際の操作画面や、実在する顧客の制作実績を示すものではありません。

Webデザインの独学を始める準備｜目標・道具・学習範囲を小さくする

まず作りたいものと担当する範囲を分ける

Webデザインという言葉には、バナーなどの画像制作、Webページの見た目、情報の並べ方、ボタンや入力欄の使い方など、複数の領域が含まれます。さらに、完成した画面案をHTML・CSSなどで実装する作業も、同じ募集や教材で扱われることがあります。学習を始める前に、自分が当面どの成果物を作るかを決めましょう。

たとえば「小さな店舗の案内ページをデザインする」と決めるなら、最初は情報の優先順位、文章と写真の配置、スマートフォン用の画面案を作るところまでを目標にできます。実装まで目指すなら、その後にHTMLの構造、CSSの見た目、画面幅への対応を学びます。予約管理や決済まで一度に作ろうとすると、デザイン以外の学習が大きくなります。

仕事の募集を見ることは、学習範囲を知る参考になります。ただし、すべての募集条件を同時に満たそうとしなくて構いません。デザインのみ、コーディング込み、既存サイトの更新などを区別し、自分が最初に練習する仕事の形を一つ仮置きしてください。まだ応募しなくても、成果物のイメージを持つ材料になります。

初期費用は手持ちの環境で確かめてから決める

最初に用意したいのは、制作に使うパソコン、安定したネット環境、画面を作るツール、学習用の保存場所です。高価な機材を先にそろえるより、選んだツールで文字や図形を配置し、ファイルを保存して開き直すところまで試します。手持ちの環境でどこが困るかを確認してから、不足を判断する方が無駄を減らせます。

スマートフォンは完成画面の確認に役立ちますが、複数の画面を比較したり、細かな配置やファイルを管理したりする学習はパソコンの方が進めやすい場面があります。OS、ブラウザー、メモリーなどの条件は、使うツールの現行公式案内で確認してください。特定の機種なら必ず仕事ができる、という考え方は避けましょう。

道具には、画面設計、写真の加工、図形やイラストの制作などの得意分野があります。最初は一つを軸にして、必要になった用途を補います。いくつもの有料ソフトを同時契約する前に、作りたい課題と必要機能を対応させてください。無料で始められる場合も、保存、共有、商用利用、共同編集などの条件を確認します。

※表は横にスクロールできます。

教材は一つを軸にし、公式情報を辞書として使う

入門書や講座は、何から学ぶかの順序をつかむために役立ちます。選ぶときは、対象者、扱うソフトの版、課題の有無、完成物、説明の更新時期を確認します。短い紹介動画だけで全体を学ぼうとするより、一つの課題を最後まで作る教材を軸にすると、知識がつながりやすくなります。

公式ヘルプは、分からない操作や仕様を確かめる辞書として使います。教材と画面が違う場合は、ソフトの版や表示モードを確認し、機能名で公式情報を探してください。見た目のボタン位置だけを暗記するより、「整列したい」「文字量に合わせて枠を広げたい」と目的で調べる習慣が役立ちます。

HTML・CSSの実装を学ぶ入口には、MDNの「初めてのウェブサイト」があります。小さなサイトを計画し、内容とスタイルを作る流れを確認できます。デザイン専業を目指す人も、見出しや段落、リンクがブラウザーでどう扱われるかを知ると、実装担当へ説明しやすくなります。

一週間の予定は「使う時間」と「残すもの」をセットにする

学習時間を長く確保できても、何を作るかが決まっていなければ、参考サイトを見て終わることがあります。たとえば平日の三十分なら、参考画面の見出しだけを観察する、文字サイズを三段階に整理する、ボタン一つを作る、と作業を区切ります。休日には小さな画面へまとめ、見直す時間を取る方法が考えられます。

作業の終わりには、作ったファイル、できたこと、次にすることを三行で残します。翌日にツールを開いてから何をするか考えるより、前回の続きへ入りやすくなります。ファイル名には課題名と版を付け、完成と作業中を区別すると、どの案を見ていたか迷いにくくなります。

予定を守れなかったときも、学習時間を一気に倍増させる必要はありません。課題が大きすぎたのか、操作で止まったのか、生活上の時間が取れなかったのかを分けます。原因が分かれば、課題を小さくする、質問する、頻度を調整するといった具体的な修正ができます。

デザインの基礎は観察と比較で学ぶ｜文字・余白・整列・配色の練習

参考サイトは「おしゃれ」で終わらせず分解する

参考サイトを見るときは、最初に誰が何をするページなのかを考えます。商品を比較するページ、店の営業時間を調べるページ、記事を読むページでは、先に見せたい情報が違います。画面の色や写真だけを集めると、目的の違う見た目を混ぜてしまいやすくなります。

観察の順番は、最初に目に入る情報、見出しのまとまり、本文の読みやすさ、次の行動が分かる場所にします。「見出しが大きい」だけでなく、「初めて来た人が何の案内か分かる位置にある」と役割で言葉にします。実際の運営者の意図を聞いていない場合は、観察からの仮説として記録してください。

一度に多くのサイトを保存するより、目的が近い二つを比べます。片方は写真が中心、もう片方は条件の一覧が中心なら、どんな読者に向けてそうしているのかを考えます。正解を当てる練習ではなく、情報と見た目の関係を説明する練習です。自分の課題に使える考え方が一つ見つかれば十分です。

最初の課題は白黒の案内カードを二案作る

写真や色を使わず、架空の「週末読書会」の案内カードを作ってみましょう。題名、日時、対象者、持ち物、参加方法の五つだけを載せます。これは説明用の練習題材で、実在するイベントの募集ではありません。日付や場所を設定する場合も、架空であることが分かるようにします。

一案目はすべて同じ大きさで置き、二案目は情報の優先順位に差を付けます。題名が最初に読めるか、日時を探せるか、参加方法が見つかるかを比べてください。文字の大きさだけでなく、太さ、行間、位置、周囲の余白も調整できます。すべてを太く大きくすると差がなくなることも、この練習で確認できます。

次に本文を少し長くし、日時を二行にしてみます。短い見本では整っていても、内容が変わると崩れる部分が見つかります。見た目が完成した一枚を作るだけでなく、情報量の変化に耐えられるかを試すことで、Webの画面設計に近い考え方を学べます。

※表は横にスクロールできます。

余白と整列は数値より関係を見て練習する

余白は、余った場所ではなく、情報のまとまりを伝えるための要素です。題名と説明文が一組なら近くに置き、別の案内との間を広く取ると関係を示しやすくなります。まず情報の組を決め、その後に具体的な距離を調整しましょう。すべての間隔を同じにすれば整うとは限りません。

練習では、カードの外側の余白、見出しと本文の間、別項目との間を三種類程度に分けて管理すると比較しやすくなります。これは学習用の方法で、必ず三種類にしなければならないというルールではありません。大切なのは、同じ役割の間隔が理由なくばらばらになっていないかを見つけることです。

整列は、左端、中央、文字の始まる位置など、何をそろえるかを決めます。すべてを中央に置くと華やかに見えても、長い説明が読みにくくなる場合があります。短い題名と長い本文を別々に考え、実際に声に出さず最後まで読んでみてください。途中で行を見失うなら、行の長さや間隔を調整するきっかけになります。

色は雰囲気と読みやすさを別々に確かめる

色を選ぶときは、背景、本文、強調の役割を先に分けます。好きな色をいくつも使うより、何を強調するかを決め、同じ役割には同じ扱いをする方が整理しやすくなります。最初は白黒の案を完成させ、その後で背景と強調色を加えると、色がなくても情報の順序が伝わるかを確認できます。

文字の読みやすさは、背景との明るさの差も重要です。W3CのWCAG 2.2の文字コントラスト解説では、通常の文字に4.5対1以上、大きな文字に3対1以上という基準が示されています。大きな文字の定義や例外があるため、自己流で境界を決めず公式説明と合わせて確認してください。

測定ツールを使う場合は、文字色と背景色の値を記録して比較します。写真の上に文字を置くなら、背景が場所によって変わることにも注意が必要です。数値を一つ満たしただけで画面全体が使いやすくなるわけではないので、サイズ、太さ、行間、情報の量も別に見ます。

また、必須項目やエラーを赤色だけで区別しないようにします。文字や形、説明を加えれば、色の違いを見分けにくい場合にも意味を伝えやすくなります。最初の学習から「色を外しても何が重要か分かるか」と考えると、装飾と情報伝達を分ける練習になります。

デザインツールの独学｜カードとボタンから画面へ広げる

操作は課題に必要なものから覚える

画面設計ツールを開くと多くの機能がありますが、最初から全メニューを覚える必要はありません。まず枠を作る、文字と図形を置く、画像を配置する、整列する、複製する、保存する、書き出すところまでを使って、小さなカードを作ります。操作名を知るだけでなく、その操作で何を直せたかを記録しましょう。

同じカードを見本なしで再作成すると、覚えたつもりの操作が分かります。途中で調べても構いません。大切なのは、手順を一字ずつなぞらないと作れない状態から、目的に応じて必要な操作を探せる状態へ進むことです。ショートカットはよく使う操作から少しずつ覚えれば十分です。

レイヤーや枠の名前は、内容が分かるものへ直します。「四角形12」「テキスト37」のままだと、後からどこを変更するか探しにくくなります。見出し、説明、ボタンなどの役割が分かる名前にし、関連する要素をまとめることも制作練習の一部です。

同じ部品を複製し、内容が変わったときの動きを試す

カードを一つ作ったら、三つに複製して内容を変えます。見出しを短いものと長いものにし、説明文の行数や画像の有無を変えます。同じ見た目をコピーできることと、違う内容でもルールが保たれることは別なので、両方を確認してください。

ボタンも「詳しく見る」だけでなく、「参加方法を確認する」のように少し長い文言へ変えてみます。文字が枠からはみ出したら、ボタンの幅を固定するのか、内容に合わせるのかを考えます。すべてを手で動かして直す前に、親の枠と中身の関係を理解すると、修正に強い部品を作りやすくなります。

Figmaを使う場合は、公式のAuto Layoutガイドで、並び方、内側の余白、要素間の間隔、内容に応じたサイズ調整を学べます。最初の練習では単純な縦並びのカードやボタンから始め、便利な機能を使っていても、なぜその大きさになるかを説明できることを目指しましょう。

初めての画面は「一覧＋一つの行動」に絞る

小さな部品ができたら、架空の読書会の案内画面へ組み立てます。冒頭の説明、開催情報のカード、参加前の確認事項、案内ボタンという程度に絞ります。複数ページや動きのあるメニューを最初から追加するより、一画面の情報がつながっているかを確かめてください。

画面を作る前に、載せる文章を用意します。仮の短い文字列だけで作ると、本番に近い文章へ差し替えたときに大きく崩れることがあります。架空題材でも、実際にありそうな長さの見出しや補足を使い、レイアウトがどの程度の情報を受け止められるか試しましょう。

※表は横にスクロールできます。

作った部品をまとめて使い回せる機能もありますが、最初はどこが共通でどこが個別かを言葉にしてから使います。色も文字サイズも毎回変える予定なら、共通化の対象がまだ決まっていません。反対に、同じボタンを何十か所も手作業で直しているなら、共通部品を学ぶ理由がはっきりしています。

テンプレートとAIは自分で判断する練習を残して使う

テンプレートを使うと、整った配置を観察する入口になります。ただし、文章や写真を差し替えただけでは、情報の優先順位を自分で決めた経験は少ないままです。テンプレートを参考にした後、同じ目的の別案を白紙から作る練習を加えると、自分が理解しているところが分かります。

AIに配置案や文章案を出してもらう場合も、採用する理由を自分で説明します。「どちらが正しいか」と丸ごと判断を任せるより、二案の違いを挙げてもらい、課題の目的に照らして選ぶ使い方が考えられます。表示の崩れ、存在しない機能、権利が不明な素材などは、自分で確認が必要です。

勤務先や顧客の非公開資料を、練習のために外部ツールへ無断で入れないようにしてください。学習では自分で用意した架空の情報や、利用条件が分かる素材を使う方が管理しやすくなります。ツールを使った部分と自分で設計した部分は記録し、他人の制作や調査を自分の実績のように説明しないことも大切です。

HTML・CSSとレスポンシブの基礎｜ブラウザーで読めるかを確かめる

実装まで学ぶ人はHTMLの意味付けから始める

デザインデータを作る段階と、ブラウザー上で実際に読むページを作る段階では、確認することが変わります。HTMLでは、見出し、段落、リスト、リンクなど、情報の意味に合う要素を選びます。見た目を大きくしたいから見出しを選ぶのではなく、文書の構造としてその位置に見出しが必要かを考えましょう。

最初の実装課題は、文章だけの案内ページで十分です。題名、説明、開催条件、持ち物の一覧、関連ページへのリンクを作ります。CSSを外しても読む順番が自然かを確かめると、装飾に頼らず内容を組み立てる練習になります。分からないタグは公式資料へ戻り、コピーした記述の役割を一つずつ確認してください。

W3Cのページ構造チュートリアルは、見出しや領域を適切に構成する考え方を整理しています。構造が分かるページは、画面を目で追う人だけでなく、支援技術を使う人やキーボードで操作する人にも関係します。基礎の段階から、見た目と意味の両方を見る習慣を持ちましょう。

CSSは箱の大きさと余白を見える形で学ぶ

CSSでは色や文字を変える前後で、どの要素に指定が効いているかを確認します。最初は本文、見出し、カードなど少数の対象へ絞り、値を一つ変えたらブラウザーを見ます。動いた理由が分からないまま別の記述を重ねると、あとから直せない状態になりやすくなります。

幅、高さ、内側の余白、外側の余白、境界線の関係は、カードに薄い背景や線を付けて観察すると理解しやすくなります。デザインツール上の見た目をそのまま再現しようとする前に、文字量が増えたときに箱がどう変わるかを試してください。高さを固定して文字が欠けるようなら、なぜ固定したかを見直します。

横並びや段組みは、FlexboxやGridなど、目的に合うレイアウトの仕組みを段階的に学びます。初回は二つのカードを並べ、幅が狭くなったら縦へ変える程度で構いません。複雑な配置を実現することより、内容の変化に合わせて説明できる構造になっているかを確認しましょう。

スマートフォン対応は縮小画像を作ることではない

パソコン用の画面をそのまま小さくすると、文字まで小さくなり、読めない画面になることがあります。狭い幅では、横に並べた情報を縦へ積む、画像の見せる範囲を変える、補足を段落へ分けるなど、情報のまとまりを保って配置を調整します。大事な条件を隠して短くすることとは区別してください。

MDNのレスポンシブウェブデザインの解説では、柔軟なレイアウトやメディアクエリーなどの考え方を学べます。学習では特定機種の幅だけを丸暗記せず、内容が読みにくくなる地点を観察し、どこで並びを変えるとよいかを考えることが大切です。

確認は、大きい画面と小さい画面の二枚を用意して終わりではありません。その間の幅も少しずつ変え、途中で文字や画像がはみ出さないかを見ます。ブラウザーの検証機能は便利ですが、可能なら実際のスマートフォンでも文字を読み、ボタンを操作して確かめてください。

※表は横にスクロールできます。

この表は基礎練習用で、アクセシビリティや品質の完全な監査ではありません。確認した項目と、まだ確認していない項目を分けて残します。デザインデータだけを作った場合は、実際のキーボード操作やブラウザー上の動作まで検証済みと書かないようにしてください。

エラーを見つけたら、一つの条件に戻して調べる

文字が重なるとき、すぐ別のCSSを追加するのではなく、対象の要素、適用される指定、表示幅、文字量を確認します。問題のあるカード一つだけを別の練習ファイルへ取り出すと、周囲の影響を減らして調べられる場合があります。元のファイルは残し、どの変更で直ったか比較できるようにします。

教材と結果が違う場合は、入力ミス、保存忘れ、読み込んでいるファイル、ブラウザーの表示、説明で使われた版を順に確認します。「自分には向いていない」と判断する前に、具体的な現象へ分けることが大切です。原因が分からないままファイルを最初から作り直すと、同じところで止まりやすくなります。

質問するときは、「この幅でこの見出しを二行にすると、下のカードへ重なります。高さの指定を外すと重なりは消えますが、画像位置がずれます」のように条件と結果を伝えます。試したことが分かる質問なら、相手も何を見ればよいか判断しやすくなります。認証情報や他人の非公開コードを質問に混ぜないようにしてください。

独学を続ける練習計画｜小さな完成・第三者の確認・改善を繰り返す

一つの課題を「作る・変える・説明する」で一周する

学習課題は、完成画像を保存しただけで終わらせず、条件を一つ変えるところまで行います。読書会の案内なら、開催日を二つにする、説明を長くする、参加方法を別の案内へ変える、といった変更です。元のデザインがどこまで対応できるかを試すと、再利用しやすい考え方と手作業に頼っていた部分が分かります。

その後、なぜそう配置したかを短く説明します。「題名を大きくした」だけでなく、「初めて見る人が内容を判断できるよう、題名と対象者を近くに置いた」と役割で言葉にします。ただし、調査していない利用者の行動を事実として書かず、自分の仮説であることを区別してください。

説明がうまく出ない箇所は、失敗というより次の観察対象です。理由なく選んだ色なら、雰囲気と読みやすさを比較する課題を追加します。何度も同じ位置を手で直しているなら、部品と自動配置を学び直します。新しい作品を増やす前に、一つの作品から学ぶ内容を取り出しましょう。

四週間の計画例は、未完了なら延ばしてよい

以下は、短い学習時間を積み重ねる人のための練習例です。四週間で仕事を受けられることを示すものではありません。使える時間や経験に合わせ、同じ週の課題を繰り返したり、実装の部分を別の期間へ分けたりして構いません。日数より、確認条件を満たしたかで進めます。

※表は横にスクロールできます。

忙しい週は、一画面を完成させる代わりに、カード一つを直すところまでに縮められます。すべてを延期するか無理して夜更かしするかの二択にしないことが大切です。次の作業が分かる記録さえ残しておけば、短い時間でも続きを始められます。

教材の進み具合を記録する場合も、視聴率だけにしません。自分で再現できたこと、調べながらできたこと、まだ説明できないことを分けると、復習する場所が見えます。同じ動画を何度も最初から見るより、止まる操作や判断だけを絞って戻る方が進めやすい場合があります。

第三者には感想より「探してもらう課題」を渡す

見てもらうときに「どう思う？」とだけ聞くと、色の好みや全体の印象が中心になりやすくなります。読書会の案内なら、「開催日はどこにありますか」「初めて参加する人は何を持っていけばよいですか」のように、情報を探す課題を渡します。相手が迷った場所を観察し、自分の説明で先回りしないことがポイントです。

確認を頼む相手には、練習作品であることと、何を確かめたいかを伝えます。実在する事業の依頼を装う必要はありません。相手の個人情報を集めるフォームを用意せず、架空の内容や手元での説明で足りる範囲から試しましょう。感想を公開する場合は、別に許可が必要かも考えます。

得られた意見は、事実、解釈、対応に分けます。「日時を探すのに迷った」は観察、「文字が小さいことが原因かもしれない」は解釈、「日時を独立したまとまりにする」は対応です。少人数の確認だけで、誰にとっても使いやすくなった、申込みが増えるといった結論へ広げないでください。

独学が止まったときは不足する支援を具体化する

操作が分からない、デザインの良し悪しが判断できない、学習時間を作れない、仕事の範囲が分からないという悩みは、それぞれ必要な支援が違います。操作なら公式ヘルプや質問、判断なら作品への具体的なレビュー、時間なら課題の縮小や予定の見直しが役立つかもしれません。すべてを新しい教材の購入で解決しようとしないようにします。

有料の添削や講座を検討するなら、今の作品と困っている点を示し、その支援が受けられるか確認します。教材が多いことより、自分の課題へ答えてもらえるか、質問や添削の期限、回数、総費用が分かるかを見ます。参加すれば必ず収入が得られるという前提では選びません。

学習環境を比べたい場合は、Webデザインスクールの料金・学習内容・副業支援の比較を参考にしてください。これは有料の学習支援を検討するための関連記事で、本記事の基礎技術の出典とは区別しています。独学で一つ作ってみてから比較すると、何を支援してほしいかを伝えやすくなります。

仕事の準備へ進む前に、自分で直せる範囲を確認する

学習期間が一定の長さになっただけで、どんな仕事でも受けられるようになるわけではありません。指示を読んで範囲を決め、必要な素材を確認し、期限までに作り、修正へ対応できるかが関係します。完成画像を一つ作れたことと、依頼に応じて安定して作れることを分けて考えましょう。

最初の目安として、白紙から小さな画面を作れる、文章量や表示幅の変更に対応できる、判断の理由を説明できる、分からないことを具体的に質問できる、使用素材の条件を確認できる、という状態を確かめます。これは当ブログの学習チェックであり、採用や受注を保証する基準ではありません。

作品を外部に見せる段階では、自主制作と実案件、デザインのみと実装済みを正確に区別します。写真、フォント、テンプレート、教材の課題にはそれぞれ利用条件があるため、公開や配布に使えるかを確認してください。学習用に参考にした他者の作品を、そのまま自分の制作実績として公開しないことが大切です。

今日始めるなら、架空の案内に必要な五つの情報を書き、白黒で二つの配置案を作ってみましょう。次に、どちらが日時や参加方法を見つけやすそうかを説明し、文字量を増やして崩れる場所を確認します。この一回で、観察、制作、検品、改善の流れを小さく経験できます。

Webデザインの独学は、才能があるかを一枚で判定する作業ではありません。読める、探せる、操作が分かるという具体的な目的に向けて、選択と確認を積み重ねる学習です。道具を増やす前に一つ作り、作ったら条件を変えて見直す。その繰り返しで、自分が次に学ぶべきことを見つけていきましょう。