Studioテンプレートデザイナーがテンプレートを制作するにあたって、実際の利用者の声は非常に参考になります。そこで今回は、これまでに2種類の有料テンプレートを購入し、実際にサイトを2回公開した経験がある株式会社Freedの鶴田さんにお話しを伺いました。

1件目は弊社が販売しているフィットネスカテゴリのテンプレート、2件目は他社が提供する教育カテゴリのテンプレートを利用し、それぞれのサイトを公開されています。

1件目の段階で一部カスタマイズを依頼してくださり、その延長で2件目についても要素の追加をご相談いただきました。

「どのような基準でテンプレートを選んだのか」「編集段階のどんなところで苦労したのか」といったユーザーのリアルな声から、テンプレートをさらにブラッシュアップするためのヒントを探っていきます。

Studioを知ったきっかけ

中島Studioのことは何をきっかけに知りましたか？

鶴田さんLPを作る段階で知り合いから「最近これいいよ」みたいな感じでサイトを送ってもらったのがきっかけです。それまではずっとWordPressを使っていたのでStudioのことは全然知りませんでしたが、有料テンプレートのデザインを見ていいなと思って使い始めました。

中島ということは、最初から「テンプレートを使う前提でのStudio」という感じだったんですね。制作依頼するのではなくて、テンプレートで作ろうと思ったのはどういう理由からですか？

鶴田さんまずひとつは費用面と、あとは逆にイチから作るとなると制作依頼するのもどんな感じでやればいいのかわからないので、テンプレートの方が完成形がイメージしやすかったというのが理由です。

Studioのスキルレベルについて

中島テンプレートを使うにあたって、Studioの操作方法は何かで学びましたか？

鶴田さんいいえ、特に何も見ずにやりながら覚えるみたいな感じでした。

中島そうすると途中で困ることも出てくると思いますが、そういうときはどうしていますか？

鶴田さんもうどうにもできなくなって依頼した感じです。一番わからなかったのがレイアウトの崩れで、デスクトップ版とモバイル版をちょっとずつ変えていくとどんどんずれてしまって…、未だにそれの解消法はわかっていません。

レイアウト崩れに関しては縦幅をpx指定にしていたことが原因でした

テンプレート購入の意思決定プロセスと欲しい要素について

中島テンプレートを購入する時はどのような手順・基準で探していますか？

鶴田さんまずカテゴリのところから探しました。弊社は英会話という教育事業を展開しているので「教育」のカテゴリを優先的に見ました。

そのあとはプレビューサイトを見て、トップページに入れたい要素があるかを見ていきました。今回であればファーストビューに写真とキャッチコピーがあって、つぎにサービスの概要を紹介するセクションがあって…、という感じです。

ある程度文章で説明したかったので、テキストを入れるところがどのくらいあるかという点もチェックしました。

あとはモバイルからの閲覧がかなり多いので、モバイルで見たときの印象も重視しました。PCが良くても、モバイルで見たときに「なんかちょっとイメージと違うな」というのは除外していきました。

中島その「イメージと違うな」というのに関しては、デザイン的な部分を見ているということですか？

鶴田さんそうですね。 そこは完全にデザインとして良い感じかという視点で見ました。

中島今のお話しだとプレビューサイトを見て決めているということですが、「エディターで試す」機能についてはどうでしょうか？

鶴田さんその機能は使ったことがないです。何が含まれているかということをプレビューサイトだけ見て判断という感じです。

中島レイヤー構造が見れたとしても、その構造を理解するのはなかなか難しいですもんね。テンプレートの価格についてはどうですか？数千円上下することは購入に影響がありますか？

鶴田さんいいえ、そこは全然気にしていないです。欲しい要素が入っているものであれば購入したいと思っています。

中島探しているときに「こういう要素があれば良いな」と思ったものはありますか？

鶴田さん一番欲しいのは、ページの右下に常に固定表示されているポップアップのボタン（フローティングボタン）です。

無料体験とか申し込みのボタンが常に画面上にあるというのは結構大事で欲しかったんですけど、それが付いているテンプレートがなかなか見つかりませんでした。PCのときはヘッダーにあっても、モバイルではハンバーガーメニューの中に入れられてしまうパターンも多くて…。

中島今回、追加で実装させてもらったフローティングボタンはバツで閉じる機能をつけていますが、バツで閉じる仕様が無くてもOKですか？

鶴田さん閉じないパターンでも全然いいです！

それからサービス系のサイトで欲しいなと思うのは料金表ですね。他社比較ができるようなものがあると良いなと思いました。テック系のサービスでよく見かけるようなプランごとにできることが箇条書きで書いてあるリストよりも、表になっているパターンの方が私は使いやすいなと感じます。

▽サービス内容が箇条書きで書かれているタイプのプラン表

▽料金などを含む比較表

中島ということは、用途によって最適な形が変わるような要素についてはバリエーションが用意されていて、使いたい方だけ残すみたいなテンプレートがあると理想ということになるでしょうか。

鶴田さんその形めちゃくちゃ良いと思います。それなら3、4万くらいの価格になっていても買いたいです。

中島いくつかそういう仕様のテンプレートはあると思うんですが、バリエーションが用意されているテンプレートを見つけ出すのも大変ですよね。一個一個ページを開いて中身を確認していかないといけないので。テンプレートにそういうバリエーションが用意されていることを示す記述があるとわかりやすいということですね。

鶴田さんあとは、モバイルでみたときの横スライド（カルーセル）も欲しいと思いました。利用者の声とかスタッフ紹介のセクションにこれがあると良いです。

購入後の編集・運用について

中島次に購入後の編集の流れや、編集するときに迷ったレイヤー構造について教えてもらえますか？

鶴田さんデザインエディタの上から順番に変えていくという感じです。レイヤーパネルにある構造は全く見ていなくて、ボックスを一個一個選択していく感じですね。

中島PowerPointみたいな感覚で、という感じでしょうか？

鶴田さんそうです、そうです！レイヤーを見てもどうしたら良いかわからないので…。

中島レイヤーには一応名称が付けられていますが、初見で階層構造を理解するのは難しいですよね。ちなみに色の一括変更機能は知っていますか？

鶴田さんいいえ、知りませんでした。ひとつずつ選択して色を変更していました。

ヘルプの記事があっても、そこはあまり参考にしませんか？

ヘルプも見たんですが、何をどう探したら良いのかわからなくて。使われている用語もわからないので探しようがないというか…。記事のタイトルを見ても、自分が困っていることがどれなのか判断できませんでした。

WordPressのテーマを買ったときは、その販売者の方が動画で編集の手順を全部説明してくれていたのでわかりやすかったというのと、構造自体を触るわけではないので崩れる心配がなかったんですけど、Studioはそうではないので苦戦しました。素人からすると「自分で要素の追加はできない」と感じました。

中島編集の仕方を解説する動画があれば見てもいいかなと感じますか？

鶴田さんそうですね、やっぱり人がしゃべりながら操作して見せてくれるのはわかりやすいです。

サポート・アフターケアについて

中島解説動画の話が出ましたが、それ以外にサポートやアフターケア的なところでなにか感じたことはありますか？

鶴田さんStudio Storeからテンプレートのデザイナーさんに連絡をして困っていることについて聞くことができたのは本当に有り難かったです。Studioのチャットサポートだとヘルプ記事への誘導で終わってしまうので、人に聞けるというのが本当に助かります。

なにかを追加で作ってもらうとかじゃなくても、1時間いくらかお支払いして、今みたいに「話をしながら操作について教えます」みたいなのがあればめっちゃいいなと思います。

中島なるほど。そういった個人セッション的なことを提供している方もいると思いますが、テンプレートのページを見ただけでは判断できないので、なかなか難しいところですね。

鶴田さんあとは追加を依頼するときには、依頼する内容を相談ベースでお願いできる方が良いなあと思いました。追加リクエストとして「これとこれとこれをするならいくら」というプランが決まっていると、自分がお願いしたいこととマッチしない部分が出てきたりしてしまうので…。

プランについて

中島プランについてはどうでしょうか？元々はBusinessプランを予定されていましたが、サイトの内容を拝見すると、Personalプランに収まる感じでしたよね。

鶴田さんプランについてはどれを選べばいいのかわからなくて、「ビジネス向け」と書いてあったので、これかなと思っていました。プランの詳細は見ましたが、CMSのアクティブモデルというのが何のことか分かりませんでした。

今回、適切なプランを提案していただけて本当に助かりました。

中島今回は貴重なお話しをありがとうございました。

考察とまとめ

ここからはインタビューの内容をうけて、個人的な見解についてまとめます。

Studioを使って制作をしているわけではない方を、ここでは「一般ユーザー」と表記することにします。

購入者への有償サポートについて

購入者への追加のカスタマイズを提供している場合は、「テンプレートに関するお問い合わせはこちら」等の表現だけではなく、カスタマイズが可能であることがわかるようにテンプレート販売ページに明記しておくのが良いと思いました。

その際、カスタマイズの見積もりを相談ベースで出せる場合はその旨を記載しておくと問い合わせのハードルはさらに下がりそうです（販売者側の工数は増えるため、それが可能かは要検討）。

また、カスタマイズだけではなくZoom等で画面共有しながら操作のレクチャーが可能な場合は、そのことも記載しておくと良いと思います。

以上の内容については販売ページに詳細を記述すると煩雑になってしまうため、自社サイトにページを設け、そちらで詳細を説明するのが良さそうです。

要素のバリエーション

要素のデザインにバリエーションがあると購入者のイメージにマッチしやすくなるため、そのような仕様にしている場合は、特徴としてしっかり打ち出す方が良いと思います。

インタビュー内で出てきた料金表のバリエーションを、まさにそのまま再現されているテンプレートがランディングページ 3種セットです。

便利機能・公式ガイドの紹介

テキストスタイルやカラーの一括変更機能はテンプレートを使う上で非常に便利な機能ですが、一般ユーザーはその機能の存在を知らないまま編集作業に入ることが十分あり得ます。

公式ガイドから目的の記事を見つけ出すのもハードルが高いと考えられるので、そのような便利機能や基本的な操作方法の理解を助けるような記事を抜粋し、リンクを販売ページの説明文に含めておくと良さそうです。

例えば、【基本編】テンプレートの編集方法や【応用編】テンプレートの編集方法はその代表的な記事になると思います。

ただ、一般ユーザーにとっては「コンポーネント」や「リスト」といった言葉が出てきたところからぐっと難易度があがりますし、レイアウト崩れの原因の代表格である「原則としてボックスの縦幅はautoにし、px指定にしない」のルールをカバーできないため、この記事だけでは不十分となりそうです。

なお、今回のテンプレートカスタマイズのご依頼を通して気付いたポイントとしては、「縦幅autoとpx」「ホバーアニメーションの色の変え忘れ（inホバーがあると更に複雑に）」「ページ設定とサイト設定の違い」がありました。

解説動画

これは制作者側のコストが非常にかかるものではありますが、基本的な編集方法を動画で解説したものがあると安心して購入に進めると思われます。

ただし仮に動画を作成したとして、それを一般公開するのか、購入者限定で提供するのかなど検討する事柄は多そうです。さらに解説動画はエディタのUIが変わると作り直しが必要になることも懸念点となります。

まとめ

テンプレートは制作会社が購入する事例もあると聞きますが、間違いなく一般ユーザーの利用も多いと思います。今回のインタビューはサンプル数1ですので、一般ユーザー全体の意見を表すものではありませんが、薄々感じていた「こうした方が良いんじゃないかな」が明確になった部分もありました。

テンプレートデザイナーの皆様にとって、示唆のある内容となっていれば幸いです。