10/07/2009

2- Artisteerで作るWebページのデザイン要素を整理する

【デザインをどんな風にアレンジできるのかを試してみる】
”百聞は一見にしかず”ということでまずはArtisteerがどんな動きをするのかを試してみる。 
上部リボンの[アイディア]の一番右にある[サジェストデザイン]をクリックしてみよう。


自動的に次のお薦めデザインパターンが表示される。


さらにボタンをクリックすると次のデザインへ・・


サジェストデザインでは、Artisteerがお薦めのデザインパターンをいろいろな組み合わせで表示してくれる。レイアウトやテーマカラー、メニューの構成など次々に変わるデザインパターンを見てみよう。

ここでは、どんなパーツ(部位)がアレンジされるのかをざっと体験すればOK。
画面上でアレンジ後のパターンをすぐに見ることができるので、とても直感的に使えそうだ。


【ArtisteerのWebデザイン画面の基本構成要素】
次々に表示されるサジェストデザインを見て、なんとなく雰囲気がわかってきたらば、今度は具体的にどこのパーツが変化していくのか?アレンジ可能なパーツを分析してみる。

それぞれのパーツは部位ごとに上部のリボンで詳細なアレンジが可能になっている。
アイディア」タブのいろいろなサジェストボタンをクリックしてみると、それぞれの部位ごとにお薦めデザインが変化するので、Artisteerの定義している要素(パーツ)がどの部位を表しているのかを把握することができる。


例えば「サジェストヘッダー」ボタンをクリックすると、ヘッダー部分のデザインが切り替わる。いろいろなボタンをクリックして、どこが変化するのか見てみよう。

下図に各部位を一覧にしてみたので、これを参考にArtisteerの構成要素を確認してみよう。これさえ理解してしまえば、あとは自由にデザインをアレンジできるようになる。


<Artisteerの構成要素パーツ(部位)を理解するポイント>
  • ヘッダー、フッターはその名のとおり。
  • [メニュー]は上部のタブメニュー方式となっている。
  • ページの全体構成(レイアウト)は、[レイアウト]により2段(カラム)/3段(カラム)の構成と、それぞれの配置場所(左右)および幅を選択することができる。
  • メインの本文記述部位は、[論文等]で設定できる。”論文”とはスゴイ訳だけど、原題は”Article(記事)” 機械翻訳にかけたからでしょうか・・・(>_<)
  • サブのカテゴリやブックマークを配置する部位は[ブロック]と呼ばれる。
  • [ボタン]で、ページ内に配置されるボタン(検索ボタンなど)のデザインも選択することが可能。
まずはこんなかんじで、Artisteer用語に慣れてしまおう。
仕組みがわかってしまえば、後はそれぞれのパーツを好みのデザインで組み合わせていくだけだ。 ここから先は、だれにでも直感的に試行錯誤しながら進めていくことができる。

【便利なアンドゥ機能】 



この手のアプリケーションは、WYSIWYG(ウィジウィグ※見た目がそのまま機能となること)でずんずん使っていくことができる。
デザインを変えてみて、ちょっとヘンだな?と思った時はリボンの上にある[アンドゥ]ボタンを押せば、作業を一つ前に戻すことができるから安心だ。 いつでもやり直せるのだから、細かいことは悩まずにどんどんいろいろなデザインを試していこう。
トラックバックURL:

0 件のコメント:

コメントを投稿