どーも。えーとも(@atomoblog)です。
先日、新規商品の紹介ページ作成を依頼されました。
今回はえーともがページ作成の際にやったコトを流れに沿ってご紹介していきます。
この記事は「新しいページの作成を依頼されたけど、何から手をつければいいかわからない」というお悩みを抱えている方向けの情報が載っています。
決まった流れというのは無くて、その時持っている知識とかでやり方は変わってきます。
今回ご紹介する流れはWordpressで運営しているサイトでの一例ですのでご参考までに〜。
事前準備：新規作成するページの情報を確認する
今回作成するのは新しい商品を紹介するページ。
BtoBで販売する高額商品なので、ネットショップ的な「買いたくなる」という紹介ではないです。
「欲しいな〜」「気になるな〜」っていう方向への動線はオフラインDMがあるので、DMに掲載しきれなかった情報を補足して載せていくイメージ。
最終目標は「お問い合わせゲット」です。
オフラインDMと合わせて行うキャンペーンなので、お問い合わせの手段はネット、TEL、FAX問わない方向で。
カタログの確認
商品のカタログがある場合はカタログに一通り目を通します。
今まで扱ったことのないジャンル、カテゴリーの商品の場合は競合となる商品のカタログ、紹介ページにも目を通してジャンル、カテゴリーに関する情報も取得します。
ページには「A社の○○と比較して〜」なんて書かないのですが、競合商品との違いはプッシュできる要素の一つになるので競合商品の勉強も大事です。
営業さんにヒアリング
実際に商品を売っている、売ったことがある営業さんにお時間をもらって商品についてのヒアリングをします。
ヒアリングする内容は主に↓のような内容。
- この商品でお客様のどんな課題を解決できるか
- この商品のどこがお客様にウケが良いのか
- 営業さんがこの商品をオススメする理由
できるだけ掘り下げて聞いていきます。
実際にお客様に対面している営業さんの経験に勝る文章って、ライティングに慣れてない人からすると書くのが難しいですからね。
百聞は一見にしかずなんやな〜。
あと、ヒアリングの際はスマホのボイスレコーダー機能を使って、ヒアリングに集中すると良いかもね。
画像、動画の準備
文章だけのページだと「どんな商品か」がなかなか伝わらないので、商品の写真と動画をできるだけ集めます。
すべての写真を載せる必要は無いのですが、素材は多いに越したことはないです。
画像、動画の入手方法は
- 自分で撮影する
- メーカーから提供してもらう
- カタログから抜き出す
の3つがあります。
昨今では当たり前の話になっていますが、写真にも著作権があります。
他社(他者)の権利を侵害しないように気をつけましょう。
マインドマップを作る
事前準備で取得した情報をマインドマップに書き出していきます。
えーともが使っているマインドマップのツールはXMind。
手に入れた情報を文章、単語など形式を問わずガンガン書き出していきます。
「あんなことあったなー」とか「いらないかもしれないけどー」って情報も書き出しましょう。
アウトプット中に芋づる式で情報が出てくるコトも多いので、何でも書き出していくのは大事。
マインドマップに書き出した情報はカテゴリー別に整理します。
関連する写真があれば一緒に引っ付けておくとページ作成時の画像添付漏れを防げますよ。
あと、商品スペックなどの文章より表のほうが見やすいデータ類については「テーブルで表示」などのメモも引っ付けておくと脳みその省エネができる。
マインドマップ書いたあとは脳みそが息切れして考えがまとまらなくなる。
効率的に作業を進めるためにも省エネ意識するのはすごい大事なんやで。
見出しを決めて文章を書く
マインドマップで整理した情報をもとに見出しを書き出します。
見出しを書き出して全体の流れを決めたら、今度は見出しの下に文章を追加。
文章の内容はマインドマップをコピペしたり、マインドマップを見ながら考えていきます。
マインドマップの作成、整理の段階である程度の文章化をしておくと悩む時間が減って楽ができるよ。
マインドマップに「テーブルで表示」でメモった要素は表形式にするのをお忘れなく。
写真・動画などを追加する
こっからWordpressの管理画面上で作業します。
見出しと文章をコピペして、見出しを設定。
その後、見出しや文章の途中に事前に準備した写真や動画を追加していきます。
サイト上で見ると小さい画像には拡大画像へのリンクを貼ったり、何しているかよくわからない写真にはキャプションも添えましょう。
一応、SEOも意識してalt属性も付与していこう〜
リンクやフォームを追加する
ページの最終目標が「お問い合わせゲット」の場合は同じページにお問い合わせフォームを追加しちゃいます。
リンク押してページ移動はお客様から見て面倒だからね
WordPressの場合はContact Form 7っていうプラグインでお問い合わせフォーム作るとショートコードで固定ページにフォームが追加できて楽です。※無料です
お問い合わせの履歴をWordpress上で確認できるFlamingoも一緒にインストールしておきましょう。※こっちも無料
お問い合わせフォームはページの末尾に一個だけ設定しておいて、ページ途中からは「お問い合わせはこちら！」のリンクで飛ぶようにしておくと便利。
お問い合わせフォームの上に置く見出しタグにid属性(例:contact)を付与しといて、aタグのhref属性を「#contact」にするとページ内移動を手軽に実装できるよ。
具体的な書き方は↓を参考にしてね。
プレビューで確認する
プレビューでPC上での見栄えを確認します。
表示崩れなどがあればHTMLタグやCSSを確認して崩れを直します。
わりとよくあるのは大きな画像使ったら枠から飛び出ちゃうパターンやね。
表示崩れを発見したら、崩れている要素にカーソルを載せて右クリックから「検証」を選ぶと開発者ツールが呼び出されて、試しにCSS適用したりして試行錯誤ができます。
※Google Chromeでの話。Firefoxにも似たような機能があります
スマホ表示でも確認する
Google Chromeの開発者ツールではスマートフォンやタブレットで現在のページを表示すると、どのように見えるのかを確認できる機能もあります。
開発者ツールの左上にあるアイコンをクリックすると
こんな感じでスマートフォン表示の確認ができます。
機種名が表示されているドロップダウンリストを開くと各種端末での見栄えの確認ができます。
解除するにはアイコンをクリック。
アイコンが灰色になって機能が解除されます。
スマホで確認して見た目に問題が無ければ「動作確認をする」まで飛んでOKです。
スマホ専用の構成を考える
スマホ表示でプレビューをしてみると
- 画像が大きすぎる
- 画像の縦横比がおかしい
- 横並びの画像が見づらい
といった問題が出てきますので、スマホ専用の構成を考えます。
主に対応が必要なのは
- 横並びのコンテンツ(画像2枚や、画像＋文章)
- 表組
の2つです。
どちらもパソコンの横幅を活かしたコンテンツ。
パソコンは横長の画面を下にスクロールしてコンテンツを見ますが、スマホは縦に持ってスクロールしてコンテンツを見るので、横幅の広いコンテンツには不向きです。
このような横に長いコンテンツは縦長にできないかを検討します。(縦に画像を並べる、画像と文章を縦に並べる、スライド式にするetc…)
表形式の場合は
- 項目、見出し(ヘッダ)と内容(スペック値など)を縦並びにできないか
- テーブル自体をインラインフレームでスクロールするか
などの対処法を検討します。
ちなみに1番のイメージは↓のような感じ。
こういう切替をする時はflexbox使って表を作ってます
HTMLの組み方を少し工夫して、CSSをうまく使えばPCとスマホで同じソースコードを使っても双方が見やすいようにレイアウトを作ることができます。
スマホ用の構成を作る
PCとスマホの切替方法を決めたら構成を作ります。
構成というのはHTMLタグの構造と各種タグに適用するクラス名、CSSのことです。
メンテナンスの手間が生じるのでPCとスマホで出力するHTMLの内容を分けるのはできるだけ避けて、CSSのメディアクエリを活用してレスポンシブデザインにしましょう。
レスポンシブデザインについては↓の記事が参考になると思います。
えーともはPC/スマホ/タブレットの3種のソース書くのが面倒なので、800px以下(スマホ、タブレット縦持ち)とそれ以外(PC、タブレット横持ち)の2種だけ対応しています。
↑はユーザビリティ置き去りの例なので真似るのはやめようね☆
えーともが割とよく使うFlexboxを使ったレイアウトについては↓の記事をどうぞ。
コーディングする
構成を作ったらWordpressのエディタを「テキスト」に変更して固定ページのソースをコピーして、エディタに貼り付けます。
あとは表示切替が必要なところのタグにclass属性を追加したり、タグ自体を追加したりします。
個人的におすすめのエディタ
コーディング初心者でエディタをお探しの方はBracketsで良いと思います。
タグを入力すると自動的に閉じタグも入れてくれるのがすごい便利。
「今後もガッツリコーディングする！」って方はVisual Studio Codeが個人的におすすめ。
動作確認をする
PC、開発者ツール、スマホ or タブレットの実機で動作確認をします。
チェックする内容は
- 表示崩れが無いか
- 必要な要素が非表示になっていないか
- お問い合わせフォームが正常に動作するか(お問い合わせフォームがある場合のみ)
といった感じ。
iOS実機での確認は必ずやりましょう。
なぜかっていうと、Google Chromeの開発者ツールってiOS端末に関しては完璧な結果を見せてくれないのです。
具体例でいうとInstagramの画像埋め込みですね。
ChromeやAndroidスマホでは事前にデザインした通りに表示されても、iOS端末から見ると画像が大きく表示されたりして表示崩れの原因になることがあります。
原因不明なんだけど、あれはめっちゃ困ったよ…。
埋め込む写真変えたら収まったけど。
フロントエンドエンジニアやWebデザイナーを志す場合は中古でも良いのでAndroid端末とiPhoneの2種は持っといたほうがいいかもしれないです。
かくいう自分はPHPのエンジニアなんだけど、iPhoneとAndroidタブレットは持ってます。
Androidスマホは家族のを借りたりもする。
ページを公開しておしまい！
動作確認が終わったらページを公開しちゃいましょう！
TOPページにお知らせを載せているサイトならお知らせも追加します。
ここまで来たら一先ずおしまいです。
お疲れ様でした！
おわりに：ページは公開したら終わりじゃないよ
と、いうことで新規ページ作成の流れを一通りご紹介しました。
「この商品のページ作って！」って言われてカタログだけ渡されてマイッチングな方のお役に立てれば幸いです。
ちなみに、ページは公開したら終わりではなく始まりに過ぎません。
ページ公開後は効率的に目標を達成するべく改善の日々が始まります。
- アクセス解析を見てお問い合わせリンクのクリック率を見たり
- お問い合わせフォームでの離脱率を見たり
- ヒートマップで熟読されているコンテンツを確認したり
と色々なお仕事があります。
まぁ、ある程度の企業なら分析担当と作成・改善作業担当が分かれているんですけどね。
えーともは一人情シスなので一人で作成、分析、改善をやってます。
全部のページでやってたら時間足りないから熱量足りないコンテンツは作成して放置も多いけどね。
ページ作るの大変だとは思いますが、色々調べて少しずつでも進んで経験してみてね。
それでは、えーとも(@atomoblog)でした！
コメント