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