デザイン初心者なWebエンジニア向け・デザインを学べる入門書7冊

Photo by John Nakamura Remy
こんにちは、谷口です。

エンジニアの皆さん、デザイン周りのことでWebデザイナーの方と揉めた経験はありませんか？

たとえば…

• マージンやカラーやフォントサイズなどを勝手に変えたら、デザイナーに注意された
• うまく入らないから1px変更しただけなのに、デザイナーに怒られた

みたいな話ですね。

デザインとシステムは切り離すことができないものですが、そのぶんエンジニアとデザイナーの間では、こうした細かいトラブルがよく起こります。

「1pxぐらいいいじゃん」と思うかもしれませんが、その1pxがグリッドシステムを崩しておかしなデザインになってしまい、サイト全体の信頼性が低下してしまうようなケースもあり得ます。

多くの企業のデザイン部門では、デザインガイドラインというコーディング規約みたいなものがあります。適当にサイズを変えたり実装したりするのは、コーディング規約を破って「インデントなんかどうでもいいじゃん」「変数名なんか好きな名前でいいじゃん」と言うようなものです。

「エンジニアにデザインの知識まで求めるな！」と思われるかもしれませんが、基本的なデザインの仕組みやルールを理解しておくだけでも、デザイナーとのちょっとしたトラブルや無駄なやりとりが減って双方が楽になるのですから、知っておいて損はありません。

というわけで今回は、弊社のデザイナーやデザインを勉強中のエンジニアに聞いた、エンジニア向けのデザイン入門書を7冊ご紹介します。

デザイン初心者のエンジニアやノンデザイナーの方の参考になればと思います。

「デザインとは？」という概念がわかる書籍

ノンデザイナーズ・デザインブック

ノンデザイナーズ・デザインブック [第4版]

デザインについて知りたい初心者はとりあえずこれ読んどけみたいな一冊ですね。

内容としてはレイアウトの4つの基本原則（近接、整列、反復、コントラスト）、色彩、タイポグラフィを扱っていますが、実はこれだけでデザインの基本的なセオリーを習得できます。で、このセオリーが理解できると、今まで漫然と見ていたWebサービスなどのデザインにも「根拠がある」のを認識できるようになります。

あと、巻頭の「ジョシュアツリーの悟り」がすばらしいので、まずは最初だけでも読んでみてください。（要約するとジョシュアツリーという特徴的な木なんて一度も見たことないと思っていたけど、実はそこらじゅうに生えていた…って話で、「知らなければそれを認知することはできない」という逸話です。）

フラットデザインの基本ルール

フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。

コンピュータ黎明期のスキューモーフィズムから、フラットデザインへ移行していった歴史的な背景や考え方の勉強になる本です。

ユーザーがコンピュータスキルを学習していった結果、操作に関する情報を付加する必要がなくなってフラットなデザインやシンプルなデザインに移行していった…という話なんですけど、「ユーザーに合わせたデザインを考える」のが一番重要であることがわかります。

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

「デザインなんてセンスがないとできないんでしょ」と思っている人に、そうではなくて「デザインは理論にもとづいてできている」と教えてくれる本です。

イラストが豊富で、よいデザインと改善すべきデザインの実例を示しながら、「なぜこのデザインがいいのか・悪いのか」を、デザイナーじゃなくてもわかる文章で解説してくれます。

「実際のデザインがなにで構成されているのか」「どうやってデザインができあがっていくのか」がよくわかります。

「目で見て楽しむ～」とある通り、デザイナーじゃなくても普通に眺めているだけで楽しい本なので、「デザインとか勉強したほうがいいんだろうけど気が進まない…」という人もとりあえず手にとってみてほしいです。

融けるデザイン

融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

デザインやUI/UXの概念を解説した本で、表面上のデザインだけでなく「誰のために、何のためにデザインするのか」といった話が書かれています。

インターフェイスの本質に触れつつ、インターフェイスデザインとは画面UIに限ったものでなく、インターネットやコンピュータをどのように人々の身体や活動に結びつけるかが重要である…といったことが順序立てて解説されています。

設計・実装寄りの書籍

「自分でデザインするわけじゃないけど、基本的なことを知っておきたい」という人は、上記のようなデザインの概念がわかる書籍だけでもいいかと思いますが、「サービスを個人開発することにしたから一人で全部作る」「スタートアップでまだデザイナーがいなくてとりあえず見られるものを作らないといけない」といった場合は、設計や実装に関する知識も必要になってきますよね。そんな場合におすすめの書籍も紹介しておきます。

Atomic Design

Atomic Design ~堅牢で使いやすいUIを効率良く設計する

アトミックデザインは、スケールしやすくメンテナンスしやすいUI開発手法のことです。（小さなレゴブロックを使って大きなものを作るように、小さな部品を組み合わせてページをデザインしていきましょう…という考え方の手法になります）

この書籍は、そんな感じでUIを小さなコンポーネント（部品）に分割し、それを組み合わせることでより大きなコンポーネントを作成したり、コンポーネントをレイアウトしてページを作成したりするデザイン・フレームワークについて書かれています。

かつては画面イメージからトップダウンにUI設計をする（ワイヤーフレームでレイアウトを決めてから細かいUIを作り込んだりする）のが一般的でしたが、Atomic Designでは、まずUIコンポーネントを作り、それを配置してページを作成するボトムアップな作り方をする…といった発想の転換をしています。（最近のWebの設計・開発手法はコンポーネント化を重要視する流れにあるので、将来的にはこれが自然な考えになるかもしれませんが…）

レスポンシブWebデザイン

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

レスポンシブデザインの基本が網羅されています。

レスポンシブデザインに対する考え方と実装方法がバランスよく書かれているので、レスポンシブデザイン入門者におすすめできる一冊です。

ただ若干古く、最近の開発手法には合っていない部分もあるかもしれない（全部自前で実装するのではなく、CSSフレームワークを使ったりする部分があるので…）ので、その辺は注意ですが、それでも「レスポンシブデザインがどんなロジックをもとに実現されているのか」という基本的なことを学べるいい書籍です。

完全に実装に関する書籍

これ以降はデザインを実装するのに必要な技術に関する書籍で「どうデザインするか」みたいな書籍ではないのですが、アクセシビリティは気をつけたいし、HTMLに落とし込むときはセマンティックに書けたほうがいいので紹介しておきます。

インクルーシブHTML+CSS & JavaScript

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

インクルーシブデザインに関する書籍です。インクルーシブデザインはWebアクセシビリティの一種で、たとえば小さい文字が見えない高齢者や目が見えない障害者の人も利用できるようにデザインするには…みたいな手法になります。多様なユーザー、多様なデバイスに対応できるようにデザインをしよう…という話ですね。

「見た目の美しさ」だけがデザインの範囲ではなく、ユーザーとWebシステムをコミュニケーションさせるためにWebデザインがあるのであって、スマホユーザーやスクリーンリーダーなどにもやさしいデザインを目指すべきであり、それを実現できるHTML・CSSやJavaScriptのデザインパターンとはどんなものなのか…ということが学べる書籍です。

6章の「ナビゲーション領域の設計方法」は一読の価値があるので、興味がわいた方はそこだけでも読んでみてください。

HTML5 スタンダード・デザインガイド

HTML5 スタンダード・デザインガイド ~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ (Web Designing BOOKS)

HTML5のリファレンス本です。

HTMLって、書こうと思えばどうとでも書けちゃう言語ですが、せめてセマンティックに書けるように仕様は理解しといたほうがいいですよね。この書籍はセマンティックな理解を深めるのに役立ちます。

ただ、2013年に出た書籍なので、現在はいくらかHTMLの仕様が変わっていたり、ブラウザの対応状況が異なっていたりする部分があるかもしれません。そのあたりだけ注意してください。

※HTML/CSS入門・JavaScript入門も！動画で学べるpaizaラーニング

動画でプログラミングが学べるpaizaラーニングでは、HTML/CSS入門編・JavaScript入門編などのWebデザインに役立つ入門レッスンを公開しております。

もちろんPython、Java、C言語、C#、PHP、Ruby、SQLなど人気のプログラミング言語のレッスンも多数ありますので、ぜひごらんください。

まとめ

エンジニアの中には「自分にデザインセンスはないから」と思い込んでいる人も多いですが、こうしたデザイン関連の書籍を読むと、デザインはセンスで作られているのではなく、一定のセオリーがあることがわかります。

こうしたセオリーを少しでも知っておけば、自分で何かツールやサービスを開発したくなったときにも活かせますし、業務で管理画面などを作ることになったときも使いにくい画面構成を回避できます。

プログラミングで「動けばOKではなく、よいコードを書く」のが求められるように、Web開発に関わるのであれば「よいWebデザインのセオリー」も少しは知っておくと、何かとスムーズに進められるかと思います。

---

　
paizaラーニングでは、Python、Java、C#、Ruby、C言語、PHP、SQL、JavaScript、HTML/CSSなど、人気言語の動画レッスンを公開しています。

詳しくはこちら

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら