「就職までに身につけたいホントのWebTips」 第4回に参加しました

前回に引き続きこのセミナーに参加してきました。
今回で最終回となりましたが、テーマは『勘違いだらけのWebデザイン』です。

Webデザインとは?

Webサイトのスクリーン(画)を描くことではなく…!!
設計書を作ることです。

デザイナーと聞くと絵を描けなきゃいけないとか思いがちですが
描けなくてもいいのです。
絵を描けないのであれば、イラストレーターさんにお願いすればいいのです。

デザインという言葉を辞書で引いてみると…

【デザイン(Design)】
目的をもって具体的に立案・設計すること  とあります。

<まず決めること>

  1. トーン&マナー
    広告業界では良く使われる言葉です。
    広告をどう表現するか具体的に言葉で表します。
    トーン:調子やスタイル
    マナー:手法、流儀、トーンに対する約束事
    トーン&マナーをしっかり決めることでWebサイト全体のイメージを
    一定に保つことができます。

  2. ユーザーの印象付けの最重要要素
    Appleは白×黒×銀(禅カラー)で商品、広告、Webサイトを統一しています。
    野村證券はキンアカ(金融の赤)をWebサイトに使用していることで、
    ユーザーに金融のイメージを印象付けています。
    企業のコーポレートカラーを安易に使うのはNG
    ロゴに使われているカラーだからといってWebサイトに使うのが良いというわけでは
    ありません。
    ユーザーにしっかり印象付けることが重要なのでコーポレートカラーを使えば良いと
    考えるのはやめましょう。
  3. フォント
    フォントには種類があります。
    セリフ体/サンセリフ体
    明朝体/ゴシック体 そしてもう1つ付け足して欲しい『手書き』
    トーン&マナーに合わせたフォントを考えます。

 

<レイアウト>

先程の3点がしっかり固まったら次はレイアウトを考えます。

ワイヤーフレームを作る
  1. テキスト
    [見出し],[本文]
  2. 図版
    [写真],[イラスト]
  3. 余白
    【余白は勝手に出来るものではなく、作るもの】
    余白をたくさん持たせることで読む人のスピード、リズムを調節できる。
    気持ちを落ち着かせて読んで欲しい時は余白をたくさん取る。
  4. (背景)
    忘れがちな背景ですが、イメージしていないと常に白バックのものしかイメージ
    出来なくなってしまうので注意する。
版面率(はんめんりつ)=画面に対する図版の割合

Webサイトを開いてまずファーストビューがどれくらいの版面率にするかによっても、
サイトの印象が変わってきます。
版面率もイメージしながらレイアウトを考えていきましょう。

気にしていたいポイント!~最近のトレンド~

Webサイトはどんどん進化し、新しいトレンドが入れ替わっていきます。
現在のニーズは何が多くて、お客様の好きなトレンドを知っておくのは制作する上で
とても重要です。

【今注目!!やってはいけない設計】

  1. 横スライドする画像スライダー
    情報をたくさん発信することは出来るけど、画像と画像の関連性がないものが多い。
  2. 塗っただけのフラットデザイン
    ただ四角が塗られたものをボタンとして設計している場合
    →ボタンとして認識がされなくてクリックまでたどり着けない。
    Webが苦手の方や初心者の方に不親切。
  3. iOS風アイコンの並び
    スマートフォンは画面が小さいのでアイコンを並べて表示しているが、
    それを大きい画面に表現する意図とは?
  4. パララックス効果
    4年前ほどは流行ったが手法として定着していない。
    今もパララックスを好むクライアントさんはいるが、流行りでしかない。
  5. ストーリーのあるムービー
    以前は良く見かけたメインビジュアルがFlashで作られたムービー。
    画像や文字を動かして表現するアニメーション。
    しかし、近年ではユーザーの滞在時間は8秒以下と言われている。
    ムービーが終わる前に他のページに移ってしまう可能性が高い…

そして今回のミニハッカソンのオリエンシートが配られました。
今回は某有名ハンバーガーショップの新商品を紹介するサイトをデザインする内容です。
まずは3~4人でブレインストーミングをしました。

[ブレインストーミング] 何人かでアイディアを出し合う場

ブレインストーミングをする上で大切なことがあります。

  1. 質より量
    思い浮かんだことは声に出してたくさん意見を出そう。
  2. バカバカしいアイディア程大切
    出来る出来ない、やるやらないに限らず自分のなかに留めておくのはやめよう。
  3. (人の意見を)決め付けない、否定しない
    それは今後考えていくところであって、ブレインストーミングには必要ない。
  4. 人のアイディアには乗っかる
    真似されただなんて思わず、良いと思ったら乗っかる。
    また乗っかってどんどん良いアイディアを生むことのほうが大事。

10分程ブレインストーミングを行って、また新たなグループを作って45分間ミニハッカソンを
行いました。
プレゼンテーションを設けてもらいトーン&マナーや色、レイアウトについてを発表しました。

参加してみて…

今まで紙とWebは同じ広告だけれども、全く別の考え方で出来ているのかと思っていましたが、今回参加してみて“軸”は一緒だな…と少しほっとしました。
私自身がWeb初心者ということもあり、どうデザインしていくのか未知でしたが基本は同じ。
紙なのかWebなのかであって、まずは色や調子を考えるところは変わらないんだと再確認
出来ました。
45分間のミニハッカソンはなかなか難しかったですが、いろんな方の意見を聞くことが出来
良い経験になりました。

次はWCAN Winterに参加します!
http://wcan.jp/