Appleサイト風の 1カラム WordPress有料テーマ Grazioso の秘密

iPhone公式サイトを瞬時に所有せよ！

これから紹介する、次世代レスポンシブ1カラムテンプレート「Grazioso（グラツィオーソ）」をWordPressにインストールすれば、上記も夢ではなくなります。

Javascriptを駆使した簡単アニメーション設定に加え、背景画像を使用したパララックス効果(視差効果)のウィジェット設置機能など、まさに最先端技術のオンパレードなWordPressテンプレートです。

• 【目次：Appleサイト並みの機能美を実現！Graziosoの秘密】
• 多くの人が、Apple社のiPhone公式ページに魅了される秘密。
• Big UI / Low Density / 1column とは何か？
• 1カラムレスポンシブテンプレート Graziosoの最大の強みはコレ！
• なぜ、Graziosoは「ストレスレス＋楽しい」を実現できるのか？
• Graziosoの簡単アニメーション設定とは？
  •  テーマオプションでjQueryアニメーションを設定可能。
  •  ウィジェットでトップページにテキスト＆画像のアニメーション設定。
• 1カラムレイアウトのメリットについて。
  •  1カラムのWebサイトは、どのような用途に向いているのか？
• 優れたUIは、もちろんスマホでも実現されます。
  •  レスポンシブWebデザインについて。
• ウィジェットごとのパララックス効果設定機能。
• ウィジェット背景設定から動画背景も設定可能に。
• その他、Graziosoには高品質サイトを構築する機能が盛りだくさん！
• 最後に。。。

多くの人が、Apple社のiPhone公式ページに魅了される秘密。

iPhone公式サイトをご覧になり、その世界観に魅了される方は多いようです。

では、多くの人を魅了する世界観は、一体どのように構成されているのでしょうか？

その秘密は、「Big UI」「Low Density」そして「1column」という言葉にあるのかもしれません。

Big UI / Low Density / 1column とは何か？

まず3つの言葉を定義すると、以下のとおりとなります。

Big UI（大型UI）

大きなUIパーツの使用。

Low Density（低い密度）

大胆なホワイトスペースを使用。

1column（1カラム）

1カラムレイアウトの採用。

上記のようなデザイン設計には、見やすい、わかりやすい、迷わない、レスポンシブと相性が良い、タッチスクリーン操作がしやすいなど、数々のメリットがあります。

またモダンな美しさと、独特なインパクトを生み出すことが可能であり、まさにApple社サイトの魅力を生み出しているわけです。

さらに、JavascriptなどWeb技術を駆使したアニメーションも、魅力UPに貢献しています。

このあたりは本題である1カラムWordPressテンプレートGrazioso、とりわけGraziosoの強みと絡めながら、話を進めていきたいと思います。

1カラムレスポンシブテンプレート Graziosoの最大の強みはコレ！

iPhone公式ページ風のサイトを、WordPressで簡単に構築できるレスポンシブ＆フラットデザインテーマ「Grazioso（グラツィオーソ）」。

その一番優れたところは、ストレスレス＆楽しい体験を提供できること。

上記は、WordPressを使用するあなたが体験する部分もありますが（様々な機能を楽に設定できるため）、主にそのWordPressサイトを訪れたエンドユーザーが体験することになります。

この「イライラが無い＋楽しい」は、UI（ユーザーインターフェース）デザインにおいて、最も重要な項目と言えるでしょう。

つまり、仮にレスポンシブテーマGraziosoを使用したとすれば、先の「Big UI / Low Density / 1column」に即した優れたUIを、WordPressで簡単に構築できるというわけです。

優れたUIデザインのWPテーマ「Grazioso」の公式サイトはこちら

なぜ、Graziosoは「ストレスレス＋楽しい」を実現できるのか？

後ほど詳しく紹介しますが、もちろんGraziosoならアニメーションの設定もWordPressウィジェット等から簡単可能。

そして、フラットデザインのシンプルさ＋1カラムならではの可読性の高さ。

これらが、ユーザーをイライラさせないWebサイトを実現しています。

Graziosoの簡単アニメーション設定とは？

Graziosoの簡単アニメーション設定は、サイト全体のjQueryアニメーションを設置するWordPressテーマオプションおよび、トップページのコンテンツを配置するWordPressウィジェット

の２カ所で制御できる仕組みのことです。

テーマオプションでjQueryアニメーションを設定可能。

Graziosoでは、WordPressの管理画面「外観→テーマオプション→その他」から、以下のようなjQuery等の効果を簡単に設定可能です。

アニメーションのレベル

ページのスクロールにあわせてコンテンツが現れるアニメーション効果のレベルを３段階から選択設定。

スムーズスクロール

素早くスクロールした際に、慣性が残ったような余韻のあるイージング効果を追加。

トップへ戻るボタン

ボタンのスタイルを、９種類から選択可能。

ボタンにシャドウを追加

トップへ戻るボタンにシャドウ（影）を追加。

不具合防止設定

Smart Shortcodeプラグインとテーマ機能のコンフリクト不具合を、防止するための設定項目。

ウィジェットでトップページにテキスト＆画像のアニメーション設定。

こちらのGraziosoデモサイトのような、トップページにおける左右からテキストや画像が出現するアニメーションを、ウィジェットの[Grazioso]インフォメーションから素早く設置することができます。

1カラムレイアウトのメリットについて。

先ほどGraziosoの強み紹介の中で「1カラムならではの可読性の高さ」と申し上げました。

せっかくですので、なぜ、海外で1カラムが流行っているのか？について少し説明したいと思います。

1カラムが流行っている理由は、ズバリ以下の2点です。

• FacebookやTwitterでのシェア数増加。
• 最後まで読んでもらえる確率の向上。

Web閲覧時の視線の動きは、一般的に「Z型」もしくは「F型」と言われます。

いずれの場合にしても、2カラムや3カラムですとメインコンテンツを閲覧している途中で、ちょこちょこサイドバーへ視線が移ることになります。

これはユーザーにとって、場合によっては集中を妨げられることになってしまう。

一方、1カラムならば上記の懸念は無くなり、ユーザーに余計な（無意識下における）負荷を与えてしまうことがありません。

そのため、先の2つの効果が生み出されるのです。

1カラムのWebサイトは、どのような用途に向いているのか？

Graziosoが採用している1カラムレイアウトの最大の強みは、訪問者をコンテンツに集中させることが可能なこと。
すなわち商品やサービスへの注目度を高められることが1カラムの強みとなります。

よって、いわゆるランディングページはもちろんのこと、「個別の商品やサービスを紹介する企業サイト」「飲食店やレストランサイト」「コンサルなどサービス業サイト」に向いていると言えるでしょう。

一方、サイドバーに広告を設置することで収益を生み出すタイプのブログには、1カラムはあまり向いていないかもしれません。

ただし、あえてサイドバーを使用しない1カラムでブログを構築することで、個性を出すをいう手法は、最近海外で増えてきているようです。

Appleサイト風1カラムデザイン「Grazioso」の公式サイトはこちら

優れたUIは、もちろんスマホでも実現されます。

上記のようにGraziosoは、スマホユーザーに対しても効果的に訴求できるレスポンシブWebデザインのWordPressテンプレートです。

レスポンシブWebデザインについて。

今さらな話かもしれませんが、せっかくなのでレスポンシブについて少し触れておきましょう。

レスポンシブWebデザインとは、ウィンドウサイズに合わせて自動的にページのレイアウト・デザインを調整させる手法のこと。

主にCSSを使って実現させるものとなります。

レスポンシブのメリットとしては、一つのテンプレートをカスタマイズするだけでPC用、タブレット用、そしてスマホ用にも適用されることです。

なぜなら、PC用のテンプレとスマホ用のテンプレといった形に分かれていない構造となっているからです。

なお、最近の海外WordPressテーマだと、レスポンシブでは無い方がむしろ珍しいかもしれません（特に有料WordPressテーマは非常にレスポンシブWebデザインが多い）。

ウィジェットごとのパララックス効果設定機能。

UIに優れた海外のサイトではJavascriptアニメーションに加え、背景画像を使ったパララックス効果（視差効果）が上手く取り入れられています。

ちなみにパララックスとは、複数の重なったレイヤーが、スクロールすると異なるスピードで動作することで、立体感や奥行き感、視覚的な美しさを生み出す手法です。

Graziosoでは、上記のパララックス効果をウィジェットごとに設置可能、視覚的なエフェクトで楽しい体験を提供するのに一役買ってくれています。

ウィジェット背景設定から動画背景も設定可能に。

動画ファイルにはさまざまな拡張子（規格形式）があり、一昔前はGoogleクローム・FireFox・IEなのブラウザによって全てバラバラだったため、動画をWebサイトに埋め込むには少々面倒な部分がありました。

しかし各ブラウザのバージョンアップと共に、2016年後半には主要ブラウザでの動画再生がMP4のみで可能となりました。

上記に伴い、Graziosoでもウィジェットから複数のMP4動画を背景に表示できる機能が付加されています。

Web業界の動向にあわせたバージョンアップにより、常に最先端の技術を提供してくれることも、Graziosoの魅力の一つかもしれません。

その他、Graziosoには高品質サイトを構築する機能が盛りだくさん！

以上のようにレスポンシブテンプレートGraziosoをインストールすれば、PC・スマホはもちろん、あらゆるデバイスに対して優れたUIを提供するWordPressサイトを構築できます。

その他、収益サイトを最適化するGraziosoの特長・機能として、以下のようなものが挙げられます。

• HTML5、CSS3に完全準拠（内部SEOの基本！）。
• 専用のカスタムウィジェット機能を13種類追加。
• メニューの内容や配置を、PC・モバイル別に設定可能。
• サイト全体のアニメーション表示効果を設定可能。
• 各コンテンツブロック毎の背景色を自由に変更可能。
• ウィジェットのみで調整できる簡単TOPページレイアウト。
• 流行のアイコンフォント、FontAwesomeを使用可能。
• Grazioso専用プラグインで19種類の機能を追加可能。
• 5種類のコメント表示システムを実装。
• 任意のテキストをタイピング表示させる特殊効果。
• 画像ギャラリーを、ウィジェットで簡単に作成可能。
• 価格表を、ウィジェットで簡単に作成可能。
• レイアウトを、ウィジェットで簡単に変更可能。
  etc…

最後に。。。

フラットデザイン＋アニメーション＋パララックス＋ワンカラムレイアウトで構築されたレスポンシブWordPressテンプレートは、海外ではかなり普及しています。

ですが日本語テーマだと、なかなかしっくり来るものがありません。

だからこそ、このGraziosoなら、個性と収益力が融合したサイトを構築できる！と感じます。

大した機能が備わっていない格安WPテーマで満足できる方にはオススメできませんが、Apple公式サイトのような機能美を備えた、ハイレベルなWordPressテーマを求めている方にこそGraziosoはオススメです。

Grazioso公式サイトでデモ＆詳細を確認する