LV.7 デザインの基礎から学んだこと
本記事は、デザインの基礎を学んだ管理人が、その基礎を元に実際のサイトなど世にあふれているものから得た学びを記録していくものです🐧
初心者の方は一緒にいろんなサイトを見て自分でも考えてみて一緒に力をつけていきましょう！
サイトの役割とサイトデザインのコンセプトについて
世の中にある「デザイン」には役割があります。デザインにおける役割は問題を解決することであり、目的に沿ったデザインをする必要があります。
下記記事でも取り上げましたが、プロはすべてのことに理由を求められます。自分の好きなデザインをするのではなく、お客様の問題解決のためのデザインをすることが必須です。「この色にしたのには」「この配置にしたのには」と説明ができるようにならなければいけません。
kairi-video-editing.hatenablog.com
そこで、いくつかサイトをとりあげて、サイトから以下の4つを考えてみたいと思います。
- レイアウト
- 色彩
- 写真表現
- タイポグラフィ（フォント）
参考サイト①
公文式オフィシャルサイト KUMON（くもん） | 公文教育研究会
（2023/4/1確認）
レイアウト
- MVに大きくカルーセルを入れることで、情報を目立たせている
- MV直下に近くの教室の検索窓を入れることで、通いやすさを検討しやすくしている
- 年齢や教材別でどの年代のお子さんをお持ちのご家庭でも入りやすいようにしている
- 体験者の声やCMで、より生の声や企業イメージをつかんでもらえるようにしている
色彩
- ポップな色づかいで親しみやすさ・子どもといった印象
写真表現
- カルーセルに小学生くらいの女の子を入れることで、対象が子どもであることをわかりやすくしている
- 学年別の説明では、学年にあったモデルの写真を入れることで、自分事ととらえやすくしている
- 全体的にゴシック体を用いることで、あたたかみ、親しみを感じられる
参考サイト②
（2023/4/1確認）
レイアウト
- FVから全体的にコロナや予防接種についての記載が目立つ
- コンテンツのサイズがあまり変わらないため、同列の印象
色彩
- シンボルマークのカラーをベースとした緑のあしらいが目立つ
写真表現
- フォントは全体的にゴシック体で柔らかい印象
- バナーによって複数のフォントや色が使われていることになるので、見づらい印象も受ける
参考サイト③
（2023/4/1確認）
レイアウト
- カルーセルに今話題の侍ジャパンを起用したバナーと、4月の季節に合ったビジネス系のシャツなどを持ってくることで、この時期のユーザーの悩み解決ができることをアピールしている
- 1スクロールごとに特集にとまる仕様になっていて、ユーザーの目を引いている
色彩
- シンプルな色使い。服を目立たせる必要があるため、そのほかの要素は基本的に白を基調としている
写真表現
- 写真の明度はほとんど同じにしていて、スクロールしたときやカルーセルが切り替わってもさほど違和感がないようにしている
- 年齢、性別、人種の異なる人を起用することで誰でも着られるイメージを与えている
- 画像上のテキストには若干シャドウをかけることで視認性をあげている
- 見出しと説明のテキストを各スクロールごとに入れることで、統一されていてユーザー見やすいように調節している
デザインの4原則から学ぶ
続いてはデザインの4原則を、参考サイトを元に考えていきたいと思います。下記簡単な説明となります。
- 近接：同じものは近づける。違うものは遠ざける。これらを一定のルールで行うこと
- 整列：同じものはそろえる。フォントの種類や大きさ、色も基本的には一定のルールでそろえる。。角丸の大きさ、線の太さなど細かい部分にも気配りを。⚠人間の目は少しのずれでもわかる
- 反復：同じ種類の情報はグループ化してくりかえす。
- コントラスト：一通りそろえたうえで、差をつけたい場合に形、色などで最後にコントラストをつける
参考サイト
（2023/4/1確認）
考察：
いい点▽
ランキング形式のものは同じフォーマットで並べていて、ランキングであることがわかりやすい
トピックなどヘッダー付近のバナーが同じサイズのため、整理されている印象
改善案▽
MVの「新生活～」のピンクのバナーとその下二つのカルーセルがそれぞれ主張していて見づらいため、カルーセルを一つにまとめて上に配置して、ピンクのバナーの高さを抑えた画像を配置する
ご案内が中央揃えで見づらいため、見出し以外は左揃えにする
色の基本から学ぶ
ますは「色」の基本を押さえていきましょう。例えば赤とひとことで言っても、人によってとらえ方は異なります。ピンクに近い赤、黒に近い赤、明るい赤など、赤によってもとらえられる範囲も異なります。では色はどのように認識されるのでしょうか。
色はどうやって決まるのか
色をとらえる要素には以下の３つがあります。
- 物体
- 光
- 観察者
これらの要素のどれか一つでも変われば「色」は変わります。同じ色のものでも、野菜や果物など、物体によって若干色は変わりますし、照明の色によっても変わります。また、人によって色のとらえ方も異なります。よって、デザインをしていく上で、色は主観的なものであるということ意識しておくことが大切です🐧
どのように色を選べばよいのか
ではどのように色を選べばよいのかですが、色の三属性、色相環がポイントとなります。
色の三属性
- 色相：色の種類
- 明度：明るさ
- 彩度：鮮やかさ
色相をサークル上に表したもののことを色相環といいます。この色相環を元に配色を決めると、与えるイメージを意識することができます。
少し押さえるだけでも何となくで色を決めるのではなく根拠のある配色ができるので、おすすめです✨下記サイトがわかりやすかったので共有します。興味のある方はご自身でもぜひ調べてみてください🐧
クリスマスカラーやハロウィンカラーはいわゆる補色のカラーであるため、目立った強い印象を与えます。
参考サイト（クリスマス）
クリスマスといえばサンタの帽子をイメージする赤に、ツリーの緑、雪の白の配色の印象があると思います🎅世間的なイメージもかなり強いため、クリスマス以外でこの配色をする場合はクリスマスに寄らないようにする工夫が必要だったり、あえて使用しないなどの方向でデザインするのも考慮した方が良いかもしれません🎄⛄
（2023/4/2確認）
参考サイト（ハロウィン）
ハロウィンといえばオレンジや紫、黒のイメージがあると思いますが、実際にハロウィンのサイトを調べるとそのイメージに沿った色使いをしたサイトが多くありました🎃
（2023/4/2確認）
このように、私たちが何気なく見ている配色ひとつでも印象付けられています。日常生活では信号や点字ブロックなど、「色」が生活に根付いているものも多くありますね。みなさんも色のイメージや配色についてぜひ意識しながらデザインをしてみてください🐧
UI、UXやインタラクションについて学ぶ
みなさんはUI、UXという言葉を耳にしたことはありますか？似ていますが、実際は役割が異なります。
- UI：ユーザーが閲覧・操作しやすい見た目
- UX：ユーザーの体験全体のこと。サイト内外で体験することを想定し、問題なく体験してもらえるようにする
また、インタラクションという言葉もあります。PCでマウスを動かしてボタンを選択したときに色が変化したり、線が引かれたりすることがあると思います。このUIの動き自体のことをインタラクションといいます。参考サイトを元に考えていきます。
参考サイト
（2023/4/2確認）
- ヘッダー内でカーソルを合わせると、色が白⇒青に変化してわかりやすくしている。また、選択中の項目は常に青にすることで自分が今どの項目を選択しているのかわかりやすくなっている
- バナーにカーソルを合わせると白の透過のようなあしらいになり、カーソルがあっていることがわかりやすくなっている
- 検索窓に虫眼鏡のアイコンを入れることで、文字を入力して検索することを視覚的にわかりやすくしている
- チャットボットを導入することで、ユーザーの不明点の解消や、運営側の負担軽減に役立てている
- よくある質問を「▼」で閉じた状態にすることでサイト自体の長さを抑えつつ、気になるユーザーにはクリックすることで詳細が開くことを示している
以上が参考サイトから考えられることを一部取り上げてみましたが、それぞれのサイトを少し見るだけでもさまざまな工夫がされていることがわかると思います。みなさんも好きなサイトを見て、どんな工夫がされているか考えてみると力になると思います♪
まとめ
今回は簡単にデザインの基礎を紹介しつつ、実際のサイトを見ながら考察してみました🐧少し考えただけでは力になりません。ありがたいことに世の中にはすでにプロの良いデザインがたくさんあふれています。これをいかさない手はありません！少しでも自分の力として吸収できるように日ごろから「どうしてこういうデザインなのだろう」「このデザインひきつけられるなどうしてだろう」と興味と疑問を持つことを意識して、自分の中の引き出しを増やしていくとよいですね(*^-^*)
動画編集についても同じで、広告でもひきつけられる広告はあると思いますし、ただ面白いと思ってみている動画ひとつでもさまざまな工夫がされていると思います。ただ、デザインを学ぶことは編集にも生きてきますので基本的なことは押さえておいて損はないと思います✨
本日の学習部屋はここまで！お疲れさまでした<(_ _)>
次回はいよいよPrに入ります！きっとすべてのことは自分の力になると信じているのでここまで学んだことも動画編集だけ学習している人よりもレベルアップしていると思います！まだまだ頑張っていきましょう🔥
