秘密Appleサイト並みの機能美を実現!1カラムWPテーマGraziosoの秘密。iPhone公式サイトを瞬時に所有せよ!1カラムテーマGraziosoCSSフレームワーク+jQueryアニメーションを駆使した最高峰の1カラムテーマ。※2014年11月投稿、2017年2月最終更新。シンプルなのに記憶に焼き付く斬新さ、そしてわかりやすいユーザビリティを備えている、Apple社サイトのiPhone公式ページ。想像してみてください。あなたが、iPhone公式サイトのようなデザインを構築できる、WordPressテーマを手にしたら、、、これから紹介する、次世代レスポンシブ1カラムテンプレート「Grazioso(グラツィオーソ)」をWordPressにインストールすれば、上記も夢ではなくなります。Javascriptを駆使した簡単アニメーション設定に加え、背景画像を使用したパララックス効果(視差効果)のウィジェット設置機能など、まさに最先端技術のオンパレードなWordPressテンプレートです。多くの人が、Apple社のiPhone公式ページに魅了される秘密。Graziosoの最大の強みはコレ!なぜ、Graziosoは「ストレスレス+楽しい」を実現できるのか?Graziosoの簡単アニメーション設定とは?テーマオプションでjQueryアニメーションを設定可能。ウィジェットでトップページにテキスト&画像のアニメーション設定。1カラムレイアウトのメリットについて。1カラムのWebサイトは、どのような用途に向いているのか?優れたUIは、もちろんスマホでも実現されます。レスポンシブWebデザインについて。ウィジェットごとのパララックス効果設定機能。ウィジェット背景設定から動画背景も設定可能に。その他、Graziosoには高品質サイトを構築する機能が盛りだくさん!最後に。多くの人が、Apple社のiPhone公式ページに魅了される秘密。iPhone公式サイトをご覧になり、その世界観に魅了される方は多いようです。Density」そして「1column」という言葉にあるのかもしれません。何か?まず3つの言葉を定義すると、以下のとおりとなります。UI(大型UI)大きなUIパーツの使用。Density(低い密度)大胆なホワイトスペースを使用。1column(1カラム)1カラムレイアウトの採用。上記のようなデザイン設計には、見やすい、わかりやすい、迷わない、レスポンシブと相性が良い、タッチスクリーン操作がしやすいなど、数々のメリットがあります。モダンな美しさと、独特なインパクトを生み出すことが可能であり、まさにApple社サイトの魅力を生み出しているわけです。JavascriptなどWeb技術を駆使したアニメーションも、魅力UPに貢献しています。このあたりは本題である1カラムWordPressテンプレートGrazioso、とりわけGraziosoの強みと絡めながら、話を進めていきたいと思います。Graziosoの最大の強みはコレ!iPhone公式ページ風のサイトを、WordPressで簡単に構築できるレスポンシブ&フラットデザインテーマ「Grazioso(グラツィオーソ)」。その一番優れたところは、ストレスレス&楽しい体験を提供できること。上記は、WordPressを使用するあなたが体験する部分もありますが(様々な機能を楽に設定できるため)、主にそのWordPressサイトを訪れたエンドユーザーが体験することになります。この「イライラが無い+楽しい」は、UI(ユーザーインターフェース)デザインにおいて、最も重要な項目と言えるでしょう。1column」に即した優れたUIを、WordPressで簡単に構築できるというわけです。優れたUIデザインのWPテーマ「Grazioso」の公式サイトはこちらなぜ、Graziosoは「ストレスレス+楽しい」を実現できるのか?試しに上記のGrazioso公式サイトを、ご覧になってみてください。最初にjQueryをふんだんに使ったアニメーションに、目を奪われるかと思います。これが、ユーザーに閲覧していて楽しいという体験を、提供することになります。後ほど詳しく紹介しますが、もちろんGraziosoならアニメーションの設定もWordPressウィジェット等から簡単可能。フラットデザインのシンプルさ+1カラムならではの可読性の高さ。これらが、ユーザーをイライラさせないWebサイトを実現しています。Graziosoの簡単アニメーション設定とは?Graziosoの簡単アニメーション設定は、サイト全体のjQueryアニメーションを設置するWordPressテーマオプションおよび、トップページのコンテンツを配置するWordPressウィジェットの2カ所で制御できる仕組みのことです。テーマオプションでjQueryアニメーションを設定可能。Graziosoでは、WordPressの管理画面「外観→テーマオプション→その他」から、以下のようなjQuery等の効果を簡単に設定可能です。アニメーションのレベルページのスクロールにあわせてコンテンツが現れるアニメーション効果のレベルを3段階から選択設定。スムーズスクロール素早くスクロールした際に、慣性が残ったような余韻のあるイージング効果を追加。トップへ戻るボタンボタンのスタイルを、9種類から選択可能。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は、もちろんスマホでも実現されます。隣のQRコードを読み込んでみて下さい。こちらは、Graziosoで制作されたデモサイトです。レスポンシブデザインによる表示最適化はもちろん、スマホでもアニメーションが効果的であることを、ご確認いただけるかと思います。上記のように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種類のコメント表示システムを実装。任意のテキストをタイピング表示させる特殊効果。画像ギャラリーを、ウィジェットで簡単に作成可能。価格表を、ウィジェットで簡単に作成可能。レイアウトを、ウィジェットで簡単に変更可能。フラットデザイン+アニメーション+パララックス+ワンカラムレイアウトで構築されたレスポンシブWordPressテンプレートは、海外ではかなり普及しています。日本語テーマだと、なかなかしっくり来るものがありません。このGraziosoなら、個性と収益力が融合したサイトを構築できる!と感じます。大した機能が備わっていない格安WPテーマで満足できる方にはオススメできませんが、Apple公式サイトのような機能美を備えた、ハイレベルなWordPressテーマを求めている方にこそGraziosoはオススメです。TOP5gradeAppleサイト並みの機能美を実現!1カラムWPテーマGraziosoの秘密。比較サイト構築情報flight。