【超初心者向け】Webデザインの基礎知識と作り方・考え方

Summary

この動画は、初心者向けにウェブデザイン制作に必要な基本知識を解説しています。ウェブサイトの全体的なデザインを決める際には、レイアウト、フォント、配色の3つの視覚的な要素を考慮する必要があります。レイアウトは1カラムから3カラムのグリッドレイアウトまで様々で、サイトの目的や情報量によって選ぶことができます。タイポグラフィには、ゴシック体や明朝体の選択が重要で、最近ではWebフォントも活用されています。配色については、ベースカラー、メインカラー、アクセントカラーの3つを使い、それぞれの役割に応じた割合でバランスをとる方法が提案されています。また、色の意味や印象を理解しながら配色を選ぶことも大切です。デザイン制作を始める前に、これらの基本原則を押さえることが、質の高いウェブデザインを作り出すための鍵となります。

Takeaways

• 🎨 デザイン制作の際には、雰囲気や感性だけでなく、基礎知識やデザイン理論に基づいて行うことが必要です。
• 🌐 ウェブデザインは、情報設計、グラフィックデザイン、UI/UXデザインを含む幅広い領域を指します。
• 📐 レイアウトの基本形は1カラム、2カラム、3カラム、グリッドレイアウトの4つに分類されます。
• 📄 1カラムレイアウトはシンプルで、コンテンツに集中しやすく、レスポンシブデザインにも適しています。
• 📊 2カラムレイアウトはサイドバーを用いて、サイト内を効果的にナビゲートできます。
• 🗂️ 3カラムレイアウトは情報量が多い場合に適しており、ポータルサイトやECサイトでよく使われます。
• 🔲 グリッドレイアウトは規則正しく見せることができ、情報量の多いウェブサイトにも適しています。
• 🔡 タイポグラフィの基本は、可読性と視認性を重視したゴシック体（サンセリフ体）を選ぶことです。
• 🖋️ フォントの選択は、環境によって表示が異なるため、標準的なフォントが推奨されます。
• 🌈 配色はベースカラー、メインカラー、アクセントカラーの3つで構成され、それぞれの役割を理解することが重要です。
• 🎽 色の選択には、色の意味や印象を理解し、サイトのイメージに合った配色を選ぶ必要があります。
• 📈 配色の決定に迷った場合は、カラーホイールや色見本帳、オンラインツールを活用して助けを得られます。

Q & A

初心者がウェブデザイン制作に必要な最低限の基礎知識とは何ですか？

初心者がウェブデザイン制作に必要な基礎知識には、情報設計、グラフィックデザイン、UI設計、ユーザーインターフェース設計が含まれます。また、レイアウト、フォント、配色などの視覚的なデザイン要素も重要です。

ウェブデザインのレイアウト手法としてよく使われる4つのレイアウトは何ですか？

ウェブデザインのレイアウト手法としてよく使われるのは、1カラム、2カラム、3カラム、グリッドレイアウトの4つです。それぞれのレイアウトは、サイトの種類や目的、情報量に応じて適切に選択されます。

1カラムレイアウトの利点は何ですか？

1カラムレイアウトの利点は、コンテンツに視線を集中させることができること、ディスプレイの横幅に合わせてレイアウトがしやすく、スマホに対応したレスポンシブデザインとも相性が良いこと、制作しやすくメンテナンスもしやすいことです。

デザインのレイアウトに基本的な原則として挙げられる4つのものは何ですか？

デザインのレイアウトに基本的な原則として挙げられる4つのものは、近接、整列、反復、対比です。これらを意識してデザインを行うことで、見やすく分かりやすいデザインに仕上げることができます。

タイポグラフィとは何ですか？また、ウェブデザインでよく使われるフォントは何ですか？

タイポグラフィとは、文字の書体や大きさ、配置の仕方のことです。ウェブデザインでよく使われるフォントは、メイリオ、游ゴシック、ヒラギノ角ゴシックなどです。これらのフォントは、多くのユーザーのPCやスマホに標準で入っているため、環境による差異が少なくなります。

ウェブフォントとは何ですか？また、なぜウェブフォントを使用するのですか？

ウェブフォントとは、ウェブサーバ上で置かれたフォントデータを読み込んでブラウザ上で表示する技術です。ウェブフォントを使用することで、ユーザーのPCやスマホにそのフォントがインストールされていなくても、指定されたフォントでデザインを表示することができます。これにより、デバイス内のフォントが入っていなくとも表示されないというバグを回避し、デザインの統一性を実現できます。

ウェブサイトの配色で使われるベースカラー、メインカラー、アクセントカラーの役割とは何ですか？

ベースカラーはウェブサイトの最も大きな面積を占め、背景などに用いられる色です。メインカラーはサイトの印象を決定づける主役の色で、ブランドカラーや商品のイメージ色などが採用されます。アクセントカラーはメインカラーからのみだと単調になることを防ぎ、メリハリをつけるための色で、ボタンや強調したい箇所に使われます。

色の三属性として考えられるものは何ですか？

色の三属性は色相、彩度、明度です。色相は色の方向性を決め、彩度は色の鮮やかさを表し、明度は色の明るさを示します。これらの属性を調整することで、様々な色を表現することができます。

配色を決める際に参考になるサイトやツールとは何ですか？

配色を決める際に参考になるサイトやツールには、色の意味やイメージを知るためのカラーウェブサイト、相性の良い色の組み合わせを知るためのカラーホイール、またシーンやジャンル別に配色パターンを選ぶためのスキームカラーウェブサイトなどがあります。

ウェブデザインにおいて、アクセントカラーを決める際のポイントは何ですか？

アクセントカラーを決める際のポイントは、目立つ色を選ぶことと、色が増えるほど扱いが難しくなるため、基本的には1色だけを目立つ色として決めることです。アクセントカラーは、お問い合わせボタンや強調したい言葉、パーツなどに使用し、効果的に活用します。

ウェブデザインの制作で、レイアウトの選択肢として3カラムレイアウトが使われる場面とはどのようなものです？

3カラムレイアウトは情報量の多いポータルサイトやECサイトでよく使われるレイアウト手法です。一度に多くのコンテンツを見せることができるため、商品数が多いショッピングサイトなどで商品を紹介する際に適しています。

グリッドレイアウトとは何ですか？また、その特徴は何ですか？

グリッドレイアウトは、画面やページを直線の格子状に分割させ、コンテンツを配置する手法です。その特徴はレイアウトがグリッドに沿って規則正しく整えられることで、整った印象を与えられることと、情報量が多くても煩雑にならず綺麗に見えることです。

Outlines

00:00

🎨 ウェブデザインの基礎知識

初心者向けにウェブデザイン制作に必要な基礎知識を解説。デザイン制作の基本的な部分に焦点を当て、ウェブサイト全体の基本デザインを決定するプロセスを紹介。レイアウト、フォント、配色の基本要素を理解し、視覚的に魅力的なウェブデザインを作り出す方法を学ぶ。

05:03

📐 レイアウトとデザイン原則

ウェブデザインのレイアウトについて解説し、デザインの基本原則として近接、整列、反復、対比の4つの要素を紹介。これらの原則に基づいてデザインを構築し、視覚的にグループ化し、情報を整理して読みやすく、分かりやすく伝える方法を学ぶ。

10:07

🔠 タイポグラフィとフォントの選択

タイポグラフィの重要性と、ウェブデザインでよく使われるフォントの種類について解説。ゴシック体と明朝体の使い分け、ウェブフォントの活用方法、そしてメイリオ、游ゴシック、ヒラギノ角ゴシックなどの標準フォントの使用について学ぶ。

15:08

🎨 配色の選び方と効果的なアプローチ

ウェブサイトの配色について解説し、ベースカラー、メインカラー、アクセントカラーの役割と選び方。配色の比率、色の意味や印象、色相、彩度、明度の調整方法を紹介。また、配色を決める際に参考になるサイトやツールも提案している。

20:14

📚 配色とデザインの決定

配色の決定方法と、デザインに必要な情報を網羅的に提供。色の意味や印象、相性の良い色の組み合わせを見つけるためのカラーホイールの使い方、色見本帳の活用、そしてオンラインで配色パターンを選ぶ方法を解説。

📝 まとめと今後の展望

初心者向けに必要なウェブデザイン制作の基礎知識を振り返り、今後のデザイン制作で活かすためのアドバイスを提供。チャンネルの目的と、今後も役立つ情報を配信する意気込みを述べている。

Keywords

💡ウェブデザイン

ウェブデザインとは、ウェブサイト全体の情報設計や視覚的な要素を考慮したグラフィックデザイン、UI設計、ユーザーインターフェース設計を指します。このビデオでは、初心者がウェブデザインの基本を理解し、実践できるように、必要な基礎知識を解説しています。

💡レイアウト

ウェブデザインにおいてレイアウトは、コンテンツの配置方法を決定する重要要素です。ビデオでは、1カラム、2カラム、3カラム、グリッドレイアウトなど、様々なレイアウトのスタイルとその特徴について説明しています。

💡タイポグラフィ

タイポグラフィとは、文字の書体や大きさ、配置方法を指し、ウェブデザインの可読性に大きく影響を与えます。ビデオでは、ゴシック体や明朝体の選択、ウェブフォントの活用方法について触れています。

💡配色

配色はウェブデザインでよく争われるトピックで、ベースカラー、メインカラー、アクセントカラーの3つを組み合わせることで印象を定義します。ビデオでは、色の比率や意味、彩度、明度の調整方法について解説しています。

💡グリッドレイアウト

グリッドレイアウトは、画面を直線の格子状に分割し、コンテンツを規則正しく配置する手法です。ビデオでは、グリッドレイアウトの特徴として、整った印象を与えられること、情報量が多くても煩雑にならないことなどが説明されています。

💡レスポンシブデザイン

レスポンシブデザインは、ウェブサイトが様々なデバイスで適切に表示されるように設計する手法です。ビデオでは、1カラムレイアウトがレスポンシブデザインと相性が良いとされています。

💡デザイン原則

デザイン原則とは、デザイン制作時に遵守すべき基本的なルールを指します。ビデオでは、近接、整列、反復、対比の4つの原則について、どのようにウェブデザインに適用するかが解説されています。

💡ウェブフォント

ウェブフォントとは、ウェブサーバ上で置かれたフォントデータを読み込んでブラウザ上で表示する技術です。ビデオでは、Google フォントやアドビ フォントなどの有名なウェブフォントサービスの活用方法が紹介されています。

💡ベースカラー

ベースカラーはウェブサイトの配色において最も大きな面積を占め、背景などに用いられる色です。ビデオでは、ベースカラーがブランドイメージを引き立てる脇役的な役割を果たすと説明されています。

💡アクセントカラー

アクセントカラーは、ウェブサイトの配色で目立つ色として使用され、メリハリをつけるために使われます。ビデオでは、アクセントカラーがお問い合わせボタンや強調したい箇所に使うと効果的であると触れています。

💡色相・彩度・明度

色相、彩度、明度は色の3つの基本的な属性で、ウェブデザインの配色において調整されます。ビデオでは、これらの属性をどのように調整し、配色を作成するかが解説されています。

Highlights

初心者向けにwebデザイン制作の際に必要な最低限の基礎知識を解説する

デザイン制作の前段階の施策内容や構成設計サイトマップ作成については省略

webデザインは情報設計、グラフィックデザイン、UI設計を含んでおり、ユーザーが情報を得やすく商品を購入できるように設計することが目的

デザインの基本要素はレイアウト、フォント、配色の3つ

1カラムレイアウトはコンテンツに集中させ、スマホに対応しやすく、メンテナンスもしやすい

2カラムレイアウトはサイドバーを用いてサイト内を回遊しやすくする

3カラムレイアウトは情報量が多いポータルサイトやECサイトでよく使われる

グリッドレイアウトは直線の格子状にコンテンツを配置し、整った印象を与える

デザインのレイアウトには近接、整列、反復、対比の4つの原則がある

近接は関連する要素をグループ化し、視覚的に見やすいようにする

整列は要素にルールを持ち、見た目を整えることで伝わりやすくする

反復は同じデザインルールを繰り返し使用することで一貫性をもたせる

対比は要素同士の差を明確にすることで情報の優先度を示す

タイポグラフィは文字の書体、大きさ、配置の仕方で、可読性と視認性が重要

ゴシック体と明朝体の選択はウェブデザインにおいて一般的で、最近ではwebフォントの使用も増えている

配色はベースカラー、メインカラー、アクセントカラーの3つの役割で構成され、それぞれの比率によって美しい配色を決定

色相、彩度、明度は色の3つの属性で、配色作成の際にはこれらの調整が重要

色の意味や印象を理解し、カラーホイールや色見本帳を使用することで配色を決定する

Transcripts

[音楽]

ハイドン本柱はケーソンです今回はですね初心者向けに web デザイン制作の際に

必要な最低限の基礎知識をですね

初心者の方にも理解できるように解説をしていきたいとおもいます

今回は web 制作のプロジェクト全体ではなくですね

デザイン制作の超基本的な部分に焦点を当てて解説をしていきたいと思う

いますこの不動でウェブサイトの全体の基本デザインが決まってきますので

デザイン制作をする際は雰囲気や感性だけで作るのではなくですね

web デザインの基礎知識やデザインの理論に基づいて作成をすることでよりよい

web デザインを仕上げることができるようになります

このチャンネルは web やクリエイティブに関する役立つ情報を定期的に配信して

おり

ますのでこの動画を見て役に立ったと思った方はぜひいいねボタンとチャンネル登録も

よろしくお願い致しますそれでは早速いってみましょう

はいそれでは今回はデザイン制作の作り方についての解説動画になりますので

デザイン制作の前段階の施策内容や構成設計サイトマップ作成などについては省略をさ

せていただきます

早速ですね本題に入っていきたいと思うんですが web デザインというのはですね

web サイト全体の情報設計

いえそれから視覚的な要素を作成するグラフィックデザイン web サイトやアプリ

等の ui 設計ですねユーザーインターフェース設計

このあたりの仕事の事をですね世間一般では web デザインといいます

簡単に言うとユーザーが読みやすく使いやすく心地よく

目的の情報に辿り着いたり商品を購入したり

することができるようにウェブサイトの設計をするのがウェブデザインの仕事になり

ます

視覚的なデザインを考える際の基本要素にですね

レイアウトフォント配色大きく3つですね

考える要素がありますこれらの基礎知識やポイントを順番にですね

できるだけ短時間でギュッと凝縮して解説をしていきたいとおもい

ます

まずは全体のレイアウトですね web デザインを制作する際に大まかなレイアウト

を作成する必要があります

サイトの種類や目的情報量によってレイアウトの仕方は大きく異なってきます

主に1カラム2カラム3からのグリッドレイアウトというですね

4つのレイアウトに大きく分類されます

まず1カラムですねシングルカラー6と思うんですが

1カラムとはですね web サイトのコンテンツを縦に一列に上から下に並べる

レイアウトの手法のことになります

最近ではですね小規模サイトでは特に1カラムの web デザインが増えている傾向

にあります特徴としては1カラムの

場合は左右に他の情報がないためコンテンツに視線を集中させることができます

ディスプレイの横幅に合わせてレイアウトがしやすく

スマホに対応したレスポンシブデザインとも相性が良いので制作もしやすく

メンテナンスもしやすいのは特徴になります

用途としては主にランディングページやコーポ

レートサイトブランドサイトはキャンペーンサイトなどで使われることが多くなります

はい次に2カラムレイアウトですねつーか love レイアウトはこのように右や左

にサイドバーがあるようなタイプのレイアウトになります

サイト内の他のページのコンテンツも見てもらって

サイト内を回遊してほしいというような場合ですね有効なレイアウトになってきます

サイドバーにカテゴリーや関連

ページなどのメニューを配置することでユーザーが関心のあるカテゴリーやコンテンツ

に迷わずにアクセスできるようになります

主にブログや ec サイドなどで使われることが多いレイアウトになりますこちらも

スタンダードのレイアウトになりますのでよく見ることがあるかと思います

それから3カラムはですね左右の両方にサイドバーがある

タイプのレイアウトになります

3カラムは情報量の多いポータルサイトや ec サイトでよく使われるレイアウト

手法で一度にたくさんのコンテンツを見せることができます一度に1画面でたくさんの

本店つを見せることで斎藤を回遊したくなるワクワク感を与えたり

サイトの情報量や商品量の多さをアピールすること

ができます例えばショッピングサイトに訪れた時に商品数多いといろんな商品を見てみ

たいというワクワク感も出ると思いますし

サイトの盛り上がり会が賑わいが一気に出てきますねそれから次はグリッドレイアウト

ですね

グリッドレイアウトは画面やページを直線の格子状に分割させ

コンテンツを配置する手法になりますレイアウトがグリッドに沿って規則正しく

レイアウトされますので整った印象を与えることができるというのがグリッド

レイアウトの特徴になりますそれからコンテンツを一覧で多く配置することも可能なの

で比較的情報量が多くても煩雑な印象にならず綺麗に見え

ますしレイアウトの仕方を工夫するとクリエイティブな印象を与えることも可能になり

ますね

全体のレイアウトの次はコンテンツのレイアウトを考えていきます

デザインのレイアウトにはですね基本的な原則として近接整列反復

対比というですね4つの原則がありますこの4つの基本に基づいてデザインをしていく

と比較的とと思ったデザインに仕上げられますので伝えた以上

4見やすく分かりやすく伝えることができますそれではですね1つずつ解説をしていき

たいとおもいます

近接はですね関連する要素をまとめてグループ化することになります

このように関係するものを近づけることでそれぞれ無関係なものではなく一つの

まとまったグループとして見せることが可能になりますその他

ね関連性のない情報同氏は近づけないようにする必要があります

例えばこのようにすべてのパーツがほぼ均等の余白で配置されてしまうと

ページを訪れたユーザーが瞬時に情報が判別できなくなってしまいますきちんと

グループ化がされていれば視覚的に見やすくなってきますので読んでもらえる隔離

妻がってページ内のコンテンツを回遊して見てもらえる可能性が高くなります

ポイントとしては関連する要素同氏は近づけて配置をする

異なる要素同士や慣例のない要素はですね適切な余白開けるということがポイントに

なってきます

それから整列ですね整列は要素にルールを持たせてレイアウトをすることになります

関連する要素同士の配置や大きさがバラバラだと気持ちの悪い感じがしたり不安定な

感じがしてくると思います

なので関連する情報や同じ様子のパーツはそろえることを意識してですね

レイアウトを作成

していきます近接でですねまず同じ情報をグループ化してひとまとめにして整列でその

情報をより伝わりやすい形で見た目を整えるというようなイメージになります左右の

レイアウトの場合は左揃え

右揃え中央揃えの3種類に分けられます

上下のレイアウトの場合は

上揃え下揃え中央づらいこの3種類に大きく分けられます

このように揃えに着目してレイアウトをするとこちらのようにですね透明な空井の

ラインがデザインの中に生まれてきます

ポイントとしてはですね揃えに着目してレイアウトを行う

それから透明なラインを意識するということになります

それから反復ですね反復は要素のデザインルールを繰り返すことです

例えば同じサイズの見出し同じ色同じフォントなどをページ内で繰り返し使えば

服ということになりますこの同じ要素がもし一つ一つ違うルールで作られていたら見

づらくもなってきますし

少し違うよそのものなのかなとも感じてしまうかと思います

なので同じ要素を繰り返して配置をする時は

デザインルールも統一して繰り返してレイアウトすることが基本中の基本になります

ハンクをすることでユーザーが瞬時に同じものについて表現しているのだと理解する

ことができますし直感的に非常に分かりやすくなってきますかといって一つの同じ

デザインルールだけでデザインが構成されると単調になりついてのっぺりした印象にも

なってしまいますので

一つのデザインルールか

から派生させて例えばまあ1軒目だけは大きく表示するとか

ランキングであれば123位のアイコンを入れたりですね

このようなアレンジも時には必要になってきますポイントとしては同じ要素を繰り返す

時はデザインルールも繰り返すそれから単調になりすぎないように

必要に応じて工夫するポイントも作る

この2つがポイントになりますね次に対比ですね

タイ人は要素同士を明確にはっきりと差をつけることになります大きさで差をつけたり

色の対比で差をつけたりすることで

情報の優先度に違いを持たせるというのが対しというものになります

例えばキャンペーン情報のバナーをデザインするような場合ですが

情報にはですね優先順位があることがほとんどです

例えばこちらのバナーの場合キャンペーンのお知らせなキャッチコピー

それから何パーセントオフなのかキャンペーン期間

注意自己このような情報があります例えばこのバナーのデザイン

がこのように4つのパーツが同じようなサイズやフォントでは色で作られていたら

初級すべきキャンペーンのお知らせというのはですね一目で目に入ってこなくなると

思います

なのでキャンペーンの title 要素と注意事項の要素などはですね

優先順位をつけて明確な違いをつけてレイヤー

どうすることでパッと見ただけでですね何のキャンペーンをやっていて何パーセント

オフなのかなどのですね

一つ一つの情報が順序よく目に飛び込んでくるようになります

ポイントとしてはですね情報に優先度をつけて色や大きさなどの強弱をつけるという

ことです

はい次はですね web デザインのタイポグラフィフォントの基本について解説をし

ていきたいとおもいます

まずタイポグラフィーというのはですね文字の書体や大きさ配置の仕方のことになり

ますフォントというのをですね

同5書体の一そろいの書体データそのもののことになりますね

まず web デザインのフォント選びのポイ

ピントなんですがこれはですね web 以外の一般的なデザインにも共通することな

んですが

可読性視認性判読性が備わったフォントを選ぶとまずは失敗がしにくくなります本当に

はですね大きく2つのタイプがあります

まずはゴシック体ですね英語だとサンセリフ体と言いますそれから明朝体

英語だとセリフたいですねこのようなですね文字に鱗があるかないかというので大きく

タイプが分かれます

web デザインの場合一般的に本文のフォントには日本語だとゴシック体英語だと

サンセリフ体というですね

鱗のない書体が使用されることが多くなります明朝体せリフター

はこれまで環境によってはですね綺麗に表示することができない場合があって web

ではゴシック体が主流で使われてきました

最近では web 上で民状態を美しく表示する方法が確立されてきて

サイトのデザインに合わせて効果的に使用されることも増えてきています

とはいえですねユーザーはこれまで明朝体で表示されたウェブサイトを見る機会が

少なかったので

web サイトの文章が明朝体で表示されているとデザインや柄

所によってはですね違和感がある場合があります

明朝体の表示の問題が解消されつつあってもいまだに多くのサイトはゴシック体が使用

されていますその他

変わったデザインのフォントを使用すると効果的に使えるとですね非常に良いデザイン

にはなるんですが

デザインによっては可読性が下がってきま

すので本当でデザインに変化を与えたい場合はピンポイントでですね

見出しなどにデザインのアクセントで使う場合に使用されることが傾向としては多く

なりますそれでは web デザインでよく使用されるフォントの種類をいくつか紹介

したいと思いますまずはメイリオですね

これは windows に入っている標準ポイントになります

それから游ゴシックですねこれは windows mac 共通で入っていますそれ

からヒラギノ角ゴシックですねこれはバッグに入っている標準フォント

この3つですね

日本語のウェブサイトはですねほとんどこれらのいずれかのフォント指定がされてい

ますので web デザインを作成する際の基本中の基本となるフォントになりますの

でまずはこの3つは最低限をおさえておきましょう

このフォントはどのユーザーの pc やスマホにも標準で入っているフォントなので

サイトを見る環境によって差異が少

な状態で閲覧することができますそれからですね web フォントというものについ

て簡単に触れておきたいと思います

web フォントというのは簡単に言うと pc やスマホにインストールされた

フォントで表示するのではなくですね

webサーバ上で置かれたフォントデータを読み込んでブラウザ上で表示をするという

技術に

なります web フォントを使用すれば pc やスマホにその本当はインストール

されていなくても指定された web フォントでデザインを表示することは可能に

なります

例えば有名なものですと google フォンツやアドビファンツなどが有名で

google フォンずは無料で簡単に使用することができます adobe フォン

つについては

adobe cc のライセンスを持っている方であれば無料で使用が可能になります

この web フォントの中からフォントを選んで使用すればどの pc やスマホで

も同じフォントで表示することが可能になりますのでユーザー側のデバイス内に

フォントが入ってなくて表示されないというバグも回避することが可能になります

日本語の web フォントも提供されていてのと3度 jp というですね

フォントも比較的多くの日本の web サイトで使用されています

はいそれから次に配色の選び方について解説をしていきたいとおもいます

ウェブサイトの配色はベースカラーメインからアクセントカラーとですね大きく3つの

役割に分けられます

それぞれの比率をベースから70%

メインカラーは25%アクセントカラーを5%て

江戸の割合にすると美しい配色に仕上げることができるというふうに言われています

ベースカラーは最も大きな面積を占める

ベースとなる色で弱くや背景などに用いることが多い色になりますメインカラーと

アクセントカラーを引き立てる脇役的なカラーになります

一般的には白黒薄いグレーなどが採用されることが多くなります

あくまで脇役カラーなのでメインカラーの妨げにならないからー選定を行うことが大切

になりますそれからメインカラーはですね

名前の通りサイトの印象を決定づける主役の色になりますメインカラーの決め方とし

ではコーポレートサイトやブランドサイトの制作などで常にブランドから

コーポレートカラーが決まっている場合はですねその色をメインカラーとして採用する

ことが多くなります

サービスサイトはキャンペーンサイト ec サイトなどの場合はですね

商品のイメージやメインのターゲットユーザーがこのも色をリサーチして決めていく

ように

なる場合もあるので色の持つ意味や与える印象などを把握しながらですね

いを選定していきます

それからアクセントカラーはですねメインからのみだと単調なトーンになることが多い

のでメリハリをつけたい場合などにアクセントとして使う色になります全体に占める

面積の割合は一番小さくなりますが出来るだけ一番目立つ色を使用するということが

大切になってきます例えばお問い合わせボタン

いや強調したい言葉やパーツなどに使用すると効果が高くなります

アクセントカラーは2色3色と使っても良いんですが

色が増えるほど扱うのが難しくなってきますのでまずは1色だけ目立つ色を決めること

をおすすめします賑やかさや楽しさ速さなどを表現したい web デザインのバー

にはたくさんのいるを使用することもあります次はですね色相彩度明度について説明を

していきたいとおもいます

普段ですね普通に生活をしていると赤青黄色緑白黒などですね

まあ色鉛筆で u 12色ぐらいのざっくりとした識別ぐらいしかしないと思いますが

一般的なコンピューター上

で表現できる色の数はですねなんと1677マン食程度ありますこれをフルカラーと

言うんですが

デザイナーになるということはですねこの1677マン食を扱うということになります

まあというとですねいきなりハードルが上がりすぎると思いますので

8使うときには色相彩度明度の3つの反転で色を調整することを意識しておくと良い

です

色というのはですねこの3つの属性から構成されていますので

要は色を変えるという作業はこの3つの属性を調整するということになりますひとつ

ずつ解説をしていきますがまず色相はですね

色合いのことですね赤い色系統や青色系黄色系などの要は色の方向性を決めるのが色相

になります

サイドは色の鮮やかさのことです一般的には彩度が高いとか彩度が低いというような

言い方をします彩度が高いものをまあ別の言い方だとビビットカラーとかビタミン

カラーというような言い方をしたりもします彩度が低いものは淡い色とか落ち着いた色

と言ったりするような色のことになります

サイドが高すぎる色同士で配色を作ると非常に派手な印象になりますので目が痛くなる

とか目がチカチカするなんて言ったりすることもあると思いますので

彩度の高い色を複数使用するのはですね非常に配色作成の際の難易度が高くなってき

ますそれからメイドはですね

色の明るさのことになります

こちらも明度が高いとか明度が低いというような言い方で表すことがあります

一般的には暗い赤とか明るい目の青とか暗めの緑などと言ったりすることもあると思う

んですが

これは無意識にメイドのことを言っていることが多くなってきます

photoshop のカラーピッカーで表すと明度と彩度の関係はこのような意味

明治になりますね

それでは最後にですね配色を決める際に困ったときに参考になるサイトやツールをいく

つか紹介させていただきたいと思います

まずはですね色の意味イメージを知るですね色には意味や与える印象というのがあり

ますので

例えば緑は安心とかいい癒し平和

生命新

線若い未熟などですねまあこのような意味があったり

青は知的とか信頼誠実とか冷静とか清潔とか爽やかとか

このような意味を含みますデザインをする前に色の意味を理解しながら配色を決め

なければいけないしにも出てきますので

色が決められない場合は意味から色を気

みるということをしてみると良いと思いますこちらが色カラーというウェブサイトが

ですね色んなことについて情報を配信しているのでこういったサイトを良かったら参考

にしてみてください

それからカラーホイールですね web 上に様々なカラーホイールのツールがあるん

ですが

例えばこういったツールを使用することで反対色

が捕食を知ることができますし相性の良い色の組み合わせや反対に相性の悪い

組み合わせを知ることもできます

明度や彩度別にまとめたからホイールやチャートもありますのでこういったツールを

使用すればともまとめるのも比較的簡単になってきます

最後に色見本帳ですね例えばパントン社は非常に多くの種類の色見本帳を公開してい

ますので

このような見本帳を使うとシーンやジャンルなどですね

テーマ別にパントーンは水腫をしている配色見本を参考にしながら

配色を考えていくことも可能になりますウェブサイトであれば例えばこのような

スキームカラーというウェブサイトなどで様々な色見本から配色パターンを選ぶことが

可能になりますこちらですね

adobe カラーの配色パターン検索の画面になります

興味のある方はよければチェックしてみてください

はい今回はですね初心者向けに web デザイン制作の際に必要な最低限の基礎知識

というテーマでお話をさせていただきました

デザインの経験が少ない方でも基本をしっかり押さえながらデザインを行うだけで

クオリティが一気に上がりますのでぜひ参考にしていただければと思います

このチャンネル web やクリエイティブに関する役立つ

情報を配信しておりますのでこの動画を見て役に立ったと思った方はぜひいいねボタン

とチャンネル登録もよろしくお願い致しますそれではまた次回の動画でお会いし

ましょう

to you

ございます

おっん

ん