Web制作を行う全ての方へ

[書評]「プロになるためのWebデザイン入門講座」

プロになるためのWebデザイン入門講座」を著者の庄崎大祐さん(なつきさん @Stocker_jp ブログ:Stocker.jp)より頂戴しましたので、書評を持ってお礼とさせて頂きます。

本誌の特徴はプロが現場で実際にどう手を動かしているのかを学ぶことができます。
PhotoshopやIllustratorに関する解説にしても、まず使いやすい設定からショートカットを利用した制作、実際に現場で作成するものをサンプルとして作成するなど、プロを目指すなら抑えておきたいポイントを主体として解説されています。
その為、これから本気でプロを目指す人に是非オススメしたい一冊です。

肝心の中身ですが、下記のような構成となっています。

  1. 1.Webに求められるデザインって何だろう?
  2. 2.必要なアプリケーションと画像についての基礎知識
  3. 3.PhotoshopをWebデザインで効率的に使う方法
  4. 4.こんなとき役立つ!Illustratorの活躍場面を知っておこう
  5. 5.バナーのデザインでひと通りのテクニックを身につけよう
  6. 6.標準的なワークフローに沿ってWebサイトをデザインしてみよう
  7. 7.Dreamweaverによるコーディングの基礎を学ぼう

1.Webに求められるデザインって何だろう?

本項目ではデザインの基礎知識を知ることができます。「良いデザインとは何なのか?」「Webのレイアウト」「色彩・配色」「フォント」と言ったデザインで外すことの出来ない知識と、デザインについて自身で考えると言う、非常に重要な事を学べます。

デザインは何かを模倣するようなものではなく、目的を改善するために様々なことを考えて出来上がっていくものです。そのスキルを身につける為には何をすればいいのか?日々どういう練習をしていけばいいのか?といった事までが書かれています。

色彩
色彩・配色に関することなどにも触れています。

2.必要なアプリケーションと画像についての基礎知識

Webデザインを行う上で欠かすことが出来ない画像についての基礎知識が学べます。グラフィックツールとして本書ではPhotoshopとIllustratorの使い方が解説されていますが、それらで作成される画像の特徴や、様々な画像用ファイル形式の解説が書かれています。

3.PhotoshopをWebデザインで効率的に使う方法

Photoshopをただ使うのではなく、効率的に使えるように書かれているので後々確実に制作スピードは早くなると思います。現場ではスピードを問われる事が多いため、初めから効率化を考えて教えられるのはメリットが大きいですね。

バージョンの違いによって多少の違いはあるものの、本書ではAdobeCC/CS6/CS5まで対応しているのでそれも嬉しいサポートです。
Photoshopは高機能なアプリケーションなので様々な事が出来るのが特徴です。ですが本項目ではWebデザインを制作する上で必要な事に特化して書かれているため、他の機能に惑わされること無くWebデザインの制作に関することだけに集中して知識を身につけるとができます。

4.こんなとき役立つ!Illustratorの活躍場面を知っておこう

Webデザインを行う上でグラフィックのパーツを作成したりする際に利用するのがIllustratorです。アイコンを作ったりロゴをデザインする場合はこちらのアプリケーションを使う機会が出てくる為、必要な時にしっかり使えるように使い方の基礎知識が書かれてます。

5.バナーのデザインでひと通りのテクニックを身につけよう

現場で非常に作ることの多いバナー制作の手段が書かれています。バナーは小さい面積でありながら、必要な情報をしっかり伝わるようにデザインしなければなりません。これは沢山のバナーを見て何がどう配置されているかを研究し、たくさん作ってスキルを磨く必要があります。
本項目ではPhotoshopを利用して人物が入ったバナーの制作と、PhotoshopとIllustratorを連携して作るバナーの制作が学べます。

6.標準的なワークフローに沿ってWebサイトをデザインしてみよう

トップページのデザイン〜コーディングの一連のフローを解説していますが、それだけではなくWeb制作現場のワークフローを元に解説しています。その中でWebデザイナーは何をするのか?実際にデザインする際に何を考えるのかまでが解説されています。

実際の製作過程では、デザインカンプの作成から「アイコンの作成(Illustrator)」「土台作り(Photoshop)」「ロゴ作成(Photoshop)」「サイドバー作成(Photoshop)」「コンテンツ作成(Photoshop)」「地図の作成(Illustrator)」「フッター作成(Photoshop)」を学ぶことが出来ます。

7.Dreamweaverによるコーディングの基礎を学ぼう

html5を利用したマークアップからCSSによる装飾、またそれらの役割解説が書かれています。また、先ほどの項目で作成したデザインカンプを利用するため、カンプからの画像書き出しも解説されています。本項目で本書籍は最後となります。

本の中身

Photoshopによるボタンの作成
Photoshopによるボタンの作成。

フルカラーで見やすく分かりやすいです。
フルカラーで見やすく分かりやすいです。

全体的に

PhotoshopやIllustratorの使い方を記した本は僕自身もこの業界に入ろうとした時に読んで勉強しましたが、当時この
「プロになるためのWebデザイン入門講座」のように現場のフローについて書かれた書籍などは存在しておらず、現場の人がどういうやり方をしているのかは凄く気になっていました。

  • 自分のやり方は果たして効率がいいのか?
  • 現場で通用するのか?
  • もっと良いやり方はないのか?

結局それらは現場に入ってみるまでわからなかったのですが、こうやって書籍で現場のフローを知りながらスキルが学べるのは非常に有難い事だなぁと思います。

なつきさん、このたびは書籍執筆お疲れ様でした。

Ad



Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です