2012年2月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
トップ > Movable Type > 今日のコラム:「Web屋さんのためのMovable Type4」資料制作その1

今日のコラム:「Web屋さんのためのMovable Type4」資料制作その1

2007年9月17日 19:03

このエントリーをはてなブックマークに追加 Check Clip to Evernote

ネコミミクリニックキャラクター

【第16回】WebSig会議「Web屋さんのためのMovable Type4」in 大阪まで、後2週間きった。

以前も書いたけど、第1部では僕が「MT4を使った簡単な企業サイトの作り方」をテーマにセミナーを行うことになっている。

何故、このセミナーをやろうかと思ったかといえば、MT本の大半がシステム寄りであり、どちらかといえばデザイン畑経験の長い僕から見て、こんな作例でわかるかな?と思ったからだ。

だから、実際にMT4を使って仮想企業のダミーサイトを作っちゃって、テンプレート構造を見せたほうが、デザイナーさんたちにはわかりやすいと思うのだ。

現在、ダミーサイトを必死になって作ってる最中であり、リアルタイムで少しずつ公開していくことにする。

ダミーサイトで今回選んだテーマは、「精神科の個人医院」。まぁ、一通りの機能は入れるから、アレンジして中小企業の企業サイトに応用できるんじゃないかな:-)

で、作例がいい加減だと、デザイナーの方でもわかりにくいと思うので、Webデザインの制作現場から離れて久しいけど思い出しながら、ロゴ、イラスト、アイコン含め、すべてオリジナルで作った。
#何故女医かといえば、男性を描きたくないから…:-p

先行してmixi日記で公開してマイミクさんたちの意見をもとにアレンジした。ネーミングは最初は「ネコママクリニック」だったけど「ネコミミクリニック」に変更。メガネをかけた女医さんも、最初は清楚な看護婦さんだった。マイミクさんたちの意見をまとめて萌え系の定番にアレンジw

ターゲットはインターネットのやりすぎで、心体ともにボロボロになった人たちで、「加減のない愛と山盛りの注射と薬でネットで壊れた心身を治します」というほんとにあったら、怖い精神科医。遊び心いっぱいだけど、手抜きなしで真剣に作ってるよ。

ネコミミクリニックデザイン

さて、MT4で作る場合に限らないけど、MT4で構築する前にやっておくことがある。 以下、手順を説明。

◆いきなりデザインから入っちゃダメ!まずは仕様をかっちり決めよう

自己満足のために作ってしまう傾向はありがちなんだけど、やはり効果を得ようと思えば、形からではなく仕様から。
※内緒だけど、最初にデザインから入れば効果の責任はとれなくてもいいから、楽なことは楽。

1.コンセプトを決めよう

なにはなくともまず、コンセプト。テーマやターゲットは明確にしないと、デザインも作りにくい。

2.内容を決めよう

ページ構成のことだよね。 中身はしっかりと決めておこう。

3.フローチャートを書こう

この数により基本テンプレートの数が増減する。Movable Typeは構成をきちんとやっておかないと、後々、カテゴリーやエントリーが増えたときにややこやしい。

4.デザインをしよう!いきなりHTMLエディタで作っちゃダメ

いきなりDreamweaver等のHTMLエディタで作っちゃダメ!なぜかといえば、ありきたりのデザインになっちゃうから。

ネコミミクリニック編集中

割付は紙でいいから、デザインはグラフィックソフトで作ろう。 僕はパーツはIllustrator、基本デザインはPhotoshopで作るけど、別にFireworksでもかまわない。

デザインする上で重要なのは、配色とレイアウトバランス。これがよければ、アイコンやメインビジュアルは素材集を使っても、それなりに見えるものが作れる。

制作時の注意点はレイヤーをセット化するなどして、きちんと整理すること。後は些細なことだが、Illustratorを使用する場合は、必ずRGBで保存しておかないと、Fireworksにコンバートした時点で色が変わってしまう。

5.テンプレートを切り出してマークアップを行おう

まずXHTML+CSSでマークアップ、よく使うMTタグはエントリー編集画面にコードスニペットに用意されtれいるから、MTテンプレート上で追加してもいい。

重要なのはむやみにclassを作らないこと。タグにclassを割りあてればCSSもすっきりするし、エントリーを更新するときも楽になる。

今日はここまで。

以下、【第16回】WebSig会議「Web屋さんのためのMovable Type4」in 大阪のご案内。

今日現在では10名ほど席が空いてるので、関西・東海地区のデザイナーさんは、どうぞ。

申し込みは下記のいずれかにて。

【第16回】WebSig会議「Web屋さんのためのMovable Type4」in 大阪 (WebSig24/7)
http://websig247.jp/meeting/16/000060.html
[mixi] 【WebSig24/7】Web制作者の会 | 【第16回】WebSig会議「Web屋さんのためのMovable Type4」in 大阪
http://mixi.jp/view_event.pl?id=22360296&comm_id=10966

投稿者: Dakiny 日時: 2007年9月17日 19:03 |   |  トラックバック (0)

このエントリーをはてなブックマークに追加 Check Clip to Evernote

トラックバック

このエントリーのトラックバックURL:
http://www.dakiny.com/mtos/mt-tb.cgi/1519
※文章内容と関係のないトラックバックは固くお断り。

コメント