Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress

Onswipe iPadでWordPressを雑誌レイアウトにするおしゃれなプラグイン

Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress

http://onswipe.com/

海外の開発チームによるAPIサービス「Onswipe」の公式サイト。このOnswipeは、CMSでできたサイトのためのAPIで、iPadなどでアクセスした際に、Onswipe独自レイアウトに最適化してくれる優れもののプラグイン。現在、iPad、Nexus 7、Kindle、iPhoneの4デバイスで機能します(※)。

※2013年5月現在

じつはこの記事、ふつうに「おしゃれな海外のサイトデザイン」的なテーマで書こうと思った記事でした。調べたところ、WordPressプラグインとしても提供されるサービスということで、ご紹介をします。

プラグインの解説の前に

Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress
Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress
Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress
Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress

サイトデザインがおしゃれでしょ〜。

Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress
Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress
Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress
Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress

WordPressプラグイン「Onswipe」の使い方

このOnswipeは、われらがWordPress(読み方:ワードプレス ※CMSのひとつ)でもプラグインとして公開されています。なので、お使いのWordPressにインストールして有効化するだけで、すぐにiPadに最適化したサイトが実現できます。便利な時代に鳴ったものです。

インストールして有効化するだけ

Onswipe
http://wordpress.org/extend/plugins/onswipe/

WordPressのダッシュボードより「プラグイン」→「新規追加」にて「Onswipe」で検索知ればすぐに見つかりますよ。インストールが完了したら有効化するだけで完了です。

※Onswipeとともに提供されている「Onswipe Link for WordPress」についてですが、ぼくのこのサイト(バージョンは3.5.1でした)の場合、有効化時に重大なエラーを引き起こして使えませんでした。一体なぜなんだろうかわかりませんが。

オプション

Onswipe

インストールしたあとは、ダッシュボードのメニューに「Onswipe」が追加されます。ここで「有効化/無効化」やアクセントカラーの切り替えなどの設定ができます。

Onswipe

色の変更はこんな感じ。

Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress

ここで「Disabled」に切り替えれば、Onswipeがオフになり、通常通りのレイアウトにいつでも戻す事ができます。

iPadでの実際のレイアウトはこんな感じ

Before

Onswipe iPadではこんな感じ
Onswipe iPadではこんな感じ

こちらが「Onswipe」有効化前の当ブログTOPページです。

After

Onswipe iPadではこんな感じ
Onswipe iPadではこんな感じ

読み込み中なう。

Onswipe iPadではこんな感じ
Onswipe iPadではこんな感じ

おー!!本当に変わってる!!

以前紹介したRSSリーダー「Feedly」を思わせるマガジン風レイアウトですね。やっぱこのデザインは読みやすさに長けます。

Onswipe iPadではこんな感じ
Onswipe iPadではこんな感じ

WordPressの構造に関わらず、記事はスワイプ操作だけで次々と読み進める事ができます。記事の末尾のページにくると、こんな風に右下に「次はこちら」的なお知らせも表示しsてくれます。可愛いですね。

Onswipe iPadではこんな感じ
Onswipe iPadではこんな感じ

また、記事を読んでいる間は左下にこんな風なオリジナルのアイコンが表示されます。

吹き出し → 「コメントを残す」
ロケット → 「関連性の高い記事へジャンプ」
アウトプット → 「シェアする(Facebook、ツイッター、メールなど)」
ハート → 「お気に入りする(Facebookと連動できる)」

iPhone4ではうーん…だった。

僕のサイトの場合、iPhoneではちょっとレイアウトが崩れてしまいました。iPhone4だったからなのか、僕のサイト側の問題なのか、理由はとくに追求していませんが、現在は「Onswipe」は無効にしています。

まとめ

Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress
Onswipe | iPadやiPhoneの雑誌レイアウトにデザインするおしゃれなWordPressプラグイン | WordPress

というわけで最後に不安になるようなことを書きましたが、当サイトの環境に依存するエラーだったのかもしれません。Onswipe自体、どんどんアップデートされているようですので、一度お使いのCMS環境で試してみてはいかがでしょうか。WordPressプラグインなので、不具合があれば「Disabled」にして無効化すれば問題ない事ですし。

それでは最後にリンクを載せておきますね。

Onswipe
http://onswipe.com/

Onswipe (for WordPress)
http://wordpress.org/extend/plugins/onswipe/