今回のポイント
構図
三分割法
黄金比
白銀比

 Webコンテンツは文字主体のいわば“書類”です。絵画でも写真でもありません。書類に対して徹底的に芸術性を追求することには,おそらく意味がないでしょう。「構想3年,4年以上の歳月をかけて完成した,とても美しい芸術的な交通費申請書」があって,人々がその美しさに小一時間足を止めて鑑賞するといったことはありえません。

 しかしながらWebコンテンツは純粋な書類だということでもなく,少なくても閲覧する人の眼を意識して,使いやすさとともに美しさも要求されるものですね。いわば“機能美”です。

 自動車を思い出してください。自動車は走るという目的だけであれば,鉄で四角い箱を作り,エンジンと座席を突っ込んで,タイヤを四つほど付けておけばいいんです。しかし,そんな何の変哲もない箱形の車では営業的に成功はしないでしょう。Webコンテンツは自動車と同じ工業製品であり,機能性とともにユーザーに好感を持ってもらうために機能美や工業デザインが適用されるべきです。

 全く同じ内容のテキストが書かれたページでも,きちんとデザインされていれば,それだけ閲覧者に対しての訴求力が高くなります。そこに書かれているテキスト・コンテンツ自身が重要であることはもちろんですが,より読みやすく,さらに美しいと感じてもらうことが大切です。

Webデザインと芸術に接点はあるか

 およそ20年程度と歴史が浅いWebコンテンツ制作の世界と比べて,芸術と呼ばれるものは数千年,大量に同じ製品を作ることができるようになってから発展してきた工業デザインでも数百年の歴史があります。芸術やデザインで蓄積されたテクニックの中から,Webデザインに転用できるものもきっとたくさんあることでしょう。

 これまでの学習過程で,私たちはある程度までCSSを使いこなせるようになってきました。好きな位置に画像やテキストを動かし,フォントや背景をいろいろ変えることもできます。ところが最大の問題として,「どこに何をどれくらいの大きさで置いたら一番バランスがよく美しいのか」という問題を置き去りにしていたわけです。

 料理教室で言うならば,CSSのなんたるかを知った私たちは,まだ包丁とガスコンロの使い方を学んだだけだと言えるかもしれません。「こうすれば肉が切れます。これがとろ火です。ではおいしい肉じゃがを作ってください」。これはさすがに無理だと思います。味付けや盛りつけどころか,ジャガイモの皮すらむけません。肉じゃがではなくWebコンテンツのデザインを仕上げていくために,少しばかり芸術方面からコツを盗んでみましょうというのが最終回である今回の主旨です。

構図というもの

 絵画の制作や写真撮影では「構図」というキーワードがよくでてきます。この「構図」というのは簡単に言ってしまえばレイアウトです。絵ならばキャンバス,写真なら印画紙というベースになるプラットフォームがあって,その中にモデルや被写体をどう納めるか,あれこれ工夫するのが「構図」です。

 机の上にリンゴが三つあります。さあこのリンゴの絵を描いてください――こういう課題を出された場合,特に何も考えないと図1あるいは図2のような絵になります。

図1●リンゴを三つ横に並べてみた
[画像のクリックで拡大表示]
図2●リンゴを縦に三つ並べた
[画像のクリックで拡大表示]

 画用紙はたいてい横にして使います。なぜかといえば,画用紙を置く机上のスペースが横長であることが多いからなんですね。すると三つという幅の出そうな配置では図1のように横に並べて描くのがオーソドックスな考え方です。もし画用紙を縦に使うならば,リンゴも縦に三つ並べるのが基本になるでしょう。図2では画用紙を横に使いつつ,リンゴを縦に並べるという変則的なことをやっています。

 もちろん私は皆さんの絵心や美術的な才能を確認しようとしているわけではありません。こう考えてください。もし課題の内容がリンゴではなく,テキストあるいは画像であったらどうでしょうか?もちろん画用紙はブラウザです。私の意図するところがおわかりいただけたでしょうか。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら