駆け出しWebデザイナーに伝えたい!Webサイトデザイン練習のポイント

こんにちは!デザイナーでディレクターのあられです。

デザインをはじめて間もない駆け出しWebデザイナーの頃は、クライアントやディレクターからの要望になかなか応えられなくて、苦労することもありますよね。仕事しながら学ぶのは大変なことですが、ルーティンワークをこなしているだけでは成長できません。私もいつも空いた時間を見つけて情報収集をしたり、試行錯誤の日々です。

今回は、私がこれまでにWebデザイン上達のために実践してきた練習のコツやポイントについて、ご紹介してみたいと思います。デザインの引き出しを増やしたい方は、ぜひご一読ください!

STEP.1 好きなデザインをインプットしよう

好きなデザインをたくさん見つけよう

好きなデザインをたくさん見つけよう

いろんなサイトを閲覧していると、このサイトかっこいいな〜って思うことありますよね。そういうサイトを見つけた時はとにかくブックマークしておきましょう!ブラウザのブックマーク機能でもいいですが、私はPinterestをよく使っています。カテゴリーで分けることができて、あとで見返すときにとても便利ですよー!

好きな理由を箇条書きにしてみよう

好きな理由を箇条書きにしてみよう

そして、そのサイトのどこが気に入ったのか、何が良いと思うのか、自分なりの理由をつけてみましょう。「色の組み合わせがキレイ」とか「フォント選びが上手」とか「余白の使い方がリッチである」とか。箇条書き・メモ書き程度で構いません。

自分の好みを知ることがとっても大事

自分の好みを知ることがとっても大事

さまざまなデザインを見て、自分なりに好きな理由を書きつけていくことで、自分の好みを自覚することができます。この蓄積ができてくると、いざデザインする場面になったときに、脳内にデザインコンセプトがスムーズに組み上がるようになります。

そして、デザイナーに必要な能力の1つである「デザインの言語化」も出来るようになります。デザイナーは、クライアントや上司に自分の作ったデザインを説明しなくてはなりませんよね。デザイナーは「なんとなくこっちの方が雰囲気が良いから…」なーんて感覚やフィーリングだけを語ってはダメです。なぜこのデザインに行き着いたのかを説明できるようになると、良いデザイナーとしての評価につながります!

STEP.2 積極的にアウトプットしよう

好きなデザインをたくさん模写(トレース)してみよう

好きなデザインをたくさん模写してみよう

これいいな!というデザインが見つかったら、Photoshopなどのデザインツールを使って模写(トレース)してみましょう。コンテンツ幅、画像サイズを調べて、実際のブラウザ表示と同じになるように作ってみてください。今度は見ていただけでは分からなかった部分に気づくと思います。

「この1pxの線があるから見やすくなっている」とか「このボタンはタップしやすくするために、この位置に配置されてる」とかですね。作り手であるデザイナーのこだわりや配慮に気づくことができるかもしれません。コーディングのスキルもアップしたい方は、ぜひそちらにもチャレンジしてみてください。

架空のサイトを作り上げてみよう

架空のサイトを作り上げてみよう

模写(トレース)ができるようになったら、今度は架空のサイトデザインを作ってみましょう!

架空といっても、テキストなどを「ダミーテキストダミーテキストダミーテキスト…」で充ててしまうのはダメですよー!テキストもちゃんと考えてみてください。適度な文字数やテキストの読みやすさ、漢字とひらがなのバランスなど自分で考えて配置してみましょう。

Webデザイナーには、情報発信する側(クライアント)と、受け取る側(エンドユーザー)の両方の目線が必要だと思います。時には、クライアントにキャッチコピーを提案することもあるし、ユーザー目線から要望を調整しなければならないこともあります。

作ってみたサイトは、ポートフォリオ(制作実績)の1つとして完成度を上げておいてくださいね!ポートフォリオは、良い仕事を獲得するための最大の武器になります!

まとめ

好きなデザインをたくさん模写してみよう

「好きこそのものの上手なれ」という言葉がありますが、Webデザインの練習には、ぜひこの心意気で臨んでみてください。自分の好みを知ることがデザインの善し悪しの判断基準になり、それがデザイナーの「センス」を磨き上げていくということになるのではないでしょうか。