コラム
2013/09/23

意思を持った"機能するデザイン"を作る

  • デザイン
WEBSASくん

デザイナーズコラム第一弾

WEBSASを支えるデザイン担当者がお届けする連載コラム。 第一弾は、「意思を持った"機能するデザイン"を作る」。

WEBSAS デザイナー

リーフレットダウンロード  「システムのデザイン」をもっと知りたい方はこちらへ

関連製品

    そのサイトで何をしたいのか、誰が使うのかを、動きを含めてデザインに変換してゆく

    「シンプルに」「にぎやかに」「親しみやすく」「ブランドカラーを出したい」「この商品を売りたい」「とにかく使いやすくしたい」。

    同じお客様でも扱うコンテンツが同じでも、そのサイトの目的によって、デザインに持たせるイメージは180度も違ってきます。
    また、デザインを決める上での大事な要素は、ターゲットユーザ層にあります。
    主婦向け、若者向け、ご高齢の方も使うのか、身体に障がいをお持ちの方も使うのか。同じ目的を持つサイトでも、ターゲットユーザによってデザインは大きく変わってきます。

    それらの条件によって、使う色や、オブジェクトの大きさ、オブジェクトをどの程度装飾してよいのか、また、サイトの振る舞い(ユーザアクションを補助するための動き)をどの場所にどの程度取り入れるか、等をコーディネートして、絵にしていきます。

    競合するサイト・サービスについてのベンチマークも重要な作業です。競合サイトは何が良いのかを分析した上で、ではこれから作るサイトの強みは何か。弱みは何であるのか。
    強みを活かし、弱みをカバーできるようなデザインを目指します。

    伝わるデザインを。同じ文書構造でもデザインとレイアウトで分かりやすさ・使いやすさは格段に違う

    私たちはサイトを通じて、目的を達成するために、ユーザに何かを伝えようとしています。同じ文書構造でも、見せ方によって、伝えたいことが伝わったり、全く伝わらない…いいえ、見てもらっているだけでも有り難いくらいで、少しでも分からない、使いづらいと思われてしまったら、一瞬で離脱されてしまいます。
    見た目の美しさ・わかりやすさというものは、伝えるために最低限必要なものなのです。

    読みやすい文章とは
    「配色」「行間」「ジャンプ率」「余白」「インデント」…
    全て、情報を分かりやすく伝えるための大事な要素です。

    分かりやすさのための最低限のデザイン要素

    • 文章と文章の「行間」
    • 文章と見出しの「ジャンプ率」(大きさの対比)
    • 「配色」や「画像の使い方」
    • 「余白」(情報と情報の距離)
    • オブジェクトの大きさ(大きさのバランス)
    • フォントの大きさ

    これらの全てのものに分かりやすさのための美しいバランスがあり、そのバランスだけで、情報が伝わるか伝わらないかが、かなりの割合で決まってきます。

    私たちデザイナーは、分かりやすいデザインのためのノウハウは殆ど必ず持っています。
    その最低条件としての要素に、狙いに沿った雰囲気を決めるデザイン要素(装飾)をコーディネートしてお客様の目的ごとにご提案します。

    雰囲気を決める要素

    • フォントの書体
    • オブジェクトの形状
    • 上記の最低限のデザイン要素のアレンジ
    • その他装飾 等

    明確なルール決めがサイトの統一感に繋がるだけでなく、作業効率も向上し、結果的により多くのお客様とのコミュニケーションの時間を確保できる

    ご提案とお話合いの中である程度決まったデザインを静止画として見ることと、HTML化された、反応・遷移し動くサイトを見る(触る)のとでは感じる点が違ってきます。画像でデザインを見たら良かったが実際HTMLになるとイメージが違う、使いにくい、と感じることは多々あるものです。
    そのため、デザインがある程度固まったあとにHTMLに起こしていく作業にはスピードが大事です。HTML化した状態を確認しながら、動きを含めて本当にデザインはこれでよいのかということを確認する時間が十分に必要だからです。

    スピードを上げるために、大抵の場合、デザイナーとコーダーの数人で分けて作業をしていきます。また、3~4枚のテンプレートとなる画面デザインを元に、スタティックの場合数十画面数百という画面数を量産していきます。その際に重要なのが、デザインに対する明確なルール決めです。
    トーンをサイト全体で統一する、運用のためのルール構築という目的を達成するほかにも、効率よくサイトを構築していくための重要な過程です。

    効率的にHTML化を進めた結果に得られる時間によって、より多くお客様とのコミュニケーションの時間に充てられることを考えながらデザイン・コーディングを行っています。

    デザインの中には、必ず戦略と意味がある。機能するデザインを目指します

    Design is not just what it looks like and feels like. Design is how it works. -Steve Jobs

    (デザインとは単にどのように見えるか、どのように感じるかということではない。 どう機能するかだ。 スティーブ・ジョブズ)

    ただ見栄えが良いデザインを作るのがデザイナーではありません。
    デザインの中には、必ず意思(戦略)と意味があります。
    その意思に対して、情報やオブジェクトひとつひとつが狙った通りに機能しなければ、WEBデザインと言うことはできません。
    私たちは、デザインに意思を持たせて「機能するデザイン」を目指しています。