連載
» 2013年04月04日 18時00分 UPDATE

jQuery Mobileでスマホ向け企業サイト構築(4):企業サイトをスマホ向けに作り込むのに役立つテク11選 (1/4)

まだjQuery Mobileを触ったことのないWeb制作者向けに、基本的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます。今回は、開閉式/アコーディオン式コンテンツ、画像のマルチデバイス表示、グリッドレイアウト、Googleマップの表示などを紹介します。

[野中龍一,クラスメソッド]

スマホ向け企業サイトの「サービスページ」「企業情報ページ」を作り込む

 前回の「スマホ向けサイト制作の実装&使えるTips10選」では、お知らせページの作成を進めつつ画面遷移の制御、ボタンに関する細かな指定、ナビゲーションバー、リストの検索フィルタ、基本的なHTMLスタイルと固定ポジションモードについて紹介しました。

 今回は以下のような「サービスページ」「企業情報ページ」の作成を進めつつ「開閉式とアコーディオン式コンテンツ」「ビジュアルの表示」「コンテンツのレイアウト」「Googleマップの表示」について紹介していきます。

jqm4_1.jpgjqm4_2.jpg サービスページの参考イメージ(左)と企業情報ページの参考イメージ(右)

 前回と同じですが、以下にサンプルファイルを用意してあります。ダウンロードして利用してください。

 この記事では前回と同様、すべてのソースコードは掲載せず、ポイントとなる部分を紹介していきます。サンプルサイトとサンプルソースコードを確認しながらポイント部分を読み進めてください。

 また、スマホ向け企業サイトに使える実践的なコード例も出てきますので、参考にしてください。下記リストはリファレンス的に使えるように、インデックスになっています。

サービスページの設計

 まずはサービスページの設計から始めましょう。全体の構成、ファイル構成、各種画面構成を決めます。

全体の構成

 サービスページは受け皿となるトップページに、ソリューションの詳細となるページが3つ用意されています。サービストップには自社のアピールポイント、その下にソリューションと外部に用意されたサービスページへのリンクが設けられています。

 具体的には以下のようなページ構成です。

ファイル構成

 全体構成が、そのままディレクトリとファイル構成になります。

  • services/
    • aws.html
    • mobile.html
    • html5.html
    • index.html

サービストップの画面構成

 サービスのトップ画面ではヘッダにホームへ戻るボタンを配置し、アコーディオンを使いスペースを節約したアピールポイントの紹介、リストビューを使った各ソリューションの詳細へ遷移させます。

  • ヘッダ
    • ホームへの戻るボタン
    • タイトル
  • アピールポイント
  • ソリューションリスト
  • サービスリスト
  • フッタ

ソリューション詳細ページの画面構成

 ソリューションの詳細ページでは、ヘッダにサービストップへ戻るボタン、さらに右側にホームへ戻るボタンを配置します。コンテンツ部分はアコーディオンを使ったポイントの紹介と文章を載せ、最後にお問い合わせへ誘導するためのボタンを配置します。

  • ヘッダ
    • お知らせトップに戻るボタン
    • タイトル
    • ホームに戻るボタン
  • ポイント
  • ソリューション内容
  • お問い合わせボタン
  • フッタ
jqm4_3.jpg 画面イメージ
       1|2|3|4 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。