Webデザイン学習で一番つまずいたこと
Webデザインを学んでいて、「ここで止まってしまう」という場所が毎回同じだと気づいたのは、少し経ってからでした。振り返ると、つまずきのパターンを知ることが突破口になりました。
学び始めたばかりの頃は、HTMLやCSSの文法よりも、「どう見せれば伝わるのか」という判断の方が難しく感じました。
この記事でわかること
- Webデザインで最初につまずきやすいポイント
- 余白とファーストビューで悩んだ理由
- 壁を乗り越えられたきっかけ
- 今でも続けている考え方と習慣
結論
余白とファーストビューで止まった原因は、センスではなく「何を伝えたいか」が決まっていなかったことでした。先に伝えたいことを決め、近いサイトを2〜3個見比べると、迷いが減ります。
Photo by Vitalii Abakumov on Unsplash
一番の壁は「余白とファーストビュー」
一番つまずいたのは、余白の取り方と、ファーストビュー（サイトを開いて最初に表示される画面）の「正解」が分からなかったことです。
Photo by Should Wang on Unsplash
教科書には「余白は大切」と書かれていますが、「どれくらい空ければいいのか」までは教えてくれません。参考にしようとサイトを見ても、サイトごとにデザインが違うので、何が正解なのか分からず、自信を持てない時期が続きました。
依頼用のポートフォリオを作っていた頃は、「もっと余白を取るべきなのか」「情報を増やした方がいいのか」と何度も迷い、作り直していました。
特に困ったのは、ポートフォリオのレイアウトを、要素の位置から全部自分で決めようとしたときです。余白を何pxにするのか、見出しと本文の間をどれくらい空けるのか、具体的な数字がわかりませんでした。
調べてみても「これだ」としっくりくる答えが見つからず、しばらく手探りで模索していました。
今思えば、数字の「正解」を一つに決めようとしていたことが、迷いの原因だったのかもしれません。同じ余白でも、文字の大きさや画面の幅によって見え方は変わるからです。
抜け出せたきっかけ
転機になったのは、たくさんのWebサイトを見るようになったことです。
まず、自分のイメージに近いサイトを見つけることから始めました。近いサイトが見つかれば、余白や文字の大きさの目安がつかめます。
そこに自分の好みを少しずつ足していくと、ゼロから数字を決めようとしていたころより、迷いがずっと減りました。目安があれば、そこから「もう少し広く」「少し詰める」と調整していけるからです。
見るときは、デザインを真似するだけでなく、「このサイトは何を一番伝えたいのか」という視点で観察するようにしました。そこから、自分のサイトでも最初にテーマを決めるようになりました。
テーマが決まると、必要な情報と不要な情報の区別がしやすくなり、余白の量も自然と決まっていきました。振り返ると、「余白の正解」がなかったのではなく、「伝えたいこと」が決まっていなかっただけだったのだと思います。
好きなサイトの画面を印刷して、余白の幅を定規で測ってみたことがあります。数字にしてみると、思っていたよりずっと広く空いていることに驚きました。
同じところで悩む人へ
もし余白やファーストビューで迷っているなら、細かい装飾よりも先に「このサイトで一番伝えたいことは何か」を決めることをおすすめします。
テーマが決まっていない状態でデザインを考え始めると、判断の基準がないため、どれだけ修正しても迷い続けてしまいます。反対にテーマが決まれば、参考サイトを見たときにも「自分ならどう取り入れるか」が考えやすくなります。
参考サイトは一つに絞らず、イメージに近いものを2〜3つ並べて見比べると、共通している余白の取り方や情報の量が見えてくるかもしれません。
サイトを見比べるときの見方は「Webデザイン分析記事に人間味が大切な理由｜使う人の目線で見る5つのポイント」でくわしく書いています。
今振り返って思うこと
当時は「自分にはデザインセンスがないのでは」と落ち込んだこともありました。
でも今思えば、足りなかったのはセンスではなく、判断するための基準でした。テーマという軸ができると、余白やレイアウトにも自然と理由が生まれます。
「何となく配置する」のではなく、「何を伝えるために配置するのか」を考えられるようになったことが、一番大きな変化でした。
今でも続けている習慣
新しい記事やWebページを作る前には、「このサイトで一番伝えたいことは何か」を一行で書き出すようにしています。テーマが決まると、ファーストビューの構成だけでなく、余白の取り方や見出しの順番も考えやすくなります。
一行でまとめられないときは、まだ自分の考えが整理できていないサインだと思っています。
完成したあとには少し時間を置き、画面全体を見返して「文字が詰まりすぎていないか」「視線が自然に流れるか」を確かめることも続けています。
もう一つ続けているのが、サイト分析です。気になったWebサイトを見つけたら、余白の取り方やファーストビューの構成を観察し、「なぜこう作られているのか」を考えるようにしています。
分析するときは、「好き・嫌い」の感想で終わらせず、「余白が広いのは、伝えたいことを一つに絞っているからかも」のように理由まで考えてみるのがおすすめです。理由を言葉にできると、自分のデザインにも取り入れやすくなります。
ポートフォリオで余白に悩んだ経験は、卒業制作のポートフォリオで意識したことにもつながっています。
つまずく場所は変わっていく
Photo by Stan Versluis on Unsplash
学び始めた頃は、余白とファーストビューのことばかり悩んでいました。
今では、アニメーションのタイミングや、検索で見つけてもらうための見出しの組み立て、読みやすい文章の流れなど、別の課題で考え込むことが増えています。
つまずく場所が変わるのは、それだけ以前の課題を乗り越えてきたからとも言えます。同じ場所で止まり続けるより、新しい課題に出会えていることの方が、学習としては前に進んでいるのかもしれません。
この記事のまとめ
Webデザインを学ぶ中で一番苦労したのは、余白とファーストビューの「正解」が分からなかったことでした。
- 余白に決まった正解はない
- イメージに近いサイトから目安をつかむと迷いが減る
- 先にテーマを決めると判断しやすくなる
- つまずく場所が変わるのは成長のサインでもある
今でも迷うことはありますが、「何を一番伝えたいのか」を最初に考えることで、以前より落ち着いて判断できるようになりました。
もし今、余白やファーストビューで悩んでいるなら、デザインの正解を探す前に、自分が伝えたいことを一度言葉にしてみてください。少し見え方が変わるかもしれません。
よくある質問
Q. 余白はどれくらい取ればいいのでしょうか？
A. 決まった正解はなく、サイトの目的や伝えたい内容によって変わります。迷ったときは、イメージに近いサイトの余白を目安にして、そこから調整していくと決めやすくなります。
Q. ファーストビューは何を意識すればいいですか？
A. 最初に「このサイトで一番伝えたいこと」が伝わる構成を意識すると、情報を詰め込みすぎず整理しやすくなります。
Q. デザインセンスがなくても上達できますか？
A. 私自身、最初はセンスの問題だと思っていました。実際には、多くのサイトを見て判断の基準を増やすことで、少しずつ迷いが減っていきました。
Q. サイト分析は何から始めればいいですか？
A. 気になったサイトを1つ選び、余白の取り方やファーストビューの構成を観察してみてください。「なぜこう作られているのか」と理由まで考えるのがポイントです。
参考にしていること
関連記事
