11エッセンシャルウェブデザインブック
公開: 2021-03-03ブログの投稿、雑誌、オンラインコースは、Webデザインを学ぶための優れたリソースです。 実際、彼らはおそらく、知識のギャップを埋めたり、何かをブラッシュアップしたりするときに、ほとんどの人が最初に行く場所です。 しかし、本は深い基礎研究に適した媒体です。 彼らの著者は、本質的なアイデアを紹介し、体系的な方法でそれらに基づいて構築するために、記事または一連の記事よりもはるかに多くの時間とスペースを持っています。 そしてこのため、デザイナー(経験豊富なベテランと真新しい初心者の両方)がウェブデザインの本を読む必要が常にあります。
私たちのYoutubeチャンネルを購読する
借りたり購入したりする11のWebデザインブック
これらの本は、デザイン理論やアクセシビリティからCSSやJavaScriptまで、さまざまなWebデザインのトピックをカバーしています。 ウェブデザインにはさまざまなサブスキルが関係しているので、あなたに最適な本は、あなたが最も興味を持っているニッチに焦点を当てます。飛び込みましょう!
注:価格は、この記事の執筆時点での本の最低価格版のものであり、最も近いドルに切り上げられています。
Webデザインの学習:Jennifer RobbinsによるHTML、CSS、JavaScript、およびWebグラフィックスの初心者向けガイド

1冊の本から始める場合は、ここから始めてください。 ロビンズガイドには、5つの主要部分、25の章、および多数のサブ章があります。 あなたは飛び込んで、最終的にウェブデザインのプロ、または少なくとも非常に精通した初心者を出現させるでしょう。 これについては経験は必要ありません。実際に行ったテスト全体のクイズでは、重要な概念を学びます。 そして、あなたがウェブデザインについて1つか2つのことを知っているとしても、この本はまだ価値があります–それはおそらくあなたが忘れたか、または決して学んだように思われなかったいくつかのことをあなたに教えるでしょう。
注目すべき章は次のとおりです。
- それは村を取ります(ウェブサイト作成の役割)
- Webページの構造
- スピードの必要性(サイトパフォーマンス)
- 良いページが悪くなるとき
- アンダースコアおよびその他の「装飾」
価格:家賃に12ドル| 詳しくは
ジェイソン・ビード、アレックス・ウォーカー、ジェームズ・ジョージによる美しいウェブデザインの原則

この本は、ウェブページを作成する方法やそれに要素を追加する方法だけでなく、仕事に取り掛かる前にデザインを選択する方法も説明しています。 たとえば、カラーパレットを選択するには、色彩理論について学習します。 フォントの選択や画像の合法的な調達についても同じことが言えます。 そしてもちろん、サンプルプロジェクトのおかげで、カバーされている戦略を適用する方法もわかり、すぐに練習を開始できます。
注目すべき章は次のとおりです。
- 良いデザインの定義
- 色彩理論101
- 建物のテクスチャ:ヴィンテージ、パターン、着用、ノスタルジックなスタイル
- 適切なフォントの選択
- 正当な画像ソース
価格:家賃に17ドル| 詳しくは
UX Design 2020:TheoFarringtonによるユーザーエクスペリエンスの究極の初心者向けガイド

この本の一部はプロのユーザーエクスペリエンス(UX)デザイナーとしての仕事に専念していますが、UXデザインについてWebデザイナーに教えることを目的としています。 はい、高品質のUXデザインのWebサイトは、訪問者にとって使いやすいものです。 ただし、それだけではありません。ユーザーの生活を向上させることもできます。
これについて考えてみてください。誰かがオンラインで地元の病院からの情報を探しています。 UXを念頭に置いて、サイトはナビゲートしやすく、関連情報が上に表示されます。 ユーザーは、医師を見つける方法や最寄りの病院の支店の場所を正確に知ることができます。 彼らは約束を要求することさえできるかもしれません。 ウェブサイトはナビゲートしやすいだけでなく、すばやく移動することは、医療危機の最中に誰かを助けることを意味します。
注目すべき章は次のとおりです。
- UXとは何ですか? (インターフェース、製品、コンテンツ、サービス、スペース)
- UXデザインの7つのゴールデンルール
- あなたの視点とユーザーの視点
- 人間の行動と動機
- UXデザイナーは何をしますか?
価格: $ 10 | 詳しくは
UXの法則:ジョン・ヤブロンスキーによるより良い製品とサービスを設計するための心理学の使用

この本は、心理学とデザインのさまざまな法則と原則を最初に説明することにより、WebデザイナーがUXを改善するのに役立ちます。 全体として、「なぜユーザーは特定の方法で反応するのか…」で始まる多くの質問に答えます。心理学を理解することはデザインスキルのようには聞こえませんが、そうです。 あなたの目標は、ユーザーにアピールすることです。つまり、ユーザーのように考え、ユーザーが行動する前にどのように行動するかを知ることです。
注目すべき章は次のとおりです。
- ヤコブの法則(視聴者がよく知っている他のサイトと同様のサイトを設計する)
- ピークエンドの法則(小さな変更は大きな影響を及ぼします)
- 美的-使いやすさの効果(ユーザーが使いやすさの観点から美的に心地よいデザインをどのように認識するか)
- Doherty Threshold(コンピューターとユーザーは速いペースで相互作用する必要があります)
- デザインにおける心理学の原則の適用
価格: $ 27 | 詳しくは
Web Design Playground:HTML + CSS PaulMcFedriesによるインタラクティブな方法

この本の焦点はHTMLとCSSにありますが、その名前が示すように、さまざまなWebデザイン要素を幅広く取り上げています。 また、技術に精通している必要がある場合、または少なくとも技術に精通していることに関心がある場合でも、このトピックの概要を必要とする初心者を対象としています。 プロジェクトは有益であるだけでなく、実用的であるため、本を読み終えたら、ホームページ、ランディングページ、ポートフォリオページ、ギャラリーを作成できます。 さらに、この本には、コードをテストするために使用できる実際のインタラクティブなWebデザインプレイグラウンドが付属しています。
注目すべき章は次のとおりです。
- フローティング要素とポジショニング要素
- ランディングページの作成
- 画像と地形をレスポンシブにする
- Webデザインに色のスプラッシュを追加する
- ポートフォリオページの作成
価格: 34ドル| 詳しくは
Webデザインの基本:TerryFelke-MorrisによるHTMLとCSS

Webデザインの基本は、技術的には学生向けの教科書であり、HTMLおよびCSS戦略について説明しているだけでなく、Webサイトの色の選択やターゲットオーディエンス向けのデザインなどのソフトスキルにも取り組んでいるため、際立っています。
注目すべき章は次のとおりです。
- Webページの内部
- 構造要素を使った練習
- あなたのターゲットオーディエンス
- ウェブサイトの構成
- Webホストを選択してください
正直なところ、それらの章の例はその半分さえカバーしていません。 たとえば、この本にはレスポンシブレイアウトの基本というセクションがあり、その下には20近くのサブトピックがあります。 これらのサブトピックには、CSSフレキシブルボックスレイアウト、CSSグリッドレイアウト、およびメディアクエリを使用したレスポンシブグリッドレイアウトが含まれます。 ポイント? さまざまなHTMLおよびCSSトピックの要点を理解できます。 はい、この本はまだこの分野の紹介と見なされていますが、非常に徹底的で思慮深い紹介です。
価格:賃貸料$ 63 | 詳しくは

キースJ.グラントによる深さのCSS

この本にはたくさん詰め込まれています。 ただし、CSSのすべての領域に精通したくない場合でも、いくつかのサブトピックを深く掘り下げたい場合に役立ちます。 たとえば、アニメーションよりもタイポグラフィに関心があるかもしれません。気にしない章をスキップして、自分がしている章を掘り下げてください。
そして、あなたが知っている最大のCSSエキスパートになりたいのであれば、Grantが提供するベストプラクティスと巧妙な例を気に入るはずです。 この記事を読むと、デザインの直感と技術スキルの両方が向上します。 そしてボーナス:モバイルアプリを設計している場合にも役立ちます。
注目すべき章は次のとおりです。
- フロートを理解する
- レスポンシブデザイン
- パターンライブラリ
- 背景、シャドウ、ブレンドモード
- コントラスト、色、スペース
価格: $ 42 | 詳しくは
CSSの秘密:LeaVerouによる日常のWebデザインの問題に対するより良い解決策

これはCSSに焦点を当てた別の本で、Grantと同じトピックの多くをカバーしています。 ただし、特定の美学に深く関わっていることに気付く場合があります。これにより、特定の要素に取り組む場合に適したものになる可能性があります。 たとえば、[地形]セクションには、ハイフネーション、ゼブラストライプテキストライン、円形テキストなどのサブセクションがあります。
注目すべき章は次のとおりです。
- Web標準:味方か敵か?
- リアルなテキスト効果
- 右カーソルの選択
- テーブルの列幅を使いこなす
- フレームごとのアニメーション
価格:賃貸料9ドル| 詳しくは
デジタル世界のための包括的設計:レジーン・M・ギルバートによるアクセシビリティを念頭に置いた設計

ターゲットオーディエンスを絞り込むことは価値のある追求ですが、アクセスできないWebサイトがあるため、それらのセグメントを(偶然であっても)除外したくありません。 デジタルワールドのインクルーシブデザインでは、ソリューションを必要とする人々がWebサイト(およびモバイルアプリなどの他のテクノロジー製品)にアクセスできるようにする方法を学びます。 この本の説明はそれを最もよく示しています。「あなたの製品を使用している可能性のあるすべての潜在的なユーザーについて考えてください。 彼らは視覚障害者である可能性がありますか? 運動能力が限られていますか? 耳が聞こえない、または難聴ですか? この本は、障害を持つ人々が直面する多数のWebアクセシビリティの問題に取り組んでいます。」
注目すべき章は次のとおりです。
- 障害の医学的/社会的モデル
- 支援技術とは何ですか?
- 包括性/アクセシビリティの文化の創造
- バーチャルリアリティテクノロジーの使用
- 人工知能とアクセシビリティ
価格:賃貸料9ドル| 詳しくは
Web Design:The Evolution of the Digital World 1990 – Today by Rob Ford

Webデザイン愛好家や技術者にとって、この本は、インターネットの黎明期を体験するために生きていなかったとしても、記憶の道を歩むものです。 この視覚的な歴史の本は、ドラッグアンドドロップナビゲーションやビデオ統合からウイルスやモバイルのウェブサイトまで、インターネットに関連する事実上すべての最初のものを紹介します。 さらに、これらの初めてのサイトや要素の作成者からの洞察があります。 パイオニアの考え方に加えて、テクノロジーがどのように始まったのかを利用して、今日私たちが知っている最新のWebサイトに発展させることができます。
注目すべき章は次のとおりです。
- 2000年:ウェブが活気づく
- 2004年:元のウイルスサイトの年
- 2007年:フルスクリーンビデオが登場する年–iPhoneとともに
- 2014年:モバイルブラウザがデスクトップと同じくらい強力になった年
- 2017:WebがWebから進化した年
価格: $ 31 | 詳しくは
佳作:オースティンクレオンのアーティストのように盗む

これは間違いなくこのリストで最も古い本であり、2012年に出版されましたが、それを除外することはできませんでした。 アーティストのように盗む:クリエイティブであることについて誰もあなたに言わなかった10のことあなたがおそらく言うことができるように、簡単なウェブデザインの本ではありません。 ただし、Webデザイナー(プロまたはアマチュア)を含むすべてのクリエイティブにとって必読です。 それはあなたの芸術的なギアを回します、そして一口サイズの配達(逸話、ミーム、引用…)はあなたがそのすべての新しい動機を利用することができるようにこの本を素早く通り抜けることを容易にします。
注目すべき章は次のとおりです。
- 誰を始めるべきかがわかるまで待たないでください
- 秘密:良い仕事をして人々と共有する
- 素敵に:世界は小さな町です
- 退屈であること:それは仕事を成し遂げるための唯一の方法です
- 創造性は引き算です
価格: $ 8 | 詳しくは
Webデザインブックの選び方
どのウェブデザインの本を読むかを選択する方法があり、私たちが共有しようとしているヒントの多くは、上記のリストを構成するために続きました。 他の「最高の」本のリストを参照する場合は、次の点に注意してください。
最近発行された本を選択してください
本があなたが興味を持っているトピックの詳細な考察を約束しているとしても、その本が数年前に出版されたのであれば、努力する価値はありません。 このリストでは、2018年以降に出版された本にこだわっています。 私たちは、ウェブデザイン戦略が頻繁に変更されて、信頼できる関連性よりもはるかに遠くに公開されたものを作ることができないと感じています。 古くなった本には、現在は無関係な統計、アイデア、画像があり、リンクは機能しなくなります。
レイアウトと読みやすさに注意してください
Webデザインの専門家は、プレゼンテーションや読みやすさなどの詳細について1つか2つ知っている必要があります。 検討中の本に空白のページや不安定なテーブルなどの奇妙なレイアウトの問題がある場合は、赤旗を立てる必要があります。 また、言葉遣いが読みにくい場合は、本を再考してください。Webデザインの一部は一貫性があり、作成者は明確にコミュニケーションできる必要があります。
トピックが完全にカバーされているかどうかを判断する
あなたが選ぶウェブデザインの本は、表面をすくい取るのではなく、主題について深く掘り下げる必要があります。 トピックの概要だけが必要な場合は、「初心者向けガイド」のブログ投稿を検索できます。
本を読み終えるまでこれを理解するのは難しいですが、章のリストを一瞥することは良いスタートです。 限られた情報に固執するのではなく、トピックが主題のサブトピックとサブサブトピックに入っているように見えるかどうかを確認します。 また、一部の章またはサブ章が同じアイデアをカバーしているように聞こえる場合は、著者が完全な長さの本を埋めるのに十分な調査を行っていないことを示している可能性があります。
書籍として再パッケージ化されたブログ投稿に「いいえ」と言う
本を「書く」一般的な方法は、トピックに関するブログ投稿のコレクションを本に変えることです。 このタイプの本が価値がないというわけではありません。ただ、すでにそこにある情報に無料でお金を払う必要がないというだけです。 多くのウェブデザインの専門家は、おそらくあなたの電子メールアドレスと引き換えに、彼らのサイトから無料でダウンロードできるこのタイプの製品を手に入れるでしょう。 あなたが実際のお金を払っている本に関しては、著者のウェブサイトでまだ見つけることができない新しい情報だけを持っている本を探してください。
Webデザインブックの最終的な考え
あなたがウェブデザインについて知る必要があるすべてをあなたに教える1冊の本はありません。 そして、このリストのすべてのエントリを読む時間を見つけたとしても、そこにある情報の100%を知ることはできません。これは、設定するのが不可能な目標です。 ウェブデザインの世界は広く、複雑で、常に変化しています。 しかし、現在そして将来、あなたが最も興味のあるトピックに取り組むウェブデザインの本を見つけることは、知識に溺れるのではなく、あなたを業界のトップに保つでしょう。
ウェブデザインの本の世界に飛び込むための最後のヒント:一度に数冊で自分を圧倒するのではなく、1冊から始めましょう。 あなたは世界のすべてのウェブデザインの本を読むことは決してないでしょう、それで賢明なアプローチはそれを読んで、それからできるだけ多くを学び、あなたのウェブサイトにあなたができることを適用してそして次に進むことです。
[アーティスト名] /shutterstock.com経由の注目の画像
