CONTENTS

D2C・ECコンテンツ

【初心者Webディレクター必見】商品LPのワイヤーフレーム入門編

【初心者Webディレクター必見】商品LPのワイヤーフレーム入門編

 

みなさんはWEB制作ではもはや欠かせないといってもいいワイヤーフレームをご存じでしょうか?

ワイヤーフレームとは簡単に言うとWEBサイトの設計図になります。文字や写真の配置などは一度ワイヤーフレームで決めてからWEBサイトのデザインをする流れとなってます。

今回はその基本となる作成する意図と制作にあたっての考え方をお伝えしていこうと思います。

この記事を読んで、ご質問・ご相談等ございましたらお気軽にお問い合わせください。

記事の目次

1.そもそもワイヤーフレームとは

2.ワイヤーの目的作る意図

3.ワイヤーフレームを作るときの考え方

4.まとめ

 

1.そもそもワイヤーフレームとは

ワイヤーフレームとは先ほど述べたとおりWEBサイトの設計図です。大まかにテキストのデザインや配置などの構成を設計していきます。

LPやWebページのコンテンツや情報などを上記の図のようにしたのがワイヤーフレームとなります。

2.ワイヤーフレームを作る目的

①ワイヤーフレームを作る目的としては、実際に運用するにあたってWEBサイトのわかりやすさ見やすさや訴求軸をしっかりまとめられているかなどを社内やクライアント共有するためにつくります。デザインが出来上がってから変更をするとなった場合時間やコストがかかりますそちらを鑑みてのしっかり双方の認識に差異が生まれないように

②デザイナーに正確なコンセプトや意図を伝えるために活用されます。文字のデザインフォントをとってもサイトの印象がだいぶ変わってしまいます。そこでワイヤーフレームでトーン&マナーやフォントや色使いや写真の要望例えば表現みずみずしいなどデザイナーに正確なゴールを伝えるために作ります。

3.ワイヤーフレーム作り方

①ユーザーのペルソナを理解する。ユーザーのペルソナを分析するにあたって最適なのがクラウドワークスなどを使ったアンケートや通販サイトのレビューやYahoo知恵袋などを活用してユーザーの理解を深めていきます。

②請け負う商材や会社の特徴や電話番号等Webページに記載したい内容を箇条書きにして書きだす最初の段階ではまず情報の抜けがないよう思いつく限り情報書き出す。先ほどのユーザーにあったペルソナに合わせて情報を取捨選択する。さらにその情報の中からWEBサイトの目的にそって優先順位をつけて情報を整理していきます。

③次に実際に商品の競合サイトを確認していきます。売れている商品のLPのコンテンツのレイアウトや配置や文字の量などを確認しその時の時代にそったLPを作れるようしっかり分析します。売れてるか売れてないかの調べる方法は、google広告商標キーワードの検索ボリューム数で確認できます。
2021年9月時点の流れとしては、フラットデザイン、文字が少ない、動画やジフが多く、コンテンツの質は高いほうがCVにつながるLPとなってます。

4.まとめ

今回はワイヤーフレームの概要と考え方等ご紹介しました、ワイヤーフレームをきちんと作っておけば、制作の段階から完成イメージ明確にできます。

ここでワイヤーフレームを情報入れれていれば社内やクライアントと意思疎通もそつなくこなせていけるでしょう。
ま負担の多い修正作業を減らすことができますので、WEB制作においてとても作業の効率化のポイントになります。

皆さんもスムーズな制作作業のためにもワイヤーフレームを活用していきましょう。

また弊社では圧倒的実績を持つECコンサルタントがGoogleのAI技術を利用した最新の広告手法を活用して10社以上のクライアント様のAmazon・楽天・自社通販などの立ち上げサポート・運用代行・転売対策を行っております。ぜひこちらで質問やご相談を承りますので下記よりお気軽にお問い合わせください。

現在期間限定のキャンペーンを実施中です!ECサイトを始めてみたいという方ECサイトの運用代行を検討している方は、下記の期間限定特設ページをご覧になったうえでぜひお問い合わせください。