PR
 この連載は,ウェブ系エンジニア向け,ということで書いていますので,読んでいる皆さんも,仕事でウェブサイトの構築に携わってる方が多いと思います。そんな皆さんへ突然質問なのですが,皆さんは自分の「ウェブページをデザインするセンス」についてどう感じていますか?

 デザインのセンスといっても,ここで言っているのは絵を描くのがうまいとかいうことではなくて,見やすくて使いやすい画面をデザインするセンスのことです。例えば情報や広告,リンクやボタンなどをどう配置するのか,どういう文言を使うのか,配色はどうか,といったことが含まれるでしょう。

 なんで改めてそんなことを聞くのかといえば,そもそも筆者がそうしたセンスをぜんぜん持ち合わせていないからなのです。エンジニアと呼ばれる職種の人の中には,筆者と同じように感じている人も多いんじゃないかな,と思っています。

 われわれエンジニアは,こうしたデザインセンスの部分はデザイナーの領域じゃないかと考えがちです(連載第1回参照)。しかし,ウェブサイトのように人が利用するシステムは,インタフェースとバックエンドが完全に切り離せるものではありません。いくらデザイナーがいるといっても,ページ内の情報配置などにかかわる必要は,多かれ少なかれ,あるんじゃないかと思います。

 筆者が勤務する株式会社はてなは,エンジニアが10人に対してデザイナーは2人という人数構成でサービスを開発しています。なので,新たにページを作成したり,ページの構成を変える,といった際には基本的にエンジニアがページの構成やデザインをできるところまで作り,最後の調整をデザイナーにやってもらう,といったことをよくしています。

 で,問題となるのは,われわれエンジニアのデザインセンスです。ここに興味深い文章があります。

 短納期の超特急案件で,詳細設計をプログラマがコーディングしながら詰めていく場合,コントロールを上から順番にレイアウトするのではなく,処理を書きやすい順番にレイアウトすることがある。
(ITpro連載『コラボレーションから始めよう!』第11回「プログラマが知らない,デザイナーの苦労」より引用)
ここにあるように,処理の書きやすい順にレイアウトしてしまうということは,つまりは処理の書きやすい順に作業してしまっているということです。その気持ち,筆者はすごく理解できる気がするのですが,皆さんいかがでしょうか。

 この文章は,この中ではデザイナーのことを考えずにエンジニアが配置してしまうので困る,という話の流れの中で,書かれています。しかし,この「処理を書きやすい順番」は,デザイナー的に作業がしづらいだけでなく,利用者にとっても使いやすいものになっているかどうかはかなり疑問です。

 エンジニアの都合で画面の配置を決めてしまうことは,エンジニアにとっては非常に楽チンで,油断するとついついやってしまうことかもしれません。しかし,それをやってしまうのは,使い勝手を下げることになってしまうわけですよね。

ユーザーは画面のどこを見ているのか

 エンジニアとして,使いづらいインタフェースを作らないようにするには,「利用者にとって使いやすい情報配置」ということを忘れないようにするのが非常に重要なのだと思います。しかしそうはいっても,一人で考えていても,限界がありますよね。

 そこでやるべきことは,デザイナーとよくコミュニケーションをとって,デザイナーがすでに行った情報配置の意図や考え方を共有したり,デザイナーとの共同作業をいかにやりやすくするか,ということです。今後それについても突っ込んで考えてみたいと思っているのですが,その前に今回は,ちょっと面白いプレゼンテーションの資料を紹介したいと思います。

 そのプレゼンテーションは,今年(2006年)の7月に開催されたOSCON(Open Source Convention)2006の中で行われたセッションのものです。そのタイトルは「User Experience, Pain-Free」と「When Interface Design Attacks!」で,どちらもAmy Hoyさんというデザイナー出身のインタフェース開発者という肩書きを持つ方によるものです。

 彼女はプログラミングもこなすので,エンジニアの気持ちも理解しつつ,使いやすいインタフェースのことを講演しています。筆者は実際にこのセッションに参加して話を聞いてきましたが,エンジニアとして,インタフェースや使いやすさに関する基礎知識を与えてくれるお話でした。彼女のウェブサイトにそのときの資料が公開されています(こちら)。

 一つ目のセッション「User Experience, Pain-Free」は,ユーザーが使いやすいサイト構築のための考え方を紹介して行くためのもで,二つ目の「When Interface Design Attacks!」は,エンジニアを対象に「ユーザー・インタフェースでこれだけは守っとけ」みたいな内容でした。

 ちょっと内容を紹介してみることにします。「User Experience, Pain-Free」では,ユーザーがより便利で使いやすいサイトだ,と感じてもらえるための重要な考え方について解説しています。こちらも非常にためになるのですが,これについては次回以降,改めてそのことについて考えていく際に紹介することにします。今回は「When Interface Design Attacks!」で紹介されている具体的なテクニックをいくつか引用してみたいと思います。

 このプレゼンテーションでは基本的なことから具体的な例まで,いくつかのトピックに触れています。

この記事は会員登録で続きをご覧いただけます

日経クロステック登録会員になると…

新着が分かるメールマガジンが届く
キーワード登録、連載フォローが便利

さらに、有料会員に申し込むとすべての記事が読み放題に!
有料会員と登録会員の違い