瀬口理恵著『美しいウェブサイトの作り方』の備忘録
久々の書評ですね。
最近は、良い本に出会えていなかったのですが、瀬口理恵さん著『人を惹きつける 美しいウェブサイトの作り方』は当たりでした。
Overview 本の概要
まず、実際にデザインとコーディングどちらにも重きを置いて解説されている本はあまりありません。７つのサイトの実例を元に、デザイン・コーディングを１から教えるのではなく、うまくかいつまんで解説されています。しかも、嬉しいことに商用オッケーのpsdデータやコードもいただけます！
中身としては、
“和の趣きと高級感” → 「温泉旅館サイト」
“癒やしと安心感” → 「エステサロン」
“シンプルな信頼感” → 「企業サイト」
“ポップでティーン受け” → 「ネイルサロン」
“思わず行きたくなる” → 「カフェサイト」
“キュートで購買意欲を促す” → 「ファッションECサイト」
“にぎやかさと楽しさ” → 「英会話スクールサイト」
各サイトをデザイン・コーディングの２点から解説されてます。
僕自身も勉強になることが多く、女性デザイナーならではの視点も勉強させていただいたので、備忘録としてブログに書かせていただきます。
この本の執筆者である瀬口理恵さんですが、大阪の方で実際にセミナーを拝聴した経緯もあり（もともと書籍には興味があった）、今回読ませていただきました。セミナーでおっしゃってたのですが、システムはあまりわからないってところが、僕と被ってて親近感が湧きました。
人を惹きつける 美しいウェブサイトの作り方 人に伝わるデザインと制作のレッスン
※アフィリエイトリンクでここから購入していただければ、ブログの励みになります！
Memo 備忘録
アートとデザインの違い。
アートでは、ユーザーは関与し得ないが、デザインはユーザー視点・ユーザーエクスペリエンス視点が重要になる。
ロールオーバーをjsで実現
実際にコードが書籍では表示されています。
テクスチャについて
そのまま、cssでbackgroundで並べるとおかしい時がある。（端が不自然な時）
そういう場合は、もう1枚コピーしたテクスチャを反転して1枚の画像にした後にbackgroundで並べる。そうすることで、切れている部分の不自然さが解消される。
リンクブロック
HTML５では、インライン要素とブロック要素の分類廃止されているので、全体をaタグで囲んでも良い。
ゆるい楕円形の作り方
楕円形ツールとペンツールで簡単に作成できる
google mapのカスタマイズ
Styled Maps Wizardというツールで簡単にできる。googlemapを外部jsにまとめる
最近、google mapがカスタマイズされたのを見たことがあって、どうやって実装するのか気になってたところです。
文字の枠と背景色をずらすことで、雑誌のようなデザインを実現できる
すごく簡単なテクニックだけど、持ってなかった引き出しです。
Summary まとめ
案件で忙殺される日々ですが、やはり案件をこなすほどスキルアップに繋がります。経験ほどものをいうものはないというのは事実ですが、同時にこういった本やセミナーなどで自分のスキルをブラッシュアップする必要性はあります。
今回、たまたまずっと欲しい物リストに埋もれていた本で、セミナーで瀬口さんに出会ってことも大きいきっかけでした。
この本の何よりもの特徴は、付録されているデータです。htmlコードから、psdデータまで７つのwebサイト全部揃ってます。
今後のデザインサンプルはもとより、商用としても使用できるのでデザインの幅が広がりそうです。
人を惹きつける 美しいウェブサイトの作り方 人に伝わるデザインと制作のレッスン
※アフィリエイトリンクでここから購入していただければ、ブログの励みになります！
私は大阪でホームページ制作事業をしています。
もし、ご興味ありましたら、下記のリンクからお問い合わせください。
