プログラマ行進曲第二章

主にソフトウェア関連の技術をネタにした記事を執筆するためのブログ

『Webデザイン良質見本帳』を読んでWebデザインの基本的なスタイルを学んでいる

「ペース的に間に合わないのではないか?」と思いつつ、2018年の抱負の一つに「[UI|UX|Web]デザインを勉強して、自分でプロトタイプを作れるようにする」というものがあるので、思い出しては少しずつWebデザイン関係のことを調べたり、Adobe XDなどツールの使い方を勉強しています。

ただ、Webデザインやデザイン一般のことを勉強していると、「(どの場合でも大切だけど)『じゃあ具体的にこういうサイトを作りたいときはどうすればいいの?』と思ってしまうくらいに抽象度が高い事柄」か「『これってデザインの勉強というよりか、デザインツールの使い方を覚えてるだけでは?』と思うくらいにツールの使い方に寄りすぎている事柄」がよく目について、Webサイトを構築する際に情報設計を含めて抽象的過ぎず、かといって細々とした実装寄り過ぎないやり方や実例を提示してくれる所がほぼ見つからなくて難儀しています。

プログラミングでたとえると「各デザインパターンとそれを適用している具体的で短めな実装例」が欲しいのですが、書籍やサイトを色々探していても自分にぴったり合うものがないという状態です。

そんな中見つけた本が(100%ではないにしろ)割と自分の要望にあっていたので紹介します。

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

この本はタイトルの通り、良質なWebデザインのサイトをカタログ化した本です。

私がこの本を読んでいてためになったのは、「配色から考えるデザイン」「業種・ジャンル別から考えるデザイン」など、ある一定の切り口から考えたデザインの実例を提示してくれているところと、提示されている多くの実例で 配色の種類をRGB値を含めて提示してくれているところです。

たとえば医療・病院サイトの場合とアートフェスなどのイベントサイトの場合ではサイトの作り方の違いが出てくると思いますが、この本はそういった違いを一覧化してそれぞれのサイトの場合の特色をわかりやすく提示してくれてるところが私にとってはって有用なポイントでした。

加えて、提示されている各実例に使われている色の種類がRGB値で提示されているので、配色のベースカラー、メインカラー、アクセントカラーの組み合わせ方の参考にもなるところが嬉しいポイントでした。

配色の理論的なこともおさえつつ(Web)デザインのことを学んでいくのは素人には結構骨が折れる作業だと思いながらやっていますが、少しずつ進めていくよう、やっていきたいと思います。