Ocher
Posted at 2005/11/25 (Fri) 00:53 +09:00 in Web Designing
WEB制作においてメインツールには、Dreamweaverを使用されている方も、恐らくBlog（Blosxom,MT etc...）の新しいエントリー作成や、flavour/スキン/テンプレートの制作においては、テキストエディタを使用するケースも多いと思います。しかしながら、テキストエディタを使用していてやや不便に思うことはありませんか？HTMLタグの入力支援機能があればと...
私は秀丸エディタを使用していますが、このような悩みを解決してくれるマクロ機能が存在しています。開始タグを挿入すると、自動的に閉じタグを挿入してくれたり。これを聞くだけでも魅力的じゃない？
私が利用させていただいている、大変便利な機能を提供してくれる秀丸マクロをご紹介させていただきます。
| マクロ名 |
配布先 |
主な特徴 |
| CloseTag |
Wisteria
|
HTML の終了タグを書くマクロです。カーソル位置で閉じていない要素を見つけ、対応する終了タグを挿入します。 |
| MenuJumpCSS |
hail2u.net |
CSSファイルを開いている時に使用すると、セレクトをリストアップしたメニューを出し、選択するとそのセレクタのところにジャンプするマクロです。画面をスクロールして修正箇所を探し出すのが一苦労、な方にオススメ。 |
| htmlmain |
秀まるおのホームページ |
とりあえず入れとけな、モンスターHTML/XML 作成支援マクロ 。田楽 DLL やSusie Plug-Inと連動させてより利便性を高く。文法チェッカーやタグのヘルプを搭載すれば、まさに作成支援な強力ツールになります。必要な機能だけ、選択して搭載できるもの大きな魅力。 |
マクロと聞くと、すこし尻込んでしまう方も、その簡単な設置方法と使用方法を知れば驚くと思います。本当に手軽に必要な機能を。是非お試し下さい。
Posted at 2005/07/05 (Tue) 14:12 +09:00 in Web Designing
いやー、知人に聞いてはじめて見ました。group94、すごい集団がいるものです。
ちょうどFlashの可能性や在り方について友人と話していました。自分はあまりFlashに興味が無いけど（アンチ・スキップ・ムービー！これが嫌いすぎるので。）、でもやはりFlashならではのメリットもあるよねー、というところで。
目新しくもなんとも無いですが、Flashの今後の活躍現場を考えてみると、
- ブランドサイト/キャンペーンサイトでのブランディング・ツール
- ユーザー・エクスペリエンスの提供（ゲームやFlash Movie）
- アクセシビリティ（操作手順の紹介SWF etc...）支援
- RIAとしての優れたインターフェース提供
かなぁと。とっくにサイトに動きを加えられる的な、サイト構成要素の一つ（を造る道具）として捕らえることはできませんね。特に最近はMacromediaも完全にサーバーサイドの技術開発に移行しているし、公式サイトの方も、今後はビジネス・ソリューションを前面に出す（Flexとか一押し？）ように言っているし。
などなど、まあ素人が言っててもしょうがありませんが、group94は非常にFlashの可能性や方向性を教えてくれます。デザインも最高なので、要チェック。特にOurTypeは、こういうこともできちゃうのか、と大納得です。
Posted at 2005/06/16 (Thu) 01:08 +09:00 in Web Designing
マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C3セッションにて「Contributeカスタマイズ大全、あなたはここまで作りこめるか？」を聴講。プレゼンターはキノトロープ高松氏。
Web制作最大手キノトロープでは、クライアントにWeb更新CMSを提案する際、以下の点を必ず確認するようです。
- どのくらい更新されるのか？
- コンテンツはどこにあるのか？どのように管理されているリソースか？
- どのような扱いか？
- 誰が更新するのか？
- 更新コンテンツは誰がつくるのか？
- 更新担当のリテラシーは？
クライアントとは言えど、「CMSを導入したい」と望む前に、まずコンテンツを扱う情報整理を求めることろが、さすが最大手だなぁと感じました。
さて、更新コンテンツがあまり多階層に渡らない場合には、やはり導入がしやすく、Dreamweaverとの親和性の高いCMSであるContributeが最有力候補となります。そこでContribute導入の提案をするキノトロープの制作ポリシーはいかに？
キーワードとなるのはTEMS。 疲れたので続きは明日。。。。
Posted at 2005/06/15 (Wed) 11:01 +09:00 in Web Designing
マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C1セッションにて「10年の歴史を紐解くMacromediaサイトの制作、運営術」を聴講。
マクロメディアサイトは現在、Global全体で95,000ページから構成され、内訳は下表のようになっています。
尚、LiveDocsとは製品ドキュメントなど。この巨大サイトのうち、Japanサイトは約8,000ページにのぼり、アジアの中では最大規模となっているようです。
| 構成 |
ページ数 |
| LiveDocs |
50,000 |
| Web |
45,000 |
| Total |
95,000 |
Webサイト開設当時は、製品情報を中心としたサイト構成。21世紀初頭からは、ユーザー、ディベロッパー向けのサイトへと変遷。試行錯誤を重ね、ある時はイギリスのデザイナーにサイトデザインを依頼してスッキリとした画面構成になったものの、ユーザーが下層まで辿りにくくなってしまった経験もあるようで、単にブランドデザインではダメだとの結論に至り、徐々にユーザビリティやユーザ体験の重要視もなされていったようです。今後は主にビジネス・ソリューションを中心に据えたサイトへと変わって行くみたい。
さて、幾度と無くリデザインを繰り返し、ページ数もどんどん膨らんでいく過程での制作運営フローはいったいどうなっているのでしょうか...？特にデザイナー、ディレクターにとって参考になる内容をメモしてきたので整理したいと思います。
主なチーム構成
- Design Team （モックアップ構築）
- Production Team （フロントエンド構築）
- Engineering Team （バックエンド構築）
- QA Team （品質管理）
Areaの定義
Header
Global navigation
|
Contents Area
Page Header
Color var
Contents
|
Promotion Area |
| Right navigation |
Footer
|
制作において重要なこと
- 隠れたコンテンツは見落とされる。（ユーザーがスキャンできない）。
- 表示にかかる時間（サイトのパフォーマンス）は重要。→CSSで対応
- ブラウザ対応は日々頑張る。
Dreamweaverテンプレートの活用
- テンプレートを利用すれば、デザイン・構成の一括変換が可能
- 定義づけしたAreaごとにテンプレートを作成
- 編集可能/不可領域の設定
- オプション領域の活用（ON/OFF）
- リピート領域の活用
Contents Areaのグリッドレイアウト
- 2column、3columnバージョンなどあらかじめ構成要素を規定。→column.css
CSS導入後の実効果
- HTMLコード量（行数・文字数）が50%近く軽減できた。
- 作業量が1/3まで削減できた。
- サイトパフォーマンスの向上（表示スピードアップ）
- コーダーのスキルに左右されない
Macromedia Webサイトの運営術のキモ（まとめ）
- 画面Area定義
- Dreamweaverテンプレートの活用
- グリッドレイアウト
Posted at 2005/05/25 (Wed) 16:14 +09:00 in Web Designing
SEO、アクセシビリティの観点から、ALTに代替文字を入れることは必須ですが、適当にALTを設定しておけばいいというものではありません。場合によっては、ALTはとても重要なナビゲーションとなることもあります。ちょっとしたALTネタを。
- 音声UA用のサイト構成アナウンス
- Spacer（透明GIF）を適宜配置し、ALTによってユーザーの閲覧をサポートすることができます。
<img src="spacer.gif" width="1" height="1" alt="ここからメインメニューが始まります。" title=" ">
※この時、空のtitle属性を併せて設定すれば、ALTのポップアップを非表示にすることができます。（IE）
※Spacer（透明GIF）を配置し、ALTを空にしてリンクを設置すれば、音声UAを対象としたナビを埋め込むこともできます。
- 箇条書きのアイコン画像
- 箇条書きのリストアイコンのように画像を用いているのならば、この画像のALTは空でもいいですが、「＊（アスタリスク）」、「・（中黒）」、「●（黒丸）」なら意味合いをそのまま保持できます。
<img src="arrow.gif" width="10" height="10" alt="●">商品のラインナップ
- テキストと同じ意味の画像
- メールアドレスの記載箇所などに、よくメールアイコン画像とセットでアドレスが表記されている場合がありますが、実際のリンクテキストとアイコンのAltが重複すると、音声UAでは連続して読み上げてしまいます。アクセシビリティ処置として、空にすることも考えられます。
<img src="mail_icon.gif" width="10" height="10" alt="e-mail"><a href="mailto:***@**.com">e-mail:***@**.com</a>
Posted at 2005/05/19 (Thu) 23:21 +09:00 in Web Designing
アクセシビリティーだ、ユーザビリティーだと昨今声高に叫ばれているわけですが、その中で音声ブラウザ（スクリーンリーダー）への配慮も重要だと言う感じになってきています。ま、どれだけ公のサイトで、どれだけ企業責任だなんだということが必要になるかと言う問題になりますが、一方でCSS使いでグリグリしたい派の人などにはクリアすべき技巧である、という捕らえ方が現状ではこの傾向を指すのに一番適切なような気がしてます。
音声ブラウザ対策が必要だ！と頭でっかちになってるが、実際によく分かっていないデザイナーも多いと思います（私が代表です）。実際にはコンピュータの音声を聞きながらチェックすると言うのはかなり苦痛だと思いますね。ただ、最近では多くの「定石的な制作」情報がWebでゴロゴロありますので、実際に音声ブラウザでチェックしなくても、ある程度はどのような構成でサイトを作ったらよいのかわかると思います。
まぁさておきまして、音声ブラウザの種類や特徴について網羅したサイトがありましたので、こちらを参考にされるのも一つだと思います。
Posted at 2005/05/17 (Tue) 21:19 +09:00 in Web Designing
JavaScript::Bookmarklet BlogにてIMGをALTテキストに変換するBookmarkletが紹介されています。ALT抜けのチェックが視覚的に行えるだけではなく、テキストブラウザなど画像を表示しない設定がされている環境では、適切なナビゲーションができているかを確認できる便利なbookmarkletです。アクセシビリティ対策のチェックとしても、大変お手頃なチェックツールになりますね。IE、Netscape、Opera、Firefoxと主要ブラウザで動作します。
Posted at 2005/05/08 (Sun) 22:49 +09:00 in Web Designing
「なっちゃん」「DAKARA」「BOSS」などのデザインを手がけてきた、サントリーデザイン部長の加藤芳夫氏はメモの達人。その極意は、「何にでも書く」。。
居酒屋では箸袋に、新聞からインスピを受けたら直接新聞に書き込んで千切る、本からなら表紙にメモるなどなど。
ワープロなどでキレイにまとめたメモでは、文字に込められた勢いが消えてなんの着想も膨らまないものになってしまうようです。その場ですぐに書き込めるだけではなく、メモのシズル感（みずみずしさ）を保持できるため、とにかく「そこにあるものにメモる」ことが一番効果的なのだとか。
媒体に限らず、あらゆるジャンルのデザイナーさんは、着想を逃さずメモる癖を付けなくてはいけませんね。さぁみんなで実践しましょう！！ただし、その後しっかりメモを整理整頓する術も、やっぱり必要になってくるのでしょう。。。ただ私、整理整頓と指相撲は苦手なのよ。。。
Posted at 2005/05/07 (Sat) 15:33 +09:00 in Web Designing
サブウィンドウを開くときは、必ずopenメソッドのresizableオプション値を「yes（1）」にしておこう。リサイズ不可のサブウィンドウを開いた場合、閲覧ユーザーの環境によっては（特に文字サイズのスタイルなど）、ページ内容のすべてが表示されない場合があるからだ。
window.open("hoge.html","hoge","width=○○,height=□□,resizable=yes")
また開かれたサブウィンドウ側でも注意しなけばいけないことがある。特にサイズが小さなウィンドウを開いた場合、親ウィンドウがアクティブになり、子ウィンドウが下に隠れて開かれたことに気がつかないユーザーがいるかもしれない。同じウィンドウ名を用いて別のページをサブウィンドウで開いた場合などでは、特にこのような事態が起きる可能性が高い。
そこで、子ウィンドウにfocus設定を忘れずにしておく必要がある。具体的なソースは、（※括弧「>」は全角にしてあります。）
＜head＞
＜script language="JavaScript"＞
＜!--
function Focus_the_Window(){
window.focus();
}
//--＞
＜/script＞
＜/head＞
＜body onLoad="Focus_the_Window()"＞
これらは最低限のデザインルールと言えるでしょう。
また、ポップアップブロックを利用しているユーザーなど、サブウィンドウを利用する場合には、ユーザー環境によっては利用できない場合があるという点にも十分注意を払っておく必要がありますね。
Posted at 2005/04/20 (Wed) 13:14 +09:00 in Web Designing
テンプレートを使うと、デザインの統一・管理がとても簡単になる。
Weblog archives
This page was last modified on (in secs).