このページの本文へ

実例でわかる!スマートフォンサイトの画面設計 (2/3)

2010年09月13日 10時00分更新

文●たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷

サイトマップを作成する

 今回制作するスマートフォンサイトは1ページのみのマイクロサイトですので、スマートフォンサイト自体の構造設計(サイトマップの作成)は本来必要ありません。ただ、プレイグループ木場校のサイトにはスマートフォンサイト以外にPCサイトや携帯電話サイトもあるので、簡単なサイトマップを作成してそれぞれの関係を明確にしておきます。

プレイグループ木場校のサイトマップ。スマートフォンサイトと携帯電話向けサイトを振り分ける

 サイトマップは、PowerPointやExcelなどのオフィスソフト、アウトラインエディター、サイトマップ作成用の専用ツールなどで作成できますが、ここでは私が普段使っているCacooというWebサービスでの手順を説明します。

オンラインドローイングツールの「Cacoo」。ブラウザー上でサイトマップやワイヤーフレームを作成できる

 Cacooにログインしたら「新しい図」を作成します。ステンシルにある「サイトマップ」の中から必要なパーツを選んで配置し、コネクタでパーツ同士をつなげていくと、サイトマップを簡単に作成できます。

サイトマップ用のパーツをドラッグ&ドロップで配置してコネクタで接続していく

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く