1カラムのフラットデザインが特徴のWordPressテーマ「Grazioso」とは

WordPressはCMSとして、個人ブログのみならず、企業サイトや製品PRページなど、多くのWebサイトに使われています。

そのWordPressの特徴は多彩なテーマが有料/無料ともに数多く有り、それらをインストールすることで、簡単に好みのデザインを再現できるところにあります。

今回は「Grazioso」という有料のWordPressテーマを入手しましたので、実際にデモサイトを構築しながら使って見た感想をお届けしたいと思います。

WordPressテーマ「Grazioso」とは

イタリア語の形容詞である「Grazioso(グラッツィオーソ)」を冠したWordPressテーマで、その言葉の意味が指す通り、「美しく優雅に!」をモットーに開発されたテーマになっています。

Graziosoの特徴について見ていきたいと思います。

フラットデザイン

フラットデザインとは、Web2.0が持て囃された頃はに流行った、グラデーションやドロップシャドウといったリアリティのある装飾が施されたデザインではなく、原色のような彩度の高い色を使いながら、凹凸がなく平面的で装飾が少なくミニマルにまとめたデザイン手法の事です。

例を挙げるならば、Windows8から登場したタイルメニューだったり、iOS7以降のアイコンデザイン、Android4.2(Jelly Beans)以降のアイコンデザインが身近なところです。

大企業の製品ロゴやコーポレート・ロゴだと、AppleのリンゴマークやGoogle、Microsoftの文字が立体的なテクスチャからフラットなものに変更されています。

GoogleやApple、Microsoft自身はコーポレート・ロゴや製品ロゴをフラットデザインに変更した公言しているわけではないようですが、リアリティのあるデザインから変更をしたというのは時流に乗ったデザイン変更なのでは無いでしょうか。

また、無料で使えるWebフォントの「Google Fonts」を始めとする、モダンな書体もこのフラットデザインの流行によって生まれたものと言えます。

1カラムデザイン

1カラムとはサイドバーがなく、メインコンテンツのみで構成されたシンプルなサイトデザインのことで、1ページに集約された情報を左右のコンテンツに邪魔されることなく、上から下まで余すことなく訴求する事に特化したデザインと言えます。

1カラムの一番わかりやすいWebサイトを例に挙げるならば、Apple製品のホームページです。

複数カラムのデザインを取り入れているYahooニュースのページなどは、右側にランキングや広告が表示されますので、記事を読んでいる途中でも、気になるものを見つけたらクリックしてしまいますよね。

これは多様な情報を発信する事に特化したニュースサイトや情報サイトであれば効果的ですが、1つの商品や企業をPRしたい場合には、どうしても不利に働く傾向にあります。

その反面、1カラムデザインは左右に余計な情報が表示されず、表示している記事に集中する事ができるというメリットが有るため、コーポレートサイトや、製品紹介のHPで取り入れられる事が多いのです。

HTML5 & CSS3に100%準拠

HTML5とCSS3に100%準拠・・・と書かれても、よくわからないと思います。

昨今言われるSEO対策(検索エンジン最適化)では、Googleが特にモバイルフレンドリーを重視して検索順位に反映させる事から、レスポンシブ対応を取ることが一般的になってきています。

モバイルフレンドリーにする際のレスポンシブ対応は、主にHTML5とCSS3によるレスポンシブWebデザインによって実現する事が多いです。

レスポンシブ対応(レスポンシブWebデザイン)

 

近年、スマートフォンなどのモバイルデバイスからのWebアクセスは増加傾向にあり、全体アクセスの50%を超えて来ていると言われていますので、幅広いデバイスで訴求したい内容を全て綺麗に表示できることが、企業や製品のプロモーションに欠かせなくなっています。

レスポンシブとは1つのHTMLに対し、複数のCSSを設定することで、Webサイトにアクセスした人のデバイス(パソコン、スマートフォン)、場合によっては画面サイズによって、最適なCSSを割当てて自動的にレイアウトを切り替える機能のことです。

CSSの切替によりデザイン変更を行うため、URLの変更を伴わない事から、SEO対策にも良いとされています。

パララックス効果

パララックスとはWebデザインにおける「視差効果」のことです。

ここでは、主にWebサイトをスクロール表示する時に、背景と複数のレイヤーで構成されたオブジェクトをそれぞれ異なる速度でスクロールさせることで、Webサイトに奥行きや立体感を持たせる効果のことを指します。

実際に見たほうがわかりやすいと思いますので、Graziosoのページを上から下にスクロールしてみて下さい。Webサイトを上から下にスクロールしているだけで、画面に引き込まれるような立体感を感じる事が出来ますね。

jQuery

jQueryとは、JavaScriptによって作られたプログラムを機能ごとに部品化したライブラリを指します。

これまではJavaScriptを使って動きのあるサイトを構築することがありましたが、jQueryは部品ごとに決められた「短いコード」を記述するだけで良い事から、プログラムの知識がなくても簡単に動きのあるWebサイトを作ることが可能になりました。

そしてGraziosoの特徴は、その「短いコード」記述さえも排除し、jQueryの機能を持つウィジェットを配置するだけで簡単に実装する事が出来ます。

実際にGraziosoのWebサイトを見ていただくと、文字が動いたり、画像が左右から流れてきたりと画面のスクロール操作やクリック操作に併せて、様々な視覚効果を付加する事が出来ます。

WordPressテーマ「Grazioso」を使ってみた感想

特徴で紹介しました通り、Graziosoは、1カラムのフラットデザインにjQueryを組み合わせることで、動きのあるWebサイトをプログラムの知識がなくても構築出来るという点にあります。

実際に気になったポイントを、Good/Normal/Badの3段階で記載しています。

《Normal》1カラムデザイン特化

1カラムのフラットデザインに特化しているテーマの為、当ブログのようにサイドバーを配置した2カラムデザインへ変更する事は出来ません。

そのかわり1カラム/フラットデザインのサイト構築に限っては、安価かつ簡単に実装できるので、「適材適所」という言葉がピッタリのテーマと言えます。

《Bad》他プラグインとの競合

Graziosoは、jQuaryライブラリを使用しているため、追加で設定しようとしているプラグインの中に、jQueryを使っているものが合った場合、動作しないことがあります。

また個別のプラグインの動作可否についてのお問い合わせにもお答え出来ないため、Graziosoをベースに、プラグインを盛り盛りで設定しようとしている人は要注意です。

少なくともGraziosoは追加プラグインを入れなくても、高品質なサイトを構築出来ますので、どうしてもやりたい操作が出てきた場合、まずはヘルプデスクに実現方法を確認してみるのが良いかと思います。

《Good》操作方法・使い勝手

WordPressテーマの設定(使い方)は、どのテーマにも特徴というか癖というものがあり、こればかりは、実際に使って慣れるまでは、どうしても使いづらいと感じる部分はあるかと思います。

Graziosoは1カラム/フラットデザインに特化しているテーマであり、jQueryの機能を備えたウィジェットが提供されているため、基本的なカスタマイズはほぼウィジェットで行います。

そのため、私が今使っている「STORK(ストーク)」や、以前使っていた「Simplicity2」と比較すると、設定の数は少なくなっています。

設定の数は少なく、1カラム/フラットデザインに特化したサイトを構築したい人には非常に有効なテーマだと思います。

テーマのインストール、初期設定、操作方法などにつきましては「使い方サイト」を見たり、直接確認したい場合はヘルプデスクによる問い合わせも受け付けているため安心です。

《Good》10日間の返金保障

Graziosoは有料テーマの中では珍しく、PayPalでの支払に限り、10日間の返金保障を設けています。

実際に使ってみると、デモサイトで感じた印象と異なっていたり、思った使い方と違うという場合が出てきます。そんな時でも返金保障があるので安心してテーマを購入する事が出来ます。

《Normal》クイックスタート追加でデモサイトを再現

Graziosoではデモサイトを再現するための機能と、その為の設定ファイルが提供されています。

本当に60秒でデモサイトが再現できるのかを試してみましたが、デモサイトで使われている背景画像などは著作権の関係からか、簡単設定の中に含まれていませんので、「完全に同じサイト」が作れるという訳ではありませんでした。

ですが、デモサイトのどのウィジェットを使えばどのように動くのか、というイメージを掴むには十分な機能だと思いますので、「完全再現」を目的とするのではなく、ウィジェットの配置方法を参考程度に確認する機能として見るのが良いかと思います。

まとめ

感想にも書いていますが、Graziosoはウィジェットを配置していくことで動きのあるサイトを構築出来るという特徴があります。

つまり言い方を変えれば、Graziosoの基本的な使い方は、ウィジェットの使い方さえ理解できれば良いという事になりますので、WordPressの設定の多さに一度挫折をしてしまったような人には有効なテーマだと感じました。

Graziosoで提供されているjQuery(ウィジェット)と同じような事を、他のテーマでしようとすると、プラグインを追加で入れる必要が出てきます。

プラグインは必要な機能をアドオン出来る代わりに、サイトの読込速度が遅くなったりするデメリットもありますから、「AppleやMicrosoftのようなパララックス効果による動きのあるWebサイトを構築したい」という用途が明確な場合、Graziosoが一歩抜きん出てます。

Graziosoが力を発揮できる用途は、商品やサービスの魅力をアピールする事に特化した商品やサービスの紹介サイトや、企業・法人等の紹介サイト、飲食店やネットショップなどのECサイトになりますが、私が構築したデモサイト(不完全なところが多いですが)のように、個人ブログで使うことも勿論可能です。

1カラムで集中して読んで欲しい記事が多くあるサイトには特に効果的ですので、試してみては如何でしょうか。

今後当ブログでもデザイン変更を予定していますが、今回の経験を活かしたいと思います。

今回も最後までお読み頂き有難うございました。

ABOUTこの記事をかいた人

当ブログでは、私自身が困って調べたこと、試した事を中心に記事を書いています。何か少しでもお役に立てれば幸いです。 最近では、企業様からのレビュー記事のご依頼を頂くことも出てきました。 お気軽にお問合わせよりご連絡下さい。