WEBサイトを作成するに当ってデザインに入門した
はじめに
ひょんなことから知人にホームページの作成を依頼された。話を聞く限りでは複数ページで構成される静的ページとお問い合わせページがあれば問題なさそう。知人としてはホームページにお金をかけたくないということもあり、WordPressなどのCMSを使わずに、単純な静的サイトで構成することにした。
静的サイトの作成となると、ウェブデザインの知識が大きなウェイトを占めることになる。私はウェブデザインどころかデザイン自体も初心者同然であるが、一人でホームページ作成を全て担当するというのも中々ない良い機会なのでデザイン部分の勉強がてらやってみることにした。
デザイン周りで自分が勉強しておいた方が良いと考えた内容は以下の通り。
1. 見た目だけではないもっと上位概念レベルでのデザインについて
2. 主に見た目部分に関するデザインについて
3. CSS、HTMLの基礎を固めたい
4. CSSのデザインレベルのテクニックを知りたい
5. 開発・保守しやすいCSSについて
6. Webページの素材作成
書籍紹介
学習のために読んだ本について簡単に紹介する。なお読んでいった順に紹介している訳ではないため説明が前後していることは先に記載しておく。
1. 見た目だけではないもっと上位概念レベルでのデザインについて
1-1. インターフェイスデザインの心理学(続編含み2冊)
インターフェイスデザインに関する論文から得た情報を、著者が項目毎にまとめて紹介する形の本。論文をベースにしているとはいえ、固い感じではなく軽く読める。例えば、注視させるためにはどうデザインすべきなのか?周辺視野と中心視野の役割の違いや、ウェブページ内に配置する人の顔の状態(感情や向きなど)でどのように違うのかなどが1つの本で100項目分紹介されている。
ビジュアル的なデザインだけではなく、報酬の与え方(例えば、可能なら外的報酬よりも内的報酬を活用した方が良い等)や、利用者に進捗や今後やるべきことを提示することで達成率を上げるなど、有効に活用してくれるユーザー数を獲得したいwebアプリケーションなどにも有効な項目も盛り込まれている。
印象的だった項目は「動詞よりも名詞の方が人を動かす」だ。
名詞の文: 今度の選挙で、有権者であることは、あなたにとってどの程度重要でしょうか?
動詞の文: 今度の選挙で、投票するのは、あなたにとってどの程度重要でしょうか?
たしかに、名詞の方が圧倒的に当事者意識が出て来るのを感じる。読み手にあるカテゴリに所属している意識を持たせることが重要そうな気がする。この辺りは、ホームページに記載する文言などにおいても有効に使えそうなテクニックだ。
1-2. はじめてのUIデザイン
主にスマートフォンに関するUIデザインを扱った本。スマートフォンの登場からのデザインを含めた変遷から始まり、今のスマートフォンの各部品の役割について詳細に解説されている。メインはアプリの説明であり、Webに関する説明は少ないが、アプリもWebも共通する部分が多いため、サービス設計などを普段していない者にとっては参考になる記述が多い。特にスマートフォンのアプリやウェブアプリケーションの方向性を決めていく段階においても有用な本である。
1-3. 融けるデザイン ハード×ソフト×ネット時代の新たな設計論
いつの頃だったか、macOS(当時はOS Xと言われていたかも)の全体的なデザインが、リアルなデザイン(スキュアモーフィズム)からフラットデザインに変化した。変化した当初はダサくなったな、と感じていたが、その内にそれにも慣れ、むしろフラットデザインの方がしっくり来るようになっていた。そもそもフラットデザインに関して特段の関心を寄せていた訳でもなく、最近の流行らしいくらいの認識だった。なんでフラットデザインが流行なんだ?ということの解を遅ればせながらこの本を読んで知ることになった。リアルなデザインは見栄えは良いが現実世界にないものを表現するには適さない。特にデジタルの世界においては、現実世界では表現できないものが多く誕生しており、スキュアモーフィズムを継続すると、ユーザーの混乱を招く結果になるのだろう。
私にとってはこのフラットデザインの記述がきっかけとなり、この本に惹かれていくことになった。道具の透明性の記述も面白い。例えば釘を打つハンマーはそれが無ければ釘を打つことすらできないが、ハンマーを使っているときは、ハンマーがあるということすら意識せず人と一体になって使えてしまう、すなわちこのようなときにはハンマーが透明になっている。
このように透明性を持つ道具は物理的なデバイスだけではない。例えば、コンピュータの画面上のカーソルも透明性がある。これの実証実験として「マルチダミーカーソル実験」が紹介されている。この実験は、自分が操作しているカーソルに加え、それと同じ見た目のダミーのカーソルが画面上に複数配置されている状態において、カーソルの操作者が自分が操作しているカーソルを発見できるかを確認するというものだ。余談だが、実験をするにあたり効果を適切に検証できない問題(例えば、実験当初はマウス操作の有無に拘らずダミーカーソルが動き続けていたため、カーソル操作をせずに止まっているカーソルを探せば自分のカーソルを簡単に発見できてしまう、など)が色々と出てきたようで、問題が発生する度に適切な実証となるように実験プログラムを変更していったとのこと。
この実験をすると、被験者はほぼすぐに自分のカーソルを発見できたということだ。一方、実験を見学している人からは、どれが被験者が操作しているカーソルかは識別不可能だった。カーソルの操作者にとっては自分が動かしているものを無意識的に把握することができるようだ。ちなみに、どのようにして見つけることができたのかは理論的に分かっていないらしい。この実験から覗き見問題を解決するパスワード入力インターフェイス(CursorCamouflage)が考案されている。
他に、人は境界を動きの中で認知しているという箇所も興味深かった。実際に著者がYoutubeにTextureWorldというタイトルの動作を公開しているので観てみると面白い。動くことで境界をはっきりと認識できるが動きがなくなることで今迄はっきりと見えていた境界が全く認識できなくなることを身をもって体験できる。
ここで記したことはこの書籍のほんの一部の内容なのだがこの辺りの記述に面白さを感じる人は一度読んでみると新たな発見があると思われる。
2. 主に見た目部分に関するデザインについて
2-1. ノンデザイナーズ・デザインブック
Webには限らないデザイン全般の本。過去に2〜3回読んでいるが、読む度にいつも気付き(内容を忘れているだけ…?)がある。良くないデザインが例示され、どの部分が悪く、どうやるとより良くなるのかが段階を追って例示されている。これらの例示の中には改善途中の例示であっても、改善点があることが記載されていないと、私では満足してしまいそうなものも多く、着眼点が悪いことを自覚してしまう。この本で最も基本的且つ重要なデザインの4つの原則、近接、整列、反復、コントラストは、今後も常に意識するようにしたい。
2-2. Webデザイン良質見本帳
Webサイトのデザインについて、HTMLやCSSよりもっと上位レベルで論じられている。デザインの基礎から始め、配色が与える印象、業種に合うデザインなど様々な角度から色々なデザインを、実際のホームページを例に挙げて紹介している。但し、2017年の本なので、本で紹介されているサイトは既にデザインが変わっているものも多いので注意したい。以前もこの本を読んだが、今回カタログを見る感じで改めてパラパラと読み、イメージを膨らませてみた。
2-3. けっきょく、よはく。余白を活かしたデザインレイアウトの本
デザインをするときに、余白を効果的に取れていますか?と言われるとNOだ。どちらかというと余白は最低限にして詰め込みたい衝動にかられてしまう。この本は余白を効果的に使うためにはどうすべきかを、NGな例とOKな例が提示されている。更にその他の良い例も何点か例示されている。
上述したように私がどちらかというと詰め込みたいと考えていたので、この本で紹介されているNGな例は何も言われなければしっくり来てしまう。ただし、その横にOKな例があり、どういう理由でこういう効果が出たのかという説明があり言語化されている点が良い。
2-4. 配色アイデア手帖 めくって見つける新しいデザインの本
どういう配色をすべきか非常に悩むときに参考になる。本の構成としては、あるテーマ(ex. トロピカルフルーツ、新緑の青空など)に対して、まず9つのカラーが名前付き(ex. メルティピンク、ココナッツホワイトなど)で定義されている(RGB, CMYK併記)。それらの色のみを使った2色配色、3色配色の例が9つずつ提示されている。更にデザイン(ロゴマーク)、柄又はパターン、テーマにあったイラスト例もある。
色にはこんなに多くの表情があるのか、というくらい様々な色が紹介されている。同系色の色の組み合わせであってもそれっぽい表情が出せている。抹茶スイーツは緑系の色の組み合わせになっている。そして同系色の紹介は別途それようの章が用意され赤、オレンジ、黄、緑、青、藍、ピンクなどなど多くの例がある。
このような本を見ずに、イメージにあった色の組み合わせを探すのは難しいので配色を検討するときは常にこの本を参考にしていきたい。また、色をしっかりと見るためにも、この本は電子書籍ではなく紙の本がオススメ。
3. CSS、HTMLの基礎を固めたい
3-1. 世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書 世界一わかりやすい教科書
今迄私が見てきた本の中で一番内容が充実したHTMLとCSSの入門書。この本をもっと早く読みたかった。今後誰かがHTMLとCSSを学びたいと言ってきたらまず最初にこの本をオススメしてみようと思う。とりたててこの本ならではの記述がある、というよりは、情報の網羅性の高さと細かさのバランスが取れている本だ。
3-2. CSS3スタンダード・デザインガイド
CSSを項目毎に体系的にまとめてあり辞書的に使える本。以前から所有していたが、CSSの特定のプロパティについて知りたいとき参照する程度にしか見てなかった。今回は思い切って一通り読んでみた。結構知らないことも多く、こんな機能があるのか、と思いつつ、CSSやっぱり奥が深いなという印象だ。正直全てを覚えられる気がしないが、今迄よりはCSSで出来ることを認識できたので、一通り読んでみて良かった。
なお、この本には各ブラウザの対応状況が記載されているのだが、2013年の本なので情報が古すぎてこの部分に関してはあまりアテにならない。これは本の宿命なので仕方ない。後述する書籍3-2(CSSシークレット)の著者は、こういった情報は陳腐化するため掲載方針だった。現在はサポートしているものが未サポートと記載されていると誤解を招くので書籍3-2の著者の方針に納得した。
4. CSSのデザインレベルのテクニックを知りたい
4-1. 今すぐ使えるCSSレシピブック
自分が知らなかったCSSの知識を一番吸収できた本だと感じる。CSSのテクニックに関する本を探している人に一冊だけ紹介することになったら、この本をオススメすると思う。特にmediaクエリを用いなくても、レスポンシブに対応するテクニック(当然、どんなデザインでも実現可能ではない。限定された用途のテクニックだが)も紹介されており勉強になった。
4-2. CSSシークレット
まず驚いたのは、この本自体を全てHTMLとCSSで組版されたということ(なお、原著がこのように組版されていたため、日本語版もそのように組版したとのこと)。この本を読むまでは、HTMLとCSSで紙の本を組版できるという発想自体が無かった。
この本は、3-1の書籍に比べてどちらかというと、より綺麗なビジュアルへのテクニックが多いと感じている。特にCSSを使って、簡単な画像へのフィルター処理が出来ることを知れたのは大きい(曇りガラスのようなフィルター適用の例など紹介されている)。この辺りのテクニックは、画像に見易く文字を入れたかったので、積極的に使っていこうと思った。
その他、著者は、シンプルさと保守性とを保つようにCSSを記載することに力を入れているようで、軽量なCSSを好むようだ。このため、どうしようもならなくなるまではSassのようなプリプロセッサの利用は控える方針らしく、Sassめっちゃ楽だな、と思っていた私の考え方をちょっと改めるきっかけになった(一例は後述する4-2のCSS設計の教科書で記載している)。また、なるべくDRYに書くコツなども紹介されている。
また、2-1の書籍の項目でも触れたが、この本には各ブラウザの対応状況が記載されていない。これは著者の方針で、こういう情報は陳腐化するため掲載せず、 caniuse.com など外部のwebサイトで確認してね、ということ。本は情報を更新できないので、陳腐化することが分かっている情報は載せない方がすっきりしていて良い。
5. 開発・保守しやすいCSSについて
5-1. Sassの教科書
Sassの解説書。これで一通りSassは使えるようになる(はず)。今迄は、SassってCSSをネストさせて記載できるやつ、くらいな雑な認識だったが、変数や自作関数を定義できたり、継承(extend)、ミックスイン(mixin)などもあり、かなり高機能だった。
なお、変数は、素のCSSでもカスタムプロパティで使えるようなので、素のCSSできることはなるべくそちらに任せるようにして、うまいこと使い分けていけるようになりたい。特に、widthなどの大きさを指定したい場合、Sassのようなプリプロセッサだと `100% - 32px` のような計算はできないが、素のCSSであればレンダリング時には100%がどの大きさなのか分かっているため計算することができる。Sassの変数の使い所は、しっかりと練った方が良さそうだ。
5-2. CSS設計の教科書
保守しやすく、拡張しやすいCSSをどう書いていくかについてまとめた良書。この本は昔一度読んでいたのだが、今回改めて読み直した。初めて読んだとき、オブジェクト指向プログラミングの要素をCSSに取り入れたOOCSSから始まり、SMACSS, BEM, MCSS, 著者独自のFLOCSSなど、保守性・拡張性を考慮したCSSの設計について詳しく紹介されている。
一番初めにこの本を読むときまでは、bootstrapでアイコンを設置するときに「glyphicon glyphicon-star」のように「glyphicon」を二重に定義するのを見てちょっと冗長だな、とか思っていた。まさかこういうCSSの設計だとも知らずに。初めてこの本を読みCSS奥深いな、と感動を覚えた記憶が蘇える。
ただそれぞれのCSS設計で採用される記法が独特(アンダースコアを並べたり、冗長な記載になったり。簡単なCSSしか見ていなかった人が見るとちょっと異質に感じる。慣れなのかな…?)で、どこまでこれを適用していくかというのは考えどころが難しい。プロジェクトに合ったルールを作るためには、CSSが破綻するという経験を積まないと自分の身にならなそうな気がしている。
5-3. CSS設計完全ガイド ～詳細解説＋実践的モジュール集
この本は、CSS設計の教科書を更に深く堀り下げたような本だ。CSS設計の教科書ではSMACSS、BEMなどが簡単に紹介されていただけで、それらの設計を実際に使ったことが無い私にとっては不明点も多かった。一方、この本ではそれらの設計(【注】CSS設計の教科書に紹介された設計が全て載っているわけではない)がより細かく記載されている。
また、CSS設計の教科書でもそうだった(FLOCSS)が、この本も著者が開発した設計(PRECSS)が紹介されている。CSSの仕様が全てグローバルスコープで破綻しやすいため、過去の経験がどんどん積み重なり、それぞれの創意工夫が多くのCSS設計を生み出したのは良いことなのか悪いことなのか。この本は内容が充実していてなかなか消化しきれない。気になる箇所を何度も読んでいきたい。
CSSを深堀りしたい人にオススメする一冊は、今迄は「CSS設計の教科書」だったが、今後はこのCSS設計完全ガイドを選びたいと思う。
6. Webページの素材作成
Webページを作成していくと様々な素材を作る必要が出て来る。作成に一番悩むのがロゴだ。またロゴを作成しようとすると、ロゴに含めるフォントやタイポグラフィの知識も必要になる。またフォントやタイポグラフィに関して知識を得ていくと、ロゴ作成だけではなく、バナー画像に埋め込むコピーなどの短文にも適用できる。
6-1. ロゴのつくりかたアイデア帖
ロゴの作成方法についての入門本のような感じの本。ロゴを作成したことがない人が最初に読むには良いと思う。ロゴの作成を依頼したい人が読むにも良いかもしれない。本の構成としては、「ロゴとは何か」という基本的なところから始まり、「シンボルマーク(←文字ではないマークの部分)のつくりかた」「ロゴタイプ(←文字の部分)のつくりかた」という制作方法・アイデアなどの紹介がされ、最後に「使いやすいロゴにするための指針」が記載される。
ロゴの作成経験がなくこれからロゴを作成しなければならなかった私にとっては「シンボルマークのつくりかた」が非常に参考になった。色々なパターンの仮想のロゴ作成依頼に対して、アイデアを練り、デザインしていく過程が簡潔に記載されている。
また最後の章の「使いやすいロゴにするための指針」に関しては、主にロゴガイドライン(最小サイズやロゴの周りに確保するスペースの大きさ、カラーコードなど)に関する簡単な紹介がされている。
6-2. ほんとに、フォント。フォントを活かしたデザインレイアウトの本
前述した「けっきょく、よはく。余白を活かしたデザインレイアウトの本」と同じ著者(デザイン事務所)が発行している本。本の構成も似たような作りであるお題に対してNG例とOK例が理由つきで紹介されている。OKな例のバリエーションとして複数の例が提示されている。
デザイン初心者の私からすると、NG例のどこがNGなの?というくらい、NGも綺麗にデザインされていると思う。正直NG例だけ見せられたらいいデザインだなと思っちゃうくらい。NGな理由とOKな理由を見ると納得できるけど、説明なかったら気付ける自信はまだ無い。そして、フォントを変更すると(もちろんNGとOKの相違点はフォントだけではないのだが)ここまで印象変わるのか、というくらいデザインに対する印象が変わる。
このデザインのここが微妙で、こう直したらもっと良くなる、というのが指摘できるようになるくらい色んなデザインを見て、言語化してみたい。まだまだデザインされた作成のインプットが足りていない段階だと思うので、もっと街中でデザインを意識して観察してみようと思った。
6-3. タイポグラフィの基本ルール ―プロに学ぶ、一生枯れない永久不滅テクニック
タイポグラフィに関して幅広く記載された本。この本を読むまでは、タイポグラフィは、文字そのものの装飾(セリフなど)や、文字、行、段落などの間隔の調整にフォーカスしたものと考えていた。だが、デザイン対象の面全体のレイアウトもタイポグラフィに含まれるようだ。このためこの本には文字そのもののデザインに加え、例えば、ポスター全体のデザインに関しても記述がある。またロゴの作成についての記載もあるため、文字が絡む部分に関してのデザインについて広く学ぶことが出来る。
7. その他
7-1. やさしく学べるWeb Components
ある修正が意図せぬ箇所に影響を与えないようにするテクニックを探していたところ、Web Componentsに出会った。独自の要素を定義できたり、CSSを特定の範囲でカプセル化できたりと面白そうなのだが、今回のホームページ作成においてはやや過剰なため採用は見送ることにした。近い内に機会があれば試してみたい。この書籍は、網羅的に紹介されており、本の途中からはPolymer(Web Componentsを実現するためのライブラリの1つ)を使った例が掲載されている。Web上で断片的に情報収集するよりは、本でまとめて知識を得たい場合に有用と思う。
おわりに
まだ実際のwebサイト制作は始まったばかりだが、デザインは思っていた以上に難しい。
特に、色々なアイデアが出て来たときに、全てを取り入れるとまとまらないため、何かを捨てないといけないのだが、この捨てるという行為が結構大変だ。論理的に善し悪しが分かるものであれば捨てるのは簡単なのだが。デザインは論理的な部分もあればそうではない部分があるため捨てる行為が難しい。世のデザイナーはこの辺りをどうやって折り合いつけてるのかな。
少なくとも「何故こうしたのか」というのを自分の言葉で説明できるようにはしておきたいな、と思う。そうしておけばその先の改善もできるようになるだろう。
また想像していた以上にCSSは面白い。特定のデザインをCSSで記載していくのはパズルを解いていく感覚に近いのかもしれない。この面白さを知れて良かったと感じている。
この記事が気に入ったらサポートをしてみませんか？