Web担 オススメの課題図書

「Webクリエイターボックス」のManaさんオススメ! 今後のWebデザイン制作に影響を与える6冊

オススメの課題図書。今回は、「Webクリエイターボックス」を運営するManaさんに、最新のコーディングスキルやWebデザインの考え方など、今後のWebサイト制作に役立つ書籍を教えてもらった。

業界の第一線で活躍する人にオススメの書籍を聞く本連載。今回は、Webメディア「Webクリエイターボックス」を運営するManaさんに、最新のコーディングスキルやWebデザインの考え方など、今後のWebサイト制作に役立つ書籍を教えてもらった。

WebデザイナーのManaさん。「Webクリエイターボックス」を運営している

海外でWebデザイナーとして10年以上活躍

2010年から「Webクリエイターボックス」で、WebデザインやWebサイト制作のトレンドを紹介しているManaさん。10年ほど、カナダ、オーストラリア、イギリスの3カ国でWebデザイナーとして働いた経験をもつ。その後、現在は帰国して、Webサイト制作業務のほか、オンラインスクールやプログラミングスクールでの講師、イベントの講師、記事執筆などの業務を中心に活動している。

海外3カ国で働いてみて、同じ英語圏であっても、国や土地柄によって求められるスキル、デザインが異なることがわかったという。

3カ国での経験から、流行りのデザインを採用するよりも、その時々で何が求められているのか調査をしっかりして、表現を考えるようになりました。

たとえば、海外のサイトで「日本らしさ」を表現してほしいと言われ、私は侘び寂びのグレーがかったような色合いをイメージしました。しかし、相手が求めていたのは、アニメのようにポップで明るい色合いでした。相手が何を求めているのか、具体的に深掘りしていくことが重要です(Manaさん)

Webクリエイターボックスは、運営を開始してからすでに15年になる。「最初は読んでくれる人の反応を原動力にしてきたが、今では当たり前のように定期的に更新している」とManaさん。Webクリエイターボックス内でもさまざまな書籍を紹介している。

今回はそんな書籍のなかから、スキルアップにつながる書籍や、Manaさんの考え方を変えるほどの衝撃を受けた書籍を中心にピックアップしてくれた。

新しい技術を使って、スキルアップするための2冊

2024年にWebクリエイターボックスのリニューアルを行ったというManaさん。そのときに参考にしたのが次の書籍だ。書籍では、Webフレームワーク「Next.js」と、国産ヘッドレスCMS「microCMS」を使って、モダンWebサイトの制作についてステップバイステップで紹介している。

1冊目
『Next.js+ヘッドレスCMSではじめる! かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた』
(柴田和祈、森茂洋、野崎洋平、千葉大輔:著 翔泳社:刊)

Next.jsは海外で流行っている技術。本書はゴリゴリのプログラミングの書籍で一見難しそうに思えるが、この本の内容を一通り理解して手を動かせば、誰でもサイトをつくれるという。

たとえば、ブログやWebサイト内の検索機能は簡単そうに見えて、裏で複雑なことをしていますが、本書に記されているコード通りに実装してみれば動きます。ほかにもニュースページ、問い合わせなど、よくある機能が一通りそろっているので、気軽に試してほしいです。私もこの本に沿ってサイトをつくってみた後に、カスタマイズして自分らしさを出しました(Manaさん)

表紙をみると、馴染みのない単語が並んでいるようだが、「実際にやってみるとそんなに難しくはない」とManaさん。「興味があるのに食わず嫌いをしていたらもったいないので、ぜひ自分で実装してみてほしい」と話す。

2冊目
『Tailwind CSS実践入門 エンジニア選書』
(工藤智祥:著 技術評論社:刊)

もう1冊、スキルアップに役立つ書籍として紹介してくれたのが、本書だ。Tailwind CSSは、海外では当たり前になりつつある、ユーティリティファーストのCSSフレームワークだ。

Tailwind CSSは、これまでのCSSのアプローチと違って、あらかじめ用意されたCSSクラスを要素に当てはめていくので、素早くスタイリングができます。最初に紹介したNext.jsなど、最近の技術仕様を採用するのであれば、Tailwind CSSを使ったほうが管理しやすいということで、広まってきています。
公式サイトが英語のみなので、興味があっても使い方がわからないという方は、本書を読んでみるとよいでしょう。基本的なところから学べます(Manaさん)

読み物として楽しめ、知的好奇心が満たされる2冊

3冊目
『配色の教科書-歴史上の学者・アーティストに学ぶ「美しい配色」のしくみ』
(色彩文化研究会:著 城一夫:監修 パイインターナショナル:刊)

3冊目は、初心者、上級者などスキルに関係なく楽しめる配色の本だ。

デザインに配色の知識は欠かせませんが、この本には基本的な配色が説明されているだけでなく、配色理論を生み出した人たちの歴史も書かれていて、読み物としても楽しめます。紀元前の色の発見から、なぜ色を認識できるのかという科学的な話、現在に至るまでの配色の流れなどが全部詰まっているので、読み終えるともっと色を好きになったり、色について知りたくなったりすると思います。大好きな1冊です(Manaさん)

「まえがき」には、Harmony(調和)という単語の由来がギリシャ神話にあることが紹介されており、「そこからすでにおもしろい!」とManaさん。

4冊目
『悲劇的なデザイン あなたのデザインが誰かを傷つけたかもしれないと考えたことはありますか?』
(ジョナサン・シャリアート、シンシア・サヴァール・ソシエ:著 高崎拓哉:訳 ビー・エヌ・エヌ新社:刊)

そして、4冊目も読み物として楽しめる1冊。ただし「デザイン初心者にはショッキングな内容になるかも。心にゆとりがあるときに読んでほしい」とManaさんは前置きした。

医療現場で、間違いやすいデザインが使われて患者が死んでしまう事例などが紹介されています。見た目がよいだけ、かわいいだけのデザインは、人を傷つけたり悲しませたり、最悪の事態を引き起こす可能性があります。

この本は、デザインによる悲劇を濃縮しているので、デザインを目指す人は一度読んでおくとよいと思います(Manaさん)

本書では、悲劇的な事例を紹介しながら、そのとき、どんなデザインにするべきだったかという改善案も書いてあるので、学びもあるという。自分のデザインの責任を実感できそうだ。

「読書」することの楽しさを知った1冊

5冊目
『インタフェースデザインの心理学 第2版 ―ウェブやアプリに新たな視点をもたらす100の指針』
(Susan Weinschenk:著 武舎広幸、武舎るみ、阿部和也:訳 オライリージャパン:刊)

5冊目は、Manaさんに一番影響を与えたという1冊。人を動かすインタフェースデザインについて、人間の思考や行動、心理から分析している。なお、Manaさんが読んだのは2012年の初版だが、2021年に第2版が出版されている。

実は昔は本を読むのが嫌いで、読書の習慣もなかったんです。でも、この本を一気に読むことができたのをきっかけに、読書が好きになりました。Web関連、デザイン関連の書籍など、自分が好きな内容であれば読めることがわかったので、それ以来たくさんの書籍を読んでいます。

今ではWeb関連以外の小説なども含め、さまざまなジャンルの本を読むようになりました(Manaさん)

今回の取材中、Manaさんの背後にはたくさんの書籍が並んだ本棚があった。Manaさんは、Web・デザインに関連する書籍については、ブログでも紹介記事をアップしているので、こちらの記事も参考にしてほしい。

Manaさんの最新刊! 動くWebサイトをつくっちゃおう

6冊目
『CSSとJavaScriptで作る動くUIアイデアレシピ』
(Mana:著 インプレス:刊)

最後に紹介するのは、2025年4月15日に発売されたManaさんの最新刊となる書籍だ。HTML、CSS、JavaScriptを使って、動きのあるページを作成するためのアイデアが紹介されている。HTML&CSSの基礎を終了し、ステップアップを目指す方をターゲットにした本だ。

本書では、見本通りつくっていくだけではなく、カスタマイズのポイントも提案し、「自分なりにつくり変えられるようにしている」とManaさん。

たとえば、Chapter 4 Lesson 5の「ホバーで大きく表示」では、基本の記述例に加えて、表示倍率の変更や回転を加えるカスタマイズ方法も紹介しています。また、実装して終わりではなく、実装時の注意点も意識してもらえるように書いています(Manaさん)

Chapter 4 Lesson 5の「ホバーで大きく表示」

書籍以外の情報源で、動きの早いWeb業界のトレンドを抑える

日々情報発信を続けているManaさんは、海外の情報を含め、さまざまなトレンドを追い、学び続けている。情報源としているサイトは次のようなものだ。

Dev.Communityhttps://dev.to/
Zennhttps://zenn.dev/
Qiitahttps://qiita.com/

Dev.Communityは、情報が早く、比較的詳しく掲載されているので、興味のあるジャンルを一通りチェックしています。日本の情報をみるときには、ZennやQiitaを見ています(Manaさん)

ほかには、自らPodcastを配信していることもあり、さまざまな人のPodcastを聞くことも多いという。また、自身がカンファレンスに登壇するだけでなく、参加して新しい情報に積極的に触れているということだ。

◇◇◇

Manaさんは、スキルアップにつながる最新技術の書籍や読み物としても楽しめる書籍を紹介してくれた。自社サイトで最新技術を試しているところも、ずっと最前線にいられる理由だと感じた。最新書籍では、要素ごとに細かくコードを紹介しており、すぐに真似できるアイデアが盛り沢山となっているので、ぜひ手にとってほしい。

Mana

Webデザイナー

日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダ、オーストラリア、イギリスの企業で、Webデザイナーとして働きました。
ブログ『Webクリエイターボックス』の中の人。
現在はWebサイト制作の書籍執筆、インストラクターとして教育関連で頑張っています。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

今日の用語

テキストボックス
Webページなどで用いられるテキストボックスは、ユーザーがテキストを入力するため ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]