初学者がLPサイトデザイン再チャレンジした

未経験からWebデザイナーになるために転職活動中のkinomiです。

前回の記事でご紹介した採用面接課題のLPサイト制作。
そこでのフィードバックや、他のデザイナーさんにもアドバイスを頂き、自分に足りないのは、良いデザインを観る目とアウトプットだと痛感。

その後サイトトレースとかっこいいWebサイトを観る日々を過ごしていましたが…「デザインの引き出し少し増えたかも？いったんここらでデザインしてみたい！」ということで、課題提出したLPサイトをブラッシュアップしました。

前回から変更した個所、その理由についても書いていきます。

最初に制作したLPサイト

再チャレンジしたLPサイト

変更した個所とその理由

最初に制作したものをデザインA、再チャレンジし制作したものをデザインBとして説明していきます。

コンテンツ

□ テキスト
デザインAでは英語のみのタイトルや店舗名があり、ユーザーが瞬時に理解することができない要素が多かったため、デザインBではデザイン要素の強いテキストのみ欧文に変更。

□ 写真
　QUOITWORKS BLOGの「Webデザイナーが覚えておきたい写真の基本構図」を参考にし、サイトに適した構図の写真に適宜変更。

□ セクション
ユーザーが求めるコンテンツの優先度に合わせて構造を変更。対象の業種やサービス内容を冒頭に配置し、細かなセクションもまとめることで、情報の得やすさと視認性を意識。

デザイン

□ カラー変更
　美容サロン経営者の男女をターゲットとしているが、デザインAでは男　　　性ターゲットを意識しすぎてカラーが無難でつまらない印象だった。
　「華やかな美容業界」のイメージに、独立の新しい形をアピールするため「先進的で流行的な」イメージをプラスしカラーを変更。
　
　ベースカラー
→淡いグレーとネイビーで洗練された印象に。
　アクセントカラー
→蛍光色を１色入れ、流行のY2K要素を取り入れ先進的な印象に。
　全体のトンマナに合わせた青みのあるピンク色と水色を入れることで華やかさを保ちつつ、蛍光色の強みを抑えて柔らかい印象に。

□ フォント
///  デザインA  ///
・規則がないまま数種類のフォントを使用し、太さも全体のトンマナとずれていた。
・h1要素とh2要素にメリハリがなく差別化できていなかった。
・価格の数字等も同様に差別化できておらず、適した欧文フォントを使用していなかった。

///  デザインB  ///
・日本文と欧文の2種類のフォントのみにし、太さやデザインでアクセントをつけつつ、トンマナを意識してデザインした。
・h1要素→大きく細め、h2要素を中抜きのデザインor太字に統一し、ユーザーが理解しやすいデザインを意識。
・数字は適切なフォントの選定をし、強調させるデザインを意識。

□ 丸と角のメリハリ
　デザインAでは角と丸に一貫性がなかったため、デザインBではアクセントを入れたい個所に丸い要素を追加しメリハリを意識した。

□ アニメーションを想定したデザイン
　デザインAでは、平面しか意識しておらず、すべての要素を画面に配置していたため見た目の情報量が多く見づらかった。
　デザインBでは、スライドやスクロールに合わせて要素を見せるアニメーションを構想しながらデザインした。

□ ボタン要素の差別化
　デザインAではボタンの角丸と同じデザインの要素が多く、ボタンとそれ以外の差別化ができていなかったため、ユーザーがボタンと見間違える可能性があった。
　デザインBではボタンとそれ以外の要素、それぞれの目的に合わせたデザインにすることでユーザービリティを意識。
　

【悲報】引き出し増えたかも？の領域はまだまだでした

最初に制作したデザインと比較すると見やすくなったかな？とは思います。でもまだまだのまだまだでした。
出来上がったデザインをプロのサイトと比べるとなんか違いました。

そもそもこのデザインでLPサイトの訴求効果を果たせるか？がまだまだ疑問と不安ばかりです。

なにこれ？ここはこうした方がいいやろ、って少しでも思った方！
私に直接！どうか！フィードバックお願いします！

よし、とりあえずコツコツ学習がんばります。またね～

kinomi