【HTML/CSS】実際のwebサイトから学ぶwebデザイン構造7つの共通点(模写学習 #4)

投稿日:

【Rails】プログラミング初心者の勉強ブログ #57

実際にあるWebサイトを模写して、Webデザインの構造基礎を分析しました。「近接・整列・強弱・反復」のデザイン4大原則がどのように組み込まれているか、5つの実在するサイトを元に解説しております。素人感の出ないサイト構築するためにはどうすればいいか。

 

目次

 

はじめに

この記事を書くにあたって、実在するWebサイトをGoogle Chromeのディベロッパーツール(検証ツール)を見ながら、真似して作る模写を行なっております。(以下に実施した手順を記載。デザイン構造分析の本題が見たい方は、目次から飛んでください。)

 

実施目的・内容・達成条件

webサイトデザインの基礎固めを行うこと。ヘッダーやナビゲーション、フッター、各セクションの構成の組み立て方から、色使いやフォント、余白の取り方などの「デザイン」について、実際に真似して作成することにより自分の中でサイト作成時にデザインの「型」が頭に浮かぶようにするため。また、デザインの基礎固めと並行し、CSSの挙動に慣れる機会を作るため実際にコーディングを行う。なお、学習にあたり参考にするサイトは「レスポンシブデザイン」であることを条件とし、CSSでの基本的なデザインの模写の作成に加え、検証ツールで構成を見ながらレスポンシブデザイン対応までを実装できた段階で完了とする。

 

実施の流れ

  1. 参考サイト選定
  2. 検証ツールの「Sources」でHTMLをテキストエディタに写す
  3. 参考サイトを見ながら、写したHTMLの各要素を装飾
  4. わからなければ検証ツール「Elements」で確認しコーディング
  5. わかった場合も検証ツールでオリジナルのコーディングを確認し修正
  6. おおよそ参考サイトと同じデザインと動きになったら完成

 

Webデザインの構造基礎

webページ

キレイなデザイン、整ったレイアウトを作るにはどうすればいいかを意識しながら模写学習に取り組みました。

確立されているデザインの基礎を元に、実際に勉強してみて感じた、実在するサイトの共通点をまとめていきます。

 

 

デザイン4大原則

Webデザインに限らず、デザインを考えるにあたって、必ず意識しなければならない4大原則があります。調べればすぐ出てくる、デザインを設計するにあたって確立された4つの原則です。今回の模写学習を行うにあたって、参考にした全てのサイトに当てはまることでしたので、こちらにも書かせていただきます。

近接

近接とは、関連する項目を視覚的にまとめてグループ化することです。関連するものは近づけて配置し、関係性の薄いものは離して配置することで、位置関係を明確にし、認識しやすいレイアウトを構成することを指します。

ある要素のタイトルと、そのコンテンツの間の余白がやたら多かったりしたら変だと言う話です。逆に関係のないコンテンツが位置的に近くにあることを避ける必要があります。関連する項目はまとまりを作り、他のまとまりと位置的に離して配置する原則です。(上の画像の青や緑で囲んだ箇所のようなイメージ。)

整列

整列とは、要素の位置を全て意図的に配置し、統一化させることです。エクセルで文字を「左揃え」とかすると思いますが、それをWebサイト上の各要素で構成するイメージです。

整列の原則に則ったWebデザインは、「見えない基準線」が浮かび上がると言われています。特に感じるのはWebサイト全体を上から下まで見たときの「縦のライン」です。これがあるかないかでサイト全体の統一感が変わってきます。(上の画像の赤で囲んだ箇所のようなイメージ。)

反復

反復とは、デザイン上の特徴を、デザイン全体を通じて繰り返すことです。どのページに遷移しても常に表示されるヘッダーやナビゲーションバー、フッターなどが当てはまります。

また、各要素のタイトルのフォントとサイズを統一したり、同じデザインのアンダーラインで統一したりなど、1ページ内でも反復が行われます。反復されたデザインは使い方が統一されユーザーがどう操作したらいいのかもわかりやすいため、UXの向上にも繋がります。

対比

対比とは、デザイン上の要素の一部を、統一化されたものからあえて外し、その要素に「他との違い」を作り、意味を持たせることを言います。コントラストをはっきりさせることでユーザーの目に止まりやすくなります。見出しをつけるとき、誰もがフォントサイズを大きくしたり、太字にすると思いますが、それも文章に対して「対比」の原則を用いて「これは見出しである」という意味を持たせているわけです。

また、色の明暗でコントラストをはっきりさせる手法がよく取られ、「黒地に白の文字」などは代表的な対比の例です。

 

webデザインの共通点

今回までに模写を行なったのは計5つ。それぞれ要素のまとまりごとに色枠で囲んでおります。シンプルな構成のものや、少し個性的な構成のものと色々ありますが、デザイン4大原則がどのサイトも行われていることがわかります。

webページ

Webページ2

 

オレンジ・・・ヘッダー/フッター

赤・・・縦の統一性

青・・・一番大きいグループ

緑・・・グループ内でのまとまり

ピンク・・・見出し

黄色・・・画像単体

 

もう少し細かく見ていきます。

 

共通点① グループ間の余白部分の統一

緑で囲んだグループ間の余白を見たとき、緑枠と緑枠の間の余白が、ほとんど同じ幅で統一されています。統一感を生むための余白の使い方です。

また、

グループ間の余白幅 > グループ内で使用されている余白幅

にほぼ全てが当てはまります。「近接」の原則を守っていれば、確かにそうなります。

なんとなくデザインを構成していたら、こう言った部分までは統一感は出せないです。意識して構成する必要があります。

共通点② 縦の「整列」ライン

赤枠で示した「縦のライン」です。ヘッダーからフッターまで全ての要素がきちんと収まっているものもあれば、いろんな要素がはみ出してるサイトもあります。しかし、どのサイトも、サイト全体を見たとき「縦のライン」が意識されてるのがわかります。

また、模写するサイトをどれにしようか選んでいる中で、50近くはサイト見てるのですが、どれも縦ラインは存在してます。必須項目レベルです。

唯一、ヘッダーは縦ライン統一の際に外して構成している方が多かったかなと思います。画像を一面にしていたりと、そのサイトの特徴や個性が全面に現れたものが多いです。

共通点③ 文章は中央寄せが少ない

これはサイトによって一部異なりましたが、要素を中央寄せした際でも、中の文章は左寄せに戻されてることが多かったです。文章は左から右の読むものであり、基本的には左寄せで整列させ、統一感を持たせたほうが良いと考えます。

中央揃えははっきりとした「縦ライン」が出てこないのも、使いこなしづらい要素なのではないかと思います。文章による縦ラインは、整列の原則を取り入れる際に、非常にわかりやすいラインを作ってくれるので、ぜひ活用していきたいです。

共通点④ フォントをデフォルトのままにしない

模写したサイトはどれも必ずフォントを設定しております。実際に模写してる中で、フォントを最後に変更したことがあったのですが、変える前と後で印象はかなり違いました。ブラウザごとにデフォルトのフォントは異なり、特に「Safari」のデフォルトが「明朝体」なので、イメージしていたデザインと大きく変わってしまう可能性があります。英字も「Times」というデフォルトフォントがIEやsafariだと表示されるのですが、これがものすごく素人っぽさを出す原因なのではないかと思ってます。

今回見た中では、一つだけ明朝体がありましたが、他はどれもゴシック体でした。英語表記が多めのサイトでは、Google fontを使っているものもありましたが、基本的に日本語は「游ゴシック」「ヒラギノ角ゴ」「メイリオ」などのゴシック体を設定されているサイトが多かったです。

共通点⑤ letter-spacingとline-heightの利用

どのサイトも文字に対して「letter-spacing」と「line-height」プロパティを当ててます。もちろん「font-size」はさらに細かく設定されてます。模写で参考サイトのCSSを漁り始めるまで、「letter-spacing」と「line-height」正直使ったことありませんでした。フォントの種類と大きさだけでなく、「文字と文字の間の余白」も調節できるようになると、さらに整った構成になると考えます。

「letter-spacing」は文章に当てる場合、大きくても0.1emくらいで調節されていたように思います。「px」指定はほとんどなく「em」指定でほとんど全てのサイトが調節を行なっておりました。中には「font-feature-settings: "palt"」というCSSの文字間のデフォルト余白を一旦0にするプロパティを使用してから、文字に好みの「letter-spacing」を当ててるサイトもあったので、こだわりが現れる部分なのかなと思いました。

「line-height」は各サイトまちまちでした。だいたい「line-height: 1.5;」〜「line-height: 2;」くらいの倍率で当ててるサイトが多かったです。中には2.3とか3.3とか当ててることもありました。

共通点⑥ 「position: relative」と「position: absolute」の使用頻度が高い

positionプロパティを使いこなせると、デザインの幅がかなり広がります。どうやってるんだかよくわからないな、って思った配置をみると、だいたい「position: absolute」で作られておりました。デザイン4大原則に基づいた構成をコーディングするために頻出となるプロパティです。

「float」と「display: inline-block」、「position」プロパティ辺りが本当によく使われていました。

共通点⑦ 画像は大事

文章だけのところに画像を入れると一気にサイト全体が映えます。良いサイト作るためにはそのサイトのテーマに沿った良い画像が必須だと思います。逆に良い画像あれば少し整ってなくても良く見える気がします。

また、見出しなどの「大きい文字」は各サイト「画像」によるものがほとんどです。写真だけでなく文字も画像によるものなので、そういった「画像選び」は知識とか構成とかとは別に、大事のことであると考えます。

まとめ

今回は模写したサイトの数がある程度溜まったので、共通点を考察する回にしました。他の人のサイトを見る度にすげーなってなります。

今回見てて一番思ったのは、どのデザイン原則も「なんとなく言われてみればそうしてる」みたいな内容が多いということです。

近接も整列も対比も反復も、

 

「なんとなく、言われてみれば、意識している」

 

ということです。その意識していたことが「近接」という「名前」を持って、知識として自分の中に入ることに意味がある点を感じます。

 

また、これらの原則は「徹底しないと効果が出ない」のだと感じます。

なんとなく意識してはいたが、徹底はしてない。改めて「確立されたデザイン4大原則」という形で勉強したは良いものの、もし「割と当たり前なんじゃないか」っていう感想を持っているとしたら、それはやめた方がいいと思います。

整って洗練されたデザインを設計できる人は、意識している量が違うんだなと。服でいうサイズ感へのこだわりや、ロールアップを何センチにするかとか、そういう部分が絶妙だと、「この人おしゃれだな」って思いますし。そんな感想です。

以上ありがとうございました。

保存保存

保存保存

保存保存

保存保存

保存保存

保存保存

保存保存

保存保存

保存保存

-プログラミング学習
-, ,

Copyright© s u p ? , 2019 All Rights Reserved.