体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

デザインを実装する上で知っておきたい!9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、UXディレクターでありデザイン本の執筆もしているTom Greever氏によって投稿されました。

 

先日、クライアントに向けたHTMLとCSSを使用してデザインを実装するための方法についての講習会で指導を行っていました。

そこでは、スタイルガイド駆動開発やOOCSS・SMACSSのような取り組み方、及びモジュール設計などの工程についての議論も行われました。最終日近く、ある人に「でも、どうやってそれが正しく行われていると判断したらいいんでしょうか?」という質問を受けました。

最初、私は混乱していました。それまで私は「正しく行う」ことだけを説明していましたが、その質問が何が主格の選択肢であるかを評価するためのより深いニーズに根ざしているのに気付きました。

例えば「他と共同して動作するクラスの数は最小限にする」というような特定のアドバイスは、モジュール性に関する幅広い認識がなければ役に立たないのです。

私たちの仕事がきちんとできているかを本当に知るために、デザイン実装の目安として使えるより高いレベルの原則が必要であると気付きました。

この溝を埋めるため、デザイン実装に関する9つの原則をまとめています。

CSSやコードを吟味するときの他にチームに志願している人への面接を行うときでも、これらの原理は特定の技術やデザインを実装する一般的な手段を超越した骨組みとして利用することができます。

 

1.構造化

文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。

2.効率的

デザイン実装に使われているマークアップとアセットは最小限である。

3.標準化

共通の規定があり、自由に使うことができる。

4.抽象化

ベースとなる要素は特定のコンテキストから切り離され、中心となるフレームワークを形成している。

5.モジュール化

共通して使える要素は、再利用ができるように分割されている。

6.設定が可能

ベースとなる要素を、任意のパラメータでカスタマイズできる。

7.拡張が可能

コードは簡単に拡張することができ、今後も追加されることが見込まれている。

8.文書化されている

すべての要素は、それを使用して拡張できるように他の人に説明されている。

9.正確である

最終的なアウトプットは、予定された通りのデザインとして適切な表現がされている。

 

プロジェクトに各原則がどのように適用するかを確認するため、この記事の基準として私のプロジェクトのひとつのモックアップを使用します。

これは既存のECサイト中の、デイリーディールを宣伝する特別なランディングページです。スタイルの一部は既存のサイトから継承されますが、ほとんどの要素は新しいものであるということに注意してください。上記の原則を使って、この静止画像からHTMLとCSSを生成してみましょう。

この製品の「カード」レイアウトは、新しい要素です。

 

1.構造化

文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。

ここでの原則は、ドキュメント(HTML)の内容がスタイル(CSS)がなくても意味を持つということです。正しい見出しレベル(heading)や順序なしリスト(ul)などを設定し、やといった意味のあるタグを利用するということでもあります。

aria-labelやalt属性、その他のアクセシビリティに必要な可能性があるものをきちんと使用しましょう。

見た目的に変わらないアンカータグとボタンのどちらを使うかということは、大したことには思えないかもしれません。ですが視覚的に同じであっても、これらは違う意味を伝え違う動作を行います。セマンティックマークアップはその意味を検索エンジンや補助技術に伝え、他デバイスにおいての再利用もやりやすくします。それはプロジェクトの将来性に繋がります。

 

よく構造化された文書を作成するということは、セマンティックHTMLを書くことを学び、W3Cによる標準や他の専門家のベストプラクティスを習慣づけ、自分のコードが分かりやすくなるように時間をかけることです。

スタイルシートなしでブラウザで確認するのが、一番シンプルなHTMLのテスト方法になります。
そのHTMLはCSSがなくても使うことができるか
階層構造が一目で分かるかどうか
HTML自体で意味を伝えることができるか

しっかりした構造をもつ文書を作成するにはHTMLから始めるのがよいでしょう。ビジュアル的なスタイルを考える前に、構造とそれぞれの意味のためにプレーンなHTMLを書きます。divは避け、妥当なタグを考えます。この基本的なステップが、適切な構造を作るために役立つでしょう。

Daily Deals

Sort

by ending time
by price
by popularity

12 Night Therapy Euro Box Top Spring

Ends in 9:42:57

12″ Night Therapy Euro Box Top Spring

$199.99
List $299
10 Left

HTMLのみの段階で、それぞれの要素についてよく考えることで構造化された文書ができあがります。上のコードでは、divを使わずに全体のマークアップが構成できているのが分かります。

 

2.効率的

デザイン実装に使われているマークアップとアセットは最小限である。

コードを簡潔にし、不要なマークアップやスタイルを含まないようにする必要があります。

右寄せされたブロックレベルの要素を実装するためだけに、特定のクラス名を使ったdivの中のdiv内にdivがあるというようなコードを見ることがよくあります。このようなHTMLの乱用は、CSSや基礎のフレームワークを理解していないために起こる現象です。

1 2 3 4次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。