Webサイトのデザインをより良くするにはどうすればよいのか！ 洗練されていく工程が詳しく解説された良書 -WebデザインプロセスBook
Post on:2024年11月15日
sponsors
※本ページは、アフィリエイト広告を利用しています。
こういうデザインの解説書は、初めてです！
デザイナーは何を考え、どのように作っていくのか。ヒアリングから始まり、ワイヤーフレームを設計し、デザインカンプに落とし込み、最終形までチェックバックを重ねてブラッシュアップをするまでのデザイナーの意図や考え、デザインのテクニックなどを細かく解説したデザイン書を紹介します。
他人がどのような工程で行っているかを見ることはなかなかないので、かなり貴重な本だと思います。
本書は「けっきょく、よはく。」や「デザイナーじゃないのに！」などデザイン書の良書をたくさん刊行されているソシム社の最新刊。そろそろ新しい切り口の本がでるかなと思っていたら、想像の上を行く素晴らしいデザイン書が登場しました！
10/29に発売後すぐに売れ切れ状態が続いていましたが、版元様より11/12に重版出来となったので、現在は大丈夫だと思います。
Kindle版も発売されています！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書では、コーポーレートサイト、ECサイト、シングルページ、採用サイト、バナーの5つのジャンルごとにヒアリングから始まり、ワイヤーフレーム、デザインカンプ、最終形までのブラッシュアップの工程ごとに細かく解説されています。
購入者特典として、サポートサイトからワイヤーフレームのPDFデータやデザインカンプ（1st, Final）、練習用素材、デザインチェックシートなどがダウンロードできます。
第1章はコーポーレートサイト。「国際特許事務所」「介護施設」「製造業」の3つのサイトがあり、ここでは「国際特許事務所」で紹介します。まずは、クライアントからのヒアリングです。企業のブランディングや強み、デザインテイストの希望などを伺います。
ヒアリングを元に、ワイヤーフレームを設計します。必要な情報を整理し、コーポーレートサイトとしての基本情報が分かりやすいように、コンテンツの流れを意識しながら作成します。
そして、デザインカンプに落とし込みます。左がTake 1で、右がFinalです。左の赤丸にはチェックバックや懸念点などが細かく入っており、右ではそれぞれにどのような対応をしたかが解説されています。
ページの一部を拡大してみました。左はTake 1の赤丸、右はFinalの対応です。全体的には中央に配置されていたカードがメイン画像に重なるように配置され、メイン画像も1枚の大きな画像になり、コーポーレートサイトらしく安定感のあるレイアウトにブラッシュアップされています。
これはトップページのデザインカンプですが、この記事で紹介している画像がすべてではなく、配下ページのもたくさんあります。
「調整の軌跡」として、デザインの方向性が決まるまでにどのようなブラッシュアップが重ねられたかも詳しく解説されています。上記の1st TakeとFinalの間には、Take 2とTake 3が実はあります。小さい画像なのでテキストは読めないと思いますが、ここが違う、どうしたい、どうすればいい、という工程が細かく解説されています。
第2章はECサイト、「インテリアショップ」「ペットウェア」「登山用品」のサイトがあります。自分が手がけたものと同じ業種やちょっと違うけど似た業種のサイトもあるかもしれません。
「インテリアショップ」のトップページも左のTake 1から右のFinalに、大きく見た目が変わっています。上部にあったナビゲーションは左に配置され、メインの写真の使い方やアイコン周りも異なります。背景色もメインとフッタを逆にすることでブランドイメージが強調され、バナーのデザインも無機質なものから興味が沸くデザインに変わっています。
第3章はシングルページ、「学習塾」「観光ホテル」「イタリアンレストラン」の3つです。
第4章は採用サイト、「総合病院」「野菜農園」の2つです。
私はさまざまなコーポーレート、ビジネスサイトのプロジェクトに参加しましたが、この採用サイトが一番やりがいを感じました。採用は他のコンテンツに比べてより会社自体を深く理解して作成する必要があるので、ヒアリングの段階からかなり綿密に打ち合わせを重ねることから始めていました。
第5章はバナー、バナーは基本的に画像一枚なので、その分種類も豊富にあります。
最後の第6章はワイヤーフレームやデザイン制作で気をつけたいポイントがまとめられています。ワイヤーフレームだと「メニューやリンクが分かりやすいか」「ユーザーが迷子にならないか」「グルーピングによる情報整理はできているか」「配置が単調になっていないか」など、制作したときに必ずチェックしておきたいですね。
チェック項目は全部で88項目あり、購入者特典としてサポートサイトからチェックシートがダウンロードできます。
WebデザインプロセスBookの目次
WebデザインプロセスBookの目次
WebデザインプロセスBookの目次
WebデザインプロセスBookの目次
本書は帯にもあるように「なぜこのデザインになったのか？」が、ワイヤーフレームからデザインカンプまでデザイナーが何を考え、どのように改善したのか、ブラッシュアップの工程がよく分かるデザイン書です。クライアントやチームのフィードバックを重ね、Take1, Take2, Take3と進めるごとにデザインが洗練されていくのは、デザインする楽しさも感じられます。
献本の御礼
最後に、献本いただいたソシムの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
