ディテールは取るに足らないことではない。ディテールによってデザインは成り立っているのだから
チェアブランド、イームズの建築家・デザイナーであるCharles Eames氏はこう言いました。
このことはWebサイトにおいても同じです。Webサイトもディテールが集まってできたもので、そのコンテンツはディテールを通して発信されます。情報発信のためのサイトであったり、またはアプリとして配信されているにもかかわらず上手く機能しているサイトというものは、文章から画像、レイアウトに至るまであらゆる部分を厳しくチェックされて作られているのです。
Webサイトの全体的な雰囲気や使いやすさによって生まれる印象はとても大事なので、Webデザインにおいて細かな部分も非常に重要な問題となるのです。Eames氏の言葉の繰り返しになりますが、ディテールがデザインを形作るので、ディテールに注意を払わないと悪い印象を与えることになってしまいます。
今回は、インターフェースやインタラクションに関連するものなど、皆さんが次のWebプロジェクトに取り組む際に参考にできる様々なサイトのディテールをご紹介しましょう。
Basecampのパスワード認証スピード
BasecampはWeb上のプロジェクト管理ツールです。このツールが発表されてから、作業スピードや効率が重視されるようになりました。
このツールは、暗証番号を入力した後に「OK」ボタンを押すだけでログインすることができます。正しい暗証番号が入力されたら、初期画面が自動的に表示されます。このような小さな対応が、Basecampのスピーディーなパフォーマンスを支えているのです。
Neoteric Designで使われている奥付
奥付（書物の末尾に、書名・著者・発行者・印刷者・出版年月日・定価などを記した部分）は15世紀から書籍に使用されてきましたが、奥付の趣旨はWebにも当てはまります。Neoteric Designは、フォントからソフトウェア、プログラミング言語、コンテンツマネジメントシステムまで、自社のWebサイトに何が使用されているかといった「奥付」を共有しています。もし訪問者が、あるサイトがどのように作られているかを知りたい場合、奥付は訪問者にとってWebサイトの特定の構造を知ることができる場なのです。また奥付は、印刷物によるコミュニケーションのどの面がWeb上のコミュニケーションに関連する可能性があるかを調査するための証拠にもなります。
Berger & Föhrによる多目的タイポグラフィックグリッド
2014年５月に他界した、デザインの先駆者的存在である Massimo Vignelli氏はタイポグラフィックグリッドを支持しており、「本の下着」と定義していました（Brain Pickings氏の記事“Massimo Vignelli on the Secret of Great Book Design”より）。基礎となるグリッドに注意を払うことは、サイトをきちんと整備・維持するために大切なことです。
グリッドを基礎とした構造は、Berger & Föhrがボルダー現代美術館のためにサイトを再設計したものにはっきりと見て取れます。はっきりとした特徴は、タイポグラフィックグリッドがサイトのコンテンツの至る所に使用されているという点です。検索フォームからナビゲーションの役割をするプルダウンメニュー、カレンダービュー、フッターのテキストやリンクまで、あらゆるところに使用されています。さらに、グリッドの利便性はサイトがレスポンシブな状態でも維持されます。
種類や規模にかかわらず、コンテンツを組み立てるためにタイポグラフィックグリッドを徹底的に使った場合、最終的にサイトに統一感が生まれます。
Maker’s Rowにおける出身地への誇り
Webデザインにおいて、Webサイトが出身地を表示するという動きがみられます。これは一般的に「自信をもっておすすめできる◯◯産」という商品の謳い文句のように、フッター部分に表示されています。Maker’s Rowは自社のチーム紹介ページで、各メンバーの出身地を提示することによってメンバーのルーツを強調させています。単に「場所別の」情報として機能するだけでなく、それぞれのチームメンバーがどこの出身かという情報を共有することで、それぞれの場所を大切にしているという印象を与えることができます。
TWLOHAのソーシャルメディアへの直接的なアクセス
一般的には、各ソーシャルメディアにリンクしているアイコンが並べられて表示されていますよね。しかし、TWLOHAは各ソーシャルメディアの名前自体をアイコンの代わりに使用しています。これにより、どれがどのメディアかを瞬時に理解することができます。確かなメリットの１つは、 Twitterの“t”とTumblrの“t”のアイコンを間違えないということです。
MINIMALにおける「つながる」ページ
Webサイトにはよく「お問い合わせ」のページがあります。デザインスタジオであるMINIMALは、「お問い合わせ」の代わりに「つながる（Connect）」という言葉を使っています。異なる言葉を使用することで、（チャンスを引き寄せる、全てを変えるような）ひと味違うトーンを生み出します。
「つながる」という言葉は、「お問い合わせ」よりも人を引き寄せる響きがあります。より人間的で、業務的な感じがしないのです。
Draftにおけるアクセスの後押し
ログインやサインアップのフォームはとても細長いため、たくさんの余白があります。メモアプリ Draftを開発したNathan Kontny氏は、フォームの横にユーザーからの商品に対する感想や推薦の声を載せていました。これらの既存ユーザーの声は、潜在顧客にツールのお試し、または利用も促すことができます。
ビジネスの観点から言うと、ここでの教訓は、自社のWebを基盤としたアプリやサービスを実際に使用しているユーザーからの肯定的な感想を、恥ずかしがらずに公表した方が良いということです。
CreativeMorningsの色使い
CreativeMorningsの各チャプターは地名の隣に配置してあり、それぞれ違う色を使用することで区別されています。この要素はCreative Morningsのサイトの至る所にあり、例えば、プルダウンメニューのチャプターにも使われています。このような色使いは、エッジや輪郭、及びその他の遊び心のある形のアクセントとなります。この要素は、コンテンツが表示される際のアニメーションとして繰り返し適用されています。
CreativeMorningsのWebサイトは、実質的かつ繊細な方法によって上品なカラーコーディネートを施しているのです。
Pulleyの非常にシンプルなサインイン
自分のアート作品や商品を紹介・販売したいと考えているクリエイターのために、クリエイティブマーケットプレイスである Big Cartelを構築したグループによって開発されたPulleyは、デジタルダウンロード商品を販売するためのEコマースアプリです。
このアプリのサインインに必要なのはパスワードだけです。これは、フリクションを大幅に減少させ、不必要な要素を意図的にそぎ落としたWeb上の入力の一例です。
Crush Lovelyの「プロジェクトストーリー」
「事例紹介」や「ポートフォリオ」といったありきたりなラベルにひねりを加えるために、クリエイティブスタジオであるCrush Lovelyは自分たちが行っていることを「プロジェクトストーリー」と表現しています。このアプローチは、仕事に関するストーリーについて話すというものです。プロジェクトは本質的に物語であるため、始まり（プロジェクトの開始）から終わり（プロジェクトの納入）をまとめて扱い、物語形式のスレッド（プロセス）でつなげているのです。
このあらすじはクライアントの例を選択した後、プロジェクトストーリーシリーズとして閲覧用に肉付けされます。その他のラベルに施されている工夫も注目すべきポイントです。例えば、トップにある導入の一部として、「目標」の代わりに「野望」という表現が使われています。また、一番下にあるアクションボタンは、「動画を見る」の代わりに、「完成作品を見る」という風に書かれています。
このようにひとひねり加えられたラベルによって、企業の仕事内容の説明が無味乾燥なものではなく、見た人の好奇心を刺激し、素晴らしいストーリーが紹介されているのです。
Knoed Creativeのサイドプロジェクト
「弊社について」というカテゴリーは、企業のメンバーや事業内容に関する重要な説明が書かれており、企業のビジョンやミッション、目的なども含まれていることがあります。Knoed Creativeは、本業のかたわらで行っている事業について共有するために、 "Beyond Nine to Five"というセクションを入れました。ここでは、サイドプロジェクトに関する出来事（とその必要性）について踏み込んで紹介しています。また、「弊社について」のセクションが表示するであろう項目を多様化させています。
この両方の観点が、日常の就業日や職場を超えてクリエイティビティの先見的な性質について言及してくれるのです。
