デジタルの世界で何か表現する時、欠かせないのがWebデザインだ。しかし、いわば"正解"がない世界では、クリエイティブな力だけでなく、ロジカルに発想し説明できる力も必要になる。そんな「Webデザインの初心者・初級者」に向けて、Webサイト制作をてがけるkanvas（カンバス）のWebデザイナー カトウヒカルさんにオススメの本をご紹介いただいた。
デザインの考え方の基礎を「目で見て」わかりやすく説明した本
カトウさんは、2012年よりWebデザイナーとして活動し、さまざまな企業のホームページ制作を行いながら、デザインセンスをロジカルに学ぶオンライン講座「kanvas study plaza」を主催したり、Twitterでバナーデザインのティップスを発信したりするなど、積極的なナレッジ共有を行っている。
そんなカトウさんがオススメする1冊目は、デザインの基礎を感覚的に"目で見て楽しみながら"体得する本だ。
1冊目 『なるほどデザイン 目で見て楽しむデザインの本』（筒井美希：著 MdN:刊）
デザインにははっきりとした「正解」がない。しかし、デザインの知識がなくても、良いデザインと悪いデザインは「なんとなくわかる」という人が多いだろう。しかし、良いデザインには「なぜそうしたか」という理由が明確なことが多い。そうしたロジカルなデザインの考え方や仕組みを、図やイラストで楽しく見て学べるのが本書だ。
初心者にオススメといいながらも、実は私が本書を手にしたのは、Webデザイナーになって5年目なんです。実務経験は増えるのに「基礎が抜けているのでは？」と不安を感じ、再度デザイン学校に通っていた頃で、そこの先生に薦められたのがきっかけです。
本書を見て、自分が迷いながらも試行錯誤したことについて答え合わせをしているような感覚があり、「ああ、そうだったのか」とすごく納得感がありました。実務で感じてはいても曖昧だったものが、言葉と図やイラストで言語化・可視化されていて、デザインの要諦をざっくりと掴んだように感じました（カトウさん）
とりわけカトウさんが熟読したのは「チャプター3」。デザインの要素の特徴がグラフィカルに紹介されており、デザイナーとデザイナー以外の人との共通言語が学べる内容になっている。チームで仕事をする際に今も大いに役に立っているという。そして、ロジカルに微調整を加えたBefore & Afterが、具体的な図や写真などで紹介されている。具体的なヒントを掴めるのも、デザイン初心者には心強いだろう。
初心者でも真似できる。バナーのブラッシュアップポイントが山盛り！
2冊目 『思わずクリックしたくなる バナーデザインのきほん』（カトウヒカル：著 インプレス:刊）
続いて紹介していただいたのは、カトウさんの自著。Webのデザインでは欠かせない「広告バナー」に特化し、70例もの改善事例が掲載されている。
バナーはデザインの中でも特殊な存在で、Webサイトの中でぱっと目を引き、瞬間的に情報を伝える役割を担います。見ようと思って見てもらうものではないため、瞬時に興味をもってもらえなければ全く意味がありません。また、とにかくスペースが小さいため、空間の切り分けや文字の配置など、いわば職人技的な細やかさが求められます（カトウさん）
まさに「思わずクリックしたくなる」秘訣をこれでもか！ というほど盛り込んでいる。事例は見開き単位なので、デザインに行き詰まったときにもパラパラとめくっているだけで、ひらめきが生まれてくるだろう。
この本は、生徒さんが作成したバナーを私がブラッシュアップするという1on1のデザインレッスンの様子をTwitterにあげていたことがきっかけで生まれました。2年間ほどやっていたのが、編集者さんの目に触れてまとめることになったんです。さまざまな事例を取り上げていることが、好評いただいている理由の1つだと思います（カトウさん）
なお巻末の「デザイン納品前のチェック項目」は必見とのこと。基本項目から、メリハリやフォント、レイアウトやリズムなど、確認すべき基本的な事項が整理されている。「できた！」と思ったら、これでチェックすることで自身のスキルアップにもつながるだろう。
技術的な知識から実践テクニック、最新情報まで1冊でカバー
3冊目 『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』（Mana：著 SBクリエイティブ:刊）
3冊目にカトウさんが選んだのは、HTMLとCSSの基本について書かれた本だ。Webデザイナーなら誰でも知っているブログ「Webクリエイターボックス」の"中の人"であるManaさんによる本で、AmazonのWebデザインカテゴリで2019年の発行からずっと1位を取り続けているという。
たとえコーディングをしないWebデザイナーであっても、テクノロジーについて知っておかないと作業にあたって不具合が生じ、軽んじられる恐れがあります。この本は、Webデザイナーが最低限知っておきたいHTMLとCSSについて、基礎的なところから体系立てて丁寧に紹介しています。初心者でも、1冊でかなりキャッチアップできると思います（カトウさん）
バージョンアップすることの多いツールの紹介なども掲載されているが、ほぼ普遍的で本質的な内容なので、入門書、教科書として1冊手元に置いておくと安心だ。また、実際に手を動かしながら学べる構成になっているので、実践的な知識やスキルが身につくだけでなく、「制作現場での流れ」も体験できるという。
UIをデベロッパー側の目線で立体的に捉え、考えられるようになる
4冊目 『UIデザインの教科書 マルチデバイス時代のサイト設計-アーキテクチャからUXまで』（原田秀司：著 翔泳社：刊）
そして4冊目は、今回紹介する本の中で一番古い2013年の発行ながら、いまもなお内容は全く色褪せず、本質的なUIを理解するのに最適な本になる。ユーザーに"やさしい"サイトの構造や表記について、論理的に紹介している。
この本の発行当時、デザインにおけるUI/UXの重要性が注目されるようになっていたので手にとりました。それまで、多くの人がサイトの見やすさや使いやすさは「なんか良いよね」という、ふわっとした感じで語っていたように感じます。しかしこの本は、それが「なぜ、わかりやすいのか」、または「なぜ、わかりにくいのか」の理由を、体系的にロジカルに解説してくれています（カトウさん）
たとえば、マウスで操作する場合とタッチデバイスとの違いや、グローバルナビゲーションの重要性、デバイスごとの対応などによってどのように「わかりやすくなるか」まで理解できる。
この本を1冊読むと、サイトを立体的に捉え、構造的に考えることができるようになります。ユーザーとしてではなくデベロッパーとして、WebサイトのUI/UXを考える視点が得られます（カトウさん）
動きのあるデザインにしたいなら必携！ コードはコピペで商業利用も可
5冊目 『動くWebデザインアイディア帳』（久保田涼子、杉山彰啓：著 ソシム：刊）
そして、カトウさんが最後に紹介するのは、いまや当たり前になった「動きのあるWebデザイン」を作りたい人にオススメの本。
いまのWebサイトは動くことが当たり前になり、クライアントさんからもリクエストされることが増えています。でも、それをイチから習得するのは大変なこと。この本には、たとえば基本的なところでいえば、スライドショーやマウスオーバーによる動き、ローディング画面などの具体的な作り方が掲載されています。コードも記載されているので、それを"コピペ"するだけで動くようになります（カトウさん）
さらに専用のWebサイトで実際の動きを確認することもでき、そこで取得したコードは商業利用も可能という太っ腹さ。すでに仕事としてWebデザインを担当している人なら、手元においておきたい一冊だ。
更新情報のキャッチアップ法
Webデザインも他に漏れず、日進月歩でどんどん新しいものへと変わっていく。それに追いつくにはやはりネット上での情報収集が不可欠だが、最近では「情報の集め方が変わってきた」とカトウさんは語る。
かつてはキュレーションメディアなどをこまめにチェックして、情報を取り入れるようにしていたのですが、最近は少しナナメ読みしているかもしれません。というのも、そうしたメディアは若干マーケティングの影響を受けたり、個人の見解だったりすることも多く、情報の信頼性に疑問をもつようになったからです。たとえば、あるデザインツールがすごく推されていても、本当に皆が使っているかどうかはわかりません（カトウさん）
そこで近年はSNSでの集合知的な情報収集を行うようになったという。Twitterで、先進的なWebデザイナーやクリエイター、エンジニアなどをフォローし、その人たちが盛り上がっていたら、さらに深堀して調べるという方法だ。
では、"先進的な人"を探りあてるにはどうすればいいのか？ まずは同業者をフォローし、そのなかで「いいね！」やリツイートが多い人に着目するという。
たとえば、Figmaの盛り上がりと、Adobeに買収されたときの落胆（笑）。今後どうなっていくのかを皆で固唾をのんでみているという感じですね。そういうナマの情報、反応をキャッチすることは、これからのWebデザイナーにとっても重要なスキルになるでしょう。
そのためには、逆に不要な情報をカットすることも重要です。私もテーマを設定してフォローする人を決めています。また、あまりにも盛り上がり過ぎていると思う場合は、話題のハッシュタグを非表示にする、リツイートを非表示にするなどの工夫をしています（カトウさん）
今回はWebデザインをテーマにオススメ書籍を紹介していただいたが、カトウさんがデザインをする上で最も大切にしていることは「ユーザー目線」だという。たとえば、顧客企業の製品を使ってみたり、ユーザーを観察したり、顧客企業の営業担当者になれるほどWebサイトで訴求するものへの理解・親しみをもつことが「良いデザイン」の秘訣というわけだ。その上で、今回のオススメ書籍や情報収集法を「良いデザイン」を作る一助にしてほしい。
カトウヒカル
kanvas（カンバス） Webデザイナー。
1984年生まれ。佐賀県出身、福岡市在住。2012年よりWebデザイナーとして活動。kanvas（カンバス）という屋号で企業のホームページ制作を行う。
これまで100サイト以上の制作に関わり、半数はデザインからHTML/CSSコーディング、CMSの組込までワンストップで対応。2022年4月からデザインセンスをロジカルに学ぶオンライン講座「kanvas study plaza」を主催。
TwitterではバナーデザインのTipsを発信。
Twitter:@design_hikaru
kanvasのURL:https://kanvas.fukuoka.jp/
※このコンテンツはWebサイト「Web担当者Forum - 企業Webサイトとマーケティングの実践情報サイト - SEO・アクセス解析・SNS・UX・CMSなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：Webデザインの「考え方を把握」し、「現場で生かす方法」を提供する5冊！ | Web担 オススメの課題図書
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.
