【超初心者向け】Webデザインの基礎知識と作り方・考え方
Summary
TLDRこの動画は、初心者向けにウェブデザイン制作に必要な基本知識を解説しています。ウェブサイトの全体的なデザインを決める際には、レイアウト、フォント、配色の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
🎨 ウェブデザインの基礎知識
初心者向けにウェブデザイン制作に必要な基礎知識を解説。デザイン制作の基本的な部分に焦点を当て、ウェブサイト全体の基本デザインを決定するプロセスを紹介。レイアウト、フォント、配色の基本要素を理解し、視覚的に魅力的なウェブデザインを作り出す方法を学ぶ。
📐 レイアウトとデザイン原則
ウェブデザインのレイアウトについて解説し、デザインの基本原則として近接、整列、反復、対比の4つの要素を紹介。これらの原則に基づいてデザインを構築し、視覚的にグループ化し、情報を整理して読みやすく、分かりやすく伝える方法を学ぶ。
🔠 タイポグラフィとフォントの選択
タイポグラフィの重要性と、ウェブデザインでよく使われるフォントの種類について解説。ゴシック体と明朝体の使い分け、ウェブフォントの活用方法、そしてメイリオ、游ゴシック、ヒラギノ角ゴシックなどの標準フォントの使用について学ぶ。
🎨 配色の選び方と効果的なアプローチ
ウェブサイトの配色について解説し、ベースカラー、メインカラー、アクセントカラーの役割と選び方。配色の比率、色の意味や印象、色相、彩度、明度の調整方法を紹介。また、配色を決める際に参考になるサイトやツールも提案している。
📚 配色とデザインの決定
配色の決定方法と、デザインに必要な情報を網羅的に提供。色の意味や印象、相性の良い色の組み合わせを見つけるためのカラーホイールの使い方、色見本帳の活用、そしてオンラインで配色パターンを選ぶ方法を解説。
📝 まとめと今後の展望
初心者向けに必要なウェブデザイン制作の基礎知識を振り返り、今後のデザイン制作で活かすためのアドバイスを提供。チャンネルの目的と、今後も役立つ情報を配信する意気込みを述べている。
Mindmap
Keywords
💡ウェブデザイン
💡レイアウト
💡タイポグラフィ
💡配色
💡グリッドレイアウト
💡レスポンシブデザイン
💡デザイン原則
💡ウェブフォント
💡ベースカラー
💡アクセントカラー
💡色相・彩度・明度
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
ございます
おっん
ん
5.0 / 5 (0 votes)