誰かに見てもらうための、簡単なデザイン

《読んだ本》人を惹きつける美しいウェブサイトの作り方

色々なパターンの、女子力高いWebデザインの作り方が解説された本「人を惹きつける 美しいウェブサイトの作り方」を読みましたのでレビューです。
本のデザインもすっきりかわいいながら、本文もカラフルで読みやすく、女性ウケを狙ったサイトを作りたい方、デザインが苦手なWeb制作者さんなら手元に置いておきたい一冊です( ´∀`)☆

IMG_3903

特に女子が好きそうな、トレンド感があるWebデザインの教本

この本は、全7ジャンルのサイト作例を見ながらそのサイトがどうやってできているかを、コーディング・PhotoshopやIllustratorを使ったパーツの作り方を主に解説されています。
サイトは、HTML・CSS・JavaScriptを使って構成されています。
これらの基本的な解説や、PhotoshopやIllustratorなどの導入部分の解説はないので、Web制作を実際やったことがある、もしくはある程度勉強している人向けの本です。
特にややこしいことはしてないものの、解説も部分的なので、サイト制作を全くやったことがない…という人には敷居が高く感じるかもしれません。
サンプルサイトのデータがCDで付属していますので、それを見ながら、そして本の解説と照らしあわせて、自分で実際触って学んでいく部分が大きい本だと感じました。
なので、Webサイトの構造や、基本的なコードの書き方などの前知識はちょっと必要です。
本自体はページ数もそんなに多くなく、文字も読みやすく図解もいっぱいあるので、とても読みやすいです。
Web制作を経験したことがある人にとっては、より良いWebサイトを作るための小ネタがいっぱい書かれていて、ステップアップにとても役立つ内容です。

サンプルがとても綺麗で機能的で、こんなサイト作ってみたい!と憧れることばかりで、サイト制作勉強中の人も、目標の完成形として手元に置いておいて損はなさそうです。パーツのコード解説は部分部分であるので、まるっとオリジナルで1サイト作るのは難しくても(サンプルは商用利用可能なので、ちょっと変えて作っていくのは可能っぽいです)、トレンドのWebサイトに必須のパーツ作りの勉強になります。

この本は主に女性ウケを狙ったサイトデザインのノウハウが書かれています。こう書くと「女の子向けの本か〜」と思われそうですが、女子力ってなに?女子ウケなんてわからない…というような、恐らく男性が多いのかな…そんなコーダーさん、Webデザイナーさんこそがメインの読者に設定されていそうです。
女子の考え方、好み、効果的な配色や視線の誘導のしかた、コンテンツの組み立て方など、デザインを考える上での根幹となる部分も解説されているので、女子の心理が…乙女ゴコロってやつが…きっと…きっと分かります…!
(和風や企業サイトなどといった、特に女子をターゲットとしていない作例も入ってます)

トレンドってなんぞや?

今のトレンドと言えば、スマホ対応…スマホサイトやレスポンシブデザインってやつがまず挙げられます。
あとは一枚もので、下にスクロールさせて見ていくタイプのページ。
左側(右側)にメニューがあって、スクロールするとそのメニューだけは固定されるような設計。
画面いっぱいに広がるスライドショーなど。
そういった、最近のWebサイトでよく見る構造やデザインのものが作例として入っています。

7つのサイトのジャンルは、

  • ・和風(縦書き、和紙や筆で描いたような線を使ったデザイン)
  • ・エステサロン(きれいめ女子ウケデザイン、安心感)
  • ・企業サイト(シンプルで信頼感を表現)
  • ・ネイルサロン(ティーン受け、ロゴや写真加工などの手法)
  • ・カフェ(手描き風、レトロ、大人カワイイ)
  • ・ファッションEC(購入につながるような動線づくり)
  • ・英会話スクール(子供・ママ受け、楽しさを演出)

です。
その中の2サイトは、スマホ向けデザインの作り方についても書かれています。
スマホサイトで必須となるような、メニューボタンを表示させたり、画像や文字の大きさを適切にしたり、見る機器によって設定を変えたりする「メディアクエリ」の使い方などが書かれています。
デザインが素敵なことはもちろんながら、現代のWeb閲覧環境に合わせた、使いやすさを追求した作例ばかりなので、すぐに実装できそうなものばかりです。

サンプルは商用利用もOKなので、美しいホームページがすぐ欲しい、という技術者の方にはテンプレートとしても使えるんじゃないでしょうか。
トレンドのWebサイトデザインの生Photoshopデータ、生コードが7種類も手に入るっていうのはとってもお得な感じがします。
特にフリーランスでやっていると、他人のデータをなかなか見る機会がなかったりするので嬉しいところです。

フォトショやイラレでガーリーパーツを

主にフォトショップ、そしてイラストレーターを使ったパーツの作り方も、いくつか書いてあります。
女の子らしさを醸しだすテクスチャや、手描き風のゆるかわいい飾りパーツの作り方などです。
各ツールの解説などはないので、ある程度フォトショやイラレを触ったことがある人向けです。
が、フォトショップでWebデザインをする時の環境設定や便利なエクステンションの紹介なども書いてあるので、これからフォトショップでWebデザインをしたい、という方にもなかなか役立つと思います。
女子が好む配色についてや、それをスウォッチに登録する方法なども書いてあります。
特に難しいことはしておらず、ちょっとの手間で可愛く見える方法や考え方などを中心に書かれています。

著者さんがフォトショップが大好だそうで、よってフォトショップの解説が多いのですが、基本的なことから覚えておくと便利なことなど、プロのフォトショップの使い方が垣間見れます。
本ではすべて解説されているわけではないのですが、付属のフォトショップデータで自分で勉強していくことが可能です。

よく使うパーツも一通り網羅

レスポンシブデザインはもちろんのこと、スクロールしても固定されるメニュー、スライドショー、写真ギャラリー、するする動く「ページTOPへ戻る」ボタン、Webクリップアイコンやファビコンの作り方、OGPやmetaの設定、GoogleMapsの設定方などもサイト制作例に取り込まれています。JQueryなどを使って実装するのですが、JQueryの使い方も書かれています。
どのサイトでも繰り返し使われるものなので、こういった知識が本にまとめられていると便利かも。

ちょっと小耳に挟んだこと

実はこの本を読んだ後に、著者の瀬口さんのセミナー?講演会?があって(たまたま偶然なのですが)それにお邪魔してきました。
瀬口さんの仕事の取り組み方、ワークフローっていうんですかね…そういったお話が中心で、そしてこの本の制作秘話のような話もありました。
執筆期間が1年半ほどになったそうで・・・そんなに時間をかけて丁寧に作られた本なんだな…というのはサンプルなどを見ても分かると思います。
かといって本自体はボリューミーでもなく読みやすい文章量、見やすい写真やレイアウトで、講師業をされているだけあって、読む相手のことを考えてらっしゃる本だな…と思いました。
バリデートを頑張られたそうで、サンプルの7サイトは、バリデーターにかけても1つもエラーが出ないそうです。
デザインだけでなく、正しい構造のHTMLも見れるという…サンプルのクオリティの高さはハンパないんじゃないでしょうか…!

他にも色々仰っていらしたのですが、あんまり書くと回し者っぽくなるのでこのあたりにしておきます。。。
(ちなみにご本人様とお話したことは一度もないという…何度かお見かけする機会はあったのですが…)

デザインでいつもつまづく…という、コーダーよりの技術者さんに特に読んで欲しい本だと思いました。
私はデザイナー寄りですが、他の方のデザインを見ることはとても刺激になります。そして、バリデートに強いデータ…これはもう憧れでしかないので…!こういうデータを拝見する機会がいただけてとても嬉しく感じる本でした!

バリデートこわい。
それでは!Have a nice design!!