足場買取専門ページのLPを依頼され、ラフ案を作成しました。既存のコーポレートサイトに貼付する形になります。
デザインコンセプト
非鉄金属資源専門商社のLPです。全体がブラックでクールなコーポレートサイトで、ビビットレッドがアクセントカラーとなっています。足場資材の買取売買を強化したいとの要望でしたので、コーポレートサイトに合わせたLP作成を依頼されました。コンセプトは、足場資材の高価買収を目的としているため、「高く買って安く売る」をポイントとしたい。ここを、コーポレートサイトに合わせてBtoBの顧客に刺さるデザインを目標としました。MV、取り扱い商品のサンプル画像の綺麗な見せ方がポイントを重要視しました。
ターゲットユーザー
- 40歳～60歳
- 足場買取の高価買収を目的としている経営者、営業担当。BtoBを目的としたLP。
メンバー
LP作成チームは3名構成です。HP全体の管理だと、5名ほどです。
- LPデザイン、フロー図等（担当）
- コーダー1名
- ディレクター1名
担当領域
- LPページデザイン
- フロー図作成
- 画像加工・トリミング
LPページのデザインのみ行いました。
製作期間
約1か月
ラフ案はリテイクも含め2日ほど。2案提案しました。
Desktop Design
足場素材を、見栄えの良いものに変更しました。購買促進を顧客に促すためのLPなので、クライアントの要望により、「高く買って、安く売る」を目立たせるデザインになりました。
レスポンシブDesign
レスポンシブ対応のデザインはこちらです。
Before、After
他に提案したLP
既存のHPデザインに忠実に作成してみました。あまり面白みがなく、LPとしては今一つとのことで没になりました。
制作のポイント
CTAボタンデザイン
コーポレートサイトのイメージ、コーダーライクのデザインを意識しすぎると、あまりLPっぽさが出ません。そこで、1案目は前述を意識したデザイン。2案目はUIを意識したデザインを作成しました。採用されたのは2案目です。CTAは、MV直下と最後に配置しています。
1案目。既存のCTAをそのまま持ってきたもの。
2案目。UIとLPを意識。電話番号を大きく、お問い合わせボタンにアクセントカラーを使用。ユーザーの目を弾くデザインとなっています。こちらが採用されました。
カタログダウンロードボタンデザイン
カタログのダウンロードボタンが既存のものだと目立たず、ユーザー側から見落とされる懸念がありました。アクセントカラーを使用し、ここをダウンロードすると詳細が見れるようボタンのデザインを工夫しています。
既存のダウンロードボタン。pdfロゴも小さく、ボタン字体も目立たない。
pdfマークを大きく変更。ボタンは左側にあり、文字が右側にくるのが一般的。背景ばアクセントレッドを使用して目立たせ、文字はboldに。コンバージョンにも影響する大切な部分であるため、UI/UXに特化したデザインに変更。こちらが採用されました。
MV画像の変更
既存の画像だと、施工現場の写真をそのまま使用しているようであまり見栄えが良くない。クライアントからの要望があり、pixtaから綺麗な画像をサンプルで配置しました。デザインのOKを頂いたので、サンプルで配置した画像は購入し、LPに採用されました。
既存のページ
採用されたMV画像。足場であることが分かることと、商品が美しく配置されている。
商品画像のコンテンツ
商品のコンテンツです。クライアントから一通り買取の商品名を頂き、美しく見える商品画像をpixtaからサンプルで配置しました。文章は、足場買取専門店のページを何軒か参考にし、サンプルテキストとして入れています。
枠組足場の画像加工
クライアントからの指摘により、枠組足場のサンプル画像をアップに加工しました。周囲のサンプル画像と比べ、この画像だけ小さく違和感があったため、周りに合わせています。背景も白で違和感があるため、他コンクリ素材と合成、影をつけて2つのサンプル画像と違和感がないよう加工を施しました。
素材選びの難しさ
工事現場の足場素材は綺麗なものが少なく、選定が難しかったのですが、加工や検索方法を工夫しクライアント、プロジェクトチームの双方が納得のいく画像を選ぶことができました。
フロー図の作成も担当しています。
LPとは別件で、同コーポレートサイトで使用するフロー図作成も依頼されました。クライアント側で、事業方針にわずかに変更が生じたためフロー図の作り直しをしてほしいとの依頼でした。こちらのフロー図が採用されています。
フォントサイズをユーザーに見やすい12ptくらいにしています。
使用ソフト
- XD
- PhotoShop（画像合成・トリミング）
- Illustrator（フロー図作成）
- ClipStudio(内部イラスト用)
工夫したこと
足場素材のフリー画像が圧倒的に少なくクライアントに提供できる素材の調達に難儀しました。そのため、いつもはphotoACなどのフリー素材を使用していますが、今回はpixtaで有料素材を選定して配置しています。有料素材であっても、きれいな画像の選定に難儀し、ディレクターと相談を密に重ねながらの作業となりました。
デザイナーとしての信頼を獲得。
ディレクター、コーダーとの連携なくしてはできない仕事となりました。チーム全体として関わる機会は少ない案件ですが、スポットとしてデザインの依頼を任せて頂けるため、LP、バナー、フロー図の作成などデザイン関連の仕事を任せて頂けるようになっています。チーム連携の結果として、HP管理全体の依頼を受託することができ、デザイナーとしてクライアントにも会社にも貢献できる仕事となったと感じています。
