税理士

【ペライチと税理士】ペライチをフル活用してる税理士さんの活用方法を再現してみた

こんにちは、ペライチ編集部の長富です。

この記事では前回に引き続き、「ペライチと税理士」について特集していきます。

前回のインタビュー記事をまだ読んでないと言う方は、先にそちらを読んでからこの記事をみることをお勧めします。

【ペライチと税理士】OneWorld税理士法人 大野様のインタビューこんにちは、ペライチ編集部の長富です。 今回の記事は「ペライチと税理士」についての特集となります。税理士の方はペライチをどんな利用...

大野様のインタビューで話題に上がった点について、「じゃあ具体的にどうするの?」 ということがわかるような構成になっています。

頭の中のメモをブロックに書き出して作っていく

インタビューを受けて下さった税理士の大野様は、「頭の中のメモをブロックに書き出して作っていく」と仰られていました。

では、そもそもwebページを作る時にはどのような工程で作業が進んでいくのでしょうか?

一般的なホームページ制作会社に依頼して作る場合と、ペライチを使ってページを作った場合の違いについて見ていきたいと思います。

制作会社に依頼した場合

制作会社にwebページの制作を依頼した場合、一般的には以下のフローで進んでいきます。

1. 企画
2. デザイン
3. コーディング
4. サーバーの設定
5. ドメインの設定
6. 公開

依頼する会社にもよりますが、多くの場合、
1.企画と2.デザインの部分で何度か打ち合わせをすることになります。

ペライチを使った場合

それに対して、ペライチを使ってページを作る場合は、以下のようになります。

1. 企画
2. デザイン テンプレートを選ぶだけ!
3. コーディング 必要ありません
4. サーバーの設定 必要ありません
5. ドメインの設定 しなくてもOK
6. 公開

60以上の豊富なテンプレートから好きなデザインを選ぶだけで、素敵なwebページが作れます。
コーディングやサーバーの設定等は必要ありません。

自分でやらないといけないことは、文章を考えることと画像を差し替えることだけです。

実際にペライチでページを一から作ってみる!

言葉だけで説明してもイメージがつきにくいと思うので、実際の画面を見ながら進めていきましょう。

※ ここからは実際の画面を出しながら解説するので、この記事を見ている皆さんも実際にパソコンの画面を見ながら読んでみると、使い方をよりイメージしやすくなると思います。

今回作るページは、
・ 税理士が主催
・ セミナーを主催するのは初めて
・ 20~30人規模の企業の代表が対象
・ 節税に関するセミナー
・ セミナーの予定時間は19:00~21:00の2時間
・ 東京都で開催

上記の内容だと仮定して作ることにします。

では早速作っていきましょう!

まずはテンプレートを選ぶ


初めてページを作る時は、右上のボタンをクリックします。


テンプレートを選択する画面です。
今回はセミナー向けのテンプレートを使うことにします。


左のサイドバーから、用途・目的 > セミナーを選択し、検索します。


検索するとセミナー向けのテンプレートがいくつか表示されます。
その中の、「セミナー」というテンプレートを選びます。


この画面で実際にページを組んでいきます。
まずは、今のページの構成を見ていきましょう。




(画像クリックで拡大できます。)

・ メインビジュアル
・ こんな悩みはありませんか
・ こんな方が対象です
・ 私たちの思い
・ 未来を目指して
・ 画像 x 3
・ 開催概要
・ Googleマップ
・ タイムテーブル
・ 講師紹介
・ 私たちの思い
・ ロゴ画像 x 3

このような構成になっていますね。

不要な要素を削除する

まずはいらないブロックを削除します。
テンプレートのままだと、「私たちの思い」「未来を目指して」など、同じ内容を繰り返すことになって、少しくどく感じる人もいるかもしれません。
ブロックを削除するときは、ブロック右上の × ボタンをクリックします。

テンプレートだと、開催概要のブロックが2列になっています。
今回は東京都だけで開催するという仮定なので、いらない部分だけ消してしまいましょう。

タイムテーブルも同様ですね。
19:00~21:00の2時間の想定なので、1行で表示するようにします。

画像を差し替える

まだ画像がテンプレートのままなので、重要な部分だけ差し替えていきます。

顔写真を差し替えます。
今回はデモということで男性と女性のフリー素材を使っていますが、セミナーのページなので顔写真にフリー素材を使うことは辞めた方が無難です。

この部分の画像は、もう少しセミナーらしい雰囲気の画像に差し替えます。
過去のセミナーの様子がわかる写真があれば、それを使えば良い話ですが、
今回は初めてセミナーを開催するという設定なので、持っていないということにします。

写真は持っていないけどお金をかけたくない、そんな時は商用利用OKのフリー素材から探しましょう。

僕がオススメするフリー素材のサイトは「Pixabay」というサイトです。

https://pixabay.com/ja/

完全無料で商用利用OKな画像が豊富にあります。海外のサイトということもあり、スタイリッシュな画像が多い印象です。


基本的にはライセンスフリーですが、一部の画像は著作権で保護されているので、
使う際は必ず画面右側に「商用利用無料 帰属表示は必要ありません」の文字があるか確認するようにしましょう。

このように画像を差し替えます。

最初のテンプレートと比べると随分オリジナリティが出てきました。

ブロックを追加

最後に、大野様も使っていた申し込みフォームをページ下部に配置します。

フォームを使えるようするには?

フォームブロックは、ライトプラン以上のプランからご利用頂けます。
プランの比較はこちらから


「フォーム」の中の「フォーム(シンプル)」を使うことにしましょう。

フォームで参加希望者に入力してもらう内容は、デフォルトだと
・ お名前
・ 電話番号
・ メールアドレス
・ ご希望の連絡方法
・ 性別
・ 年齢

になっています。

今回は以下のように変更しました。
・ お名前
・ メールアドレス
・ 希望する日程

セミナーは複数回開催するので、希望する日程が選べるような設定にします。
「ラジオボタン」を選択し、選択肢を入力するだけで設定できます。

これで完成です!

ではページのBefore Afterをみてみましょう。

編集前のページ


編集後のページ


ヒートマップツールについての前提知識

ヒートマップとは、WEBサイトをみている人の動きを可視化する手法のこと。

多くのヒートマップツールでは、以下のような情報を取得することができます。

・ ページに訪問した人がどの部分を見ていたか(どの部分に興味を持ったか)
・ ページに訪問した人がどの部分をクリックしたか
・ ページに訪問した人がどこまでスクロールしたか(どこで見るのをやめたか)

このような情報をみることによって、ページの効果をよくする為にどの部分を変更すれば良いかがわかるようになります。

ページを改善しようと思っても、具体的にどこをどう変えれば良いのかわからないと思います。この記事を書いているわたくし長富も、普段の業務ではマーケティングを担当をしていますが、正直、上記の情報が何もわからなかったらWEBページの改善のしようがありません…(笑)

ちなみにヒートマップツールには「Ptengine」「User Heat」「Clicktale」「User Insight」「MIERUCA」など、様々な種類がありそれぞれ異なる特徴があります。

大野様が実際に使われているというヒートマップツールはその中の「Ptengine」というツールなので、実際に「Ptengine」の画面を見ながら使い方・ペライチとの連携方法・活用のポイントなどを解説していきます。

ペライチで作ったページをPtengineと連携する方法

実はペライチでは、Ptengineを提供するPtmind社と業務提携を結んでおり、ペライチのスタートプラン(無料プラン)ユーザーでも簡単にヒートマップが導入できるような工夫をしています。

それでは実際にペライチのページにPtengineを組み込んで見ましょう。

はじめに「ペライチ」と「Ptengine」のアカウントを作ります。

まだアカウントを持っていない場合は、「ペライチ」と「Ptengine」それぞれで会員登録をします。(会員登録にはどちらもお金はかかりません。)

ペライチの公式サイト
https://peraichi.com/


まだペライチ会員ではない方は、
メールアドレスとパスワードを入力して、無料会員登録をします。


これで会員登録は完了です。

次はptengineの登録をします。

Ptengineの公式サイト
https://www.ptengine.jp/


必要な情報を入力し、無料会員登録を完了させます。


会員登録が終わるとこんな画面が表示されると思います。

これでペライチとPtengineの両方のアカウント作成が終わりました。

ペライチとPtengineを連携する方法

まずはPtengineの管理画面に入ります。

管理画面トップの、</>ボタンをクリックします。

そうすると、解析コードが表示されるので、赤枠で囲っている setAccoutのすぐ右側英数字を控えてください。(上記の画像ではセキュリティの為モザイク処理をしています。)

次にペライチのマイページから、ページの編集画面に移動します。

 

左サイドバーの「ページ情報編集」をクリックします。

「連携サービス」の項目から、Ptengineの欄に、先ほど控えた文字列を入力します。

これでペライチとPtengineの連携は完了です。

スマホ表示について

皆さんはWEBサイトを見るときパソコンを使いますか?それともスマホから見るでしょうか?タブレットで見るという方もいるかもしれませんね。

レスポンシブデザインとは、パソコン・スマホ・タブレットなど、異なるデバイス間でもそれぞれ最適な表示がされるようなデザインのことをさします。

レスポンシブデザインのメリット

レスポンシブデザインのメリットは、
– どのデバイスからでも見やすい
– SEOに有利
この2点が挙げられます。

まずは以下の画像を見てください。

どちらが見やすいかは一目瞭然ですね。

ペライチのレスポンシブデザイン

ペライチで作られたページは、特に何かの設定をしなくても自動でレスポンシブデザインになります。

ただ、以下のような部分は、少し工夫が必要になります。

赤枠で囲った部分が、スマートフォンの際に美しい改行位置になっていません。

そういう時は、スマートフォンからの表示に最適化するために改行位置を調整すると良いでしょう。

編集する際にサイドバーのスマートフォンマークをクリックして、プレビューをスマートフォン表示にして作業するのがオススメです。

上記のように、改行位置を調整します。

そうすると、スマートフォン表示でも違和感のない表示になりました。

おわりに

今回はページの作り方、Ptengineの連携の仕方やレスポンシブデザインについて掘り下げて解説しました。

まだペライチを活用されていない方は、これを機にぜひご自身のビジネスに活かしてみてください!

【ペライチと税理士】OneWorld税理士法人 大野様のインタビューこんにちは、ペライチ編集部の長富です。 今回の記事は「ペライチと税理士」についての特集となります。税理士の方はペライチをどんな利用...
【ペライチと税理士】中小企業・個人事業主が活用すべき補助金と融資の勉強会こんにちは、ペライチ編集部の長富です。 ページを作成したご本人、税理士の大野さんへのインタビューから始まった、全3回の「ペライチと...
ページ作成をペライチがお手伝いします!
税理士の方のページ作成をペライチがお手伝いします!
納品までは最短5営業日!