Ocher

クリック募金

Posted at 2005/11/25 (Fri) 02:23 +09:00 in internet

スマトラ沖地震、ハリケーン「カトリーナ」と、昨今顕著な天災。日本も例外ではなく、関東大震災も近いと言われている。地球規模の災難を、自分ごととして捉えることはとても大切なボランティアのはじまりです。なかなか気持ちはあっても、募金活動など面倒くさいと思ってしまうのも人の性。

さて、クリックで人の命を救えるとしたらいかがでしょう。ネットユーザーなら、クリックごときなんのストレスも感じずにボランティアに参加できるのではないでしょうか。次は自分かもしれない、そんなグローバルな共生意識とボランティア精神を忘れないうちに、是非皆でクリックしましょう。

また、やや斜めな目線になりますが、環境事業や企業とステークホルダーのあり方が重要視されている社会で、ささやかなアピールコンテンツとして、下のバナーをサイトに設けることで、双方にメリットのある効果も期待できるのではないでしょうか。

秀丸マクロで快適なWEB制作

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と連動させてより利便性を高く。文法チェッカーやタグのヘルプを搭載すれば、まさに作成支援な強力ツールになります。必要な機能だけ、選択して搭載できるもの大きな魅力。

マクロと聞くと、すこし尻込んでしまう方も、その簡単な設置方法と使用方法を知れば驚くと思います。本当に手軽に必要な機能を。是非お試し下さい。

画像が飛び出す検索エンジンMARS FLAG

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の組み合わせがどれほど素晴らしいかと惚れ直してしまいますね。

Browster

Posted at 2005/07/07 (Thu) 21:53 +09:00 in Software

インターネットをより快適(ラク)に使うための先読みソフト「Browster」をさっそくインストール。特にGoogle検索ではものすごく威力を発揮します。

下記リンク先よりインストール後、Googleで検索すると、一覧表示されたリンク先の先頭に、稲妻風のマークが表示されます。このマークが付くと、先読み完了の合図。半透明状態だと先読み中。

さて、稲妻マークにマウスポインタを重ねると、なんと新しいブラウザ画面(のようなもの)が開き、サイトの中身を簡単にチェックできてしまう。表示されたサイト内のスクロールも可能。

こんな感じ

ここまでは、他の先読みソフトとどう違うの?という感じだが、Browsterは一味違う操作性を提供している。稲妻マークの上をポインタし、マウスのホイールを回転させると、検索結果順に各サイトを表示させることができてしまう。

いちいち、リンク先をクリックして、順にサイトをチェックする必要など無くなってしまう優れもの。操作も大変簡単(5秒もあれば勝手が解る)なので、頻繁に検索するユーザーには是非オススメです。

group94

Posted at 2005/07/05 (Tue) 14:12 +09:00 in Web Designing

いやー、知人に聞いてはじめて見ました。group94、すごい集団がいるものです。

ちょうどFlashの可能性や在り方について友人と話していました。自分はあまりFlashに興味が無いけど(アンチ・スキップ・ムービー!これが嫌いすぎるので。)、でもやはりFlashならではのメリットもあるよねー、というところで。

目新しくもなんとも無いですが、Flashの今後の活躍現場を考えてみると、

  1. ブランドサイト/キャンペーンサイトでのブランディング・ツール
  2. ユーザー・エクスペリエンスの提供(ゲームやFlash Movie)
  3. アクセシビリティ(操作手順の紹介SWF etc...)支援
  4. 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のバックアップ要員(三浦淳はほぼ飼い殺し)、中沢が欠場した場合の高さ対策要員(松田~)。ここは絶対に必要です。

ではでは、勝手なメンバー登録してみます。

TEMS(テンプレート・マネイジメント・システム)という発想

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。   疲れたので続きは明日。。。。

フルCSSサイトの超高速構築

Posted at 2005/06/15 (Wed) 18:02 +09:00 in CSS

マクロメディア集中ゼミ行って来ました(6/15 パシフィコ横浜)。C2セッションにて「CSS完全攻略!!!3ブラウザ対応のWebサイトのつくり方」を聴講。日本におけるCSS提唱オピニオン・リーダーの一人、アンカーテクノロジー神森氏がプレゼンター。

いやぁー内容濃かったですね。あまりにスピーディーでちょっと置いてかれそうなところもありました。実際の内容はセッション題とはやや趣向が異なり、どちらかというとDreamweaverでのCSS Tipsみたいなノリでした。ま、Macromedia主催なので。その中で、超高速フルCSSサイト構築法が紹介されていました。(*勝手に命名)

  • 作り方大公開(らしい)
    1. 画面デザインを領域に分け、名前を決めておく。
    2. 見出しレベルを確認。
    3. Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。
    4. 見出し付けを行う。
    5. メニュー項目のリスト化。
    6. DIVで各領域を確定。
    7. 上から順にCSSを定義。(ソースの出現順に。)

順を追って簡単に説明。

  1. 画面デザインを領域に分け、名前を決めておく。

#Header、#Contentbody、#Layoutbody、#localnavi、#Footerなど、まずは領域に名前をつけ、各々の領域にはIDを振ることを想定しておく。

  1. 見出しレベルを確認。

Web上のリソースは大半がテキスト。このテキストはそもそも第三者が読むことを想定した(された)文章である以上、構造化されていなければならない。

と、まずはリソース文書が構造化されていることを前提とする(外注・内注問わず、発注者側の問題であるが...)が、実際の見出しレベルを把握する。

  1. Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。

作業はデザインビューで行う。なぜなら、テキスト貼り付け&EnterでひたすらBOX要素<P>が作られていくからだ。コードビューへコピペをすると、後で段落のマークアップをする手間が発生してしまう。この段階では見出し要素やメニュー項目などの区別は気にせず、ひたすらリソースをDreamweaver上へ乗っけることに徹する。

  1. 見出し付けを行う。

既に確認済みの見出し項目をマークアップする。

  1. メニュー項目のリスト化。

Globalナビ、Localナビ問わず、メニュー項目を<ul>でリスト化する。

  1. DIVで各領域を確定。

あらかじめ想定しておいた領域の定義付けをはじめる。[DIVタグを挿入](右図参照)を活用して、まずはとにかくDIV囲みを一斉に行い、その後IDやclassの指定を行っていく。

  1. 上から順にCSSを定義。(ソースの出現順に。)

最後に上から順にCSSを定義していく。

これら1~7の手順で作成していくと、大変スムーズなCSS定義が可能となります。ふむふむ実際に作業を想定していると....なんとスピードだけに留まらず、その他にもありがたい恩恵を享受できるではないか!

なんだか、とっても魔法のような構築法だと思いました。終わり。

Macromedia Webサイトの運営術

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世紀初頭からは、ユーザー、ディベロッパー向けのサイトへと変遷。試行錯誤を重ね、ある時はイギリスのデザイナーにサイトデザインを依頼してスッキリとした画面構成になったものの、ユーザーが下層まで辿りにくくなってしまった経験もあるようで、単にブランドデザインではダメだとの結論に至り、徐々にユーザビリティやユーザ体験の重要視もなされていったようです。今後は主にビジネス・ソリューションを中心に据えたサイトへと変わって行くみたい。

さて、幾度と無くリデザインを繰り返し、ページ数もどんどん膨らんでいく過程での制作運営フローはいったいどうなっているのでしょうか...?特にデザイナー、ディレクターにとって参考になる内容をメモしてきたので整理したいと思います。

主なチーム構成
Areaの定義
Header

Global navigation

Contents Area

Page Header

Color var




Contents


Promotion Area
Right navigation
Footer
制作において重要なこと
Dreamweaverテンプレートの活用
Contents Areaのグリッドレイアウト
CSS導入後の実効果
Macromedia Webサイトの運営術のキモ(まとめ)

Sushi by 寿司職人

Posted at 2005/06/12 (Sun) 23:46 +09:00 in Weblog

やっぱ寿司だね。しかも回ってるやつが最高。ということで、寿司職人さんより、わざわざ無理言って"Sushi"をご提供いただきました。感謝!

馬鹿バカしいのって素敵じゃありません?私はほぼ虜。

ワイドスクリーン(16:9)でプレゼン

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!

紙2001

Posted at 2005/05/25 (Wed) 21:05 +09:00 in Software

あらゆるところから選択された文字をさっと取り、さっと保存する...こんなことができれば。という要望を可能にするのは「紙2001」。

Webページや配信されたメールマガジンなどを見ていて、ちょっとした情報に出会う事があると思います。お気に入りに登録したり、テキストエディタを開いて書き留めるという手間をかけるほどの重要性は無いけど、どこかに残しておきたいような情報です。

また、調べ物の最中に、目的の情報とは関係ないけど、前から少し気になっていた事の答えらしきものを見つける事もよくあります。時間があるときはゆっくり見る事が出来ますが、仕事中などではどうしても後回しになってしまいますよね。けれども、いつしかすっかり忘れてしまったり、いざ見ようとしても、ページが更新されて見れなくなってしまったというのもよくあります。

このような、「今すぐに必要ではないけど、とりあえず残しておきたい情報」の収集・管理に、紙が役に立ちます。

という触れ込みですが、使ってみると激便利な情報スクラップソフト!ネットサーフィンしながら面白い情報を見つけたら、その場で即スクラップできるなんて!一々エディター立ち上げたり、コピペする手間も省いて1秒もあれば終了!すごすぎます。ToDoリストの作成など、思いついたときにすぐメモを作成できたりなんて朝飯前。ブログに上げるネタのスクラップから、業務に必要なネタのスクラップ(物書きさんは昨晩見た夢とか忘れないうちに☆)が即座にできる。保存する操作も必要なく勝手に保存していきます。スクラップはスピードが命ですが、純粋にその使命を全うしてます。あなたの知的財産が飛躍的に増えますよ。しかもフリー。今すぐインストールせよ!(って今さらかよなんてツっこまないで...)

さらにWebページの編集や、ToDoリストのスケジュール管理など高度な有料版「紙copy」もあります。

ALTの扱い

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

フォントサイズはユーザーのディスプレイ環境に大きく影響されます。現在主に普及しているディスプレイの規格だけでも、

という具合。ディスプレイの解像度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を読みたい方にはまずこちらからいかがでしょうか?と、某知識人の受け売りで。

Spell with flickr

Posted at 2005/05/20 (Fri) 00:29 +09:00 in internet

適当なワードを入れると、flickr画像のキャラクターTag画像で返してくれるとういう、ちょっと楽しいツールを発見。その名は「Spell with flickr」。

例えばmasa4で遊んでみると、


M , the letterLetter AB&WsM\Four


MLetter Aalmost9St-shirt4


M bagAsRadio City \4

是非みなさんも遊んでみてください。

音声ブラウザ対策

Posted at 2005/05/19 (Thu) 23:21 +09:00 in Web Designing

アクセシビリティーだ、ユーザビリティーだと昨今声高に叫ばれているわけですが、その中で音声ブラウザ(スクリーンリーダー)への配慮も重要だと言う感じになってきています。ま、どれだけ公のサイトで、どれだけ企業責任だなんだということが必要になるかと言う問題になりますが、一方でCSS使いでグリグリしたい派の人などにはクリアすべき技巧である、という捕らえ方が現状ではこの傾向を指すのに一番適切なような気がしてます。

音声ブラウザ対策が必要だ!と頭でっかちになってるが、実際によく分かっていないデザイナーも多いと思います(私が代表です)。実際にはコンピュータの音声を聞きながらチェックすると言うのはかなり苦痛だと思いますね。ただ、最近では多くの「定石的な制作」情報がWebでゴロゴロありますので、実際に音声ブラウザでチェックしなくても、ある程度はどのような構成でサイトを作ったらよいのかわかると思います。

まぁさておきまして、音声ブラウザの種類や特徴について網羅したサイトがありましたので、こちらを参考にされるのも一つだと思います。

CSS Debug

Posted at 2005/05/17 (Tue) 21:58 +09:00 in CSS

ページのどこにどのCSSのclass,IDが割り当てられているかを視覚的に表示してくるbookmarklet、 CSS Debugを発見。特に他のサイトを参考にしてサイトデザインする時など、CSSレイアウトの構成が一目でわかるので大変便利です。(※IEでは動作しません。)

ここのページのMy PhotoにFlickr badgeを埋め込んでいますが、既に指定されているCSSを自分のサイトのデザインルールに合わせるときなどは、どのIDやclassをいじってあげれば良いかすぐに判りカスタマイズが楽になります。ちょっとした時間の節約になりますね。やっぱり時間は貴重だもの。

ON/OFFが切り替えられるトグル機能が付いた、CSS Debug Toggleの方がちょっといいかも。私はこちらを使ってます。

IMGをALTテキストに変換するBookmarklet

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と主要ブラウザで動作します。

The BERNIE LEADON ・MICHAEL GEORGIADES BAND

Posted at 2005/05/16 (Mon) 17:06 +09:00 in Music

The BERNIE LEADON ・MICHAEL GEORGIADES BAND

The BERNIE LEADON ・MICHAEL GEORGIADES BAND / natural progressions

いよいよ夏がやってきます。海岸線をドライブするあの爽快感ってありません。つき抜けた青空に焦がれると、やはりウェストコースト・ロックが旅のお供となります。

こちらはEAGLESを脱退したバーニー・リードンがしばらくのブランクの後、マイケル・ジョージアデスと組んだ77年発表作。EAGLESでカントリー・カラーを担当していたリードン。Goodシンガー・ソングライター、ジョージアデスと組んでできた本作は、カリフォルニアの高い空のように透明感のあるアコースティック・シティサウンドを聴かせてくれます。派手さはまったくない、飾らない姿勢がぐっと伝わり好感がもてます。

これを嫌いな西海岸ロック好きなんているのでしょうか?ジェームス・テイラー、ジャクソン・ブラウンに通じる優しいサウンドは、いつまでも愛聴できる作品です。はっきり言うと、かなり好きなんです!最高ー!
(ジャケはイナたいですが...)

フォントに関するCSS

Posted at 2005/05/16 (Mon) 00:11 +09:00 in CSS

OS毎のデフォルトフォントは、WindowsはMS Pゴシック、MACはOS Xからヒラギノ角ゴ Pro W3、それ以前のVerはOsakaとなっています。よって、MAC OS Xではヒラギノを用いたい場合には、


p {font-family : "MS Pゴシック","ヒラギノ角ゴ Pro W3",Osaka;}

*「MS_Pゴシック」のアルファベットは全角、あいだは半角スペース

とするといいでしょう。基本ですが、フォント名の指定では、一番左に書かれたものが優先順位が高く、指定されたフォントがユーザーのシステムにない場合に、二番目のフォント、三番目のフォント・・・とうふうに表示されます。フォント名に半角スペースが入る場合にはシングルクォーテーション(' ')かダブルクォーテーション(" ")で囲む必要があります。

過去に作成したフォント回りのスタイルシートを暇があったらOS X用にいじってあげてもいいかもしれませんね。

下位キーワードに注目しろ!

Posted at 2005/05/15 (Sun) 20:48 +09:00 in SEO

リファラー解析の際、どうしても上位の検索キーワードに注目しがちだが、下位キーワードもしっかり検証しているだろうか?

SEOで上位表示するようにサイトをチューニングした場合、やはり効果があったかどうか解析する際に上位ワードに目がいっていまいますね。しかし、下位キーワードには競合他社の少ないワードが埋もれているかもしれません。これらによって思わぬビジネスチャンスがあるかもしれません!また、"ない"キーワードを検証することもWebサイトの問題点を発見する大きな手がかりになるかもしれません。

軽視できないQ&A

Posted at 2005/05/15 (Sun) 20:41 +09:00 in SEO

第17回Web creator conferenceのイベントレポートに参考になる掲載を発見。

「多くのサイトでは単一ページに羅列したQ&Aページを設けているのでは?Q&Aとは単にユーザーサポートとしての位置づけだけではなく、ユーザーニーズを発見するためのものである。」とある。せっかくSEOツールやサービスを導入しているのであれば、単独質問ごとにページを分割することによって、よりユーザーニーズを発見できるアクセス解析が可能となります。これによりより良いユーザーへの有益な情報提供へと発展させることも可能で、サイトの信頼性を上げることにも繋がりますね。

軽視しがちな小さなことにこそ、今一度注意してみるのも大切ですね。ほら、ハインリッヒの法則ですよ。「1件の重大災害(死亡・重傷)が発生する背景に、29件の軽傷事故と300件のヒヤリ・ハットがある。」という警告として、よく安全活動の中で出てくる言葉です。ここで重大災害を顧客損失と置き換えると、まさにQ&Aの工夫が300件のヒヤリ・ハットに当たります。ユーザビリティやアクセシビリティとは29件の軽傷事故にあたるわけですが、こちらにばかり気をとられていると問題解決に至らないかもしれません。

マッチ棒クイズ

Posted at 2005/05/12 (Thu) 23:38 +09:00 in Weblog

あなたのIQがみるみるアップする...

普通にこんな誘いに乗る暇人なの(? そこそこ忙しいと思ってます^^;)。思わず買っても~た~。マッチが手元に無いので楊枝を取り出してきたけど、40本も使うクイズとか出現してから2秒であきました。飲み会で人気者になりたいあなたはこっそりGET!??

ま、こういうのもいいんじゃないでしょうか、って無責任に締めてみる。

Love Has No Pride...

Posted at 2005/05/11 (Wed) 21:20 +09:00 in Music

最近泣いていますか?忙しすぎて涙を忘れていませんか?音楽とは素晴らしいものです。ね、木田センセー(タロー)。

もっぱら私を知っている人らなら、どうせまたドぎついUKフォークでしょと思うかもしれませんが、意表を付いて今回は、、、安く見つけたので American Flyer 買っちゃいました。

あの永遠の名曲「Love Has No Pride」のオリジネーターEric Kazのオリジナル作者バージョンが収録されているのは、この1stオンリー。Westcoastのフレーバーが最高に芳しい!アナログで聴くと格別ですね。American Flyerは、Eric Kaz、Doug Yule、Carig Fuller、Steve Katzの4人ユニット。プロデュースがGeorge Martinで、プレスがUAと、、、まだ何か?思い起こせばレコード聴かない生活なんてここ5年以上経験していないわけですが、久々に泣けた。その前に泣けたのは下北沢で見たDave Lewis(Ex-Andwella !!!!)のソロライブ以来だと思う(これはこれで奇跡!レコード○十万するのに、観客は30人て)。

Amazonで American Flyer/Spirit of a Womanの2in1CDを発見しました。アナログが聴ける環境の人はアナログで聴いて欲しいけど、CDでも見つけたら必ず買ってください。私は泣きました><(今なら最安値¥1,435のユーズド出てます!!安くて買い!)

裁判員制度に異議あり!

Posted at 2005/05/08 (Sun) 23:30 +09:00 in Weblog

なんとまぁ昨年春に可決され、2009年より裁判員制度がスタート。「12人のやさしい日本人」なんてコミカルで楽しい陪審員映画があったけど、ついに現実となるようです。「けっこう面白そうじゃない♪」なんて思ってたりする人もいるのでは?(あ、前述の映画は最高におもろいですよ☆)

ただ気になるところがある。呼び出し状1枚で裁判所に出頭・出廷する義務がある点。仕事の都合などお構い無しで「あんた来なさい」となるわけです。で、断ろうものなら10万円以下の過料を支払わなくてはいけない。さらにさらに、裁判後にも生涯つきまとう守秘義務がきついでしょ。他者に話しちゃうと有罪(懲役6ヶ月以下または罰金50万円以下)で前科がもれなく当たります。

こんなん無理やわー。エグイ写真とかも当然見せられるし、被告人関係からの仕返しとかもあり得る。とくに私みたいな地方だと、裁判官や被告人の知り合いなどと「世間は狭いよね~♪的つながり」がある可能性高し。なんともですわ。

あ、大阪の人に朗報!?大阪は一番裁判に呼び出される確率が高く、1年間で400人に一人の確率だそうです。学校の同級生に一人いるような感じ。。。

着想を得たらすぐMEMOれ!

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()">

これらは最低限のデザインルールと言えるでしょう。

また、ポップアップブロックを利用しているユーザーなど、サブウィンドウを利用する場合には、ユーザー環境によっては利用できない場合があるという点にも十分注意を払っておく必要がありますね。

クオリア(Qualia)

Posted at 2005/05/06 (Fri) 21:57 +09:00 in Weblog

クオリアとは私たちの感覚を構成している何ともいえない「質感」をあらわす最新の脳科学用語だそうな。

例えば海外旅行で現地の空港に降り立った瞬間、その場所の匂いや空気の色などを感じて、妙に「やっぱこれやわ~」なんて思ったりしませんか?これこれ、クオリア。感覚の質感だわね。

そう考えてみると普段のひょっとした瞬間にクオリア感じることよくある。天気のいい日に干した布団に包まれると、、、クオリア~。ふと空を見上げると星がたくさんあって、「地球ってやっぱいいわ」ってのもクオリア~。

クオリアが与えられる環境っていうのは、なんか心の豊かさがある時のような気がする。毎日が忙しいってぼやいてると、なんかあんまり感じなさそうだね。

そうするとやっぱり、HERONなんて最高のクオリア与えてくれるよ。あの田園フォークをアナログで聴いた時のクオリア、大量発生するし。是非全人類に聴いてほしい、クオリア最高峰音楽です。

Google Desktop

Posted at 2005/04/29 (Fri) 02:10 +09:00 in Software

Google Desktopは本当に便利。通常のローカルに保存されたドキュメントなどが検索できるのはもちろん、個人的な用途では、特にインターネットのキャッシュとメールの検索ができるのがうれしい。仕事用のメールはフォルダに自動振り分けはしているものの、即座に探せるのがいぃ。Internet Cashは、少し前に見た気になるサイトなどはサイト名を忘れても「記載されていた単語」さえ覚えだせれば再度アクセスすることができるし。インデックス作業はPCがアイドル状態の時に行ってくれるので、作業中には負荷をかけない。

ただBecky!に対応してくれるとうれしんだけど。現状ではジャストシステムのConceptSearchならBecky!対応してますね。

また、Larry's GDS Pluginsでは、検索対象に好きな拡張子を追加できるアドインが公開されているので、こちらもお好みに併せて利用すると便利。

話がうまくなるにはどうしたらいい?

Posted at 2005/04/29 (Fri) 01:44 +09:00 in Weblog

「日経ビジネスASSOCIE」今回のテーマは「仕事ができる人の話し方」。2日後に友人の結婚式のスピーチを担当することになっていて話に悩んでいたところに朗報です!!

ラジオ・パーソナリティーである梶原しげる氏によると、、、

「話すという行為は、聞いてくれる相手があって初めて成り立ちます。多くの人は自分の話し方や服装には気を配りますが、相手を観察する余裕を持ち合わせているでしょうか。自分が...自分が...という意識だけを前に出しては、話の中身が相手に伝わらず、コミュニケーションを取れません...」

「どういえば好印象で、うまいこと言う奴だなぁ~と思われるか」みたいに自分に意識が集中すると結局うまく話せなくなるんですね。自分が聞き手から査定されるような感じもしてきて、これが妙に緊張に繋がる。

ま、当たり前と言えばそうなのかもしれないけど、改めて話し方を本でみるととても新発見な感じ!おかげで(?)そこそこいい感じの(?)スピーチできてたそう。

話し方をテーマにして他にもおもしろい記事が。なんだか、できる社長にはキラーフレーズがあるようで。ソフトバンクの孫社長のキラーフレーズは「逆噴射」。逆噴射て。「今一度基本に立ち戻りがんばります」と言う時に是非どうぞ。

Dreamweaver テンプレート

Posted at 2005/04/20 (Wed) 13:14 +09:00 in Web Designing

テンプレートを使うと、デザインの統一・管理がとても簡単になる。

MozillaとIEのレンダリング

Posted at 2005/04/16 (Sat) 20:40 +09:00 in CSS

なかなかリスト要素の扱いは慣れないわけで。今までけっこう使用を避けてました。レンダリングされるスペース具合がなんとなく掴めなくて。

なるほどMozillaとIEでは、ulのmarginで制御しているか、ulのpaddingで制御してるかの違いがあるようです。これだけに限らず、レンダリングの差を吸収するために、一端レンダリングの初期状態(タグに固有のデフォルトmarginなど)をリセットしてから、レイアウトやデザインのスタイルを上書きするというアプローチがあるようです。個人的にはかなり新発見で感動しました。こうすれば良かったんだね!

こちらで公開されているCSSをアレンジして利用させていただいてます。

グローバルナビ用画像をPタグでマークアップ

Posted at 2005/04/15 (Fri) 19:16 +09:00 in SEO

「テキストリンクによるSEO効果も見逃せないけど、デザイン的には画像でグローバルナビを構成したい。」さて、この場合どのようなマークアップがSEO効果があるでしょうか。

フルCSSデザインによるサイト構築ということで、日本電子専門学校のサイトをチェックして見ると、なかなか参考になるかも。グローバルナビ要素は画像でもPタグで挟んでマークアップしてあります。これが最良の策とは言えないけれど、論理タグでマークアップする効果は、やはり何もしないよりあるでしょうね。

CSSを切った状態や、音声ブラウザへの配慮か、アクセシビリティ対策も重点をおいているようです。CSSを切ったり、ユーザースタイルシートを摘要するとちゃんと<HR>でセクションを区切ったりしてるのは結構好き。ただ、aタグにtitle要素入れたほうがいいのでは?

Pattern matching

Posted at 2005/04/15 (Fri) 11:02 +09:00 in CSS

CSS ではパターンマッチ(Pattern matching)の規則を用いて,ツリー構造内の要素に適用されるスタイル規則を決定します。セレクタと呼ばれるこれらのパターンは,単純な要素型名のみのものから,複雑な前後関係(例えば子供や子孫,兄弟など)を照合できるものまで多岐にわたります。パターン内に示された全条件がある要素に当てはまるとき,そのセレクタと要素はマッチ(match)していると言います。

今一度CSSの基本に立ち戻ってみると、恥ずかしながら発見が!!HTMLを論理構造とプレゼンテーション要素に分類して、後者をCSSにて規定するサイト制作を心掛けていはいたものの、まだまだCSSを理解していなかったことに気づく。。。

タイプセレクタ、子孫セレクタ、クラスセレクタ、IDセレクタはよく使っていたが、子供セレクタ、隣接セレクタ、属性セレクタなどはかなり便利そうです。私の場合では、クラスセレクタを激減させられそうです。やたらPタグのクラスが多かったし。記述のように、隣接するブロック間の垂直マージンを調整したい場合には隣接セレクタが最適って、あるある!

Weblog archives

by Month

by Category

This page was last modified on (in secs).