見出し画像

無料添削デザインスクール #251 超実践型デザインお題添削「ウェディング系LP」

イライジャ｜WEBデザイナー　デザイン添削おじさん

お題

今回の添削は、私が作成した超実践型のデザインお題を元にデザイン作成して頂いたものになります。
超実践型ということで、実際にあった実務を課題に加工したものです。

添削

ウェディング系のLPになります。
淡い色がきれいですね。

■サイズ感

お問い合わせボタンが異常に大きいですね。
コンバージョンにつながるので目立っては欲しいのですが、バランスが崩れるほど大きいので調整が必要です。

もしこのサイズのまま作るとしたら、中の要素を小さくしてバランスを取ってあげると、大きすぎたのが余白ということになるのでそこまで邪魔にならないかと思います。

■茶色

テーマカラーを背景に引いているのですが、茶色って使い方難しいですね。
濃すぎると汚くなっちゃうので調整が難しいですね。

少し彩度を落としてあげるとそこまで茶色っぽさがなくなるので、色味の調整をしてみてください。

■ボタン

Webサイトと紙の広告の違いといえば、ページ遷移ができる。
つまり、ボタンがあるということです。

そんなWebの代名詞ともいえるボタンですが、添削しているとほとんどの人が適当に作っていることが多いです。

ボタンは全体の雰囲気を作るのにとても重要な要素です。
今回のLPのようなシンプルなデザインになればなるほどデザインで主張することろが極端に減ってきます。
そうなるとボタンとかしか表現するところがなくなります。

プロの方は色んなボタンを考え、押しやすさとオシャレさを両立できないかと日々努力しています。
Webだとさらにhover時にギミックを付けられるのでデザインしていても面白い箇所です。

コンバージョンにもつながる重要なところなので、押したくなるようなデザインを考えてみてください。

■写真の装飾

個人的な意見ですが、写真の周りに線を入れるのをオシャレに感じない…
やっている人もいますが、すごい繊細に入れてやっとオシャレになる感じで、すぐにチープな感じが出て難しいのであまりお勧めしないです。

装飾を足してチープになるくらいだったら、写真と文字だけでカッコよく見せられないかを考えた方がいいかと思います。

■スライド

「ここスライダーにして」という依頼は今後ずっと出てきます。
コーディングして実装するとゾッとする人もいますが、今は簡単にできるのでそんな怖がらなくても大丈夫です。

ただ、一般的な簡単に導入できる「Slick」というスライダーの動きは理解しておくとデザイン作る時に無茶苦茶にならないです。

そして、スライダーを作る時の絶対条件があります。

・スライダーだと分かること
・次へ / 戻るの矢印を付ける

とりあえずこれだけ分かるようにすればスライダーの完成です。
現状だと矢印がないのでどこをクリックしたら次の写真になるのかが分かりません。

「写真変わるのジッと見とけ！」

そう言いたいですが、スライダーは見たいものを見れるようにしておくとストレスがないです。
Webサイトは美術品ではないので「じっくりと流れる写真とお時間をお楽しみください」は通用しません。
「パッと見て次！」タイパ重視で作りましょう。

■色味

先にも書いたのですが、茶色って難しい。
テーマカラーが茶色系の時は、メインはその色を使うとして、サブでサイドの違う色を用意しておくといいです。

ちょっと明るいのとサイドが低いのを用意して、薄いところはサイドが低いグレー寄りのを使うとか、テーマカラーは一緒だけど微妙に違う色を使い分けると全体が同じ色でのっぺりしなくなります。

真ん中の明るいところを差し色として別の色にしてもいいです。

■矢印

「神は細部に宿る」

そんなことも言いますが、単純にシンプルなデザインはデザインする箇所が本当に少ないので、ちょっとしたところにもデザインを入れてあげましょう。

シンプルなゆえにチープなところがすごい目立ちます。
なのでシンプルなデザインこそデザイナーの力が試されます。

Twitterでプチ炎上しましたが…
ボタンの角丸や矢印の角度だけで力量は分かります。

「矢印はこれを使う！」みたいに自分の中にルールを作ってもいいかと思います。
それを日々ブラッシュアップしていくと、いつか自分のデザインを作り上げることができ、デザインの依頼が名指しで来るかもしれないです。

■シンプル

LPやWebサイト、バナー以外でもシンプルというか要素が少ない箇所を作る時は多々あります。
テキストだけの商品説明パンフレットや注意事項だけのリーフレットとか、新着情報だけのページとか…
テキストだけで画像なしという時に、ゴチャゴチャ付け足さないできれいに見せるというデザインをすることも多いです。

「これ以上何をすればいいんですか！？」

そのくらい少ない要素でもきれいに見せる技術を持っていると重宝されます。
自分で考えるととにかく時間がかかるので、カッコいいサイトなどを見て、いいと思ったものは吸収しましょう。
真似して組み替えて、自分だけのデザインにするといいです。

まとめ

全体的にレイアウトなどの崩れはそこまでないので、細かいところを調整していくとプロっぽいデザインになると思います。

あとは、思いっきりデザインを足してみるのもデザイナーとして必要なスキルなので、ドカンと大きく崩してみたりすると新しい発見があります。

おとなしいデザインを作った時も、一か所だけインパクト重視にしてみるのも作っていて楽しいです。
意外とそっちの方が先方にウケがよかったりします。
ワイヤーをぶち壊す練習もしてみてください。

デザイン添削のご依頼はTwitterから！

Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」または動画で添削をする「#動画でデザイン添削希望」を付けて投稿してください。


この記事が気に入ったらサポートをしてみませんか？