こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
今回は、Webデザインのアイデア・
見本となる本をまとめた記事になります。
この記事の目次
Webデザインの
アイデア・見本の書籍・本
この記事では、Webデザイン中級者向けの
デザインアイデア・見本本を紹介します。
Webデザインのアイデア等が欲しい方は、
まず次のに紹介するどれかから選択して
参考にするのがおすすめになります。
多くのWebデザインでの制作においての
デザインアイデアが見つかると思います。
特に、次のような人は読んでみて下さい。
- Webデザインの
デザインアイデアを探している人 -
Webデザインの
制作スキルをアップさせたい人 - Webデザイナーを目指している人
なお、デザイン書籍等を1ヶ月無料で読むなら、
Amazonの「Kindle Unlimited」がおすすめ。
Webデザインのアイデア・
見本となる書籍・本まとめ
「アイデア・テクニック本の一覧」
| 系統 | 書籍名 |
| Webデザイン見本 | 目的別に探せて、すぐに使えるアイデア集 Webデザイン良質見本帳 [第2版] |
| Webデザイン アイデア |
現場で使える Webデザインアイデアレシピ |
| 動くWebデザイン アイデア |
デザインのネタ帳 コピペで使える動くWebデザインパーツ |
| 動くWebデザインアイディア帳 | |
| 動くWebデザインアイディア帳 実践編 | |
| Webデザイン事例 | 2万回のA/Bテストからわかった 支持されるWebデザイン事例集 |
| 企業のWebサイト事例 | Webデザインのロジック 同業者に語りたくなるコンテンツイメージと ブランディングのひみつ |
下でそれぞれ詳しく紹介しています。
目的別に探せて、すぐに使えるアイデア集
Webデザイン良質見本帳 [第2版]
色んなテーマ別のWebデザインを見れて
特徴、構成、見せ方などのテクニックが
わかるWebデザインの見本帳になります。
| タイトル (書籍名) |
目的別に探せて、すぐに使えるアイデア集 Webデザイン良質見本帳 [第2版] |
| 価格 | ¥2,640 (税込) |
| 発売日 | 2021/12/22 |
| 特徴 | ・Webデザインの見本、参考イメージ、 ターゲットに合わせた配色が紹介される。 ・429点の厳選した良質なWebサイト掲載。 ・目的別、テーマ別で配色を学べる。 ・ただ見本が載っているのでなくて、 何がどう良いのか?、どんな表現方法があり ポイントはどこか?等についてきちんと解説 ・デザインパターン、レイアウトも豊富。 ・具体的にコードについては説明なし |
| 内容 | 0 Webデザインの基礎知識 1 印象から考えるデザイン 2 配色から考えるデザイン 3 業種・ジャンル別から考えるデザイン 4 レイアウトや構図から考えるデザイン 5 素材・フォント・プログラムを使った デザイン 6 トレンドのデザイン 7 パーツ別デザイン |
| おすすめの人 | ・どんなWebデザインの配色表現をするか 迷っている人 |
| その他 |
現場で使える
Webデザインアイデアレシピ
著者がこれまでに発信してきた
Web制作Tipsを一冊にまとめて、
具体的な実装方法を解説した書籍。
| タイトル (書籍名) |
現場で使える Webデザインアイデアレシピ |
| 価格 | ¥3,058 (税込) |
| 発売日 | 2022/1/31 |
| 特徴 | ・Twitterでは紹介しきれなかった デザインアイデアを画像とともに詳しく解説。 ・Web制作でよく使われる「背景・画像・ 写真装飾」「見出しやテキストの装飾」 「レイアウト」「ボタンデザイン」と 4つのデザインカテゴリーがメイン。 ・用途に合わせたデザインパターンを70種紹介 ・デザインに合わせたコーディングが学べる。 ・コードの短縮化やモダンブラウザの 新旧バージョンへの対応も解説。 ・紹介したコードはすべて購入者特典で配布。 |
| 内容 | Chapter1 背景・画像・写真装飾 Chapter2 見出しやテキストの装飾 Chapter3 レイアウト Chapter4 ボタンデザイン Chapter5 お問い合わせフォーム Chapter6 現場で使えるWebツールと 素材配布サイト Chapter7 Google検索結果ページへの対策 |
| おすすめの人 | ・HTMLやCSSの基礎を学んできて、 次のステップを踏みたい人 ・独学で学んできたので、 他人のコードを見てみたい人 ・無駄なコードを省き、短縮化させたい人 ・よく見かけるあのデザイン、 どう実装すればいいのか分からない人 |
| その他 |
デザインのネタ帳
コピペで使える動くWebデザインパーツ
そのまま使える
Webデザインのソースコード集。
| タイトル (書籍名) |
デザインのネタ帳 コピペで使える動くWebデザインパーツ |
| 価格 | ¥3,080 (税込) |
| 発売日 | 2022/3/18 |
| 特徴 | ・サンプルのソースコードをコピー& ペーストすれば、そのまま使える。 ・作るのが意外に難しく汎用性が高い 「動く」パーツを豊富に収録。 ・構成はまず基本形となるのサンプルがあり、 続くステップアップとしてカスタマイズ例を 紹介する流れ。 ・カスタマイズ例の部分は、ご自身でコードを 変えてオリジナル要素をプラスする際の ヒントとしても役立つ。 ・ギャラリーやスライドショー、フォームや テーブル、SNSのアイコンなどいった細かな パーツのアイデアもあり。 ・収録サンプルは完成データをDL配布。 |
| 内容 | Chapter 1 ナビゲーション Chapter 2 ボタン Chapter 3 スライドショー/ギャラリー Chapter 4 背景/コンテンツ Chapter 5 テーブル/フォーム/リスト Chapter 6 テキスト Chapter 7 画像/動画/SNS |
| おすすめの人 | ・Webサイトに今風の“動き”を取り入れたい人 ・HTML・CSSのコーディング経験が浅い人 ・ソースコードをイチから書く手間を 減らしたい人 |
| その他 |
動くWebデザインアイディア帳
サイトを動かす第一歩を踏み出すための
動きの逆引き事典。
| タイトル (書籍名) |
動くWebデザインアイディア帳 |
| 価格 | ¥3,080 (税込) |
| 発売日 | 2021/2/27 |
| 特徴 | ・近年のWebサイトで使用されている 基本的な動きの原理や仕組みをサンプル コードと共に紹介。 ・19種類の既往から探せて、すぐに使える。 ・専用サイトから簡単にコードをコピー& ペースとして利用できる。 |
| 内容 | 01 サンプルサイトから見る機能に関わる動き 02 「動くWebデザイン」の基礎知識 03 Webサイトの動きを実現する仕組みと準備 04 ローディング・画面遷移 05 ナビゲーション・メニュー 06 ギャラリー・動画 07 ボタン・検索 08 ページトップ・ページ内リンク 09 グラフ・補足・関連情報の表示 |
| おすすめの人 | ・動くWebデザインの参考書が欲しい人 |
| その他 |
動くWebデザインアイディア帳 実践編
「サイトを印象付ける基本の動き」
＋「世界観を作る動き」を集めた
現場で使える実践サンプル集。
| タイトル (書籍名) |
動くWebデザインアイディア帳 実践編 |
| 価格 | ¥2,860 (税込) |
| 発売日 | 2021/7/31 |
| 特徴 | ・好評の「動くWebデザインアイディア帳」の 姉妹本。 ・実際にWebサイトの印象を決定付けることが できる動きについて解説。 ・専用サイトから簡単にコードをコピー& ペースとして利用できる。 |
| 内容 | 01 サンプルサイトから見る印象に関わる動き 02 「動くWebデザイン」の基礎知識 03 Webサイトの動きを実現する仕組みと準備 04 最低限覚えておきたい現れ方 05 背景の動き 06 エリアの動き 07 画像リンクの動き 08 テキストの動き 09 イラスト・オブジェクトの動き |
| おすすめの人 | ・前書の「動くWebデザインアイディア帳」を 読んだ人 |
| その他 |
2万回のA/Bテストからわかった
支持されるWebデザイン事例集
鬼石真裕/KAIZEN TEAM 技術評論社 2018年07月24日
この本も実際のA/Bテストのデータから、
優秀なWebデザインの事例を挙げている
貴重なデザイン情報参考の書籍の一冊。
| タイトル (書籍名) |
2万回のA/Bテストからわかった 支持されるWebデザイン事例集 |
| 価格 | ¥2,728 (税込) |
| 発売日 | 2018/7/25 |
| 特徴 | ・2万回という大量の事例から厳選された A/Bテストの実例を元に、どのような UIデザインが支持されているかを解説。 ・クレディセゾン、SBI証券、ヤフー、 大東建託、九州旅客鉄道等の厳選35事例掲載 ・実は少しのデザインの違いがあるだけで、 反応や影響が大きく変化することを学べる。 |
| 内容 | 第1章 なぜA/Bテストが必要なのか 第2章 A/Bテスト事例集 |
| おすすめの人 | ・支持されるWebデザインを知りたい人 |
| その他 |
Webデザインのロジック
デザインとその論理的なアプローチ方法を
テーマに掲げたWebデザイン本。
| タイトル (書籍名) |
Webデザインのロジック 同業者に語りたくなるコンテンツイメージと ブランディングのひみつ |
| 価格 | ¥2,640 (税込) |
| 発売日 | 2018/2/26 |
| 特徴 | ・Webサイトにおいてどのような仕掛けや 見せ方で、PVやユーザー数を増やしているか デザインとコンテンツ構成の面から解説。 ・実際のWebサイトの事例を見ながら、 Webデザインの意図を学べる。 ・企業のWebサイトのデザイン過程を 知ることができる。 |
| 内容 | 黒歴史トリオ (日清食品)、 まるまるまるもりプロジェクト (宮城県丸森町)、 佐賀県×刃牙 コラボサイト、 寺西化学工業 (マジックインキ)、 PUBIC HAIR GROOVING、 SAPIX YOZEMI GROUPの英検対策講座、 Type Square (モリサワ)、 青汁サウンドノベル緑葉館の夜、 MORE THAN PROJECT、 MAISON DE FROUGE ICHIGO NO OMISE (メゾン・ド・フルージュ) 他 |
| おすすめの人 | ・Webデザインのロジックを学びたい人 |
| その他 |
まとめ
以上がWebデザイン中級者向けの
アイデア・見本になる本でした。
なお、Webデザイン関連の書籍は、
こちらの記事にまとめています。
また、イラストやデザイン関連の書籍は、
下の記事に一通りまとめています。
