こんにちは、さおり(@iropon30)です。
先日うぇぶ道場でLPをつくってみようという記事を書きました。

今回はそのLPの添削編。お相手はWebデザイナーを目指しているmomoさんにお願いしました。
mogaBlog さんのケータリングのワイヤーフレームをお借りしました。
ありがとうございます。
初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説しているブログ
問い合わせて、ご紹介したり、添削記事を投稿しても良いかを聞いたら、快くOKしてくださいました。感謝です。
資料の読み込みとスケジュール出し・ロゴの制作
まずは資料の読み込みとスケジュール出しをやってみてもらいました。
資料の読み込みから、まずは必要な情報を精査して、そこから考えられることを書いてもらいました。
先にスケジュールを立てる(自分がどのくらいで出来るか予測する)、実際にかかった時間との差を見るというのも
大事なので、ぜひスケジュールもあわせてやってみてください。
実際の添削

XDのファイルを共有いただいて添削しました。今回はパソコンのほうをメインに添削しました。
全体的なイメージを見たい方はmomo さんのブログにイメージがあるので見てみてください。
私が手を動かさず、気になったところ、修正したほうがいいところを文字でお伝えしました。
私自身も、文字で伝える練習です。
ヘッダー

横幅を指定サイズ内に入れるよりも、いっぱいいっぱいにしたほうが良いのでは?と提案
ヘッダーの高さがあると、追従する時に見れる範囲が狭まるので、縦幅を小さくするように言ってみました。
ファーストビュー

添削内容
ファーストビューも100%にしても良いと思うことを伝えました。
少しバナー感が出てしまっているので、もうすこしサイト(LP)の感じがでるように…とアドバイスしました。
添削後

このふんわりしたフィードバックのせいで、momoさんが迷子に…ごめんなさい
3つの特徴


添削内容
見出しの部分はランディングページなのでもうすこしタイトルに遊び心を入れてもいいかな?と提案しました。
アイコンをつけたり、ロゴにしてみたり。
01〜03の部分は、ロゴが可愛く仕上がっていたので、ロゴと同じようにスプーンとフォークを両サイドに入れてあげると、美味しそうに見えるのではないか?とお伝えしました。
3つのプラン


添削内容
きれいにまとめようとしているのはわかりますし、コーディングしやすいようにやってしまうのはわかる…のですが、
もうすこし、画像をくり抜くかたちを変えたり、装飾を入れてあげて楽しさを出しても良いかなと思いました。
対応エリアの部分


添削内容
※大阪府、兵庫県内で上記に記載がない場合は要相談という部分が、地図と重なるので、
できれば横幅を県のところにあわせたほうが良いと思うとお伝えしました。
お問い合わせ_フォーム


添削内容
必須の部分は目立ってほしいけど、各項目と同じ大きさだと少し違和感があったので、
角丸で囲んで見ては?というのと、送信ボタンをもうすこし大きくしたほうが良いとアドバイスしてみました。
問い合わせ_電話とフッター


添削内容
もう少し電話かけれる感を出したほうがいいかなと思ったのと、
ページトップも、もうすこしデザインしてあげてもいいかもと思いました。
フッターも色が重たいのと、
背景に色がついているので、ロゴが使えない(どうせなら出したい!)と言うことを指摘してみました。
文字だけで添削を伝える難しさと再度の添削
リモートワークが普及する前は、後輩にここはこんな感じ〜と横で伝えたりしていましたが、
実際、音声もなく文字で伝えるのはとても難しいなと感じました。今まで対面に甘えてきていたな…と思いました。
私も文章できちんと伝えれるように、ここはこれからも強くしていきたい部分です。
添削後、すごくよくなったのがわかりますよね!ただ、もうすこし工夫してみるともっと良くなる!と思い、
今度は私も手を動かしてみて、添削してみます。
ファーストビュー


添削内容
惑わしてごめんなさい…
内容は変えずに、あしらいや美味しそう!どんなサイトなの!?というのがわかりやすいように、
FVを変更してみました。柔らかいイメージを出すために、楕円でシェイプしてみました。
3つの特徴


添削内容
広告で流入を増やし、認知をとりに行くことも兼ねているのであれば、せっかくかわいいロゴがあるので使用してみました。
また全体的に色が濃い気がしたので、薄めの色でメリハリをつける。
装飾をしてあげるとなお美味しそうなイメージになるな!と思い入れてみました。
3つのプラン


添削内容
背景の色を薄くしてみました。薄くしただけですが、写真が目立ってより食べ物が美味しそうに見える気がします。
対応エリア


添削内容
ほぼ変更していませんが…
ちょっとあしらいで、配達員さんを入れてみたり、
注意事項の文章をまとめたりしました。
地図ではおおまかなエリアを確認し、気になれば自分のエリアを確認するだろうということで、
このような添削を行いました。
お問い合わせ


添削内容
こちらも背景の色を薄くして、それぞれのボックスの横幅を少し狭くしています。
理由としては「こんなに入力しなければ…」という印象を与えたくないからです。
問い合わせ_電話とフッター


添削内容
安心して電話をかけてもらえるような印象を持ってもらいたくて、人を入れてデザインしてみました。
フッターの部分もバランスの調整やカーブを入れて柔らかい印象にしてみました。
まとめ
添削してみて思ったことは、やはり文字だけで修正内容を適切に伝えるのは難しいと感じ、私も勉強していかないといけない部分だなと再認識しました。いつも「なんとなく」でつくっている部分も多いので(反省)、きちんと理由を述べたりすることの必要性や大切さを感じました。
お相手してくださったmomo さんありがとうございます!