Webデザインに挑戦してみたいけど、何から始めればいいのかわからない…そんな悩み抱えてませんか？
Webサイトをデザインをするためには「ITリテラシー」、インターネットやデジタルの基本的な仕組みを理解することからはじまります。
この記事では、webデザイン初心者の方でもわかるように、Webサイトがどのように表示されているのか、デザインを考える上で知っておくべき基本的な知識を解説します。これを読めば、デザインの基礎がわかります！
なぜデザインの知識だけではダメなの？
「Webデザインって難しそう…サーバーやHTMLって聞くだけでハードルが高い！」
そんなふうに感じていませんか？
でも、大丈夫です。
最初に「サイトがどのように表示されているのか」という基本的な仕組みを押さえるだけで、次のステップがとってもスムーズになります。
例えば、HTMLやCSSの知識がない状態でデザインを始めたとしましょう。
実際のサイト作成（実装）の段階で、実装者やクライアントからこんな質問をされたらどうでしょう？
- スマホではどんな見え方にしますか？1カラムですか？それとも2カラムですか？
- ホバーしたときの色や動きはどうしますか？
- ここはアコーディオンのような動きをつけますか？もし付ける場合、トグル時のデザインいただけますか？
- このページの最大幅はいくつにしますか？ブレイクポイントはどうしますか？
これらの質問にしっかり答えられると、デザイン全体の説得力や魅力が増します。
さらに、実装の知識があると「クライアントや実装者が何を求めているか」を予測しやすくなるため、スムーズなコミュニケーションが可能になります！
この質問にスムーズに答えられたのであれば、HTML、CSSの基礎知識以上は身についている方かと思いますのでこの記事はそっと閉じてくださいませ。
Webデザインはただ見た目を作るだけではありません。
「どう使われるのか」「どう動くのか」を理解することで、デザインがただの画面から、ユーザーが使いやすい「体験」に変わります。
もし、こうした質問に答える自信がまだないと感じる場合、HTMLやCSSなどの基礎を学んでいきましょう！
Webサイトはどうやって表示されている？
ブラウザ、サーバー、HTMLの役割
Webサイトを表示する仕組みは、以下の3つの要素が関係しています。
- ブラウザ
-
データを読み込んで私たちが見られる形にしてくれるツール（Google ChromeやSafariなど）
- サーバー
-
Webサイトのデータが保存されている場所
- HTML
-
Webサイトの構造を記述した言語
例えば、私たちがブラウザでURLを入力すると、ブラウザがサーバーにデータを取りに行き、それをHTMLをもとに表示しています。
これを「Webサイトが表示される仕組み」と言います。
実際にはサーバー側で他いろいろな処理が行われていますが、まずはこの基本的な仕組みをざっくり理解しておけば大丈夫です！
Webデザインを学習していく中で、自然と必要な知識が身についていくので安心してください。
CSSとJavaScriptでデザインが決まる
HTMLだけでは文字や画像が縦に並ぶだけのシンプルなページです。
そこにCSS（色やレイアウト担当）やJavaScript（動き担当）を加えることで、見た目が整った動きのあるWebサイトが作られます。
みなさんが普段、目にしているようなWebサイトがそれです。
例えば、HTMLのみの表示とCSSなどで装飾を加えた表示では、以下のような違いがあります。
タブを切り替えてどのように違うか見比べてみてください。
いろはにノート
HTMLだけで作ったシンプルなページのイメージです。
ちょっと寂しい。
初心者が知っておくべきデザインの基本3つ
1. レイアウトの重要性
Webサイトでは、どこに何を配置するかがとても重要です。
これを「レイアウト」といいます。
たとえば、次のポイントを意識してみましょう！
- 文字は読みやすいサイズか？
- 目立たせたい情報はどこに配置するべきか？
- スマホでも見やすい設計になっているか？
2. カラーの選び方
色には意味や感情を伝える力があります。以下を覚えておきましょう！
- 青は信頼感や安心感を伝える
- 赤は注意を引きつける
- 緑はリラックスや自然を連想させる
色を選ぶときは、「コントラスト」（背景と文字の明暗の差）にも注意しましょう。これで読みやすさが大きく変わります。
3. フォント（文字）の選択
フォントはデザインにおいて大きな影響を与えます。以下を意識してみましょう！
- 見出しには太めのフォント、読みやすいフォントを使う
- 本文には読みやすいゴシック体を選ぶ
- 適切な行間を保つ（狭すぎると読みにくくなる）
Webデザイン初心者が最初にやるべきこと
とにかく手を動かして学ぶ！
知識を得るだけではデザインスキルは身につかないので、初心者は以下の方法で手を動かしてみましょう。
無料で学べるおすすめリソース
- Progate
-
プログラミング初心者向けの学習サイト
自分の覚えたい言語やレベルに合わせて、学習を進めていけます。 - ドットインストール
-
短い動画で簡単に学べる
全てのレッスンが3分以内の動画になっているのでスキマ時間に学習しやすいです。 - YouTube
-
Webデザインの基礎を解説しているチャンネルも豊富
-
私が初心者の時に参考にさせていただいたYouTube動画を貼ります。ワードプレス講座となっておりますが、サーバーの仕組みはどのサイト制作においても重要です。
サイトの核の部分でもあるといえる本記事でもお話したサーバーについて、詳しくわかりやすく解説されているので、ぜひ未経験で「サーバーとか難しそうでよくわかないよ」「サーバーについて、もっと詳しく知りたい」という方は参考にしてみてください。
HikoProさん
まとめ
Webデザインを学ぶには、まずはサイトが表示される仕組みを理解し、基本的な知識を身につけると、あとの作業がとても楽になります。
初心者のうちは少し難しいと感じるかもしれませんが、自分ができるところから進めていってください。
ぜひこの記事を参考にして、楽しくWebデザインを学びましょう！
コメント