トップへ戻る
BLOGS

WEBデザインの学びかた(基本4原則)

WEBデザインの学びかた(基本4原則)

コーディングができるようになったら今度はいよいよWEBデザインの基礎となる部分を学んでいきたいです

コーディングできるようになったら基本的にウェブサイトのコンテンツを作成することができます
しかし考えても見たら、そもそもウェブサイトは誰かに見てもらうものです

そう考えるとコーダーの持てる需要という意味では、

  • ウェブサイト作成は叶うかもしれないが、デザインが、、、、、
  • CMS運用を始めるにも会社のコンセプトに合わせたデザインの考察が必要

などの一般的に求められる需要の中では制作物を作り上げるのに理由が必要ということに気づき始めました

そこでWEBデザインの勉強を始めてみようと思い立ちました

WEBデザインの行う部分の確たる部分は「デザインと理由の紐付け」だと感じました

デザインのセンスには自信がないが、逆に理由からのデザインを行うことができればそれは実績につながると確信を持って言えます

超基本 基本は整列

要素をレイアウトするときにまず考えなければいけないのは「揃える」ことです

近年ではあえてこの基本から外れたデザインも多く見られますが、特に初心者の場合、とにかく「揃える」ことを意識してデザインする

特に名刺などは代表例ですが、まずは紙面全体の余白、マージンは均等か???
次に各コンテンツごと、、会社名、役職名個人名、連絡先などの項目は均等か???

これらに加えて各コンテンツ間の余白を調整していく。

揃えるときは目に見えない架空のラインを想定しこのラインに文字やコンテンツを揃えることで整然として印象になる

例えば一般的なコーポレートサイトで、製造工業や弁護士事務所など整列することできっちりとし他印象を与えることができる

超基本 近接と遠隔を明確にする

要素を単純に揃えただけでは、逆にわかりにくくなってしまうケースもある

例えば写真、ショップ名、商品名、値段など関係性の強いものは接近させ、逆に弱いものとわ距離を離す。

情報を整理しグループ化することで、関係性がはっきりとし近づけるのか遠ざけるのかが明確になる。

このときどのくらい接近、あるいは遠ざけるのかをきちんと決めて全体で揃えることで見る人はいくつの項目があり、どれとどれが関係しているかが一瞬で判断できるようになる

関係性の高いものでグループ化し、一つの情報だと認識しやすくなる手法はどんなサイトでも見られ、特に多いのは上記画像の例のようなECサイトなどか

レイアウトスペースに余裕があるときは近接と遠隔を作ることは簡単だが、余裕のない場合は罫線や色面でそれぞれ装飾を加えることで項目を区切るとわかりやすくなるだろう

超基本 デザインの反復(統一性)

同じグループの情報は同じように見せることで、見る人にわかりやすく伝わる

例の画像ではバイトの募集のコンテンツイメージであるがそれぞれ店名、募集タイトル、立地、時給、シフト時間、店舗画像としてグルーピングすることが可能です

同じ種類の情報が並んでいるときは、意識的に形や配置を揃えてみましょう
意識的に繰り返すことで、画面に一体感が生まれ、伝わりやすい画面になります

ここで重要なことはただ要素の反復を行うことではなく、色や形のデザインも行いこれをサイトの雰囲気とマッチさせることです
写真や色や文字には視覚的な「重さ」があり暗い色や大きな面積の四角形は重く見え、淡い色や繊細な文字は軽く見える

人間はこれを無意識に感じ取って印象を受けるため、目立つようにグルーピングすることでうまく棲み分けできたように感じても、サイト全体でのグルーピングも考慮するということです
レイアウトのバランスを見るためには要素をグレースケールに置き換えて釣り合いが取れるように配置するとわかりやすいようです

超基本 コントラスト(要素の強弱)

コントラストとは、色・大きさ・形などの対比のことです

例として載せた画像では、グルメサイトの検索結果の表示例のデザインです

この例では料理の画像がコンテンツの半分を占めるサイズにて表示されていて、次に目立つのはお店の店名です
その情報の下に同じようなサイズ感の立地、金額帯、口コミが並んでいます

このようにユーザーにとって、、時にはクライアントにとって優先度が高いものから要素の大きさや色で対比を行うことで目的の情報にたどり着きやすくしています

コントラストを作ることでユーザーが「何を見たら良いか」、「何をしたら良いか」が明確になるため、情報の取捨選択がしやすくなり、利用しやすいUIにできます。

特にWEBデザイン、UIデザインに関してはこのコントラストが超重要であるとされています

それは紙面や雑誌などとは違いインターネットコンテンツではコンバージョン(目的)の設定があったり、ユーザーが何かしらの操作を行うことが前提であるからです

文字と背景色のバランスは数値で表すことができて、JIS(日本産業機構)のアクセシビリティに関する標準規格として大きい文字(半角英数字なら18あるいは14ポイント以上の太字、日本語のフォントであれば22あるいは18ポイント以上の太字)であれば3:1、それより小さい文字であれば4.5:1という比が制定されています。

これは専用のサイトなどで簡単にチェックできるためサイトの色彩を決めるときの基準として重宝しそうです

WebAIM: コントラストチェッカー

今回の学び

ここではWEBデザインで最初の第一歩、基本中の基本と言える内容についての学びを記しました

WEBデザインは有名な書籍が多くあるものの、ツール等を含めると学ぶ事がとても奥が深く果てしないと感じます
そのため、自身の目的を常に掲げてそれに向かって効率の良い方法を常に模索していく必要がありそうです

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA