自己紹介

瀬口理恵（せぐちりえ）＠rie05

1983年大阪うまれ大阪そだち

5DGの屋号でフリーランスしてます

Web/DTP/AppUI/講師業/Ust配信 etc

♥WordCamp KOBE実行委員です♥

@rie05 /rie.seguchi

つくったものWordCamp KOBE公式サイト

海外でGreat WordCamp Website Designとして紹介されました！

アジェンダ

★スマートフォンの現状

★スマートフォンサイトって？

★WordPressでスマホサイト！

　事例その１～その４

★UI/デザイン

　ポイントその１～その３

★まとめ

スマートフォンの現状

（出典：(株) ＭＭ総研 [ 東京・港 ] ）

スマートフォンサイトって？

→スマートフォンに最適化されているサイトとは…

・マウスではなく指でタップするため、ボタンは押しやすくするなどの独自UIが必要

・弱い3G回線でみられることも考慮した軽量化サイト

スマートフォンサイトって？制作に必要な技術

HTML5 + CSS3／ JavascriptスマートフォンブラウザはPCに比べHTML5や

CSS3への対応が進んでいるので新しい技術を積

極的に活用しましょう。またスマートフォンなら

ではの操作性を実現するのにJavaScriptを使い

ます。最近ではjquery mobileなど優秀なフレー

ムワークを使って制作することもあります。

各スマートフォンの仕様や特徴をおさえる

端末によりOS/ブラウザーの仕様に違いがあるた

め、端末ごとの特徴を理解したうえでの制作・動

作確認が必要です。

WordPressでスマホサイト

でスマートフォンサイトをつくりたい！

事例その１　難易度★☆☆☆☆かんたん

スマートフォンサイト対応プラグイン

を導入してワンタッチ作成！

・プラグインをインストール→有効化で完成！・WordPress初心者さんにオススメ

■WPtouchhttp://www.bravenewcode.com/store/plugins/wptouch-pro/

最も有名なプラグイン。テーマをiPhone/

Androidで切り替えてくれるようになります。

TOP記事に出す件数など設定項目で簡単なカス

タマイズも可能。有料版あり。

WordPressでスマホサイト

■iWPhoneiPhoneに特化したプラグイン。

■Wapple Architect Mobile Plugin

モバイルサイト変換サービス「Wapple」のAPIを使用し、PCサイトのデザインをスマホ

用に変換してくれるプラグイン

WordPressでスマホサイト

でスマートフォンサイトをつくりたい！

事例その２　難易度★★☆☆☆ややかんたん～普通

スマートフォンサイト対応テーマ

を導入してサクサク作成！

・最新技術が最初から実装されているから楽チン・カスタマイズには要HTML/CSS知識

■Whiteboardhttp://whiteboardframework.com/

iPhone、Android、iPad、PC、などあらゆる環境でも最適化されたデザインを保つテー

マ。CSS3のテクニックにあるメディアクエリをベースにしたフレームワーク、「Less

Framework 3」が使用されている。

WordPressでスマホサイト

WordPressでスマホサイト

でスマートフォンサイトをつくりたい！

事例その３　難易度★★★★☆普通～ややむずかしい

モバイルWebアプリケーションフレームワーク

jquery mobileを使ってみよう！

WordPressでスマホサイト

タッチ操作に適したUIコンポーネント、Ajax を使用したサーバーとの通信、Web ページのためのアニメーションや画像エフェクトなど機能たくさん！

読み込んだ後簡単なコードで素

早く実装できますが、詰め込み

過ぎると重いです×

また、デザインテーマはデフォ

ルトで用意されているが細かい

変更は難易度高め

WordPressでスマホサイト

でスマートフォンサイトをつくりたい！

事例その４　難易度★★★★★むずかしい

自作オリジナルテーマ+プラグイン

でこだわったスマホサイト制作

・テーマファイルを自分で作成できるデザイン/コーディング力が要・振り分けるところはプラグインにおまかせ

■MobilePresshttp://mobilepress.co.za/

インストール→有効化でスマートフォン用に最適化されますが、スマートフォンでアクセ

スした際のテーマを自由に追加できます。wp-content/mobile-themesというフォルダ

を作成してそこにテーマファイルを設置すればOK。

WordPressでスマホサイト

UI/デザイン

スマホサイトUIデザイン

重要ポイント

デザインセンスがなくても大丈夫

UI/デザイン

画面サイズについて

85px

40px

width:320px

height:355px

情報の詰め込みすぎに注意！

iPhoneの画面サイズは320px×480px、

Safariを起動した直後の段階では125pxがア

ドレスバーとツールバーに利用されており、

実際にWebページの表示に使える領域は

320px×355pxしかないです。

UI/デザイン

横画面にした時

40px

UI/デザイン

ボタンは大きく！

スマートフォンはそのほとんどの操作が、指

です。PCサイトデザインでは大きすぎるかな

と思われるボタンでも、実際に指で操作して

みると意外と押しにくく、誤動作もします。

押しにくいボタンを何度も押してくれるユー

ザーは少ないです。イライラして帰ってしま

うかも。

ポイントその１

UI/デザイン

リスト表示を活用！

テキストリンクが並んでいると、押しにくい

し分かりにくい、そんな場合は幅をたっぷり

とってリスト表示にしましょう。cssを使いリ

ンク領域を広げることにより見栄えもユーザ

ビリティーもあがります。

ポイントその２

※HTML5ではdivやpといったブロック要素全体をaで囲む記述ができます。これをブロックリンクといいスマホサイトでは非常に多用されています。

UI/デザイン

アイコンで分かりやすく

主要コンテンツはリストでは地味、賑やかし

が欲しい場合は、iPhoneのホーム画面のよう

にアイコンを並べてコンテンツを見せるイン

ターフェイスもあります。

ポイントその３

まとめ

♥WordPressでスマートフォンサイト対応するのは

　簡単な方法からチャレンジできます。

♥ただオリジナルデザインで実装するには、

　スマホサイト用のUI設計とデザイン、

　HTML5/CSS3、javascriptの知識は必須！

とりあえず無料のテーマやプラグインで試してみてください

さいごに

♥本日の資料ダウンロードは、Twitterプロフィール欄にURLを掲載しております！

@rie05

♥よろしければフォローお願いします♥