これだけは知っておくべきWEBデザイン基礎とスキルアップの方法

こんにちは! Web制作ライターのナナミです。

ホームページ作成に超重要なデザイン、ぜひやってみたい!と勉強を始めているようですね。

何事もまずは基礎から覚えたいもの。とはいえWebデザインの基礎って何?という方も多いと思います。特に紙面デザインの経験がある方は、Webデザインならではの基礎で苦戦していたりするのではないでしょうか?

今回はそんなWebデザインの基礎をまとめました。基礎からさらにレベルアップする方法も解説しているので、学習のお役に立てれば幸いです。

【結論】基礎よりデザインパターンを見るのが大事

基礎を解説します! とは言いましたが、はっきり言って基礎はそこまで重要ではありません。

Webデザインのスキルとは引き出しの多さです。なので基礎ではなく、いろんなデザインを見てノウハウや見せ方を吸収することが一番大事になります。

とはいえWebならではの「こうしておいた方がいい」はあるので、それは次の項目にまとめました。

だからこの記事で覚えておきたい基礎はサクッと終わらせて、あとは参考サイトをたくさんみて、真似して、組み合わせて、どんどんデザインの引き出しを増やしていくようにしてくださいね。

これだけはおさえておきたいWebデザインの基礎

画像:Shutterstock

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フォントなど色々みて、どんな色・文字にどんな印象があるのかを知っておきましょう。

カラー配色で迷わない!シーン別配色見本32パターン

Google Fonts

他にも下記のようなサイトでいろんな色を組み合わせて、ベストな組み合わせを探してみるのもいい練習になると思います。

HUE/360

他のデザインをとにかく見る

他のデザインを見て作ってたらパクリになるんじゃないの?

と思ったかもしれませんね。もちろん全部丸ごと真似しましょうというわけではありません。

デザインにはある程度のお決まりパターンがあります。例えば下記のデザインなら、ぱっと見で「あ、ボタンだ」とわかりますよね。

侍エンジニア塾の
サービス紹介を見る

これ以外にもボタンのデザインパターンは色々ありますが、これと同じようなボタンをいろんなところで見かけたことがあると思います。

そう、そういうお決まりパターンを知っておくことが大事なんです。

デザイン初心者はデザインはゼロから自分のセンスで生み出すものと思いがちですが、実際はそうではありません。デザイナーの仕事はアーティストとは違い、美しさだけではなく見る側の便利さや使いやすさを考えることも含まれているからです。

先ほどのボタンも、ぱっと見でボタンだとわかることでユーザーが「ここはクリックすると他のページに移動したりする」と瞬時にわかるようにすることで、ユーザーが便利になるように考えられたものです。

こういうお決まりパターンや今のトレンドなどを吸収し、自分の糧にしていくのが大事です。とにかく他のサイトを見ましょう。さらに「なぜこのデザインにしたのか」まで考えると、よりレベルの高いインプットができるのでおすすめです。

参考にしてオリジナルデザインを作る

これら二つのインプットをすればOKではありません。そこから自分のオリジナルデザインを作っていきましょう。

繰り返しになりますが、全く違うものを生み出すわけではありません。

レイアウトはこのサイトを参考に、ボタンはこれのデザインがいいから参考にしよう、アイコンはこっちのほうがいいかなと、インプットしたものを組み合わせていくのです。そこに配色やフォントの違いをつけることで、あなたが考えたWebデザインとして形にすることができます。

これがまさにWebデザインを作るということ。いろんなコンセプトで作ってみましょう。

さらにレベルの高いデザイナーを目指すなら

画像:Shutterstock

過去Webデザイナーという仕事はデザインをすれば終わりでした。しかし今はコーディングまで担当するのが当たり前になってきています。

とはいえ、今でもコーディングができないWebデザイナーもたくさんいます。

これから学ぶあなたには、デザインのノウハウだけでなく、それを実現するHTML・CSSのスキルを身につけ、「現代のWebデザイナー」にぜひなっていただければと思います。

さらにプログラミングも学べば、ディレクターとしても活躍できたり、見た目のデザインだけでなくアプリの仕組みまでデザインできる超敏腕デザイナーも夢ではありません。

そう、Webデザイナーは複数のスキルを掛け合わせることで、より価値を高めていけるのです。

そんな学習のプラン、侍エンジニア塾で一緒に考え、講師とともにチャレンジしてみませんか?

無料体験レッスンは、あなたのスキルアップのためにどんな勉強が必要なのか、どのようなスキルを持てば収入アップに繋がるのかなどを、プロのコンサルタントがアドバイスをさせていただきます。

Webデザイン学習を始めたての今だからこそ、さらに先を見据えたプランを考えて、他の人よりリードしちゃいましょう!

デザインはインプットとアウトプットの繰り返し

デザインという作業はクリエイティブなものですが、全く世の中に存在していなかったものを生み出すのとはちょっと違います。今までのお決まりパターンやユーザーの行動パターンなどから生み出される、データに基づいた作品です。

基礎はサクッと終わらせて、とにかくインプット、アウトプットを繰り返しましょう。それがあなたのWebデザイン力を高める近道になります。

世の中素敵なWebサイトがたくさんあるので、ぜひ色々参考にして、あなたも同じくらい素敵なサイトをデザインしてみてくださいね!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー