WordPress テンプレート『Grazioso』パーツを組み合わせてウェブサイト作成
イタリア語の優美を意味する『Grazioso』グラツィオーソと名付けられたWordpress テーマ『Grazioso』を使う機会があったので感想をば。
『Grazioso』はウィジェットをパーツのように組み合わせるだけで、洗練された１カラムの Wordpress サイトが作れてしまうテンプレートです。
１カラムフラットデザインといえば、このページを見ている人ならWordPressのサイトが馴染みがありますね。スマホでもPCでも違和感なく表示されるデザインです。
『Grazioso』はフラットデザインであることに加え、パララックス効果も標準で装備されています。そのため一つ一つの項目に目を留めてもらいやすいサイトが自然に作れてしまいます。
パララックス効果は文字や画像を動かすことで奥行きや立体感を出す視差効果のこと。画面をスクロールした時に、文字や画像が浮かび上がったり動いたりするアニメーションというほうが分かりやすいかも。
パララックス効果は東京2020大会ボランティアサイトや、テレビCMもやっているクラウド労務管理サービス 『SmartHR』 のウェブサイトでも使われています。
どちらのサイトも動く画像や文字がアクセントになって、メッセージが目に入りやすくなっていることが分かります。
『Grazioso』は、そんなパララックス効果を使ったウェブサイトが簡単に作れるテーマなんです。
Grazioso の特徴
Grazioso の特徴は、なんといっても１カラム専用のフラットデザインをベースとしたテーマということ。
トップページのテキストや画像は、機能化されたウィジェットに書き込んで表示させる仕組み。ウィジェットをパーツのように組み合わせることで、フロントページ（トップページ）が出来上がるという手軽さ。
- スマホと相性がいい１カラムのフラットデザイン
- 画面のサイズに合わせて適切に表示されるレスポンシブ対応
- 伝えたいことを確実に目を留めてもらえるパララックス効果
- TwitterやFacebookなどのSNSとの連携も簡単に
- 使ってみて、難しかったり目的に沿わない時の安⼼の返⾦保障あり
- 分かりやすい使い⽅ガイドが用意されている
慣れるまでは戸惑いますが、慣れてしまえば、１カラム、フラットデザイン、パララックス効果の３つで、ウェブサイトの上から順に目を留めつつ読んでもらえるモダンなサイトを作り上げることができます。
ウィジェットを組み合わせてフロントページ（ホームページ）を作り上げるテーマは他にもあるそうですが、あまり一般的ではありません。解説しているサイトもないため、仕組みが把握できるまで若干時間がかかるかも。
ガスタマイズについても触れたマニュアルが用意されているので、とっつきは悪くてもじきに慣れます。
使いやすいインターフェース
仕様自体は珍しいものですが、インターフェースは「外観」設定にまとめられて分かりやすくなっています。概念さえ把握できれば、カスタマイズもスイスイできるようになるはず。
ヘッダー、フッター、フロントページに配置したウィジェトの背景画像や色指定、オプション、アクセス解析などは、[ウィジェット背景][テーマオプション][ロゴの設定]の３つの設定ページで行なえます。
設定項目がきちんと分類されているので非常に使いやすいです。できることが限られているという面はあるにせよ、一箇所で全てのウィジェットの色を変えることができるので、行ったり来たりする必要がありません。
関連 WP テーマ Grazioso で一からサイトを作ってみる
Grazioso はこんな時におすすめ
Grazioso は１ページだけでメッセージを伝えきるのに最適なテーマです。というか、そういう意図でないと使いづらいです。
- お店の紹介を作りたい（店舗紹介）
- 個別の商品の紹介サイトを作りたい（商品紹介）
- 自分で撮った写真やグラフィックといった作品を見てもらいたい（ポートフォリオ）
- 会社の紹介を作りたい（コーポレートページ）
ありがちといえばありがちな構成になりますが、ありがちなのが一番読みやすい面もあります。
画像や動画を活用しつつ色使いを変えることで、オリジナリティも出せるので、美容院やブティック、スイーツ、和菓子など、幅広く使えます。
10日間返金保証つき
使い方（というか概念）
インストール方法は通常のテーマと変わりません。Wordpress の管理画面からテーマをインストールすると「推奨プラグイン」が表示されるので、まとめて導入することができます。
推奨ウィジェットには投稿ページと固定ページにボックスやきれいなボタンを設置することができる「
Smart Shortcode」や、メールフォームウィジェットを使うためのContact Form7 が含まれているので、そのままサイトを作成できます。
関連 WP テーマ Grazioso で一からサイトを作ってみる
テーマとプラグインをインストールした状態でトップを開いても、縦に並んだ WordPress のデフォルトサイドバーウィジェットしか表示されません。
トップに記事一覧が表示されない仕様なので、このままだとトップページを開いても空っぽ。
トップページ（フロントページ：URLを開いた時に表示されるページ）は固定ページで作るのが一般的ですが、Grazioso のトップページはウィジェットの組み合わせで構成されます。
Grazioso を使ったサイトのトップページ（フロントページ）は、全てカスタマイズされたウィジェットを配置して作り上げる独特の仕組みなわけです。
- テキストフォームやメールフォーム、画像とテキストの組み合わせなど、用意された機能別のウィジェットに、必要なテキストや画像URLを入力
- Homeというウィジェットエリア（フロントページのボディ部分）に、テキストなどを入力したウィジェットを配置する
という仕組み。
ようは機能別に用意されたウィジェットをパーツのように配置して、トップページを組み上げていくわけです。
ウィジェットには問い合わせフォーム、イメージギャラリー、価格表、投稿記事の表示など、店舗や商品紹介で必要となる要素が一通り用意されています。
一般的なテキストを入力する際も、デスクトップパソコンなら３項目横方向に並べて表示され、スマホなら縦方向に並ぶといった「グリッド」レイアウトが利用できます。
ウィジェット内のテキスト入力にはビジュアルエディタが使えないので、リンクボタンなどをつけたい場合はHTMLで書く必要があります。
そういう意味で少しだけHTMLの知識は必要ですが、ほんと、基本的なことだけ知っていれば大丈夫。
改行<br>、<b>太字</b>、<a href="http~">リンク</a>、<button>ボタン</button>くらいが分かっていれば十分。
ボタンもそのままで見やすく押しやすい形で表示されるので、手を入れなくても見栄えはいいです。
投稿ページ
投稿ページ（ブログ記事）や固定ページは普通に作成できます。投稿ページのタイトルや本文をフロントページに表示させたいときは「新着ウィジェット」か「ブログウィジェット」を設置します。
ブログウィジェットは本文まで表示されるのに対し、新着ウィジェットはタイトルと日付だけが一覧形式で表示されます。表示件数はウィジェットで調整可能。
新着投稿などを目立たせる方法は、公式の使い方ガイドに記載されています。
色の設定
色の設定は全てテーマオプションから行えます。ヘッダーフッター、リンク色ばかりでなく、各ウィジェットも個別に指定することができます。
[外観] > [テーマオプション] > [外観設定]背景色と文字色は、色はウィジェットごとに指定することができます。
ウィジェットの背景画像・動画の指定
それぞれのウィジェットに、背景画像や動画を設定することができます。
[外観] > [ウィジェット背景設定]対応するウィジェット名のところに画像または動画の URLを入れるだけとお手軽。サイズとの兼ね合いもあるので、フィットするかはやってみないと分かりません。
また、他のウィジェットとの兼ね合いがあるので、調整は必要になります（これが一番難しいかも）。
アニメーションの効果
動きの大きさはMinimum, Moderate, Maximumの3段階で調節することができますが、個別のウィジェットにアニメーションの種類を設定することはできません。
[外観] > [テーマオプション] > [その他]設定結果はサイト全体に適用されます。大きな動きにすれば目を留めてもらいやすいですが、落ち着いたイメージを出したいなら、Minimumがいいと思います。
一般的な項目の設定
サイトのメタデスクリプションやアクセス解析などはテーマオプションから設定できます。
フッターに設置できるソーシャルアイコンは６つ用意されています。
- Facebookページ
- YouTubeチャンネル
- Dribbble
- Pinterestページ
必要なものは一通り揃っているので、SNSの活用もしやすくなっています。
コメントシステムもJetPackのものやWordpress などのほか、Facebookも利用できます。これは便利。
SNSとの連携機能は豊富ですが、デザイン面での自由度は低くなっています。
文字サイズを何ポイント、余白をどのくらいにするなどの細かな項目はありません。
フラットデザインはもともと自由度が低い面があるので、むしろフラットデザインに忠実なテーマとも言えます。
Grazioso を実際に使ってみての感想と注意点
グリッドシステムのおかげで、スマホでもPCでも違和感のない美しいページが作れます。
フラットデザインということもあり、どのパーツ（ウィジェット）をどんな順番に並べてもPCとスマホ、両方で最適化されて表示されます。
推奨ウィジェットを入れてしまえば、投稿もショートコードで簡単にボックスに収まるきれいなレイアウトで作成することができます。
サイドバーがないシンプルなデザインなので余計なことを考える必要なし。知ってほしいこと、アピールしたいことを考えることに集中できます。
テーマ自体が「情報を端的に伝える」に特化しているので、「伝えたいことはなにか」を考えてサイトを作れると思います。
伝えたいことさえきちっと決めてしまえば、あとは必要なウィジェットに入力して設置するだけでサイトが出来上がってしまいます。
背景色と画像の組み合わせだけは調整する必要はありますが、キャンペーンなどで強調したいことができたときも、ウィジェットをドラッグさせて順番を入れ替えるだけと非常にお手軽。
店舗の紹介ならこんな感じかな（実際に作ったサンプルはこちら）。
- お店の外観やイメージと営業時間
- お知らせ
- メニューや価格
- お店のウリ（特徴）
- 歴史
- アクセス（地図）
ウィジェットに必要なことを入力して設置するだけでウェブサイトができてしまうのは手軽ですね。
パーツを組み合わせるだけでとりあえず出来上がりますが、閲覧者にインパクトを与えるには、メッセージを短い言葉に込める必要があります。
できることが限られているからこそ、いかに少ない言葉で知ってほしいことを伝えるかは難しく、工夫が必要になります
特に商品の紹介だと最初で離脱（見るのをやめられる）をいかに防ぐか、いかに読み進めてもらうかの試行錯誤も必要になります。
閲覧者の目を引きやすいパララックス効果に目が行きがちですが、ユーザーに適切なUIで適切な情報を伝えるというフラットデザインの思想に則ってサイトが作れるテーマという印象です。
注意点
一番ネックになりそうなのは jQuery 関連かな。使えないプラグインは出てくると思います。
また、キャッシュプラグインとの相性の問題も生じるかもしれないので、不具合が出たら、まずはキャッシュプラグインを切ってみるといいだろうと思います。
- アニメーションに jQuery を使っているため、プラグインによっては使えない可能性がある
- ページ表示が若干遅いので、ページ移動が多いサイトでは工夫が必要（２、３ページの遷移なら問題ないレベル）
- スムーズスクロールはブラウザによっては下に移動できないことがある
- マルチ商法、ネットワークビジネス、風俗店、アダルトサイトなどには使えない
Grazioso 購入方法と返金保証条件
Grazioso は、Wordpress テンプレートとしては珍しく返金保証があります（※）。
とりあえず試してみないと分からないことはよくあります。こと、特徴あるワードプレステーマは、いじれる範囲やできることが限られているため、その傾向が強いです。
- こんなことをしたかったけど、やっぱり無理だった
- したいことがあるのに難しくて使いこなせない
こんな可能性があるので、購入に不安や迷いが出ると思います。Grazioso は WordPressテーマとしては安いものでもありませんからね。
しかし10日間の返金保証があるから心配無用。
実際にサイトを作って納得できればよし、そうでなければ返金制度があるので安心して購入できます。
※返金保証は購入から10日間。Paypalで返金されます。
支払い方法
支払いは Paypal のみ。
銀行振り込みやコンビニ払いはできません。
Paypal アカウントをもっていない人にはちょっと不便ですが、登録はすぐに終わりますし、なにより返金保証を受けられるので、この機会にアカウントを作ってみてはいかがでしょう。
Paypal にはクレジットカードの他に銀行口座振替も支払い方法として使えるので結構便利です。
領収書は発行されないため、 Paypal での支払いに利用したクレジットカードの明細が支払いの記録になります。
WordPress そのものに慣れていな人にはちょっと辛いかもしれませんが、インストール方法も含めたマニュアルも用意されているのでなんとかなるでしょう。
お店のサイトを作りたい、商品紹介のサイトを用意したいという人は、この機会に『Grazioso』を試してみてはいかがでしょうか。
10日間返金保証つき
「使い方がわからないと不安」という人は、インストール後一からの作り方を書いたので読んでみてください。