こんにちは、日本デザイン インターン生のあっきーです。まだまだ寒い日が続いてますね、最近は湯たんぽがエコで流行ってるみたいですが我が家では猫を布団に入れてねこたんぽにしているのでもっとエコです。
さて、今日はぼくが日本デザインスクールで学んだ知識をもとにして、ホームページ制作時のデザインのコツを自分自身の学びを深める意味も兼ねてシェアさせていただきたいと思います。
独学でWEBデザインを学んでる人や、新人WEBデザイナーの参考にしていただけると幸いです。WEBデザイン学びたての頃って何が良くて何がだめとかわからないですよね。
特に新人WEBデザイナーに多い悩みが、自分の好きなデザインはできるけど仕事でクライアントに指定されるとどうデザインしていいかわからないということじゃないでしょうか？
パソコンに向かって作業してみても一向にデザインはまとまらず時間だけが過ぎていく・・・自分にはデザインセンスがないんじゃないかと憂鬱な気分になる。その気持ちよくわかります。何を隠そうちょっと前のぼくがそうだったからです。
でもデザインができないのは才能やセンスの問題じゃなくてちゃんと理由があるんです。原因がわかれば対処できます。そうすればクライアントから引っ張りだこの売れっ子WEBデザイナーになることも夢じゃない！努力は必要ですが・・・夢はでっかくいきましょう。
目次
デザインにセンスはいらない
「デザインにセンスはいらない」
ぼくがWEBデザインを学んだ日本デザインスクールの謳い文句です。最初このコトバを見た時は衝撃うけましたよ。それまではデザイナーなんて才能がある人じゃないとなれないと思ってましたから。でも、そうじゃないんです。
デザインには理論があるんです。理論はあるけど複雑すぎてちゃんと教えられる人がいなかっただけなんです。理論立てて学べば誰でもデザインはできる！そう考えるとワクワクしませんか？
なぜデザインが浮かばないのか
新人ＷＥＢデザイナーに多い悩みで「自分の好きなデザインなら上手くできるけどクライアントに指定されるとどうデザインしていいかわからない」というものがありますがこれにはちゃんと原因があるんですね。
上の悩みに当てはまる人の場合、好きなデザインというのは普段から意識して見ているから頭の中にパターンがあります、だから自由にならデザインできる。ぼくがスクールで学んでいた時もファッション誌に載っているようなガーリーなデザインは女性の方がうまかったんですよ。
リボンなんかの小物をあしらったり、枠の影を斜めストライプにしたり見栄えするんですよね。でも新人の場合経験が浅いので頭の中のデザインパターンが少ない、だから指定されると急に作れなくなってしまうんです。
経験不足なのはわかった。でもそんなすぐにデザインパターンなんて増やせないよ、どーしたらいいんだよー！と思ったあなた、いい方法があるんです。
デザインの意味を考えよう
まずはデザインするとはどういうことかって所から考えていきましょう。そんなこといいから早くコツを教えてくれって？焦らないでください、この意味を確認することがとっても大事なことなんです。
デザインの意味、ググったら他のサイトに良い言葉がありました。
問題の本質を掘り下げ、解決のための設計を行い、設計に基づいた見た目(表現)を作り上げ、問題を解決に導く事。
出典「デザイン」という言葉の意味を改めて考えてみる。 | Basic Design Note
デザインとは問題を解決に導く事なんですね。単に見た目の美しさとか自己表現に走ったものはアートではあるかもしれないけどデザインではないってことです。じゃあ問題って誰のってなりますよね。
そう、あなた（あなたの会社）に制作を依頼したクライアントの問題です。クライアントの抱えてる問題がなにでどんな解決を望んでるのか、デザインする背景から考えて行くとなにか見えきませんか？
問題を解決するデザイン立案
方向性を決めよう
クライアントの問題をしっかり把握することでデザインの方向性は定まっていきます。どんな問題を抱えていてなにを解決したいのか。またクライアントはどんな人物なのか、何を仕事にしているのか、ターゲット層はどこを狙っているのか、しっかりヒアリングすることが重要になってきます。
ゴールを設定しよう
例えばホームページ制作を依頼したクライアントがパン屋のオーナーで、抱えてる問題は集客だとします。
お店がログハウスをイメージした外観だとしたら、雰囲気が伝わりやすいようにメインに店舗画像、ベースカラーは茶色系、アクセントカラーは茶色の反対色の緑系、月一で出される新商品をアピールしたいクライアントの要望に合わせて目立つようにメイン画像のすぐ下に配置する等、方向性が明確になったことによってかなりデザインしやすくなりました。
つぎはホームページの可視性にも関わってくる大事な要素の一つ、情報コンテンツについてお話したいと思います。
情報の優先順位を決める
ホームページに掲載する情報に優先順位をつけることは集客の観点から言ってもとても大切。人は選択肢が多過ぎると思考に負担がかかって一つに決める事ができなくなってしまう、だから量販店ではあえて商品を絞り込んでるんです。
WEBデザイン
ここからはWEBデザインで使われる具体的なテクニックを説明していきます。
縦横を揃える
フォントやフレームの縦横を揃える。見えない線があるイメージです。それだけでもスッキリして見やすい印象を与えることができます。
デザインの比重を考える
なんかデザインのバランスが悪いなって時ありますよね。そんな時はデザインの比重を見て見ましょう。画像や文字、装飾が多いほど比重が重いということです。比重を見る時は中心から４等分に線を引いて見るとわかりやすいです。重くなってたら軽い方に振り分ける、軽くなってたらその逆をする。これでかなり素人っぽさが抜けます。
余白を効果的に使う
デザインの観点からも情報を詰め込みすぎるのは良くないです。かといって意味もなく画面左側がすべて余白というのもおかしいですね。余白もデザインの一部と考えて効果的に使いましょう。
視線による導線設計
サイトなどを読む時、人間の視線には決まったパターンがあるといわれています。こちらの表は視線の流れを表していて、【Z型】【F型】と言います。
Z型は雑誌などを読むときの視線の動き、WEB媒体などスクロールのあるものはF型の動きと言われています。
F型の場合は下に行くほど、右に行くほどユーザーの認知度は低くなります。重要なコンテンツは左上に配置するほうが認知されやすいってことです。
他にも視線を誘導する方法はあります。
矢印
矢印は強力な誘導効果があります。
アイコン
アイコンを使うことでユーザーに瞬時に理解を促すこともできます。
色を変える
注目させたい所を目立つ色に変えるのも視線を留める効果があります。
その他にも誘導テクニックはあります。ユーザーをどこで引きつけるか、どこにゴールを設定するかで成約率は変わってきます。ユーザーがどうゆう経路でゴールまでたどり着くのか考えて配置しましょう。
WEBデザイン上達の裏技
最後にデザインを劇的に上達させる、もっとも効果的な方法をお教えします。その方法とは・・・プロのデザイナーに自分のデザインを見てもらうこと！デザイン力の高い人に自分のデザインの良し悪しをフィードバックしてもらう。つまり添削してもらうことが上達するための最も早い方法なんです。
自分のまわりにデザイン力の高い人がいる場合は添削をお願いしましょう。いない場合は腕のいい先生を探すことをオススメします。デザインは先生に似てきます。なので先生を選ぶときは自分の理想とするデザインのできる方を選ぶようにして下さい。
まとめ
ホームページ制作時のWEBデザインのコツをテーマに記事を書かせていただきました。この記事ではテクニックよりもデザインのロジックに比重を置いています。ロジックをしっかり理解できていれば必要なことは自ら調べて学んでいくことができるからです。
この記事があなたの気づきにつながることを願って、今回ぼくが学んできたことを共有させていただきました。最後まで読んでいただきありがとうございました。
日本デザインインターン生 あっきー
まずは業界のことを知ることからはじめよう！
