スタイルガイドを使用して、より優れた高速なウェブアプリケーションを実現する

Seattle 2.0 Authorsによる2008年10月27日午前9時04分2008年10月27日午前9時04分

編集者注：この記事は元々Seattle 2.0に掲載されたもので、Seattle 2.0とそのアーカイブコンテンツの買収に伴いGeekWireにインポートされました。詳しい背景情報については、こちらの投稿をご覧ください。

ケリー・スミス

見栄えの良いウェブサイトを作るにはどうすればよいでしょうか?

最初に断言しておきますが、私は正式なデザインの教育を受けていません。大学では退屈な機械工学、ビジネス、歴史の授業以外、何も勉強していません。私の観察がクリエイティブな学位に裏付けられていないことが分かったので、細部へのこだわりが、現在ほとんどのWebアプリケーションの基盤となっているコードの行数に数百万ドルの価値をもたらす可能性があるという点を証明するために、私は全力を尽くすつもりです。最近、昨年売却されたソフトウェアプロジェクトの元共同創設者とまさにそのような話をしました。私たちは、チームの文化が業界の複雑な問題に対して効果的なソリューションを提供できることを知っていました。しかし同時に、私たちのソリューションが常に最高のエレガントさを備えているわけではないことも認識していました。ユーザーインターフェースと使いやすさに重点を置かなかったのです。そして結局のところ、ユーザーインターフェースと顧客体験を改善していれば、買収価格に少なくとも1,000万ドルは上乗せできただろうという結論に至りました。

Pressplaneを立ち上げる前、Corbisの短期コンサルティングプロジェクトに携わる機会がありました。そこで、大手ストックフォトサイトVeer.comの創設者数名と親しくなりました。Corbisは昨年、Veer.comを非公開の金額で買収しましたが、その価格は当時のVeerの実際の年間収益を大幅に上回るものだったと言えるでしょう。それもかなりの額です。そして、それには十分な理由がありました。市場の誰もが、Veerが販売している商品だけでなく、その事業の進め方にも高い評価を与えていたのです。Veerは、買い手にとっても売り手にとっても、日々のインスピレーションの源となりました。優れたインターフェースには多くの要素がありますが、論理的な構造と一貫性こそが、ほぼすべての優れたアプリケーションの基盤となるのです。 

すっきりと洗練されたWebアプリを作るには、何が必要でしょうか？それは一貫性です！そのためにはスタイルガイドが必要です。

私の考えでは、スタイル ガイドは次の 3 つのことを実現する必要があります。

1. より少ない要素を使用しても、より効果的になります
2. 清潔さと秩序の認識を創造する
3. 強固な基盤から新しい機能の探索と実装を支援します

優れたスタイルガイドの例

Area17が自社のインタラクティブエージェンシー向けに開発したスタイルガイドの見た目が本当に気に入っています。スタイルガイドがどのように要素を定義し、最終的にプロジェクト全体のユーザビリティと一貫性を生み出すのか、いくつか例を挙げてご紹介します。

ロゴ実装の複数の例:

定義された画面カラーパレットは次のとおりです。

以下はフォント システムのスクリーンショットです。

定義されたサイト グリッドの一部:

最後に、メインサイト要素の概要を少しまとめて示します。

AREA 17 スタイルガイド全体はここでご覧いただけます。

インタラクションデザインとインターフェースデザインの概念は非常に重要です。ここで深く掘り下げるのは現実的ではありませんし、そもそも私はどちらの分野の学位も持っていないので、このアドバイスが無料であることに感謝してください :) 覚えておくべき最も重要なことは、何か新しいものを導入する場合は、それを十分に理解した上で、正当な理由に基づいて行うということです。

3つの実例

この投稿をできるだけ簡潔にするために、スタイル ガイドが規律の強化にどのように役立つかの例をいくつか挙げるだけにします。

1) ボタンのスタイルを多用しすぎないようにしましょう。以前勤めていた会社のことを批判するのは気が引けますが、昨日たまたま、デザインチームが新しいデザインでやってほしくなかったことの好例に気づきました。確かに、これらは些細なことです。しかし、些細なことは重要です。そして、些細なことの積み重ねは、あっという間に大きなリストになってしまいます。このボタンの場合、ボタンの角の丸みが不必要に異なっています。「検索」ボタンと「買い物を始める」ボタンを見てください。このような例がサイト全体にたくさんあります。

2) テキストスタイルを多用しすぎないようにしましょう。アートのテーマにこだわりましょう。FulcrumGallery.comのトップページからこのスナップショットを見てください。この小さなスペースに、約7種類の異なるテキストスタイルが使われています。すごいですね。なぜでしょう？

3) パディングやスペースのスタイルを多用しすぎないようにしましょう。Fulcrumの皆さんは私がそういったスタイルを好むことをご存知でしょう（実際、私もそう思います）。しかし、このサイトを例に挙げているので、スクリーンショットをもう1枚載せておきます。このサイトには、パディングやスペースといった様々な関連要素、そして太さ、色、外観、サイズなど、少なくとも20種類ものテキストスタイルが存在します。この（一見）シンプルなページを保守・更新するだけでも、かなりの量のCSSとPhotoshopを使用しています。

簡単な要約

スタイル ガイドの利点は、たとえ 1 ページのシンプルなものであっても、次のようなことに役立ちます。