頭の中のデザインをHTMLとCSSにするのが難しかった｜Web制作初心者の制作記録

Web制作を勉強し始めたころ、「こんなWebサイトを作りたい」というイメージを考えることはできても、それを実際のHTMLやCSSにすることが思っていた以上に難しいと感じました。

普段、Webサイトを見る側としては、画像の上にタイトルが表示されていたり、文章がきれいに並んでいたり、スマートフォンでは自然にレイアウトが変わったりすることを当たり前のように見ていました。

ところが、自分で作る側になってみると、「この見た目をどうやってコードで表現するんだろう？」と考えることが一気に増えました。

今回は、実際にWebサイトを制作する中で、私が特に難しいと感じたことをまとめます。

Webサイトを見る側と作る側では、見えるものが違った

Web制作を始める前は、Webサイトのデザインを見ると「きれいに配置されているな」「ここに画像があるな」くらいの感覚でした。

しかし、自分で作るようになると、見えているものの裏側にたくさんの仕組みがあることに気付きました。

例えば、ひとつのカードを作るだけでも、

• HTMLの構造はどうするか
• どの要素にclassを付けるか
• 文字の大きさはどうするか
• 余白はmarginとpaddingのどちらを使うか
• 幅はどのくらいにするか
• 横並びにするならflexとgridのどちらを使うか
• スマートフォンではどう表示するか

など、考えることがたくさんあります。

見た目だけを考えていたときには気付かなかった部分を、自分でコードを書くようになって初めて意識するようになりました。

頭の中のデザインをコードにするのが難しかった

最初は、「完成したデザインを見ながらHTMLとCSSを書けばいい」と考えていました。

ところが、実際にはデザインをそのままコードへ変換できるわけではありません。

例えば、「カードをこの位置に置きたい」と思ったとしても、そこから、

どんなHTML構造にする？
↓
どの要素を親にする？
↓
class名はどうする？
↓
どのCSSを使う？
↓
余白はどうする？
↓
幅はどうする？

と考える必要があります。

自分の中には完成したイメージがあっても、それをコードで表現するためには、デザインを細かい要素に分解しなければなりません。

この「デザインを見る力」と「コードに置き換える力」の両方が必要になることに、実際に作ってみて気付きました。

メインビジュアルの画像にタイトルを重ねる方法が分からなかった

特に最初に「どうやって作るんだろう？」と思ったのが、メインビジュアルです。

普段ユーザーとしてWebサイトを見ていると、画像の上にタイトルや文章が表示されているデザインをよく見かけます。

そのときは、画像と文字が自然に重なっていることを当たり前のように見ていました。

ところが、自分で作ろうとすると、

「画像の上に文字を置くにはどうすればいいんだろう？」

と分からなくなりました。

画像とタイトルをHTMLに書くだけでは、普通なら画像の下にタイトルが表示されます。

そこで調べていくと、positionを使って要素を重ねる方法があることを知りました。

例えば、親要素を基準にして、

.hero {
    position: relative;
}

タイトル側を、

.hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
}

のように配置していく考え方があります。

最初はrelativeやabsoluteという言葉自体がよく分かりませんでした。

それでも、実際にメインビジュアルを作ってみると、「親を基準にして、その中の要素を好きな位置へ配置する」という仕組みが少しずつ理解できるようになりました。

普段何気なく見ていた「画像の上にタイトルがある」というデザインも、自分でコードを書く側になると、たくさんのCSSによって作られていることが分かりました。

ひとつのデザインでも、画面サイズが変わると難しくなる

もう一つ大きく悩んだのが、画面サイズによるレイアウトの変化です。

最初はPCで見たときのデザインをきれいに作れば、それをスマートフォンでも小さくすればいいと思っていました。

ところが、実際に確認してみると、PCでは問題なかったレイアウトがスマートフォンでは崩れてしまうことがあります。

例えば、

• 文字が長くなってしまう
• ボタンが横からはみ出す
• 画像の幅が合わない
• 横並びにした要素が窮屈になる
• ボックスが画面からはみ出す

といったことが起こりました。

自分では「この幅なら大丈夫」と思っていても、ユーザーが見ている画面サイズは自分が確認したものと同じとは限りません。

そこで、Web制作では「自分の画面でどう見えるか」だけではなく、「違う大きさの画面ではどう見えるか」まで考える必要があることを学びました。

要素のボックスが画面からはみ出してしまった

実際にCSSを書いていると、ボックスのサイズが想像していたより大きくなり、画面からはみ出してしまうこともありました。

例えば、

.box {
    width: 100%;
    padding: 24px;
    border: 1px solid #E8E1D8;
}

のようなコードを書いて、思ったより横幅が大きくなったことがあります。

最初は「widthを100%にしているのだから、画面内に収まるはず」と考えていました。

しかし、CSSでは幅だけでなく、paddingやborderの扱いも考える必要があります。

そこでbox-sizingについて調べたり、

* {
    box-sizing: border-box;
}

という書き方を知ったりしました。

コードを書いていると、「指定した数字どおりにならない」ということがあり、そのたびに原因を調べる必要があります。

こうした小さなトラブルを一つずつ解決していくことで、CSSの仕組みを少しずつ理解できるようになりました。

自分が考えたデザインと、実際に使いやすいデザインは違う

Webサイトを作っていると、「自分が作りたいデザイン」と「実際に使いやすいデザイン」の違いについても考えるようになりました。

例えば、PCで見るときには横並びにしたほうがきれいに見えるデザインでも、スマートフォンでは同じ配置だと窮屈になることがあります。

また、タイトルを大きくしたいと思っても、スマートフォンでは画面の幅が限られているため、文字が何行にも分かれてしまうことがあります。

そのため、自分が最初に考えたデザインをそのまま再現するのではなく、画面サイズや使いやすさに合わせて調整する必要があります。

最初は「デザインをそのままコードにする」という感覚でした。

しかし、実際に作っていくうちに、「デザインをWebで使える形に変換する」という考え方のほうが近いのかもしれないと感じるようになりました。

レスポンシブデザインでは、最初からスマホとPCを考える必要があった

スマートフォンとPCの両方に対応するためには、後から小さくするだけでは足りないことも分かりました。

例えば、ヘッダーひとつを考えても、スマートフォンではハンバーガーメニューを使い、PCではナビゲーションを表示するなど、画面サイズによって見せ方を変えることがあります。

記事カードについても、スマートフォンでは1列、PCでは複数列というようにレイアウトを変えられます。

こうした経験から、レスポンシブデザインは「完成したPCデザインをスマートフォン用に縮小する作業」ではなく、「最初から異なる画面サイズでどう見せるかを考えること」だと感じるようになりました。

CSSの数字を決めるだけでも考えることが多かった

CSSでは、数字を指定するだけに見える部分でも迷うことがありました。

例えば、

padding: 24px;
margin: 20px;
gap: 16px;

という数字を見ても、最初は「どうして24pxなの？」「20pxでは駄目なの？」という疑問がありました。

実際には、デザイン全体のバランスや、他の要素との間隔を見ながら調整していきます。

文字サイズについても同じです。

font-size: 24px;

と指定するだけではなく、その文字がスマートフォンでも大きすぎないか、見出しとして他の文章との差が出ているかなどを確認します。

コードを書いて表示を確認して、少し変更して、また確認する。

こうした繰り返しが、実際のWeb制作ではかなり大切だと感じました。

実際に作ってみて、コードの意味がつながるようになった

Web制作を勉強し始めたころは、CSSのプロパティをひとつずつ覚えていました。

marginは余白。

paddingも余白。

display: flexは横並び。

positionは位置調整。

そんなふうに、単語として覚えていました。

ところが、実際にWebサイトを作るようになると、それぞれのプロパティがつながって見えるようになってきました。

カードを作るなら、HTMLで構造を作り、CSSで背景や枠線を付ける。

その中のタイトルにmarginを設定する。

カードを複数並べるならflexやgridを使う。

画像の上にバッジを置くならpositionを使う。

スマートフォンとPCでレイアウトを変えるならレスポンシブ対応を考える。

このように、ひとつひとつのCSSが単独で存在するのではなく、実際のデザインの中で組み合わさっていることが分かってきました。

「作りたいもの」を小さく分解すると考えやすくなった

制作を続けていて、以前よりも考えやすくなったのが、デザインを小さく分解することです。

例えば、「画像の上にタイトルがあるメインビジュアルを作りたい」と考えた場合、そのまま一気にコードを書こうとすると難しく感じます。

そこで、

画像を表示する
↓
画像を入れる親要素を作る
↓
タイトルを置く
↓
タイトルを画像の上に重ねる
↓
位置を調整する
↓
スマートフォンで確認する
↓
PCでも確認する

というように、一つずつ考えるようにしました。

こうすると、「デザイン全体を一気にコードにする」という難しさが少し減りました。

これは、実際にWeb制作をしていて自分が学んだ大きなことの一つです。

デザインをコードにすることは、デザインを理解することでもあった

最初は、HTMLやCSSは「デザインを再現するための道具」だと思っていました。

しかし、実際にコードを書いてみると、コードにするためにはデザインそのものを細かく理解する必要があることに気付きました。

「この余白はなぜ必要なのか」

「この画像はなぜこの位置にあるのか」

「スマートフォンではなぜ縦に並ぶのか」

「このタイトルはどうして画像の上にあるのか」

ということを考えるようになります。

その結果、Webサイトを見るときにも、以前より細かい部分を見るようになりました。

今まで当たり前だと思っていたデザインの裏側に、HTMLやCSSによるさまざまな工夫があることを知ったからです。

これからWeb制作を始める方へ

Web制作を勉強していると、最初からきれいなWebサイトを作りたくなると思います。

私自身も、「頭の中にあるイメージをそのまま形にしたい」と思っていました。

しかし、実際には一度で完成させることは難しく、作ってみてから初めて分かることもたくさんあります。

画面から要素がはみ出したり、思っていた位置にタイトルを置けなかったり、PCではうまくいってもスマートフォンで崩れたりすることもありました。

それでも、一つずつ原因を調べて修正していくと、少しずつコードとデザインの関係が分かってきました。

最初から完璧にコードを書く必要はありません。

「こういう見た目にしたい」と思ったものを、まず小さなパーツに分けて作ってみる。

うまくいかなければ、原因を調べる。

そして、もう一度試してみる。

そんな繰り返しが、Web制作を学ぶ中で大きな経験になりました。

まとめ

Web制作を始めたころ、私は「頭の中にあるデザインをHTMLとCSSにすればいい」と考えていました。

しかし、実際には、

• HTMLの構造を考える
• classを付ける
• CSSで見た目を整える
• 要素の幅や余白を調整する
• 画像と文字を重ねる
• 画面サイズに合わせてレイアウトを変える
• スマートフォンとPCの両方で確認する

など、考えることがたくさんありました。

特に、メインビジュアルの画像にタイトルを重ねる方法や、CSSを書いたことで要素が画面からはみ出してしまったときは、「普段何気なく見ていたWebサイトも、実際には細かく設計されているんだ」と実感しました。

Web制作は、コードを覚えるだけではなく、頭の中のイメージを小さな要素に分解して、それを一つずつWeb上で再現していく作業でもあると思います。

これからも実際に作りながら、分からなかったことや、つまずいたこと、そこから学んだことをNoah Labに記録していきたいと思います。