worksしごと

要件が詰まってきたところで、実際に画面設計を行う。ワイヤーフレーム作成の目的はページ内に必要な要素を洗い出すこと。合わせて必要な機能や挙動も詰めていく。

ワイヤーフレームは基本的にAdobe XDで作成。グレースケールで作成し、デザインの自由度を確保する。

ワイヤーフレームを作成する際に意識すべきこと

CTA

• コンテンツを消化した後にCTAが設置してあるか
• グローバルナビにCTA(コンバージョンボタン)が設置してある
• ホームのファーストビューにCTAが設置してある
• CTA(コンバージョンボタン)は、他のボタン要素とは差別化されている
• CTAは、中央揃えで視線をブロックするように配置している
• 各ページのCTAは、コンテンツ内容に合わせて内容やラベルを変えている
• コンテンツ後のCTAは、コンテンツを読んだ自然な文脈の流れが考慮されている
• コンテンツ後のCTAは、自然と目に入ってくるデザインになっている
• コンテンツ後のCTAには、アクションに誘導するためのリード文が用意されている
• CTAにボタン要素を置きすぎず、必要最小限の情報にとどめている
• CTAには電話番号など、オンラインに限らず重要なアクションが記載されている
• CTAには登録にかかる費用、時間、締切り、キャンペーン情報など、クリック率を高める情報が含まれている