【書評】これからの「標準」を身につける HTML+CSSデザインレシピ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
これからの標準を身につけるHTML+CSSデザインレシピ

最近流行のフラットデザイン、レスポンシブWebデザインに興味はありませんか?
本書では、フラットデザインのWEBサイトをbootstrapやFoundationなどのフレームワークを使い簡単に制作する方法を学ぶことが出来ます。
エ・ビスコム様はWordpressなどのレシピ本を始めとして非常に質の高い本を何冊も執筆なさっています。本書もその例に違わず、とても分かりやすい内容でこれからのWEBデザインの制作方法を紹介してくださっています。

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)
作者:エ・ビスコム・テック・ラボ
出版社:マイナビ
発売日:2014/3/20
icon_store_amazon

購入のきっかけ

私が本書を手に取ったきっかけは、フラットデザインを自力で作るのに疲れた!効率化したい!と思ったことに起因します。

私はSEOやマーケティングに関しては専門としてやっていますが、残念ながらWEB制作に関しては「並」程度の技術しか持ち合わせていません。特に最近流行のレスポンシブWebデザインには乗り遅れた感があります。
そんな私がイチからWEBサイトを作るとなると、当然HTMLとCSSをイチから組まなければならないため、当然非常に時間がかかります。
そこで、色々と調べているとあるではないですか。bootstrapというフレームワークが。早速WEBで猛勉強し、制作したのが弊社WEBサイトの「インサイドSEO」です。コンテンツは除くとして、大枠のデザインの制作期間はなんと4時間です。

しかし、ある程度の枠はできたもののまだ上手く効率化できていないというのが現状で、どうにかしたいと思い本書を手にしました。
結論から申し上げると、本書を購入したのは大正解でした。
HTMLやCSSの知識があまり無い方でもじっくり読み解くことで最近のトレンドを学べ、立派なレスポンシブWebデザインサイトが制作できるようになることは間違いないでしょう。

本記事の構成

本記事では、目次に合わせ、その概要と得られる知識を要約しました。
本書はページに求められる機能の多様化、複雑化をふまえ、CSSフレームワークを利用することをメインに考えられています。
・まずはBASEとしてレスポンシブWebデザインの考え方と基本を学びます
・次にCHAPTER1〜6でヘッダーやフッターなど各パーツをレスポンシブWebデザインで制作する方法を学びます
・最後にここまでの思想をCSSフレームワークで効率よく制作する方法を学びます

本の構成

目次と概要

BASE 基本

本章では、レスポンシブWebデザインの下準備として、HTMLとCSSの書き方、ビューポートの設定方法について紹介しています。

ビューポートを設定しない場合、スマートフォンやタブレット端末でページを表示する際に、ページの横幅が固定幅でレンダリングされてしまうため小さく表示されてしまいます。
<meta name=”viewport” content=”width=device-width”>を指定することで各端末に最適化された幅でページを作成することが可能になります。
難易度:☆☆☆☆

CHAPTER1 ヘッダー

ヘッダー

定番のヘッダーを作成する方法が紹介されています。ロゴ画像とサイト名を並べるレイアウトの方法などが載っていますが、サイト名のテキストがどうしてもロゴの垂直方向の真ん中に配置されない、ヘッダー画像の右側にメニューを表示したいなど、制作時にありがちな問題の根本を解決することができ、大変勉強になる内容です。
難易度:★★☆☆☆

CHAPTER2 記事

記事

基本的な記事のレイアウトを学ぶことができます。画像とテキストの回り込みの関係などが図で明快に示してあるため、こうしたいと思ったデザインを簡単に実現することができるようになります。
また、font-sizeとline-heightの関連が細かく記載されてあります。例えば、font-size=14px, line-height=1.6と指定した場合、行の高さは22.6pxになることの理由を明確に理解することができます。
難易度:★☆☆☆☆

CHAPTER3 メニュー

メニュー

誰でも一度は悩んでしまうメニューの作り方が数パターン紹介されています。本書が優れているのは、ピクセル単位で理論的に説明がなされている点です。例えば、メニューの左にアイコンを設けたい場合、何ピクセルマージンを取れば良いのか、場当たりではなく理論的にこうだからこのピクセルが必要だ、といったように応用が利く作りになっている点は大変素晴らしいと感じました。
難易度:★★★☆☆

CHAPTER4 フッター

フッター

フッターの作成方法です。フッターに限らず全ての項目はパーツになっているため、組み合わせることで一つのページが簡単にできてしまいます。こうした部品化の動きはどんどん浸透されていってほしいものです。
難易度:★★☆☆☆

CHAPTER5 その他

記事

ボタンやフォーム、テーブル、段組の方法を説明されています。フォームは、特に余白などの考え方が複雑で思った通りのデザインにならないと嘆いている方は多いとお見受けします。恥ずかしながら私もその中の一人でした。しかし、本書を読むことで嘆き組から脱却することに成功しました。本書のフォームの余白、綺麗なボタンの作り方の説明はそれだけ秀逸だと言えます。
難易度:★★★☆☆

CHAPTER6 デザイン

記事吹き出し型の枠で囲むデザインや、枠と見出しを一体にしたデザインの制作方法が紹介されています。枠の角を丸く、吹き出し部分を作成するなど細かいピクセル調整が必要になりますので、比較的本章は難易度が高いです。:before、:afterなど、ある程度CSSの前提知識が必要な章だと言えます。
難易度:★★★★☆

CHAPTER7 Bootstrapを利用したページ作成

Bootstrapの導入方法から各パーツの配置方法まで、完成までの一連の流れが紹介されています。本章を実践することで、BootstrapでのWEB制作方法はある程度身につけることができるでしょう。加えて、ここまでの章で学んだパーツの組み込みが中心となるため、過去の学習内容の復習にも繋がるため、確実に自分の手でコードを書くことをオススメします。
難易度:★★★★☆

CHAPTER8 Foundationを利用したページ作成

CHAPTER7と同じページを、Foundationで作ろうという章です。私はBootstrap派なのでこの章は流し読みしかしておりませんので割愛させていただきます。
難易度:評価なし

CHAPTER9 フレームワークを利用しないページ作成

フレームワークを使わない方法も紹介されています。本章を読むことで、いかにイチからページを作ることが大変で手間がかかるものかということが実感として現れます。CSSフレームワークを使わないWEB制作はあり得ない!とまで私は感じました。それほど本書の内容は強力なものだと考えています。
難易度:★★★★★

CHAPTER10 レシピ

いわゆるサンプルサイトの解説の章です。しかし、ただの解説ではありません。ここまでで学んだパーツを再利用して全て作成されていますので、このパーツはこういう風に実際のサイトでは使うんだ、ということが分かるようになり、引き出しが広がったと感じています。
参考までに、以下に制作できるサイトのイメージ画像を以下に掲載します。本書をマスターすれば以下のレベルのサイトは作れるようになるということです。
しかも手間をかけずに。
難易度:★★★☆☆

RECIPE01 プロモーションサイト

プロモーションサイト

RECIPE02 プロモーションサイトのコンテンツページ

プロモーションサイト2

RECIPE03 ビジネスサイト

ビジネスサイト

RECIPE04 ショップサイト

ショッピングサイト

まとめ

長くなってしまいましたが、あまりの良書に私の手も止まらなくなってしまいました。
本書の優れているのは「ただこう書けばこのデザインが作れますよ」という本なのではなく、「このデザインを実現するにはマージンが○ピクセル必要だ」といった情報が図解かつ論理的に文章でも説明がされている点です。なぜこのコードを書けばこのデザインになるのかというところまで突き詰めた本は少ない印象ですので大変貴重な本です。
是非この体験をあなたにも味わっていただきたい、そう強く願っています。

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)
作者:エ・ビスコム・テック・ラボ
出版社:マイナビ
発売日:2014/3/20
icon_store_amazon
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す