Ocher
Posted at 2005/11/25 (Fri) 02:23 +09:00 in internet
スマトラ沖地震、ハリケーン「カトリーナ」と、昨今顕著な天災。日本も例外ではなく、関東大震災も近いと言われている。地球規模の災難を、自分ごととして捉えることはとても大切なボランティアのはじまりです。なかなか気持ちはあっても、募金活動など面倒くさいと思ってしまうのも人の性。
さて、クリックで人の命を救えるとしたらいかがでしょう。ネットユーザーなら、クリックごときなんのストレスも感じずにボランティアに参加できるのではないでしょうか。次は自分かもしれない、そんなグローバルな共生意識とボランティア精神を忘れないうちに、是非皆でクリックしましょう。
また、やや斜めな目線になりますが、環境事業や企業とステークホルダーのあり方が重要視されている社会で、ささやかなアピールコンテンツとして、下のバナーをサイトに設けることで、双方にメリットのある効果も期待できるのではないでしょうか。
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/20 (Wed) 21:45 +09:00 in internet
一目瞭然検索エンジンって。。。すごい自身ありげなお触れ込みですが、検索結果のサイトを、マウスオーバーだけで拡大表示できるというMARS FLAG。
MARS FLAG は、3月より提供を 開始 した検索エンジン。独自の検索アルゴリズムを使い、検索結果で該当するサイトのトップページ画像を表示する。
今回は、検索結果ページで表示される各サイトの画像にマウスオーバーすると、画像が拡大表示される機能を追加した。拡大された画像には、そのサイトの紹介文も一緒に表示される。
早速使用してみて、感じたことを。
表示が遅い
キャッシュリンクが無いのが痛い
で、どうなの?とツッコミたくなる
例えば、css float バグ を検索してみた場合。このようにAND検索で、得たい情報を求めている検索ユーザーにとっては、少しばかり画面イメージが大きくなって表示されたところで、果たしてそのサイトに自分の求める情報が「ありそう」なのか見当が付きません。はっきりと文字が見えるサイズまで拡大表示されるのならば話は別であるが。
一方で、映画皇帝ペンギン のオフィシャルサイトを探すように、公式サイトや本家サービスサイトを求めて、固有名詞で検索する場合は、やや便利な一面もあるかもしれません。
やはりWeb検索の醍醐味は、AND検索をはじめ、詳細な検索方法にて情報リソースを捜し求めることにあるのではないでしょうか。そういう意味で、MARS FLAGはあまり検索エンジンとしての魅力が無いように思います。
仕事や勉強での利用、あるいはネタ探しなどに明け暮れているヘビーな検索ユーザーにとっては、まったくメリットがありません。そう考えると、GoogleとBROWSTERの組み合わせがどれほど素晴らしいかと惚れ直してしまいますね。
Posted at 2005/07/07 (Thu) 21:53 +09:00 in Software
インターネットをより快適(ラク)に使うための先読みソフト「Browster」をさっそくインストール。特にGoogle検索ではものすごく威力を発揮します。
下記リンク先よりインストール後、Googleで検索すると、一覧表示されたリンク先の先頭に、稲妻風のマークが表示されます。このマークが付くと、先読み完了の合図。半透明状態だと先読み中。
さて、稲妻マークにマウスポインタを重ねると、なんと新しいブラウザ画面(のようなもの)が開き、サイトの中身を簡単にチェックできてしまう。表示されたサイト内のスクロールも可能。
ここまでは、他の先読みソフトとどう違うの?という感じだが、Browsterは一味違う操作性を提供している。稲妻マークの上をポインタし、マウスのホイールを回転させると、検索結果順に各サイトを表示させることができてしまう。
いちいち、リンク先をクリックして、順にサイトをチェックする必要など無くなってしまう優れもの。操作も大変簡単(5秒もあれば勝手が解る)なので、頻繁に検索するユーザーには是非オススメです。
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/24 (Fri) 01:32 +09:00 in Weblog
The FIFA Confederations Cup Japan vs Brasil。久々に見てて燃えました。大健闘したものの、残念ながら準決勝に駒をすすめられなかった我がZICO Japan。さて、このゲームを振り返ってみると。。。
目を見張ったのはNAKATAのキャプテンシー。一時は中田不要説も流れていたけど、やはりここ一番の大勝負では格の違いを見せてくれました。世界に通用すると確信が持てたものは、中田そのもの、俊輔の飛び道具、大黒の嗅覚、福西のボランチでした。
さて、そこで気になるのがZICO采配。明らかにコンディションの悪い小笠原をなぜ先発起用したのか?SANTOSは最後までピッチにいる価値=パフォーマンスがあったのか?中田浩二の投入意図は?大黒は何点たたき出せば先発起用させるのか?
誰の目に見てもあきらかであったように、小笠原とSANTOSはまったくゲームに乗りきれていなかった。小笠原に至っては発熱していたというではないか。コンディションやパフォーマンスに限らず、ほぼ固定のメンバーで戦おうとする姿勢がよくわからない。まさか今後も代表メンバーを固定したまたWorld Cupを迎えるの??
加地とSANTONSのバックアップ要員(三浦淳はほぼ飼い殺し)、中沢が欠場した場合の高さ対策要員(松田~)。ここは絶対に必要です。
ではでは、勝手なメンバー登録してみます。
GK
DF
加地
中沢
松田
田中誠
宮本
SANTOS
三浦淳
石川 *ウインガー急募!誰か育って欲しい。
MF
中田英
福西
中村
長谷部 *日本のKAKA
小野
稲本
今野 *かなり好みのプレーヤー
FW
久保 *復活求む!
柳沢
高原
エメルソン *帰化申請中。しかし音沙汰無いのでやはり無理なのか。。。もう2年ほどになるが。。。通常は1年から1年半で処理が済むということなのに。
大黒
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) 18:02 +09:00 in CSS
マクロメディア集中ゼミ行って来ました(6/15 パシフィコ横浜)。C2セッションにて「CSS完全攻略!!!3ブラウザ対応のWebサイトのつくり方」を聴講。日本におけるCSS提唱オピニオン・リーダーの一人、アンカーテクノロジー神森氏がプレゼンター。
いやぁー内容濃かったですね。あまりにスピーディーでちょっと置いてかれそうなところもありました。実際の内容はセッション題とはやや趣向が異なり、どちらかというとDreamweaverでのCSS Tipsみたいなノリでした。ま、Macromedia主催なので。その中で、超高速フルCSSサイト構築法が紹介されていました。(*勝手に命名)
作り方大公開(らしい)
画面デザインを領域に分け、名前を決めておく。
見出しレベルを確認。
Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。
見出し付けを行う。
メニュー項目のリスト化。
DIVで各領域を確定。
上から順にCSSを定義。(ソースの出現順に。)
順を追って簡単に説明。
画面デザインを領域に分け、名前を決めておく。
#Header、#Contentbody、#Layoutbody、#localnavi、#Footerなど、まずは領域に名前をつけ、各々の領域にはIDを振ることを想定しておく。
見出しレベルを確認。
Web上のリソースは大半がテキスト。このテキストはそもそも第三者が読むことを想定した(された)文章である以上、構造化されていなければならない。
と、まずはリソース文書が構造化されていることを前提とする(外注・内注問わず、発注者側の問題であるが...)が、実際の見出しレベルを把握する。
Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。
作業はデザインビュー で行う。なぜなら、テキスト貼り付け&EnterでひたすらBOX要素<P>が作られていくからだ。コードビューへコピペをすると、後で段落のマークアップをする手間が発生してしまう。この段階では見出し要素やメニュー項目などの区別は気にせず、ひたすらリソースをDreamweaver上へ乗っけることに徹する。
見出し付けを行う。
既に確認済みの見出し項目をマークアップする。
メニュー項目のリスト化。
Globalナビ、Localナビ問わず、メニュー項目を<ul>でリスト化する。
DIVで各領域を確定。
あらかじめ想定しておいた領域の定義付けをはじめる。[DIVタグを挿入](右図参照)を活用して、まずはとにかくDIV囲みを一斉に行い、その後IDやclassの指定を行っていく。
上から順にCSSを定義。(ソースの出現順に。)
最後に上から順にCSSを定義していく。
これら1~7の手順で作成していくと、大変スムーズなCSS定義が可能となります。ふむふむ実際に作業を想定していると....なんとスピードだけに留まらず、その他にもありがたい恩恵を享受できるではないか!
ヌケ・モレなどの戻り作業が発生しにくい。
キレイに整理されたCSSが完成。
Web標準に準拠したHTML文書ができちゃう。
ということは、必然的にアクセシビリティが高くなるし、高い品質を保証するHTML文書となりうる。etc....
なんだか、とっても魔法のような構築法だと思いました。終わり。
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/06/12 (Sun) 23:46 +09:00 in Weblog
やっぱ寿司だね。しかも回ってるやつが最高。ということで、寿司職人さんより、わざわざ無理言って"Sushi"をご提供いただきました。感謝!
馬鹿バカしいのって素敵じゃありません?私はほぼ虜。
Posted at 2005/06/06 (Mon) 19:19 +09:00 in Weblog
通常PCで作成するPowerPointのスライドは、PC画面(アスペクト比4:3)に合わせられています。しかし、最近ではワイドスクリーン(アスペクト比16:9)を設置したプレゼン会場も多く、4:3のスライドを用いた場合には、左右に黒い帯(アキ)ができてしまいます。
これでは折角のプレゼンも台無し。事前に会場のプレゼン設備が16:9であることを確認したら、作成した4:3のスライドを基に最適化しましょう。
プレゼン制作担当者には既に常識かもしれませんが、あまり気にしたことが無かった方は是非Check it out!
Posted at 2005/05/25 (Wed) 21:05 +09:00 in Software
あらゆるところから選択された文字をさっと取り、さっと保存する...こんなことができれば。という要望を可能にするのは「紙2001」。
Webページや配信されたメールマガジンなどを見ていて、ちょっとした情報に出会う事があると思います。お気に入りに登録したり、テキストエディタを開いて書き留めるという手間をかけるほどの重要性は無いけど、どこかに残しておきたいような情報です。
また、調べ物の最中に、目的の情報とは関係ないけど、前から少し気になっていた事の答えらしきものを見つける事もよくあります。時間があるときはゆっくり見る事が出来ますが、仕事中などではどうしても後回しになってしまいますよね。けれども、いつしかすっかり忘れてしまったり、いざ見ようとしても、ページが更新されて見れなくなってしまったというのもよくあります。
このような、「今すぐに必要ではないけど、とりあえず残しておきたい情報」の収集・管理に、紙が役に立ちます。
という触れ込みですが、使ってみると激便利な情報スクラップソフト!ネットサーフィンしながら面白い情報を見つけたら、その場で即スクラップできるなんて!一々エディター立ち上げたり、コピペする手間も省いて1秒もあれば終了!すごすぎます。ToDoリストの作成など、思いついたときにすぐメモを作成できたりなんて朝飯前。ブログに上げるネタのスクラップから、業務に必要なネタのスクラップ(物書きさんは昨晩見た夢とか忘れないうちに☆)が即座にできる。保存する操作も必要なく勝手に保存していきます。スクラップはスピードが命ですが、純粋にその使命を全うしてます。あなたの知的財産が飛躍的に増えますよ。しかもフリー。今すぐインストールせよ!(って今さらかよなんてツっこまないで...)
さらにWebページの編集や、ToDoリストのスケジュール管理など高度な有料版「紙copy」もあります。
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/25 (Wed) 14:18 +09:00 in CSS
フォントサイズはユーザーのディスプレイ環境に大きく影響されます。現在主に普及しているディスプレイの規格だけでも、
15型SVGA(800*600px) & 71ppi
15型XGA(1024*768px) & 85ppi
17型SXGA(1280*1024px) & 96ppi
17型UXGA(1600*1200) & 118ppi
という具合。ディスプレイの解像度ppi
(画面のきめの細かさ)とディスプレイの表示領域の組み合わせが複数パターン存在する以上、サイト制作者が意図した「絶対指定(px)のフォントサイズ」も所詮相対的な単位ということになってしまいます。あなたのディスプレイで具合のいい小さなフォント(8pxや10px)は、まったく可読性のない小ささで見えてしまうユーザーもいるのです。 CSSのfont-sizeプロパティのとりうる値は、
absolute-size
xx-small | x-small | small | medium | large | x-large | xx-large
relative-size
larger | smaller
length
in | cm | mm | pt | pc | px | em | ex
percentage
%
ですが、特にlength値を指定する場合は、em(エム)で指定してあげるのが一番良いと思います。line-height、margin、paddingの指定もemで統一してあげれば(emの幅をもったスペース/アキのことをエムスペースと呼びます)尚良し!
この場合は制作者サイドのメリットも。サイズやアキを指定する際は、1em(標準値)、0.8em、1.2emと1を基準にして調節できるため感覚的にわかりやすい。制作者にもユーザーにも優しいサイズ指定が可能となりますね。
Posted at 2005/05/21 (Sat) 17:38 +09:00 in CSS
アクセシビリティについて勉強するには、みんなのウェブ がおすすめ。もちろんWCAG やJIS X 8341-3に目を通すのもいいけど、結構面倒くさい感じもありますので、比較的読み易い(個人的にはかなりですが)みんなのウェブ がベストかと。必ずしもJIS X 8341-3に準拠しているわけではないですが、非常に良くまとまっています。アクセシビリティについて一度まとまったDocumentを読みたい方にはまずこちらからいかがでしょうか?と、某知識人の受け売りで。
Weblog archives
This page was last modified on (in secs).