こんにちは！ Web制作ライターのナナミです。
ホームページ作成に超重要なデザイン、ぜひやってみたい！と勉強を始めているようですね。
何事もまずは基礎から覚えたいもの。とはいえWebデザインの基礎って何？という方も多いと思います。特に紙面デザインの経験がある方は、Webデザインならではの基礎で苦戦していたりするのではないでしょうか？
今回はそんなWebデザインの基礎をまとめました。基礎からさらにレベルアップする方法も解説しているので、学習のお役に立てれば幸いです。
- Webデザインスキルを高めるにはデザインパターンの学習が重要
- 色の組み合わせやフォントを学ぶとデザインの選択肢が増やせる
- 既存のWebサイトを参考にするとデザイン作成がはかどる
本記事を読み前に、そもそもWebデザインとは何なのか、その特徴を種類や学ぶことで目指せるキャリアも交え詳しく紹介しているので良ければ参考にしてください。
→ Webデザインとは何かわかりやすく解説！学習手順も簡単に紹介
【結論】基礎よりデザインパターンを見るのが大事
基礎を解説します！ とは言いましたが、はっきり言って基礎はそこまで重要ではありません。
Webデザインのスキルとは引き出しの多さです。なので基礎ではなく、いろんなデザインを見てノウハウや見せ方を吸収することが一番大事になります。
とはいえWebならではの「こうしておいた方がいい」はあるので、それは次の項目にまとめました。
だからこの記事で覚えておきたい基礎はサクッと終わらせて、あとは参考サイトをたくさんみて、真似して、組み合わせて、どんどんデザインの引き出しを増やしていくようにしてくださいね。
これだけはおさえておきたいWebデザインの基礎
Webのデザインは、最終的に画面に表示するためにHTMLなどでのコーディングを行ないます。だからこそWebならではの「おさえておきたい基礎」があるのです。
超重要な3つのポイントに絞ってご紹介しますね。
よく使う専門用語
IT業界って横文字多いですよね。Webデザインの用語もほとんど横文字です。
Webデザイン初心者がおさえておきたい頻出用語をまとめてみましたので、これでさらっと確認しておきましょう。
| ヘッダー | Webサイトの上部の表示エリア。ロゴやグローバルメニューが配置されていることが多い |
| フッター | Webサイトの下部の表示エリア。住所や他ページへのリンク、コピーライトなどが配置されていることが多い |
| グローバルメニュー | ヘッダーにある他ページへのリンクの集まり。サイトのいろんなところに移動できることからこう呼ばれている。 |
| カラム | 横並び要素のこと。例えばサイドバーがある場合、メインエリアとサイドバーの2つの要素があるため「2カラム」と言われる |
| レスポンシブ | パソコン版とスマホ版を同じHTMLで作成し、画面の幅によってデザインを切り替える仕様のこと。 |
| SP版 | レスポンシブサイトのスマートフォンデザインのこと。 |
| ハンバーガーメニュー | SP版のグローバルメニューを表示するためのボタンデザイン。線が3本並ぶことからこう呼ばれている。 |
| コーディング | デザインを元にHTMLやCSSなどのコードを書く作業のこと。 |
改行が変わることを意識する
チラシなどのデザインと大きく違うのはこれ。Webサイトはパソコンやスマホの画面の幅によって、表示される文字の改行箇所が変わることがあります。
これを意識しないでデザインすると、せっかくのデザインが台無しに……なんてことになったり、コーディングの難易度が恐ろしく上がってしまったりなどの悲しい出来事に見舞われてしまうんです。
「このデザインは文字数が変わっても大丈夫か」という視点を持ち続けることを心がけましょう。
同じフォントで表示されるとは限らない
Webサイトの文字は、そのパソコンやサイトにインストールされているものしか使えないってご存知でしたか？
よくあるのが、Macで完璧なデザインをしたのにWindowsだと崩れる問題です。これはMacの規定フォントであるヒラギノはWindowsに入っていないため、代わりに似たようなフォントを使うも、若干文字サイズなどが変わってしまうことで発生します。
フォントが変わっても崩れないデザインにする、Web上でデータを読み込んで使うことができるWebフォントを活用するなどの工夫が必要になることを覚えておきましょう。
コーディング担当者に「このフォント大丈夫？」と確認するのもアリです。
Webデザインの基礎を身に着けたあとのステップアップ法
あとはとにかくインプットとアウトプットをして、自分の引き出しを増やしていくに限ります。どんどん手を動かしていきましょう。
色の組み合わせやフォントを見る
人もWebサイトも、何事も第一印象って大事です。色やフォントはサイトの印象を決める重要な要素になります。
例えば下記の例をみてください。全然印象が違いますよね。
そのサイトのコンセプトに合わせて、適切な配色・フォントを選ぶのが大事なんです。
下記のような配色例の参考サイトやGoogleフォントなど色々みて、どんな色・文字にどんな印象があるのかを知っておきましょう。
他にも下記のようなサイトでいろんな色を組み合わせて、ベストな組み合わせを探してみるのもいい練習になると思います。
⇨ HUE/360
他のデザインをとにかく見る
と思ったかもしれませんね。もちろん全部丸ごと真似しましょうというわけではありません。
デザインにはある程度のお決まりパターンがあります。例えば下記のデザインなら、ぱっと見で「あ、ボタンだ」とわかりますよね。
侍エンジニアのサービス紹介を見るこれ以外にもボタンのデザインパターンは色々ありますが、これと同じようなボタンをいろんなところで見かけたことがあると思います。
そう、そういうお決まりパターンを知っておくことが大事なんです。
デザイン初心者はデザインはゼロから自分のセンスで生み出すものと思いがちですが、実際はそうではありません。デザイナーの仕事はアーティストとは違い、美しさだけではなく見る側の便利さや使いやすさを考えることも含まれているからです。
先ほどのボタンも、ぱっと見でボタンだとわかることでユーザーが「ここはクリックすると他のページに移動したりする」と瞬時にわかるようにすることで、ユーザーが便利になるように考えられたものです。
こういうお決まりパターンや今のトレンドなどを吸収し、自分の糧にしていくのが大事です。とにかく他のサイトを見ましょう。さらに「なぜこのデザインにしたのか」まで考えると、よりレベルの高いインプットができるのでおすすめです。
参考にしてオリジナルデザインを作る
これら二つのインプットをすればOKではありません。そこから自分のオリジナルデザインを作っていきましょう。
繰り返しになりますが、全く違うものを生み出すわけではありません。
レイアウトはこのサイトを参考に、ボタンはこれのデザインがいいから参考にしよう、アイコンはこっちのほうがいいかなと、インプットしたものを組み合わせていくのです。そこに配色やフォントの違いをつけることで、あなたが考えたWebデザインとして形にすることができます。
これがまさにWebデザインを作るということ。いろんなコンセプトで作ってみましょう。
さらにレベルの高いデザイナーを目指すなら
過去Webデザイナーという仕事はデザインをすれば終わりでした。しかし今はコーディングまで担当するのが当たり前になってきています。
→ Webデザイナーにコーディングスキルは必要？身につける利点も紹介
とはいえ、今でもコーディングができないWebデザイナーもたくさんいます。
これから学ぶあなたには、デザインのノウハウだけでなく、それを実現するHTML・CSSのスキルを身につけ、「現代のWebデザイナー」にぜひなっていただければと思います。
さらにプログラミングも学べば、ディレクターとしても活躍できたり、見た目のデザインだけでなくアプリの仕組みまでデザインできる超敏腕デザイナーも夢ではありません。
そう、Webデザイナーは複数のスキルを掛け合わせることで、より価値を高めていけるのです。
そんな学習のプラン、侍エンジニアで一緒に考え、講師とともにチャレンジしてみませんか？
無料カウンセリングは、あなたのスキルアップのためにどんな勉強が必要なのか、どのようなスキルを持てば収入アップに繋がるのかなどを、プロのコンサルタントがアドバイスをさせていただきます。
Webデザイン学習を始めたての今だからこそ、さらに先を見据えたプランを考えて、他の人よりリードしちゃいましょう！
無料カウンセリングで相談してみるデザインはインプットとアウトプットの繰り返し
デザインという作業はクリエイティブなものですが、全く世の中に存在していなかったものを生み出すのとはちょっと違います。今までのお決まりパターンやユーザーの行動パターンなどから生み出される、データに基づいた作品です。
基礎はサクッと終わらせて、とにかくインプット、アウトプットを繰り返しましょう。それがあなたのWebデザイン力を高める近道になります。
世の中素敵なWebサイトがたくさんあるので、ぜひ色々参考にして、あなたも同じくらい素敵なサイトをデザインしてみてくださいね！
なお、Webデザイン制作が上達するコツを詳しく知りたい人は、次の記事を参考にしてください。
