Webデザイン

【Webデザインの基礎】初心者が最低限覚えておきたいスキルやツール

この授業は次のような方へおすすめです。

・Webデザインについての基礎知識を知りたい

・Webサイト制作にはどんなスキルが必要なのか知りたい

・Webデザイン制作するのに使うツールについて知りたい

この授業では、Webデザインの基礎についてやさしくお話していきます。

Webデザインができるようになるにはいろんなことを学ぶ必要があるので、何から始めれば良いのかわからないこともあるかもしれません。

この授業を受ければ、Webデザインの基礎を深めることができて、仕事にも活かすことができるようになります。

どうぞ最後までご覧になってください。

Webデザインとは

PexelsのNimit Kansagraによる写真

 

そもそもWebデザインとはなんなのかというと、パソコンやスマートフォン、またはタブレットアドのブラウザ上で表示されるWebサイトやアプリのレイアウトやデザインを決めることを指します。

普段パソコンやスマートフォンを使って閲覧している

・Webサイトのデザイン

・Webサービスのデザイン

・ランディングページのデザイン

などは、Webデザインによってできています。

デザイニャー
デザイニャー
これらを作る上で欠かせないのがWebデザインなんだニャン。

先生
先生
Webデザインは、見た目の良さだけでなく、Webサイトを公開した後のことを考えて作る必要があるんだ。

作ることをゴールにしていると、良いWebサイトにはなりません。

Webデザインってどんな仕事?仕事の流れや必要なスキルも紹介しますこの記事は次のような方に向けて書いています。 ・Webデザイナーになりたい人 ・Webデザインの仕事内容を知りたい人 ...
Webデザインの一つであるランディングページ(LP)とは?詳細解説この授業は次のような方におすすめです。 ・ランディングページ(LP)とは何かについて詳しく知りたい ・ランディングページ...

Webデザインとグラフィックデザインの違い

Webデザインとグラフィックデザインはどう違うのかというと、Webサイトは、パソコンやスマートフォン、またはタブレットで表示されるものなので、色々な端末の画面幅に合わせたレイアウトをそれぞれ考えないといけないところが、グラフィックデザインと決定的に違うところです。

それを考えてデザインするのがレスポンシブWebデザインといいます。

【よくわかる】Webデザインとグラフィックデザインの違いを徹底解説この記事は次のような方のために書いています。 ・Webデザインとグラフィックデザインの違いが曖昧でよくわからない ・We...

Webサイトのデザインに必要な3つのもの

先生
先生
WebサイトのWebデザインに必要なものは、次の3つのものだよ。

・Webデザインを作り出す4つのツール

・良いデザインを見る経験

・コーディング

先生
先生
これら3つのことをよく理解すれば、Webデザインの依頼が入った時に、制作会社とのコミュニケーションを深くとることができるよ。

Webデザインを作り出す4つのツール

Webデザインをするには、それぞれのWebデザインのツールの特性を知っておくことが必要です。

先生
先生
Webデザインを作り出すツールには次の4つが挙げられるよ。

・Photoshop

・Illustrator

・Adobe XD

・Sketch

Photoshop

先生
先生
Photoshopは、Webサイトのレイアウトをしたり、写真の合成や加工をしたりするときに使うツールだよ。

レイアウトと同時進行で写真の合成などのグラフィックの加工ができるツールなので、Webデザインの仕事をする際によく使われています。

Photoshopの単体料金は月額で2180円かかります。

Webデザイン初心者必見!Photoshopの基本設定について解説この授業は次のような方におすすめです。 ・これからWebデザインを始めようと思っている方 ・Webデザインを始めるにあた...

Illustrator

先生
先生
Illustratorは、イラストやロゴ、アイコンなどを作ることができるデザインツールだよ。

Webデザインで使う画像の他にも、ポスターや名刺、パンフレットなどの印刷物にも使うことができ、幅広い範囲で使われるところがIllustratorの特徴です。

Illustratorでは、Photoshopが苦手な文字の入力や図形を描いたりすることも簡単にできます。

Webデザインのレイアウト機能も搭載されているので、Illustratorを使ってWebデザインを作るデザイナーも多いです。

Illustratorを利用するには、単体料金で2480円の月額料金がかかります。

Adobe XD

Adobe XDは、Webデザインの制作もできますが、今のところはWebサービス系のアプリ制作によく使われるツールです。

先生
先生
軽くてサクサク動作が進むところが特徴だよ。

Adobe XDは、PhotoshopやIllustratorよりも直感的に操作することができるので、比較的簡単に使うことができます。

ワイヤーフレームデザインカンプを作るのによく使われ、クライアントや制作チームとの共有ができるところがとても便利です。

先生
先生
ただ、PhotoshopやSketchと比べると、機能面での充実感が足りない部分があり、利用するには何ができて何ができないのかを判断することが必要です。

Adobe XDの単体料金は、1298円ですが、無料で使えるスタータープランもあります。

【おすすめ】Webデザインの新ツールAdobe XDの使い方や機能この授業は次のような方におすすめです。 ・最近Webデザインの仕事でAdobe XDを使うことになったけれどまだよくわからない...

Sketch

先生
先生
Sketchは、Mac向けに開発されているUIデザインを制作するのに特化したデザインツールだよ。

軽い操作性と、シンプルなインターフェイスを持っていて、多くのWeb製作者に使われています。

Sketch特有のプラグインが利用できるところが特徴で、機能性の高いシンボルが使うことができます。

シンボルというのは、デザインパーツをコンポーネントとして別に保存すると、対応しているデザインパーツを、簡単な操作で変化させることができる便利な機能です。

例えば、同じ要素で複数箇所で使われているデザインパーツの色をワンクリックで変化させることができたり、書かれている文章を簡単に変更することができます。

先生
先生
WebデザインやUIデザインを効率的にデザインするのにおすすめだよ。

ただ、前に触れましたが、Macでしか使うことができないので、Windowsを使っている会社とのデータのやりとりが難しい時もあります。

Sketchの料金は、初回の1年目は99ドル(約10,800円)翌年からは1年ごとに79ドル(約8,600円)で、つまり1ヶ月にすると約900円です。

デザイニャー
デザイニャー
他のデザインソフトと比べてリーズナブルだニャン。

良いデザインを観る経験

先生
先生
ここまでデザインを制作するに際してのツールについてお話ししてきたけど、良いWebデザインを作るには、ツールを使えるのに加えて、デザインアイディアが必要になるんだ。

デザインアイディアを養うためにも、良いデザインをたくさん観る経験が必要になります。

たくさんデザインをみておくと、依頼する際のイメージを共有しやすくなります。

かっこいい感じで、とかスタイリッシュな感じで、などという漠然な注文よりも、例えば、

・⚫️⚫️みたいなWebサイトのようなレイアウトで

・ここの部分は⚫️⚫️のWebサイトでみたような感じで

などというふうに具体的に注文をつけることができますし、制作する方も作業効率がよくなります。

先生
先生
そのように、デザインアイディアの引き出しを作るためにも、次のような良いデザインがされているギャラリーサイトを紹介しておくよ。

コーディング

PexelsのNimit Kansagraによる写真

 

Webサイトのデザインができたら、それをパソコンやスマートフォンなどのブラウザで見える形にするために、コーディングすることが必要になります。

コーディングは、次の言語を使って行うんだ。

・HTML

・CSS

・JavaScript

Webデザイナーはコーディングの知識があった方が有利な理由についてこの記事は次のような方に向けて書いています。 ・そもそもコーディングとはなんなのかを知りたい ・Webデザイナーにコーデ...

HTML

HTMLとは、Webページの土台となるファイルを作る言語のことです。

コンピューターに、文章や文字列が何を表しているのかということを指定します。

【Webデザイン初心者】のためへWebデザインに欠かせないHTMLこの授業は次のような方におすすめです。 ・Webデザイン初心者で、HTMLの基礎について知りたい方 ・HTMLを初歩から...

CSS

CSSとは、HTMLで作ったものに、見た目を装飾するための言語です。

先生
先生
HTMLの時点では、白い背景と黒文字だけのページですが、CSSは、それに飾り付けをするという役割を持っているんだ。
Webデザイン初心者の方のためにCSSの基本について解説しました!この授業は次のような方におすすめです。 ・コーディングをすることになった新人Webデザイナーの方でCSSについてを知りたい方 ...

JavaScript

JavaScriptは、HTMLやCSSで作ったデザインに動きをつける役目を持っています。

そしてJavaScriptは、その他にもWebアプリやスマホアプリの開発をする時にも利用されます。

コーディングの基礎的な知識を知っておくことで、Webサイトのデザイン制作を依頼された際に、Web制作会社とのコミュニケーションを深くとることができますし、提案をする際にもやりやすいです。

先生
先生
コーディングについて独学で学びたいと思ったら、次の3つのサイトがおすすめだよ。
Webデザインに動きをつけるJavaScriptの基礎と学習サイトこの授業は次のような方にぜひ受講してほしいです。 ・Webサイトに動きをつけるJavaScriptについて知りたい方 ・...

デザインの3つの基礎

Webデザインやグラフィックデザインは、基本原則によって組み立てられています。

デザイニャー
デザイニャー
基本原則ってなんなのかニャン?

先生
先生
ここでは、デザインの基本原則について次の3つのことをお話ししていくね。

・デザインの4大原則

・カラー

・タイポグラフィ

デザインの4大原則

先生
先生
Webデザインやグラフィックデザインは、次の4つの原則に基づいて作られているんだ。

・近接

・整列

・反復

・コントラスト

先生
先生
このデザインの4大原則については次の授業で詳しく解説しているよ。
カフェメニュー表余白色付き
デザインの4大原則独学でデザインを学んでいるデザイン初心者さんへ向けた、デザインの4大原則について紹介しています。近接(proximity) 整列(alignment)対比(contrast)反復(repetition)...

カラー

出典:イメージングソリューション

全てのカラーは、色の三属性という3つの性質を持っています。

先生
先生
色の三属性とは次の通りだよ。

・色相

・彩度

・明度

この基本をしっかり理解することで、効果的な配色を作ることができます。

先生
先生
カラーについては次の授業で詳しく説明しているよ。
Webデザインの印象を左右!カラーの基本知識と便利な配色ツールとはこの記事は次のような方のために書きました。 ・Webデザインを制作したいだけれど、配色で迷ってしまうので知識を知りたい ...

タイポグラフィ

先生
先生
タイポグラフィというのは、文字を利用した表現の全てを指す言葉なんだ。

タイポグラフィには次の2つのことが大切です。

・適切なフォントを選んだ美しい文字の配置

・文字をデザインの要素として扱う

先生
先生
そして、タイポグラフィには次のようなルールもあるんだ。

・関連する文字同志は近づける

・重要な文章はフォントサイズを大きくする

・行の始まりを揃える

デザイニャー
デザイニャー
これはデザインの4大原則の要素だニャン。

さらに、適切な文字の行間と字間の調整を行えば、文字を一つのデザインにすることができます。

先生
先生
文字をデザイン要素のように扱うことによって、Webデザインをより一層引き立てることができるんだ。
グラフィックデザインをするなら知っておきたいタイポグラフィについて「タイポグラフィって何なのかな??」 なんとなく書体のことであることはわかっているけれど、詳しいこととなると何のことを指しているの...

Webサイトデザインの基礎

PexelsのANTONI SHKRABAによる写真

 

デザイニャー
デザイニャー
ここまでデザインについての原則について学んできたけれど、Webサイト自体のデザインをするにはどんな知識が必要なのかニャン?

先生
先生
ここでは、Webサイトのデザインに関して次の4つのことをお話ししていくね。

・レイアウトの種類

・フォントの種類

・配色パターンの種類

レイアウトの種類

出典:MK-Design

 

先生
先生
Webサイトのデザインにはいくつかレイアウトがあって、それはサイトによって色々な種類があります。

レイアウトというのは、どこに何を配置するのかという割り付けのことです。

先生
先生
Webサイトには、主に次のようなレイアウトの種類があるんだ。

・シングルカラムレイアウト

・マルチカラムレイアウト

・グリッドレイアウト

・ブロークングリッドレイアウト

・ノングリッドデザイン

これらにはそれぞれの特徴があり、用途が異なってきますので、作成するWebサイトの目的やタイプによって、それに合ったレイアウトを選びましょう。

先生
先生
Webデザインのレイアウトについては、次の授業で詳しくお話ししているから参考にしてね。
【Webデザイン制作で迷わない】最適な画面サイズとレイアウトの種類この記事は次のような方に向けて書きました。 ・見やすく操作しやすいWebサイトを作りたい ・Webデザインをするときの推...
【わかりやすく徹底解説】Webデザイン制作|基本のレイアウトとは?この記事は、次のような人に向けて書きました。 ・センスのが良くて使いやすいWebサイトを作りたい ・それにはどこから手を...

フォントの種類

Webデザインを制作する際のフォント選びは、Webサイトの印象を印象をガラッと変えるので、明朝系でいくのかゴシック系でいくのかも、サイトの内容によって変わってきます。

デザイニャー
デザイニャー
フォントには多くの種類があるから、一番いいフォントを選ぶのは難しそうだニャン。

フォントを選ぶ際には

・可読性

・視認性

・判読性

の3つが備わったフォントを選ぶと失敗しにくいです。

最近では、Webフォントというものも出てきているので、デバイス内のフォントである必要もなくなってきています。

Googleフォントという無料のWebフォントも出てきているので、そういった知識を調べていくと良いでしょう。

Webデザインの出来を左右するおすすめの【フォント】と選び方を解説この授業は次のような方におすすめです。 ・Webデザイン初心者でどんなフォントがあるのかを知りたい方 ・Webデザインの...

使えるフォントをたくさん知っておくことで、デザインの幅も広がり、美しいフォントを使うようにすることで、デザインのクオリティがアップします。

Webデザインをする際に知っておきたいこと

出典:Digitalsolutionmedia

 

先生
先生
Webデザインをする際に知っておきたいことについて、良い記事を見つけたから、見ておいてね。

>>Digitalsolutionmedia

Webデザインをするのに注意すべき2つの点

先生
先生
Webデザインをする上で注意すべき点は次の2つだよ。

・改行が変わる

・同じフォントで表示されない場合も

改行が変わる

先生
先生
チラシなどの印刷物のデザインと大きく違うのは、文章の改行の位置が変わることだよ。

Webサイトは、パソコンやスマートフォンの画面の幅によって、表示されている文章の改行の位置が変わることもあります。

これを考えずにデザインすると、せっかく作ったデザインが台無しになります。

なので、このデザインの文字数が変わっても大丈夫なのかをということを気をつけることを心がけましょう。

同じフォントで表示されない場合も

先生
先生
Webサイトに表示される文字は、そのパソコンやサイトによってインストールされているものしか知らないって知ってた?

デザイニャー
デザイニャー
そ、そうだったのかニャン!!

Macでデザインを綺麗に作ったものでも、Windowsでみると崩れてしまっているということがよくあります。

Macにはヒラギノという規定フォントが入っているのですが、Windowsにはヒラギノが入っていないので、その代わりに似たようなフォントを使うことによって、文字サイズが若干変わってしまうこともあります。

そんな風に、フォントが変わっても崩れないデザインにするには、Web上でデータを読み込んで使えるWebフォントを使うというふうに工夫することが必要になります。

先生
先生
だからコーダーの担当者に、このフォントで大丈夫なのかと確認するようにすると良いよ。

Webデザインを学ぶには独学かスクールか

ここまでWebデザインについて必要な知識やスキル、そしてツールについてお話ししてきました。

Webデザインの基礎を学ぶためには、

・独学で学ぶ

・スクールで学ぶ

という2つの方法があります。

Webデザインを習得するのは独学かが良いかそれともスクールかを解説この授業は次のような方におすすめです。 ・Webデザインを独学で学ぼうかスクールで学ぼうか迷っている方 ・あなたに合った...

そのどちらにもメリットとデメリットがありますが、自分に適した方法を選ぶことが大切です。

まずはそれぞれの特徴を理解してどちらがあなたに向いているかを考えてみましょう。

独学で学ぶ

Webデザインは、本で学んだりWeb学習サイトなどを利用して独学で学ぶことができます。

まずは本を読んでWebデザインの基礎知識をしっかり学んでから、

といったWeb学習サイトで学んでいきましょう。

独学のメリットは、自分のペースで進められ、仕事をしていて忙しい人でも始めやすいという点です。

Webデザインのスキルは独学で習得できる!勉強法や便利なツールも紹介この授業は次のような疑問を持っている方におすすめです。 ・Webデザインは独学で学べるの? ・Webデザインは大学や専門...

しかし独学では、教材を選ぶのが難しい部分があったり、モチベーションが続きにくいというデメリットもあります。

先生
先生
そんなあなたには、次の授業でお話ししていた記事を読んでいただくことをおすすめするよ。
Webデザインを無料でも勉強できるサイト9選|試しにやってみよう!この授業は次のような方へおすすめです。 ・Webデザインに興味を持ち始めている方 ・お金をかけずに気軽にWebデザインの...

スクールで学ぶ

先生
先生
独学でWebデザインは学ぶこともできるけれど、それが厳しい場合にはスクールに通うという方法もあるよ。

スクールに通うと、

・Webデザインの学習のカリキュラムが整っている

・プロのデザイナーから直接指導してもらえるので実践的なスキルが身に付く

・転職サポートを受けられる

という大きなメリットがあります。

独学と比べて費用がかかりはしますが、最速で実践的なスキルを身につけることができるので、そういった点でメリットは大きいと言えます。

【初心者必見】Webデザインスクール|社会人や主婦の方でも学べますこの授業は次のような方におすすめです。 ・社会人の方でこれからWebデザインスクールで学習して就職したい方 ・どんなWe...

Webデザインを学ぶには本が王道

Webデザインの基礎を学習する方法についてここまでお話してきましたが、あなたの目的やライフスタイルに合わせて、自分に合った学習方法を選択しましょう。

Webデザインの基礎を学ぶには本で学ぶのが王道です。

次の授業で、Webデザインの基礎を学ぶのに良いおすすめ本をご紹介しています。

【厳選20冊】初心者がWebデザインをわかりやすく学べるおすすめ本この記事は次のような方に向けて書いています。 ・Webデザインを物にしたいのだけれど、何から手をつけたらいいのか迷ってしまう ...

まとめ

先生
先生
この授業では次の28個のことについてお話してきたよ。

・Webデザインとは

・Webデザインとグラフィックデザインの違い

・Webサイトのデザインに必要な3つのもの

・デザインツール

・Photoshop

・Illustrator

・Adobe XD

・Sketch

・良いデザインを見る経験

・コーディング

・HTML

・CSS

・JavaScript

・デザインの3つの基礎

・デザインの4大原則

・カラー

・タイポグラフィ

・Webサイトデザインの基礎

・レイアウトの種類

・フォントの種類

・Webデザインをする際に知っておきたいこと

・Webデザインをするのに注意すべき2つの点

・改行が変わる

・同じフォントで表示されない場合も

・Webデザインを学ぶには独学かスクールか

・独学で学ぶ

・スクールで学ぶ

・Webデザインを学ぶには本が王道

Webデザインができるようになるためのデザインの知識やデザインを制作するツールについてお話ししてきました。

Webデザインの基礎を掴んでおく事で、仕事をする際のコミュニケーションが深くとれ、クライアントからも満足してもらえることで、また仕事を頼まれたり、というふうに良い循環になってきたらしめたものです。

プロのWebデザイナーとして社会で活躍していくためにも、デザインの基礎やデザインに関する知識、スキルはしっかり身につけていきましょう。

私たちは頑張るあなたを応援しています。