メイキングWebデザイン【上級編】

メイキングWebデザイン【上級編】vol.１　Webサイトの構造をデザイン

page:

メイキングWebデザインの最後となる上級編は横田“Shironagasu”耕三がデザインした「ZAKK@S WEB」という架空のショッピングサイトの制作課程に沿って解説する。

ここではWebページ制作を行ううえで最初にすべきプロトデザインを作成する「サイトデザイン」機能で行う。複雑なサイト構造を、ユーザビリティを考慮してデザインするのはこれからのWebデザインにおいて必須項目だ。想定ユーザが各場面でどのように考えるかをシミュレートすることは、たいへん重要で、サイト構造の問題点を洗い出すことができる。

※あるECサイトで「口紅」を買おうとする女性をユーザに想定した例
「ユーザの希望・行動（閲覧順序）とサイトの構造」を見る

１．アイデア段階でのサイトデザイン
Adobe® GoLive®に搭載されている「サイトデザイン」機能は、現実的なサイト作成作業に入る前段階での、サイト構成案を構築し、検討できる機能だ。この機能を使用することによって、多彩なサイト構成を検討でき、用途に沿ったWebサイト構造を柔軟にデザインすることができる。操作は用意されたオブジェクトのアイコンをドラッグ＆ドロップで配置するだけなので、複雑で難解な操作はまったく必要ない。

２．サイトを構成するページの配置
「サイトデザイン」機能を使用したサイト構造のデザインは、新規サイトを作成し、「デザイン＞新規サイトのデザイン」を選択すると表示される「サイトデザインウインドウ」上で行う。

オブジェクトパレットの「デザインのセクション」アイコンをウインドウ内にドラッグ＆ドロップして配置、以下に連なる子ページの設定などを「セクションインスペクタ」で行えば、ツリー構造をもったサイトが作成できる

子ページを収容するフォルダ名をここで指定することによって、フォルダ（階層構造）を作成することも可能。

さらに、ページを追加する場合は、「セクションインスペクタ」の［新規ページを作成］ボタンや「デザインメニュー＞複数の新規ページを作成」などで追加していく。

３．わかりやすい表示方法に設定可能
ページの名前は「オブジェクトインスペクタ」の［名前］、［ファイル名］、［ページタイトル］でリネームすることができる。また、「サイトデザインウインドウ」上で表示されるページの名称は「表示コントロールインスペクタ」の「表示」タブで［ページタイトル］、［ファイル名］、［デザイン名］の中から選択可能。さらに、アイコンの表示方法、カラーの設定、グリッド設定など、ユーザが直感的に作業できる設定を行える。

アイコンの表示方法：楕円

アイコンの表示方法：フレーム

アイコンの表示方法：アイコン

vol.１
・Webサイトの構造をデザイン
vol.２
・フォームページの作成
vol.３
・ユーザビリティを考慮した機能
・サイトの更新
・ソースコードの編集

メイキングWebデザイン
【初級編】
【中級編】
【上級編】

ダウンロード
・サンプルテンプレート
・フリーボタン素材
・印刷用PDF
　STEP１〜３(PDF:１MB/17ページ)
　- Webサイトの構造をデザイン
　- サイト構造の編集・微調整
　- サイト全体で統一されたページデザイン
　STEP４〜６(PDF:１MB/10ページ)
　- 共通するデザイン要素の設定
　- フォームページを作成して情報の収集
　- ユーザビリティを考慮した機能
　STEP７〜９(PDF: 564 KB/７ページ)
　- サイトの更新
　- ソースコードの編集
　- ロールオーバーを使用したバナーの作成
　- ダイナミックリンクを使って
　　データベースと連携したサイト構築

トップに戻る

back

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報