独学で極める “Webデザイン”の技と心

第3回Webデザインは問題を解決する何らかの「目的」ある

Webデザインの話に入る前に、まずアートとデザインの違いについて考えてみます。

デザインとアートの違いは何か?

この疑問は、たびたびいろいろな場所で話題になっており、⁠デザイン アート 違い」などと検索すればいろいろな先人の考えを知ることができます。

目に見えるもしくは耳に聞こえる、肌で感じられるなど、必ずしも視覚的なものだけではありませんが、アートにもデザインにも共通する点は、⁠表現」することだと考えています。

Webデザインで言えば、⁠視覚ブラウザで見えているものだけがデザインではない」と考えれば、視覚的なものだけではないということがわかりやすいかと思います。

私が考えるアートとデザインの違い

アート:

自分の中心からわき上がる感情などを自由自在に制約なく表現する
⁠鑑賞することで他者が共鳴したり感動することはあるが、他者の問題解決を目的としているわけではない)

デザイン:

自分だけでなく、自分以外の他人や社会に向けた、何らかの問題解決をする目的を持った表現する
⁠他者が持つ何かしらの問題を解決することを意図しているため、良いデザインをされることにより、他者に明確なメリットがある)

デザインされている/いないに関わらず、美しいと感じられる作品に対してはアートと思いたいこともありますが、やはり、自分が主体となって創造するものなのか、他者にむけられるものかという違いなのではないでしょうか。

デザインには必ず「目的」がある

デザインする以上、何らかの問題を解決する、明確な目的があるはずなのです。

例えば、

  • 人を楽しませる目的
  • 売上を上げる目的
  • ブランディング効果を上げる目的
  • より多くの人にアピールをする目的

などが考えられます。

デザインするにあたって、こういった目的をぶらすことなくやり遂げることが大切である上、目的を果たすために考慮しなければならない事柄がいくつかあります。

目的を果たすデザイン(ここでは、Webデザイン)をするために考慮しなければならない事柄

  • 目的を明確にし、ぶれることのないようにする
  • 企画や仕掛けを考える
  • 発信したい情報の種類・性質を分類する
    ⁠情報を分類することはインターフェースを考える上での基礎にもなります)
  • ターゲット層を決める
  • コンセプト・テーマを固める
    ⁠ポップなのか落ち着いているのか、シンプルなのか派手なのか、など。また、メタファーがある場合はそのイメージも。配色する上でのキーワードにも影響します)
  • ビジュアルアイデンティティ(CIロゴデザイン規定など)がある場合は配慮する
    ⁠CI デザインで決められた書体やカラーを定めていることがあります。Web に落とし込んだ場合、見出しのグラフィックテキストやテーマカラーに影響します)
  • キーワード・イメージから連想される配色・トーンの選定
    ⁠ロマンチック・プリティ・ナチュラル・エレガント・カジュアル・ゴージャス・ダイナミック・クラシック・シック・ダンディ・モダン・クール・カジュアル・クリアなどというように、イメージにあったキーワードから連想される配色・トーンを選び、カラープランニングを行います。CIロゴデザインによっては使える色に制約を設ける場合もあります)
    --参考:キーワードイメージからカラーを選定する isbn:4948759716 Webディレクション完全ガイド
  • インターフェースを設計する
    ⁠特殊なターゲットによっては、あえて一般的なインターフェースを逸脱する場合もありますが、基本的にターゲットの層にとって使いやすく、見やすくすることが基本)
  • ビジュアル・ディテールやパーツを選定/仕上げする
    ⁠イラストや写真・アイコンなどを利用する場合は、テーマや色味に調和するものを選ぶ)
  • 更新することを前提に管理しやすいルール作り(もしくはシステム設計)をする
    ⁠紙媒体のデザインと大きく異なる部分です)
  • マークアップデザイン
  • アクセシビリティ(より多くの環境で情報を閲覧・取得できるようにする)を向上させる
  • コスト(制作にかかる時間・予算・リソースなど)

このように、目的を果たすことにおいてデザインは大切な役割を担っています。

私が経験でつかんだ、ちょっとしたデザインのコツ

また、理想的な話かどうか、全てのデザイナーの方に合うかどうかはわかりませんが、私が経験でつかんだコツについてお話します(参考としてご覧ください⁠⁠。

ロゴがあらかじめ決まっている場合、ロゴにひっぱられないようにラフデザインを起こすとうまくいく場合がある

ロゴはそれ単体で強烈なインパクトを持っている場合があります。ロゴの持つ印象にひきずられすぎると、自然とバリエーションに制約を作ってしまいがちなので、ロゴがあってもなくても機能するデザインを目指したほうが結果的にロゴも馴染んできて、うまくいく場合があります。

配色・トーンを決める前にやってみること

デザインカンプを作る際に、まず着色せずに無彩色(グレースケール)でデザインしてみると私の場合うまくいくことが多いです。そのメリットは、色そのものが持つ情報に惑わされることなく、本来の情報の重要度に応じたレイアウト・インターフェース設計ができるからです。情報の重要度がわかると、あとで着色すべき色(アクセントカラーなのか、ベースカラーなのか、等)に迷いが起きません。

デザインする過程で選んだ事柄に対し、全て理由を説明できるようにする

色にしても、配置や間隔についても「なぜそうなっているのか」という理由を説明できることが、デザインが目的からぶれないようにするために必要です。これはクライアントワークでなくても常に実践していきたいものです。

Webサービスをつくることから学んだ「デザインを楽しむこと」

最近の Twitterブームに便乗して、遊びで告白するなら、コクッター!という小さなサービスを先日リリースしました。

告白するなら、コクッター!

告白するなら、コクッター!

このサービスは、私の会社エスカフラーチェLLCのアドバイザーでもある家入一真氏株式会社paperboy&co.代表取締役社長)が作ったアリッターというサービス(他、Twitter関連シリーズ2作あり)のリスペクトでもあります。

家入氏のリリースするサービスからは、いつも人を驚かせたり、楽しませたりしたいという気持ちが伝わり、⁠意図しているかわかりませんが)毎回驚かされ、楽しませてもらっています。

また、ただ模倣するだけのものではなく、サービス愛を感じるところやパロディの上手さなどがお手本となっています。

私の作ったコクッター!は、目的の話で言うと(仕事としてつくったものではないこともあり)目的の大半が「使っていただく方におもしろがってもらいたい!」というものでしたが、おもしろがってもらいたい気持ちが強烈になるほど細かいところに拘ってみたくなり、デザインがとても楽しく感じられました。

クライアントワークに置き換えた場合でも、クライアントと制作者が同じベクトルで一丸となっていけると、デザインの仕事自体がますます楽しくなり、結果的に質の良いものが生まれると考えています。

おすすめ記事

記事・ニュース一覧