勝手にリデザイン：新宿高層ビルの館内施設案内板
勝手にリデザイン：新宿高層ビルの館内施設案内板 新宿のとある高層ビルの館内案内標識が話題に。後学のために、仕様・問題点を整理、改善案の作成を行ってみました time2011/09/08 hatenabookmark- Twitterで、あるサイン（案内板）のことが話題になっていました。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。 …確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。 仕様 まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。 そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。（ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方
Firefoxのフォーム（ユーザ名・パスワード）自動補完機能を強制的に有効にする拡張機能 “Annoyance Remover” - Liner Note
Firefoxのフォーム自動補完機能が無効になっているサイトでも強制的に有効にする拡張機能の紹介Firefoxのフォーム（ユーザ名・パスワード）自動補完機能を強制的に有効にする拡張機能 “Annoyance Remover” 書いた人： leva 投稿日： 2007年12月02日（最終更新：3ヶ月と11日前） 読者の皆さんの反応 0 被ブックマーク数： 2 要約：Firefoxのフォーム自動補完機能が無効になっているサイトでも強制的に有効にする拡張機能の紹介たまには普通のブログらしく拡張機能の紹介でも。 最近ウェブブラウジングしてて不便だなーと思うのが、ウェブサービスのログイン画面で自動補完が無効にされていること。ユーザ名やパスワードを入力してぽちっとログインすると、ブラウザがパスワードを記憶していて次回以降はユーザ名などの入力が不要になる便利な機能なんですが、これはサイ
対訳（原文+訳文）のマークアップ方法 - Liner Note
対訳（原文+訳文）のマークアップ方法 書いた人： hash 投稿日： 2007年09月12日（最終更新：5年7ヶ月と15日前） 読者の皆さんの反応 0 被ブックマーク数： 2 要約：対訳のマークアップ方法について考えてみる 英文を対訳1 する時、それぞれの文をどうやってマークアップすれば最も妥当なんでしょうか？細かな点ではありますが、視覚・聴覚系UAでのスタイリング2 やファインダビリティ向上に結びつけたいところです。 実際の活用例としては、原文または訳文の上にマウスを置いたときに対応する言語の文を表示することを考えています。まぁ、それだけならぶっちゃけ対訳を1パラグラフ毎にdiv要素で括るというのも手もあって、これならHTML4からXHTML1.1までカバーできるのですが、もう少しフラットな書き方はないものかと思って考えてみた次第です。 今回は以下の文をどうマークアップするか考えます。
CSSによる画像置換問題概観 - Liner Note
画像置換問題とは想定ユーザ像アクセシビリティ確保における優先順位の付け方おまけ画像置換問題とはウェブ技術に詳しい方には耳‥画像置換問題とは ウェブ技術に詳しい方には耳にタコができるくらい聞いた話ではありますが。 これはミツエーリンクスで解説されている通り、HTML文書でマークアップしたテキストを、CSSで画像に置き換えて表示させる手法で、具体的にはテキストはdisplayプロパティで隠したり、あるいはtext-indentやpositionプロパティを使って画面外に追いやり、画像を親要素の背景画像として表示させる感じで実現します。 このテクニックに対する問題点も同ページで指摘されていて、CSSが有効かつ画像は非表示という閲覧環境において（中略）適用箇所については一切の情報が得られなくなることです。 この功罪については、画像置換の問題点 - てんぽという記事に表でまとめられていて、わかりやす
「あわせて読みたい」をRSSやHTML形式で出力する - Liner Note
あわせて読みたい使おうっかなーと思ったけど、画像1枚じゃテーマに組み込みづらかったので ((加えてユーザビリティ上、イメ‥あわせて読みたい 使おうっかなーと思ったけど、画像1枚じゃテーマに組み込みづらかったので*1 、文字データに落とそうと言うことで、HTMLやRSSで出力できるような関数を仕掛けてみた。 使い方はこんな感じ。コードには書いていませんが、あと近くじゃなくていいので、どこかに「あわせて読みたい」のコードを貼る必要があります（「あわせて読みたい」に参加するため） <?php // ケース1: 単純に配列に格納する $rec = getRecommendSites("http://note.openvista.jp/", "array"); // ケース2: RSSで出力する getRecommendSites("http://note.openvista.jp/", "rss"
Google Mapsの埋め込みコードをXHTML validにするGreaseMonkeyスクリプト - Liner Note
Google マップがAPIを使わなくてもHTMLのコピペで貼り付けられるようになったそうなんですが、その埋め込みコード‥Google Mapsの埋め込みコードをXHTML validにするGreaseMonkeyスクリプト 書いた人： leva 投稿日： 2007年08月22日（最終更新：1ヶ月と18日前） 読者の皆さんの反応 5 被ブックマーク数： 0 <iframe width="425" height="350" frameborder="no" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&hl=ja&geocode=&q=%E5%85%AD%E6%9C%AC%E6%9C%A8%E3%83%92%E3%83%AB%E3%82%BA&ie=U
はてなブックマークの立体アイコン - Liner Note
はてなブックマークの立体アイコン 書いた人： leva 投稿日： 2007年02月10日（最終更新：4ヶ月と14日前） 読者の皆さんの反応 0 被ブックマーク数： 0 いかにもdeviantARTあたりで配布してそうなこういうアイコン。 はてブで id:sweetlove さんが はてブもあればいいのにと言ってたので、同じくFireworks*1 を使って似た感じになるように作ってみた。 だが、やっぱりなんか違うな…。てか、Fireworksしか使えないのでそろそろ Photoshop も使ってかないと。 ダウンロード はてなブックマーク 立体アイコン パッケージ (292KB) はてなブックマークの3Dアイコンを作ってみた。 - デザインウォーカーで似たようなことをしてた。あー、やっぱ文字はドットぽい方がイイね。 そういえば、影がついてなかったのでつけてみた。 この画像
サイトをリデザインしてみたーデザインプロセス - Liner Note
少し本気でブログのデザインを考えまして、デザインし直してみました、パッチワークでアレコレ変えるよりかは自分でスキンを作る‥少し本気でブログのデザインを考えまして、デザインし直してみました、パッチワークでアレコレ変えるよりかは自分でスキンを作るの方が結果的には近い道だろうと思って、やっていたら5日掛かりの仕事になってしまいました（構想を含めれば数ヶ月くらい） ご覧の通り、シンプルな1ペインデザインです。これについてはあとでまた別に記事を立ててお話しします。 で、この記事ではリデザインの課程をざっくりと画像で振り返ってみようと思います。 イメージスケッチ 始めに、なにはともあれどういうサイトにしたいか画像編集ソフトで適当に描きます。サイトを実際に作った人なら分かるかと思いますが、ここが一番楽しいんですよね 最初に考えたのはこういう2ペインデザイン、この頃はまだサイト名すら決まってません(^_
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://note.openvista.jp/2008/to-understand-the-general-users-1/
http://note.openvista.jp/187/
さよならさくら、こんにちはCoreServer - Liner Note
Liner Note - 無償で商用利用できて品質の高い日本語フォント一覧