【書評】 Webデザイン良質見本帳

はじめに

最近、ふとした縁で個人的にWebサイトの作成をお願いされた(正確にはある程度デザインが作成されていたものを引き継ぐ形になった)。

Webサイトに含めるコンテンツやらデザインなど全てを自分で作成する、という経験はほぼ無い。私はWebデザイナーではないため、Webサイトのデザインを真面目に考えたことがなかった。自己満足のデザインではなく、依頼者側が満足できるサイトにしなければならない。

一旦TOPページのデザインが出来あがったものの、色々弄っていると何だか微妙だし、ちょっと使いづらい。でも、どうしたらもっと良くなるのかが分からない。そんな状況なのでWebサイトのデザインについての知見が欲しくなった。

ということで以下の本を読んでみた。

Webデザイン良質見本帳
https://www.amazon.co.jp/dp/B071KDLRGV

本の概要

この本は、HTMLやCSSについての記載は殆どない(皆無ではないが、皆無に等しいレベル)。Webサイトのデザインについて、HTMLやCSSよりもっと上位レベルで論じている本だ。

デザインの基礎から始め、配色が与える印象、業種に合うデザインなど様々な角度から色々なデザインを、実際のホームページを例に挙げて紹介している。
但し、2017年の本なので、本で紹介されているサイトは既にデザインが変わっているものも多かった。ただし、リニューアルされたデザインも素敵なものが多かった。素敵なデザインのホームページを作成しているところはデザインの重要性を把握しており、良いデザインを維持する努力を怠らないようだ。

この本は、参考書や辞書のように必要なときに取り出すのが良い使い方になるだろう。サイトのデザインの良いアイデアが出ないときに、この本からイメージにあるデザインのサイトを探し、実際にホームページを訪問すると自分が思いつかないような良いデザインに巡り合うことができる。

なお、この本では、デザインとアートについて以下のように定義している。

* デザイン
    * 実用的なもの
    * 人に情報や目的を伝える
    * 客観的
* アート
    * 自己表現
    * 万人に理解されなくても成り立つ
    * 主観的

Webデザインが上達するコツは以下とのことだ。

* たくさんのwebデザインを見ること
* 良質なデザインのサイトを自分で再現してみる
* 今のWebデザインのトレンドを知る
* タイポグラフィ、配色、レイアウトについて学ぶ
* 積極的に手を動かしてアウトプットする

この本を読んで得たもの

この本を読んだことで、色々な良質なデザインのサイトを見ることができたのと共に、もっと多くのサイトに触れる必要があることを学べたのが大きい。

実際に色々なサイトを見た結果、自分の中で作成するサイトのイメージに近いものが色々と見付かった。
その後は、それらのサイトのデザインを参考に作成しているサイトのデザインに落とし込んでいく。
実際にWebデザインのコーディングをするときに、HTMLやCSSが分からなければサイトのソースを確認した。

なお、これらの作業をしているときに、CSSのみでもアニメーションっぽい動きが実現できることを知ることができた。

そのような低レベルのwebデザインの知識しか持っていなくても、実際に良いデザインのサイトを多く見て自分の手を動かすことで、多くのことが得られたのが大きかった。

良質なデザインを考えられるデザイナーって本当に凄いと思う。

Webデザイン良質見本帳　目的別に探せて、すぐに使えるアイデア集

最後に：本の構成についての紹介

参考までに、本全体の構成をざっくり記載すると以下のようになっている。

* Webデザインの基礎知識
* 印象から考えるデザイン
     * キュート
     * エレガント
     * ナチュラル
     * クール
     * 信頼感
     * ヴィンテージ風
     * クラシック
     * 和
     * 透明感
     * 子供向け
     * 女性らしい
     * 男性らしい
     * 高級感
     * 食べ物が美味しそうに見える
     * 季節感
* 配色から考えるデザイン
     * 黄、橙、赤、ピンク、紫、青、緑、茶、白やグレー、黒
     * トーンを合わせた配色
* 業種・ジャンル別から考えるデザイン
     * レストラン・カフェ
     * 医療・病院
     * ファッション
     * 美容室・エステ
     * アートフェス・イベント
     * 音楽
     * アニメ・ゲーム
     * 士業
     * 学校・幼稚園
     * ポートフォリオ
     * ニュース・ポータル
     * EC
     * コーポレート
     * スポーツ・フィットネス
     * ランディングページ
* レイアウトや構図から考えるデザイン
     * グリッド
     * カード・タイル型
     * 1カラム
     * 2カラム
     * カラムの組み合わせ
     * フルスクリーン
     * グリッドから外したレイアウト
     * フリーレイアウト
* 素材・フォント・プログラムを使ったデザイン
     * 写真メイン
     * 切り抜き写真
     * テクスチャ
     * 飾りパーツ
     * イラストで親しみやすさ
     * タイポグラフィ
     * 動画を効果的に使う
     * 動きを持たせる
     * インフォグラフィック
* トレンドのデザイン
     * レスポンシブwebデザイン
     * Webフォント
     * スプリットスクリーン
     * フラットデザインとマテリアルデザイン
     * マイクロ・インタラクション
     * ヒーローヘッダー
     * パララックス
     * デュオトーン
* パーツ別デザイン
     * ヘッダ
     * グローバルナビゲーション
     * 見出し
     * ボタン・ページトップリンク
     * テーブル
     * フォーム
     * フッタ