Webデザイン良質見本帳を読んでまとめてみた
今回は久保田涼子著の「Webデザイン良質見本帳」を読んでみました。
この本を読んで初めて知ったことや覚えておきたいことをまとめました。
はじめに
まずはこの本がどのような本なのかの説明をします。
こちらの本は2017年6月19日に初版が発売された本です。
この本はタイトルの通りWebデザインで役立つ知恵をまとめてくれている本です。
HTMLとCSSの説明や配色方法、各テーマに合わせたデザインの仕方などがモリモリ盛り沢山書かれています。
それでは、ここから本の内容をまとめていきます。
デザインとアートの違い
デザイン
・実用的なもの
・人に情報や目的を伝える
・客観的
アート
・自己表現
・万人に理解されなくても成り立つ
・主観的
紙デザインとWebデザインの違い
紙デザイン
・A4やB5など、決められたサイズの中でレイアウトを行う
・色はCMYK
・距離単位はmm
・文字単位はptや級
・タイポグラフィ、写真、配色、素材を組み合わせてデザインを行う
校正後、納品したら修正ができず物理的な厚みがある。
Webデザイン
・PCやスマートフォンなど様々な媒体で閲覧されるためサイズや見え方が変化する
・色はRGB
・距離単位はpx
・文字単位はpx,em,%,rem,vw,vh
・タイポグラフィ、写真、配色、素材、プログラムを組み合わせてデザインを行う
納品後から育てていくもの、運用を見越したデザインが必要。
Webページの構成
使用言語
HTML
Hyper Text Markup Language
テキストにリンク貼りが可能
画像や動画や音声などを埋め込むことが可能
文章に段落や見出しの指定ができる
CSS
Cascading Style Sheets
レイアウトの調整をする
配色や画像を指定の場所に配置することが可能
JavaScript
動きを調整する
スライドショーやページトップリンクの動きをつけることが可能
Webページの構造
webページでよく見かける部分の名称は以下の通り。
ヘッダー
ロゴ、検索窓、ソーシャルアイコンなど
グローバルナビゲーション
サイト内のページにリンクする
メインカラム
メインビジュアル、画像、動画、ギャラリー、テキスト、フォーム、バナー、テーブル、リスト、パンくずリスト、ボタンリンク、ローディング、ページャー、区切り線、Google マップ、SNSウィジェット、スライドショー
フッター
コピーライト、テキストリンク、ページトップリンク
人の視線の流れ
人はサイトを見る際にZやFの形に沿って見ていく。
この流れに沿って訴求したい要素を配置すると効果的に内容を伝えることができる。
F型の法則
・具体的な情報を得るために内容を読むときに見られるパターン
・視線が左から右へ流れた後、次は元の開始位置より少し下から見始める
Zの法則
・初めてアクセスしたサイトで全体を見るときのパターン
・視線が左上から右上に流れた後、左下から右下に流れていく
Webサイトで扱う画像
ビットマップデータ形式
・正方形の点が集合したもの(ピクセル)
・拡大したら画像が粗くなる
・微妙な色合いやグラデーションを表現したい時に適している
画像の種類
JPEG(色数の多い写真に適している)
長所：圧縮率を指摘できる、PNGよりサイズが軽い
短所：画質を下げると元に戻せない、上書き保存をすると画質が落ちる
GIF(ロゴ、アイコン、アニメーションに適している)
長所：サイズが軽い、透過が可能、アニメーションを設定できる
短所：256色までしか表現できない、高精細ディスプレイで閲覧すると劣化しやすい
PNG(色数の多い写真や透過させたい画像に適している)
長所：透過が可能、256色表現のPNG-8とフルカラー表現のPNG-24がある
短所：JPEGと比べるとサイズが重い
ベクターデータ形式
・点の結ぶ線などの数式データでかかれている
・拡大しても画像は粗くならない
・線や面を扱うイラストやアイコン、テキストに適している
画像の種類
SVG(ロゴ、アイコン、図形、アニメーションに適している)
長所：アニメーションを設定できる、拡大しても劣化しないため高精細ディスプレイに向いている
短所：複雑な形状だとサイズが重くなる
フォントの種類
フォントは欧文と和文に分けられる。
和文 ... 行書体、明朝体、ゴシック体、手書き
欧文 ... スクリプト体、セリフ体、サンセリフ体、手書き
Webページ制作において意識すべきこと
行間
・行間を調整して読みやすくする(line-height)
・欧文だと120%~、日本語だと150%~200%程行間を空ける
・1行内の文字は全角の場合、40字以内にする
字間
・詰めると緊張感が生まれる(letter-spacing)
・空けるとゆったりした印象になる
長文は左寄せにする
・文字頭を揃えて左寄せにすると可読性が上がる
フォントサイズ
・見出しと本文にメリハリを付けてコントラストをつくる
・フォントサイズは本文が14~16px、見出しは2倍以上のサイズが多い
・線の太さでも差別化する
均等配置
・文章の両端が揃った見せ方をする
(text-align:justify、text-justify:inter-ideograph)
デザインで使える小技
・助詞や単位はフォントサイズを小さくする
・括弧は細いフォント
・文字の変形
色彩の基礎知識
・ロゴやブランドカラーから配色を考える配色
・ベースカラー：メインカラー：アクセントカラー
→70：25：5の割合で使用する
・ボタンは補色などの活発な色を使用するとクリックされやすいWebセーフカラー
・どのモニターで見ても印象が変わりにくい色のこと
・216色ある
・薄い色は制作者が意図しない見え方になる場合があるので注意
キュートで可愛いデザイン
・暖色系も寒色系も明度を上げた明るい色で配色する
・ペールトーンの配色でまとめる
・書体は丸みがかった文字にする、フェミニンでおしゃれにしたい場合は明朝体にする
・使用するパーツは、水玉や網掛け、水彩やレースやリボン、花や植物素材、手書き風のアイコン
・レースやチェック、花飾りをたくさん使う
・半円を並べた模様で写真を囲むと可愛らしくなる
・キャラクターイラストを入れる
ナチュラルで優しいデザイン
・白を基調として、アクセントカラーにグレーや茶色を入れる
・配色の色数を少なくする
・書体はゴシック体と明朝体の組み合わせが可能
・フォントの太さは細めで行間を空ける
・背景にリンネルのテクスチャを敷いたり、手書き文字やイラストで装飾する
・写真を優しい色合いに加工する
・行間と文字間と余白を多めにとる
信頼感があるデザイン
・企業や医療、行政などのサイト
・信頼と冷静の印象は青色、安心感を与えるのは緑色
・グリッドに沿ったレイアウトを取り入れる
・書体は明朝体だと堅いイメージ、ゴシック体だと親しみやすく力強いイメージ
・目をひくパーツで実績を見せる
・ロゴカラーをアクセントカラーにして、色数を少なくする
・オリジナルの写真を使用する
高級感があるデザイン
・黒色とゴールドの組み合わせ
・派手な色を使わずに、茶色や紺やグレーなどの落ち着いたトーンを使用する
・書体は和文だと明朝体、欧文だとセリフ体を使用する
・飾り文字として筆記体を取り入れるのもあり
・行間や文字間はゆったり取る
・余白を大事にする
・装飾はシンプルな線
・写真を際立たせる
・透かし文字を使用する
・藍色と金色で品の良い高級感を出す
・エレガントな細いサンセリフ体を使う
・無彩色でまとめて写真を際立たせる
用語解説
グリッドレイアウト
・縦横の見えない線や格子状のブロックに合わせて要素を合わせていくレイアウトのこと
・基本的に8の倍数をベースにしている
ファビコン
・Webサイトをブラウザで開いた際にアドレスバーの左側に表示されているアイコンのこと
・制作したファビコンをサーバーにアップし、HTMLのheadタグ内にソースコードを書くと表示される
・デスクトップブラウザのフォビコンのサイズは16px x 16px
・データ形式はico
デュオトーン
・ダブルトーンとも呼ばれる
・鮮やかな2色の色合いで構成されたデザインのこと
パララックス
・視差効果のこと
・スクロールに合わせて要素が動いたり、出現したりする
・ユーザーに興味を持たせながらコンテンツを見せていく手法のこと
ヒーローヘッダー
・サイトにサクセスした際に、写真などのイメージが画面いっぱいに展開する巨大イメージのこと
マイクロ・インタラクション
・ユーザーが操作した動作に対して小さなアクションやアニメーションを返すこと
スキューモーフィズムデザイン
・日常にある物の見た目や操作性を反映させた質感のあるデザイン
・今は主流ではない
フラットデザイン
・機能性を重視し、質感や立体感を取り除いた2次元のデザイン
・現在の主流
マテリアルデザイン
・フラットデザインにスキューモーフィズムの概念を少しだけ加え、視覚だけでなく触覚も加わり操作できるデザイン
・Google社提唱
まとめ
こんちゃす、メイです。
こちらの本にはWebデザインに関する膨大な情報量が詰め込まれていました。まとめるのになかなかの時間を要しました。
かなり端的にまとめたのですが8,400字にまで到達してしまいました( ˊ̱˂˃ˋ̱ )ﾌﾞﾙﾌﾞﾙ
こちらの本は参考サイトが掲載されていたり、お手本になるWebサイトの写真が多く載っていたりして読みやすかったです。
基礎的なことも書かれているので、これからWebデザインについて学ぶよって方におすすめです。
是非読んでみてください。
さらばです。
※この記事は2019/06/28に投稿されたものです
この記事が気に入ったらサポートをしてみませんか？