見出し画像

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

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

お題

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

添削

ウェディング系のLPになります。
方向性はいいので、あとはバランスですね。

■お約束の罠

同じ課題の他の添削でも紹介していますが、このお題は実践向けということで、初心者の方がよく引かかる罠を複数用意してあります。

・ワイヤーに影響されすぎる罠
・ワイヤーのサイズ感の罠
・ワイヤーレイアウトが悪い罠

ワイヤー通りに作れば間違いないと思いますが、確かに依頼通りに作っているので100点なのですが、依頼者は120点を期待しているのでワイヤー通りに作るのは意外と嫌われます。

程よく崩して、今回の商品に合わせたデザインとレイアウトに組み直す。
これができるとデザイナーとして重宝されます。
信頼されると徐々にワイヤーが雑になってくる弊害もありますが…

このあたりを踏まえて確認してみてください。

■メインビジュアル

ヘッダーのバランスが崩れていますね。

要素の位置がセンターでもなく下揃えでもないのでバラバラしているように見えます。

ヘッダーの高さも高いです。
LPなどはメニューなどがないのでヘッダーはとても簡素になります。
ヘッダーにはロゴだけというのもあるので、あまり大きくなくて大丈夫です。

メインキャッチのセンターがズレていますね。
見る人はデザイン関係の仕事でなくても無意識にズレや崩れているのに気付きます。
その違和感を自然とストレスに感じて離脱してしまいます。
よく言われるのが「？」が何個か付いたら、疑問に感じたら人は離脱する。
これを減らして、見ていて気持ちいい、快適に操作できるサイトにするのもデザインです。

文字サイズも大きいように感じます。
文字サイズやバランスのとり方で見え方が大きく変わるので色々試してみてください。

文字間や文字サイズ、大文字小文字でも印象は変わります。
どれが一番いいのかを考えながら作ってみてください。

■余白

ここはとにかく余白が足りないですね。
ギューギューに詰め込まれているので余裕のない感じに見えます。
タイトルに近い下線を引くとリンクと誤認されるのでおすすめしません。

少し余白を入れるだけで写真が際立って見え、文字も見やすくなります。
余白は入れすぎると間延びして見えたり、商品によってはあまり余白を入れない方がいい時もあります。
時と場合を見て余白を調整しましょう。

■バランス

これはこれでいいのですが、バランスが上に寄ってしまっているので、全体を少し中心にバランス調整してあげるといいです。

タイトル下に線を入れていますが、この入れ方はバランスが悪いのであまり見たことがないです。
ここでも余白を入れて、線はあまり主張しすぎない程度のアクセントで入れてあげると自然です。

■スライダー


ここのスライダーはワイヤーをわざと古いレイアウトにしてありました。
ディレクターが必ずしも最新のレイアウトで出してくるとは限らないです。
また、ディレクターはデザインをしない、レイアウトはデザイナーが考えるもの。
この決まりを作らないとディレクターはしなくてもいいレイアウトを考えながらワイヤーを作ります。
どうせ全部作り直すのに…
ディレクターの無駄な作業が増えるので、デザインはデザイナー。
ディレクターは集客などのマーケティングの方に注力してもらう。

なので、ここのレイアウトも全部ばらして作り直してあげるといいです。
このスライダーの見せ方でもいい時もあります。
公共施設の施設紹介とか…

今回はウェディング系なので、写真を大きく見せてあげるとチャペルのいいところや雰囲気が伝わりやすいです。

■統一性

LPは長いので下に行くにつれてデザインパターンに困って関係の無さそうなデザインを無理やり追加してしまうことがあります。

別のデザインを入れることは悪いことではないのですが、先にも書いた「？」と思わせてしまうデザインは避けた方がいいです。

入れるなら思いっきり入れる。
入れないなら入れない。
ここは思いっきりが必要です。
ただ、この思いっきりデザインを入れるのは性格も関係してきます。
デザインを思いっ切りできる人もいれば、できない人もいます。

どちらかというと、思いっきりデザイン入れられる人の方が少数です。
破壊的に一度違うデザインを入れて、そこから馴染ませて新しいデザインを発見する作業をすると、全然違ういいデザインになることがあります。

失敗を恐れずに思いっきりデザインを入れてみてください。
きっと別の何かが見えるはずです。

ダメだった場合も私みたいな人や上司が「これはやりすぎ」と指摘してくれます。
徐々にその感覚を自分で調整できるようになります。
でも「やりすぎ案」として１案できます。
意外とこれが通ることが多い…

■ワイヤーに従う時

ワイヤーを壊せと言ってきましたが、ワイヤーを守ることも大切…
真逆のことを言っていますが、これを両立させる必要があります。

ディレクターはワイヤーを無作為に作っているわけではなく、SEO、集客、マーケティングなど、デザイン以外のことを考えてワイヤーに組み込んでいます。

つまり、ワイヤーにあるものは全部必要なのです。

デザイナーが勝手にこれは必要ないと削ることはタブーなことが多いです。
あまりにもひどいワイヤーの時は文言を変えることもありますが…

フェアのところはスライダーになっていたので、スライダーがない、スライダーに見えないデザインはワイヤーから逸脱しているので、ここはワイヤーの要素をしっかり入れてあげましょう。

■何でもない所をしっかりと

FAQなど、ただのテキストのかたまりをいかにきれいに見せるか。
よくある部分ですが、他のサイトを見ると、全部違うんですね。
商品ごとにFAQの見せ方も全部違います。

ただのテキストで、形式が同じなのに全部違う。
テキストだけでもその商品らしさが出せるのです。
今後も作る部品なので、これだけで毎回違うデザインが作れるくらいになると作っていても楽しいです。

■ボタン

ボタンのサイズが小さ過ぎる人多いので、このサイズでもいいのですが、バランスが崩れています。

文字の位置とサイズはこれでいいのか、アイコンの位置は矢印は右に揃っているのに文字についているのはいいのか。
考えるところは多いです。

アイコン付けるなら矢印はいらないかな。
シンプルで見やすいボタンを心掛けると、クリックする恐怖心が減ります。
ワンクリック詐欺などもまだあるので、クリックするというのもまだ少し怖いものです。
クリックしたら何が起きるのかを分かりやすくすしてあげるといいです。

■初心者の方共通

添削していて分かった初心者の方で共通しているのが、フッターを全然関係のない濃い色にする…
これは何かの書籍に書かれていたのでしょうか？
最後の最後でデザインテイストがガラッと変わるんですよね。

フッターで違うことをしないといけないわけではないので、同じテイストで作ってあげてください。

これは本当に共通しているので謎です。

修正

修正して頂いたのでこちらも添削させて頂きます。

■バランス

まだズレていますね。

まだまだ余白が足りないです。
・思いっ切り入れたの
・入れすぎた
・異常に入れた
何パターンか作ってみて、どれが美しいかを選んでみてください。
そして、Webに当てはめて置いてあげるとまとまります。

■ボタン

全体ボタンについてあまり書いてなかったですね。
商品によって雰囲気、品格というものがあります。
それを文字や形状で表現します。

大きすぎると下品なのと、文字の太さも太い明朝は下品です。
アイコンも素材のまんまだとボテッとするので、細いので作ってあげると雰囲気が出ます。

■写真サイズ

前回よりすごい写真が大きくなりましたね。
写真のサイズは、サイトの特徴ごとに違います。

公共性が高いもの、説明が多いもの程、写真は小さくなります。
文字がメインになることが多いので、写真はそんなに大きくなくてよくなるからです。

逆にブランドなど、見た目の印象を伝えたいものは写真が大きくなります。
言葉で説明するのが難しい時など写真で見せてしまうことが多いです。
・ブライダル
・リクルートサイト
・ブランド
などなど。

現状の写真で真ん中のが大体700pxくらいですかね？
中くらいのサイズでブログサイトくらいの大きさです。
もっと大きくてもいいかと思います。

式場探しで決め手になるのはやっぱり式場がきれいなどが大きいので、それを思いっ切り見せてあげる必要があります。

あと細かいところだと、矢印はこれでいいのかな？
道路標識じゃないので、ここまで分かりやすくなくてオシャレにしてあげてください。

■文字と写真

文字と写真の位置ですが、個人的には画像が上でその下に文字を置くのが一般的かと思います。
文字と写真どっちを先に見るかというと、画像の方がパッと見て終わることが多いので、スマホにした時に流れで見ると画像が上の方が内容が分かりやすいと思っています。

■テキスト


ここはまだ修正の余地がありそうです。

修正2

■メインビジュアル

メインビジュアルのタイトルがまだセンターじゃないですね。
とりあえずセンターに置てからずらしてあげるといいです。

狙っていない限りユーザーからは「ずれている」としか見られないです。
狙いが見えない時も同様です。

■余白とバランス

かなり余白を入れてすっきりしたように見えます。
余白が空いたので数字が異常に大きく見えるので、そこも調整が必要です。

文字と余白は正解がないというくらい置く場所によって見え方が変わります。
余白をうまく使っているサイトや雑誌などを見てください。

■ボタン

ボタンもまだこのままでいいのかなぁ～と思ってしまいます。
ふち線のあるボタンは意外と少ないです。
フラットデザインやマテリアルデザインのボタンが多く、さらに流行は毎年変わるので、常にアップデートしながらデザインしてあげましょう。

■繊細さ

スライドの何枚あるかの線ですが、5pxくらいあるのかな？
見やすくていいのですが、これは見るものであって見るものではない…
私だったら1pxか太くても2pxにしちゃいます。

それだとクリックできないだろうと思われますが、クリックするためのものであって、クリックするものではない…

細部にも繊細さをまとわせてみてください。

■特典

ここは丸っと寂しいのでもう少し作り込みが必要です。

■矢印

ここで突然薄いマスカットカラーの矢印が出てきましたが、これでいいのかなぁ…
デザインってすごい細かいところの作り込みを繰り返して全体ができてくるので、地味な作業ばかりですが、全体と調和した矢印を考えてみてください。

■FAQ

ここも丸っとバランス調整が必要です。
このままデザイン加えなくてもバランスだけできれいに見せることはできるのでやってみてください。

まとめ

修正が微調整レベルなので、もっと大胆に修正してもいい段階です。
微調整は最後の最後でするものなので、そこまでできていたらあまり添削することもないくらいです。

自分で答えを出そうと微調整していると、本当に答えのない問いをしているように感じてしまうのがデザインです。
トップデザイナーならそんな悩みは当たり前ですが、Webサイトはそこら中に答えが転がっているので、どんなサイトを作る依頼なのかなどをまとめて、参考サイトをまとめて、それを真似て組み合わせるだけでも十分なサイトができます。

それを繰り返すと徐々にバランスなどが分かってくるようになります。
つまり、身についた証拠です。

実務になると作るサイトは毎回違うので、その都度参考サイトを集めるところからスタートします。
自分でゼロから作るということはプロでもあまりしないので、まずは参考サイト集めてみるところからスタートしてもいいかもしれないです。

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

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


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