WEBdesign

#4 WEBデザイン力を身に着ける

PCを使ったお仕事として人気があるWEBデザイン。インターネットで探すとオシャレなデザインがあふれています。このようなサイトをみて一度は「作ってみたい」と思うことがあるのではないでしょうか?

おしゃれでカッコいいデザインのサイトを作れることは、スキルが高いことの1つのパラーメーターですので素晴らしいですが、デザインする上で一番考えなくてはいけないことは「お客様の悩みを解決できるか?」です。

お客様が抱える悩みを解決することがデザイン

WEBサイト制作を依頼するお客様は、何らかの解決したい課題があります。

例えば、

  • 売上が少ないため売上げをUPするためのサイトを作りたい
  • WEBサイトから集客をして販売しているサービスの契約件数を上げたい
  • 自分で作ったものを見てもらい、販売したり仕事を受けたい
  • 新しい会社を設立するにあたり、名刺変わりになるWEBサイトを作りたい

などなどが考えられます。

デザインするにあたっては、お客様がWEBサイトを作る目的を把握しそれにあったデザインにしないと、作ったサイトが本来の役割が果せず、意味のないものになってしまいます。以下のようなイメージです。

  • 販売件数を上げたい→問い合わせ(CTA)までの動線を考え、そのページの着地先を考える。
  • デザイナーのポートフォリオサイトを作りたい→人となりが分かる構成、多少使いづらくてもセンスが良く流行りに乗ったサイトがよい。
  • 病院のHPを作る→多少ダサくてもお年寄りがメインユーザーになるためユーザービリティが高い配置、配色にする。
  • 学習塾のサイトをつくる→申し込みをするのは保護者だか、入塾するのは子供なので、子供が入塾したときの成果をイメージできるようにする。

特に勉強熱心なデザイナーほど、スキルが高いためオシャレでセンスがあるデザインをしがちですが、ボタンの位置が分かり難かったり、やたら横文字、やたら文字が小さく読みにくいなど一人よがりのデザインになってしまいます。これはデザインではなくもうアートですね(笑)

目的解決するようなサイトを構築するためには、デザインをする際に以下のようなことを意識してください。

デザインする上で意識するポイント

かのSteve Jobs(スティーブ・ジョブズ)は以下のような言葉を遺しています。

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

デザインとは、単なる視覚や感覚のことだけではない。デザインとは、どうやって機能するかだ。

ここでの視覚や感覚を定義するなら「魅力的に伝え印象を残す方法」です。これらに関わってくる要素は下記のようなものがあります。

  • 配色
  • 写真・素材
  • 文字のフォント
  • 装飾

機能も定義すると「情報を整理し分かりやすく伝える方法」です。これらに関わってくる要素は下記のようなものがあります。

  • コンテンツの優先度を決める
  • コンテンツをカテゴリーの分類する
  • 情報が分かりやすい配置にする
  • 視線の流れをコントールする動線を考える

これらを考えながら作る・作らないでは大きな差が出てきますね。

・・・ですがこれらは一朝一夕には身につかず実際に案件に取り組んでいくなかで出来るようになってきます。いきなりは難しいため初めのうちの練習としては、いろいろなサイトを沢山見ることから初めてみましょう。その際は単に見るだけではなく制作者の意図を想像し下記を考えながら見るようにしてください。もちろん正解はわからないので想像の域からは出ませんが、意識してサイトを見たときのあなたの印象と制作者の意図はあながち間違っていないことがあります。

発信したい情報の種類を決める

どのようなジャンルで、どのような情報を伝えたいのか決めます。ここを曖昧のまま進めてしまうと作成段階で後戻りが増えてしまいますので、発注者のゴールをお聞きした上でスタートしましょう。

コンセプトテーマは何なのか?

⁠クールなのか、ポップなのか、落ち着いているのか、シンプルなのか派手なのか、配色する上でのキーワードをヒアリングします。

サイト来訪者には次にどのようなアクションをしてほしいか?

メルマガを登録して欲しいのか、電話をかけて欲しいのか?次のアクション「Call To Action」につなげる機能をメインに持って来きます。サイトの最後に持ってくるデザインもありますが、一番上に持っていくことが基本です。

ターゲット層はどこになるのか?

若年層向けか、ファミリー向けなのか決める。例えば塾のサイトであれば、契約するのは保護者のため保護者に刺さる内容を考える必要があります。

素材、アニメーション

使っている素材でどんな印象を与えてるのか、なぜテキストではなく画像にしたのか

レイアウトを決める

視線の流れは?どこに着地させようとしている。(Z型、F型の法則)、流行りはあるのか?

最後に

デザインはセンスではありません。制作者の意図とサイト利用者を間に立ち問題解決する思考力です。簡単とは言えませんが、正しい勉強をすればできるようになります。

-WEBdesign

S