アラサーニートの雑記帖

アラサーニートが感じたことや日々の出来事などを綴る雑記ブログです。

【Webデザイン】『Webデザインとコーディングのきほんのきほん』でお勉強①

先日、Webデザインの勉強を始めたのでアウトプットします!という記事をアップしたので本編に入っていこうと思います!

と言いつつ結構経ってしまっててすみません・・・。

今回の内容は、「Part1 デザインの基本」の「Chapter1 デザインとは」「Chapter2 デザインのベーシックセオリー」です。

 

Part1 デザインの基本

デザインとWebデザインに関して、その目的や基本的なセオリーなどを学びます。

Chapter1 デザインとは

Section1 デザインする目的

・内容や意味をより伝えやすくする

・発信したい情報を整理し、優先順位をつける→色やサイズなどに反映

・「美しい」ことで伝えたい情報に注目させる

・ゴール(商品の周知・販売促進、イベントへの参加等)を設定し、そこに向けた誘導を行う

 

Section2 伝えたい相手に合わせたデザイン

・ターゲット層の想定がとても重要→性別・年齢・社会的背景・嗜好など

・配色や文字、画像等、ひとつひとつの要素をターゲット層に合わせて考えていく

 

Section3 「体験」をデザインする

・Webサイトは双方向メディア→「見る」ことで完結する印刷物とは異なり、ユーザーが「操作する」という「体験」がある

・Webデザインとは「体験」をデザインすること→UXデザイン・UIデザイン

  • UXデザイン:ユーザーの体験をデザインする
    (操作性の良さや予想外の動きなどによるポジティブな体験を生む)
  • UIデザイン:「使う」ことを前提としたデザイン
    (UXデザインのための基礎となる、操作のわかりやすさが大前提)

 

Chapter2 デザインのベーシックセオリー

Section1 要素を揃える・均等に配置する

・整ったものに安定感を感じ、それが美しさとなる

・規則性のある構図にまとめることがデザインの第一歩

・均等、規則性のある変化、シンメトリー

 

Section2 要素の差別化とグルーピング

・規則をコントロールしすることで、関連付けや差別化をはかる

・グルーピング・差別化→要素同士の距離、サイズ、形状や色などによってコントロールする

 

Section3 色の基本

・色を決定付ける属性=色相・彩度・明度

  • 色相:色味の違い(赤・青・緑など)
  • 彩度:もっとも鮮やかな色(純色=彩度がもっとも高い)にグレーを混合して鮮やかさを落としていく
  • 明度:純色を基準に白と黒を混合して明るさを変化させる(純色が中心)

・彩度・明度の変化を揃えた色のグループを「トーン」と呼ぶ

  • ダルトーン / ダークトーン:彩度・明度が低い。重厚感や落ち着いた印象を与える。
  • ペールトーン / ソフトトーン:明度が高い。優しい・柔らかい雰囲気。
  • ビビッドトーン:彩度が高く純色に近い。元気で若々しい印象。

・色は表示方法によっても外観が変わる→CMYK・RGB

  • CMYK:主に印刷物で使用。C(シアン)M(マゼンダ)Y(イエロー)K(ブラック)のインクを混合して色を表現する。減色混合(全ての色を混ぜると暗い色になるため)
  • RBG:主にモニターで使用。R(レッド)G(グリーン)B(ブルー)の3色の光を混合して色を表現。加色混合(すべての色を混合して白を表現するため)

 

Section4 色が持つ基本的なイメージ

・一部の色には多くの人が共通して抱くイメージがある

  • 暖色:赤・オレンジ・黄色など。暖かいイメージ。
  • 寒色:青・水色など青系の色。冷たいイメージ。
  • 中性色:青緑・紫・白・黒・グレーなど。暖色・寒色のいずれにも属さない色相の色。ニュートラルで都会的なイメージ。

・具体的なものからの連想、社会的な役割から、トーンによるイメージなども

 

Section5 色の組み合わせ

・複数の色の組み合わせも大きくイメージを左右する→色同士の相性を考える

色相環を利用する(類似色・補色・等間隔に選び出す)

  • 類似色:色相環で近くに配置されている色
  • 補色:色相環で対角線上にある色
  • トライアド:色相環を3等分して選択する3色
  • テトラード:色相環を4等分して選択する4色

・同じトーンのものを組み合わせる

 

Section6 フォントの基本

・フォント=情報を伝える文字、画面全体のイメージを決定付けるデザイン要素

和文フォント

  • 明朝体:細い横線と太い縦線から成り、横線には「ウロコ」と呼ばれる「留め」を表した装飾がある。高級感やデリケートなイメージ。文字が潰れにくく、小さいサイズでも可読性が高い。
  • ゴシック体:横線・縦線がほとんど均等な太さで構成される。装飾なし。ニュートラルでモダンなイメージ。様々な内容に違和感なくマッチする。

欧文フォント

  • セリフ体:明朝体同様、向きによって異なる線で構成され、「セリフ」と呼ばれる装飾がある。
  • サンセリフ体:ゴシック体同様、ほぼ均等な線で構成され、装飾もない。

和文フォントと欧文フォントでは文字間隔やフォントサイズが異なる場合があるので注意

・文章の性格(短文・長文、タイトル・本文など)、文字のサイズ、文章の内容などを考慮して選ぶ

・同一デザインで太さの異なるフォントを揃えた「フォントファミリー」を利用すると、統一感を持たせつつ変化をつけることができる

 

Section7 読みやすい文字レイアウト

・字間→和文フォントは字間の調節が必要(漢字・ひらがな混合文の場合は特に)、欧文フォントは初めから一文字ごとに個別に設定されているため字間調節は不要

・行間→一行がひとつの帯のように見えるように、視線の移動が自然に行えるように調節

・字間・行間はWebサイトでは「em」や「%」などの相対的な単位を使って設定する場合も多い

・段組み→一行の文字数に注意(印刷物=一行15〜28文字程度、Webページ=一行35〜45文字程度までは読みやすく読める)

小見出しや余白など小休止になるアクセントを作る

・見る人の年代やデバイスによっても読みやすさは変化することを意識し、読み手のことを考えてレイアウトする

 

Section8 効果的な文字レイアウト

ジャンプ率によって印象が大きく変化する。

  • ジャンプ率:同じ領域内にある文字やイメージ画像などのサイズ差
     高い→迫力があり力強いイメージ
     低い→静かで落ち着いた雰囲気

・日本語の特徴をいかす→助詞や年月日・数詞の単位文字を小さく、句読点部分等字間の調節をかける、余白によるカテゴリ分け等

 

Section9 余白でイメージを表現する

・レイアウト内にどれくらいの余白があるかで印象が大きく変化する

  • 版面率:レイアウトエリア内にどれくらい情報が詰め込まれているか
     高い(余白が少ない)→情報量豊富。賑やかな印象。
     低い(余白が多い)→上品で静かな印象。

・余白によってグループ化や視線の誘導(余白の続くとラインのように感じられ、それにそって視線が誘導される)などが可能

 

今回はここまで!

 

今回の学びと感想

「デザイン=個々人のセンスによってなんかおしゃれだったりカッコいい感じにする」みたいなふわふわしたイメージだったのですが、デザインというものの目的や基本的なセオリーを学んだことで、まず「デザインを学ぶ」ということのとっかかりを掴めたのが大きかったです。

デザイン用語やテクニック、そしてなぜそうすべきなのかという理論などを知って、自分の周りのデザインを改めて見るようになりました。

私にとって初めての試みで、記事としてこれで良いのかというのがちょっと不安ですが、私のメモを共有するというイメージでとりあえず進めていきたいなと思います。

(デザインを学んでいるのに箇条書きにグレースケールで記事自体がなんとも見辛い感じなことに気付いてしまったけれど・・・。)

 

次回は、Part1の「Chapter3 サイトデザインのセオリー」に関してまとめる予定です。 

Webデザインとコーディングのきほんのきほん

Webデザインとコーディングのきほんのきほん