DigiPress

Highly Flexible WordPress Theme

メニュー

次期フラットデザインテーマのスマホ表示サンプルを大公開!

2018/05/09

ガリガリ君がシャリシャリいって一層おいしく感じるこの季節、WordPressテーマ「DigiPress」シリーズの新作となる次期テーマの開発もいよいよ大詰めを迎えています。

前回、急遽決まったスマホ切り出し作戦

そう、今回のテーマでは他のテンプレートでも多く取り入れられているメディアクエリという手法を利用したレスポンシブデザインによるスマートフォン対応ではなく、専用のテンプレートによるスマートフォン表示対応に変更となりました。

スマートフォンの利用環境では、モバイル環境下での通信速度、限られた画面サイズ、メモリなどの限られたリソース、マウスではなくタッチパネルによる操作、ユーザーが求めるコンテンツへのアクセシビリティ、といった課題に対応していく必要があります。

これらを考慮した結果、モバイルからのアクセスがますます増えていく中で、生成されるHTMLソース、CSS、Javascript、PHPの処理内容など、データ量はPCと全く同じなのにただ単にリキッドレイアウト(レスポンシブデザイン)化してごまかしただけのものを「スマホ対応です!」というには無駄が多くあまりにも乱暴なのではないか、という疑義が社内で噴出し、今作ではUser-Agentによってスマートフォンの場合は専用のテンプレートで表示する仕様となっています。

※既存のDigiPressテーマも今後User-Agent判定による専用テンプレート表示に仕様変更となる予定です。

…っと前置きが長くなりました!

というわけで次期DigiPressテーマのスマートフォン表示サンプルをいくつかご紹介します。

トップページ

index

横向き

landscape

トップメニューを開いてみた

topmenu

サイト内検索をGoogleカスタム検索に変えてみた

gcustom-search

検索結果ページ(ギャラリー形式の場合)

search-result

ページナビゲーション

navi

サイトのフッターエリア(ウィジェット)

footer

アーカイブページ(ギャラリー形式の場合)

archive

下へスクロール中…

gallery-style

記事(シングル)ページ

post-page

ボタン類

buttons

ラベル類

labels

ラベル類2

labels2

記事フッター(メタエリア)

post-meta

コメント欄

comment2

コメント入力フォーム

comment


ここまでたくさん画面キャプチャを貼り付けておいて、「デモサイトをスマホで見てもらったほうが早いじゃん」ということに気がつきました。

というわけでお時間に余裕がある方はお手持ちのケータイでデモサイトもチェックしてみてください!

DigiPress 7(仮称)デモサイト

フラットデザインにもリッチデザインにもなるスマホのユーザビリティを追求したWordPressテーマ。
Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly
Send to LINE