Appleサイト並みの機能美? 1カラムテンプレートGraziosoの秘密。

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

※2014年11月投稿、2017年2月最終更新。

シンプルなのに記憶に焼き付く斬新さ、そしてわかりやすいユーザビリティを備えている、Apple社サイトのiPhone公式ページ。

想像してみてください。
もしあなたが、iPhone公式サイトのようなデザインを構築できる、WordPressテーマを手にしたら、、、

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

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

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

img-grazioso-r1

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

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

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

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

img-grazioso-r2

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

Big UI(大型UI)
大きなUIパーツの使用。
Low Density(低い密度)
大胆なホワイトスペースを使用。
1column(1カラム)
1カラムレイアウトの採用。

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

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

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

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

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

grazioso-strength

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

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

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

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

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

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

jQuery

試しにこちらのGraziosoデモサイト&詳細確認を、ご覧になってみてください。

まず、最初にjQueryをふんだんに使ったアニメーションに、目を奪われるかと思います。

これが、ユーザーに閲覧していて楽しいという体験を、提供することになります。

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

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

これらが、ユーザーをイライラさせないことに、つながっているわけです。

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

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

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

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

レスポンシブテーマGraziosoのWordPressテーマオプション

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

アニメーションのレベル
ページのスクロールにあわせてコンテンツが現れるアニメーション効果のレベルを3段階から選択設定。
スムーズスクロール
素早くスクロールした際に、慣性が残ったような余韻のあるイージング効果を追加。
トップへ戻るボタン
ボタンのスタイルを、9種類から選択可能。
ボタンにシャドウを追加
トップへ戻るボタンにシャドウ(影)を追加。
不具合防止設定
Smart Shortcodeプラグインとテーマ機能のコンフリクト不具合を、防止するための設定項目。

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

GraziosoのWordPressウィジェット

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

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

Z型とF型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スマホでのGrazioso表示確認用QRコード

もしQRコードアプリ内蔵のスマホがお手元にありましたら、ぜひ 隣のQRコードを読み込んでみて下さい。

こちらは、Graziosoで制作されたデモサイトです。

レスポンシブデザインによる表示最適化はもちろん、スマホでもアニメーションが効果的であることを、ご確認いただけるかと思います。

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

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

RESPONSIVE WEB DESIGN

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

レスポンシブ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…

最後に。。。

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

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

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

このテーマは、はっきりいってそこらのワードプレステンプレートとは別格です。

Graziosoのデモ&詳細を確認する »

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

flight