IT系女子ログ

Webデザイナーのエッセイ。デザイン、コーディングで気になることをあれこれ考える。

デザインは2年でどのくらい向上するものなのか。(ビジュアルはウソつかない)

f:id:tosssaurus:20170108015606j:plain

勉強すればそれだけ成長できるのは、分かりきっていることだと思います。
しかし、分かってはいるものの本当のところ、具体的なことは第三者からは見えづらいことも確かです。

私が実際に制作したデザインをもとに、勉強する前と後ではどのくらいデザイン力が上がったのか検証してみます。
特に、Webデザインを勉強している方や、Webデザインの道を進み始めた方にお役立て頂ければと思い、恥ずかしながら制作物を公開します。

先日、Webの勉強時間が2200時間を超えて、どんな変化があったかをまとめました。
新人Webデザイナーが、Webの勉強を2200時間してみて気づいたこと - IT系女子ログ

せっかくなので、このプロジェクトを行う前と後とで、どのくらいデザイン力がついたのか自己チェックしてみることにしました。

 

Before and After

制作背景

クライアント:某大学病院の総合診療科
目的:総合心療科のご案内
種類:PC用サイトのみ

クライアントからの要望:
①かっこいい感じにしたい
②青を使ってほしい 

あまりデザインにこだわりがないようで、①②を押さえていればOKというクライアントでした。

 

制作デザイン

・Before

2年前に提案用で制作したデザインを引っ張ってきました。
人差し指のある箇所はホバーイメージです。

f:id:tosssaurus:20170107224507j:plain

 【気になったところ】

①グローバルナビや、メインのコンテンツ部分などは要素がギュッと詰まっているのに、ヘッダーの右側や左カラムの下など余白が大きくあいていたりしてバランスが良くないように見える。

②ヘッダーのグレーとビジュアルの濃い青で、かっこいい印象はある。

③全体の青の使い方やシャドウの使い方に統一感がないように見える。
(グローバルナビ・サイドのボタン・フッターに使用している青の、彩度やグラデーションの使い方などが少しずつ違っている?)

④フォントやコンテンツの置き方など、全体的にデザインが単調でメリハリがないように見える。 

サイズ感や2カラムなど、時代を感じますね。

 

・After

要素はほぼ同じ状態で、今の私が制作し直してみました。

f:id:tosssaurus:20170107222537j:plain

 【工夫したところ】

①具体的な要望がなかったので、目指す方向を提案
→総合診療科とは、内科系疾患を中心に幅広くかつ柔軟に診療を行う分野。専門的に細分化された数ある医療分野だけでは、複数の疾患を抱えている方などの診察・治療が難しくなり、高齢化社会の現代にあわせて比較的近年認定された新しい分野でもある。

→上記のことを踏まえ、
・現代的で洗練されているイメージ
・医療系の爽やかなイメージ
を全体のテーマに決め制作しました。

②メインビジュアルにコピーを追加
多くの分野を横断的に診療できるプロフェッショナルな医療分野だというメッセージを込めました。

写真はサンプルで入れていますが、クライアントの病院の写真がくるイメージ。現代的で爽やかなイメージに近づくよう選定、補正しています。 

③「患者さまへ」と「研修医の方へ」の2つをメインコンテンツに
→Beforeの「診療案内」を「患者さまへ」と文言変更し、「研修医の方へ」と対にしてメインで配置。
想定されるメインユーザーに明瞭に伝わるように大きくイメージ写真を使用。
→特に見せたいコンテンツ2つと、その他4つとに分けて配置することでメリハリをつけた。
また、メインコンテンツに濃い青の対比でライトグリーンをあえて使用することで、色彩的にもメリハリをつけた。

 

過去のデザインのリデザイン、結構おすすめです

f:id:tosssaurus:20170108020057j:plain

今見ると、あまり大きく成長していないかもしれません…。
制作時間はBeforeで2日くらい、Afterは3時間でした。スピードアップはできているのでホッとしました。

 

今回自分の作ったデザインをデザインし直したのですが、見てるだけでは考えられないくらい深く検証することができて、とても実りあることでした。

今では当たり前にできることが、昔の自分はできていなかったり、意外と進歩していなかったりと、良いも悪いもモロにビジュアルに反映されます。

 

これって、制作者ならではの勉強法かもしれませんね。 

話足りないので、細かい話は追記しておこうと思います。
また長くなりそうです…。

 

いかに考えたかでクオリティが変わる

実は何度も何度も指摘されてしまっていて、私の課題でもあるのですが、デザインする上で要になるのが『どれだけ考えたのか』です。

どれだけクライアントのことを知っているのか。
どれだけ情報収集したか。
競合のデザインの傾向はどれだけ調べたか。
目指す方向に近いデザインをどれだけ検討したのか。
本当にその方向を目指すのが最適なのか。
なぜ最適だと判断したのか。
どれだけ魅せ方を検討したのか。
本当にこの配置が最適なのか。
もっといい配置があるかもしれないなら試してみたか。
本当にこの要素でいいのか。
少なすぎないか、多すぎないか。…

などなど、時間の許す限り考えられることは、とにかく考えます。
じっくり考えたものとそうでないものは、やはり仕上がりが違うように思います。
デザインの軸がしっかりしているというか、ブレが少ないというか。

 

毎回きちんとできれば良いのですが、自己流で考えようと思ってもうまく行かないときがあるんです。
そんなときに無理矢理デザインしても、なにか曖昧なものが出来上がるだけで、全然魅力的じゃないんですよね…。

分かってはいるんですが、時間がない時とかはとにかく作って、ご指摘を頂いてしまって、まだまだ反省の日々です。
ですので、今年勉強したいのが、「考えること」です。

悩んでいる時に、『世界のエリートが学んできた「自分で考える力」の授業』という本を読んだのですが、とても助けられました。
分かりやすい文章で、考え抜く力をつける練習もあり、「実践できるようになるともっと良いデザインができるようになるだろうなぁ」とわくわくしました。

 

最後に私がよく参考にする国内製サイト集です。
毎日10分でも見るようにしています。

JWDG(Japan Web Design Gallery) 日本のWebデザインギャラリー

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

【S5-Style】Webデザインのリンク集・ポータルサイト

Webデザインリンク集・ソーシャルブックマーク - straightline bookmark | Web Design Bookmarking