初心者がWebデザインを学ぶのにおすすめの書籍「いちばんよくわかるWebデザインの基本きちんと入門」を購入・学習しましたので紹介させていただきます。
はじめに
この本は以下のような方に向いています。
- Webデザインをまったくのイチから学習したい
- コーダーやエンジニアからデザインも学んでスキルアップしたい
逆にHTMLやCSSといったWebサイトを構築する言語の使用方法などは少なめですので、そちらは別途学習する必要があります。
HTMLやCSSの入門編書籍は以下の記事を参考にしてください。
CHAPTER1
Webデザインの基本・概論的なことを学べます。
デザインというと綺麗なサイトを作ればいい、おしゃれなサイトにすればいいと思いがちです。
しかしデザインのゴールはユーザーに起こしてほしい行動をしてもらうようにわかりやすく構成し誘導すること。
Webサイトを作る目的の設定から、実際にサイトを完成させるまでの具体的なフローを学習できます。
美しいサイトを作るのがデザインではない
このチャプターを読んでいきなりWebデザインについての考えを改めさせられます。
確かに綺麗でおしゃれなサイトは一見よく見えます。しかしユーザーが行動を起こすことに結び付けられなければ何の目的も果たせないわけです。
具体的には何かサービスを提供している企業であればそのサービスの申し込みをしてほしいわけですよね。
Webサイトをデザインすることは見た目を綺麗にすることだけではなく、ユーザーが目的の行動を起こしやすいわかりやすい構成にすることなんだなと勉強になりました。
CHAPTER2
ここから少し具体的になりレイアウトの解説に入っていきます。
レイアウトにはある程度決まった形があり、現在は画像を画面いっぱいに広げるフルスクリーンレイアウトやヒーローエリアを利用したデザインが流行っています。
その他シングルレイアウトやマルチカラムレイアウト、スマホに対応するレスポンシブデザインについても学べます。
実際のサイトの例が画像でたくさん載っているのでイメージがわかりやすくレイアウトについて色々と学べるチャプターとなっています。
CHAPTER3
ここではWebサイトにおける配色について学んでいきます。
前半は色の色相・明度・彩度について、トーン、補色・類似色・調和についてと初めて読むには少し理解が難しいかなと感じるところです。
そこはひとまずある程度の理解で読み進め、次の色が与える印象の部分から参考にしていくと良いでしょう。
赤や黄色をベースにしたサイトの配色例など実際にサイト画像を利用したイメージしやすい解説が13ページにもわたって行われており、実際にサイトを作成する際に参考になること間違いなしです。
レイアウトや色に正解はない
チャプター2と3を読んで思ったことはレイアウトと色の最適解はそのサイトによって異なり、絶対的な正解が一つだけあるというわけではないということです。
なので本で考え方の基本を学ぶことはできますが、実際にWebサイトをデザインする場合にはそのサイトの目的や業種に合わせて最適な構成を探す必要があるでしょう。
この本でも豊富な実例を紹介しているのは、実例を参考に最適な答えを自分で導き出すことができるようにだと思います。
本に載っているサイトだけではなく、色々なWebデザインを参考にできるサイトの紹介などもあるので実務の際には参考にしたいですね。
CHAPTER4
Webデザインにおいて写真やイラストを使う際に役立つ情報が記載されたチャプターになります。
写真を補正・トリミングした場合にユーザーに与える印象の違いについて解説されており参考になります。
このチャプターの後半でも写真やイラストをうまく使ったサイトが紹介されています。
自分がサイトを作る際に写真やイラストをうまく活用する方法を考える際に再度読み直したいチャプターです。
CHAPTER5
続いてはタイポグラフィ、文字についての解説が行われたチャプターになります。
明朝体やゴシック体をはじめとした文字の特徴、文字が与える印象について解説されています。
個人的には書体選びはすごく難しい印象を持ってしまいました。
調べてみると一番よく使われているのはヒラギノ角ゴというフォントらしいので、まずは基本それで作りフォントで特徴を出したい部分は別途調整していけばいいのかなと。
CHAPTER6
HTML5とCSS3について解説されています。しかし一番最初の書き方などの初歩は書いていません。
ですがflexboxの解説がしっかりされていたり、読みやすいCSSの構成方法など基礎を終えて知りたいことがまとまっています。
レスポンシブデザインについても解説されており参考になります。
初歩的なことを学ぶというよりも、初歩を終えた人が実務を行うにあたり知っておいた方が役に立つことが書いてあり、非常にためになる内容だったなという印象です。
CHAPTER7
インタラクションデザインについての解説になります。が、インタラクションが何たるかの解説が難しいかなと。
要はユーザーが何をどう操作すれば目的の結果が得られるかがわかりやすい、ということなのかなと思います。
情報が多いページはアコーディオンで各要素をたたんでおき縦に長くスクロールさせず、かつ目的の見出しをクリックするとそれが開いて詳細が見られる、ということが見ただけでわかるようになっている、というような形です。
その為にはその部分にプラスマークなどを設置し、クリックできることを一目でわかりやすくする必要があります。
こういったインタラクションデザインについて学習ができます。
CHAPTER8
最後は運用やマーケティングについてです。
アナリティクスを設置したアクセス解析や、ランディングページの最適化などWebサイトを作ったあとの効果的な運用を考える内容となります。
一見、Webデザイナーはデザインを作って終わりなイメージですが、このあたりまでこなせるデザイナーになれば他と差別化ができますね。
綺麗な見た目を作るだけではなく、売り上げなど効果をしっかりと上げられるWebサイトを構築できる人は現在の世の中では最強です。
まとめ
中身がしっかりとしており、それでいて参考サイトがふんだんに紹介されていて非常にわかりやすい良書でした。
基礎的なことはもちろんこれで学べますが、実際にサイトを作るという経験をしなければ成長しない部分も多いなという印象も持ちました。
いきなりクライアントのオファーを受けることはないと思いますので、エアーで練習してみるか、知り合いのサイトを練習で作らせてもらうなどがいいかもしれません。
Webデザインは一から奇抜なものを作るのではなく、既に参考になるものがたくさんあるので、それらを参考に組み上げてくいくのが良いのかなと思います。
なので色々と情報収集しておき、デザインの引き出しをたくさん持っておくことが重要ですね。天才的な閃きではなく、後天的な努力によって補えるというのはWebデザイナーを目指す後押しになりますね。