美しいウェブサイトの作り方」を読みましたのでレビューです。女子が好きそうな、トレンド感があるWebデザインの教本この本は、全7ジャンルのサイト作例を見ながらそのサイトがどうやってできているかを、コーディング・PhotoshopやIllustratorを使ったパーツの作り方を主に解説されています。サイトは、HTML・CSS・JavaScriptを使って構成されています。これらの基本的な解説や、PhotoshopやIllustratorなどの導入部分の解説はないので、Web制作を実際やったことがある、もしくはある程度勉強している人向けの本です。ややこしいことはしてないものの、解説も部分的なので、サイト制作を全くやったことがない...という人には敷居が高く感じるかもしれません。サンプルサイトのデータがCDで付属していますので、それを見ながら、そして本の解説と照らしあわせて、自分で実際触って学んでいく部分が大きい本だと感じました。Webサイトの構造や、基本的なコードの書き方などの前知識はちょっと必要です。本自体はページ数もそんなに多くなく、文字も読みやすく図解もいっぱいあるので、とても読みやすいです。Web制作を経験したことがある人にとっては、より良いWebサイトを作るための小ネタがいっぱい書かれていて、ステップアップにとても役立つ内容です。サンプルがとても綺麗で機能的で、こんなサイト作ってみたい!と憧れることばかりで、サイト制作勉強中の人も、目標の完成形として手元に置いておいて損はなさそうです。パーツのコード解説は部分部分であるので、まるっとオリジナルで1サイト作るのは難しくても(サンプルは商用利用可能なので、ちょっと変えて作っていくのは可能っぽいです)、トレンドのWebサイトに必須のパーツ作りの勉強になります。この本は主に女性ウケを狙ったサイトデザインのノウハウが書かれています。書くと「女の子向けの本か〜」と思われそうですが、女子力ってなに?女子ウケなんてわからない...というような、恐らく男性が多いのかな...そんなコーダーさん、Webデザイナーさんこそがメインの読者に設定されていそうです。女子の考え方、好み、効果的な配色や視線の誘導のしかた、コンテンツの組み立て方など、デザインを考える上での根幹となる部分も解説されているので、女子の心理が...乙女ゴコロってやつが...きっと...きっと分かります...!(和風や企業サイトなどといった、特に女子をターゲットとしていない作例も入ってます)トレンドってなんぞや?今のトレンドと言えば、スマホ対応...スマホサイトやレスポンシブデザインってやつがまず挙げられます。あとは一枚もので、下にスクロールさせて見ていくタイプのページ。左側(右側)にメニューがあって、スクロールするとそのメニューだけは固定されるような設計。画面いっぱいに広がるスライドショーなど。いった、最近のWebサイトでよく見る構造やデザインのものが作例として入っています。・和風(縦書き、和紙や筆で描いたような線を使ったデザイン)・エステサロン(きれいめ女子ウケデザイン、安心感)・企業サイト(シンプルで信頼感を表現)・ネイルサロン(ティーン受け、ロゴや写真加工などの手法)・カフェ(手描き風、レトロ、大人カワイイ)・ファッションEC(購入につながるような動線づくり)・英会話スクール(子供・ママ受け、楽しさを演出)です。その中の2サイトは、スマホ向けデザインの作り方についても書かれています。スマホサイトで必須となるような、メニューボタンを表示させたり、画像や文字の大きさを適切にしたり、見る機器によって設定を変えたりする「メディアクエリ」の使い方などが書かれています。デザインが素敵なことはもちろんながら、現代のWeb閲覧環境に合わせた、使いやすさを追求した作例ばかりなので、すぐに実装できそうなものばかりです。サンプルは商用利用もOKなので、美しいホームページがすぐ欲しい、という技術者の方にはテンプレートとしても使えるんじゃないでしょうか。トレンドのWebサイトデザインの生Photoshopデータ、生コードが7種類も手に入るっていうのはとってもお得な感じがします。フリーランスでやっていると、他人のデータをなかなか見る機会がなかったりするので嬉しいところです。フォトショやイラレでガーリーパーツを主にフォトショップ、そしてイラストレーターを使ったパーツの作り方も、いくつか書いてあります。女の子らしさを醸しだすテクスチャや、手描き風のゆるかわいい飾りパーツの作り方などです。各ツールの解説などはないので、ある程度フォトショやイラレを触ったことがある人向けです。フォトショップでWebデザインをする時の環境設定や便利なエクステンションの紹介なども書いてあるので、これからフォトショップでWebデザインをしたい、という方にもなかなか役立つと思います。女子が好む配色についてや、それをスウォッチに登録する方法なども書いてあります。難しいことはしておらず、ちょっとの手間で可愛く見える方法や考え方などを中心に書かれています。著者さんがフォトショップが大好だそうで、よってフォトショップの解説が多いのですが、基本的なことから覚えておくと便利なことなど、プロのフォトショップの使い方が垣間見れます。本ではすべて解説されているわけではないのですが、付属のフォトショップデータで自分で勉強していくことが可能です。使うパーツも一通り網羅レスポンシブデザインはもちろんのこと、スクロールしても固定されるメニュー、スライドショー、写真ギャラリー、するする動く「ページTOPへ戻る」ボタン、Webクリップアイコンやファビコンの作り方、OGPやmetaの設定、GoogleMapsの設定方などもサイト制作例に取り込まれています。JQueryなどを使って実装するのですが、JQueryの使い方も書かれています。どのサイトでも繰り返し使われるものなので、こういった知識が本にまとめられていると便利かも。小耳に挟んだこと実はこの本を読んだ後に、著者の瀬口さんのセミナー?講演会?があって(たまたま偶然なのですが)それにお邪魔してきました。瀬口さんの仕事の取り組み方、ワークフローっていうんですかね...そういったお話が中心で、そしてこの本の制作秘話のような話もありました。執筆期間が1年半ほどになったそうで・・・そんなに時間をかけて丁寧に作られた本なんだな...というのはサンプルなどを見ても分かると思います。いって本自体はボリューミーでもなく読みやすい文章量、見やすい写真やレイアウトで、講師業をされているだけあって、読む相手のことを考えてらっしゃる本だな...と思いました。バリデートを頑張られたそうで、サンプルの7サイトは、バリデーターにかけても1つもエラーが出ないそうです。デザインだけでなく、正しい構造のHTMLも見れるという...サンプルのクオリティの高さはハンパないんじゃないでしょうか...!他にも色々仰っていらしたのですが、あんまり書くと回し者っぽくなるのでこのあたりにしておきます。(ちなみにご本人様とお話したことは一度もないという...何度かお見かけする機会はあったのですが...)デザインでいつもつまづく...という、コーダーよりの技術者さんに特に読んで欲しい本だと思いました。私はデザイナー寄りですが、他の方のデザインを見ることはとても刺激になります。バリデートに強いデータ...これはもう憧れでしかないので...!こういうデータを拝見する機会がいただけてとても嬉しく感じる本でした!バリデートこわい。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。