「きにきじ」：今日の気になる記事

2009年にお世話になった16のStylishスタイル

Posted at 23:00 on January 4, 2010

Last updated at 15:46 on January 11, 2010

Tags: Amazon, Firefox, Google, Microsoft, SEO, Web, Yahoo!, ツール, デザイン, パソコン, ブラウザ, ライフハック, 備忘録, 非記事紹介

年も明けまして、2009年にお世話になった Stylish のスタイルでもご紹介しようかと思います。

内容はこんな感じです。

1. 検索エンジン関連
   1. Google の検索結果に番号を振る
   2. Yahoo! の検索結果に番号を振る
   3. Bing の検索結果に番号を振る
2. 検索以外の Google サービス関連
   1. Gmail を等幅フォントで表示する
   2. Gmail の広告を非表示にしてメッセージ領域を広げる
   3. Gmail で未読メールの件名をボールド（太字）にしない
   4. Google Reader の余計な部分を省いてすっきり表示にする
   5. Google Reader のリスト表示で、マウスオーバーで背景色を変更する
   6. Google Reader のリスト表示で、未読タイトルをボールド（太字）にしない
   7. Google Calendar の土日の色を変更する
   8. Google Maps の表示領域を広げすぎる
   9. Google のサービスで表示されるメニューバーを小さく表示する
3. ウェブページ一般関連
   1. グリモン AutoPagerize のページ区切りをデザインする
   2. フォーカスの当たっているフォーム要素を強調する
   3. Nofollow リンクを強調する
   4. Amazon Associate のリンクを強調する

……続きを読む »

No Comments »

美しいスライドデザインのためにガイドを利用する：複数ガイドの描き方も

Posted at 23:03 on January 3, 2010

Last updated at 04:13 on January 28, 2010

Tags: Microsoft, ツール, デザイン, パソコン, 仕事, 備忘録, 勉強, 教育

パワーポイントなどでプレゼンテーション用のスライドを作る際にデザインの参考になる記事をご紹介します。

以下の記事では、ガイド用のラインを引いて、それに合わせて要素を配置するということが書かれています。実際にガイドに合わせて作られている美しいデザインも紹介されていますので、なかなか説得力もあります。

……続きを読む »

No Comments »

Gmailで等幅フォント表示を実現するFirefoxアドオンStylishのスタイルがアップデート

Posted at 00:14 on October 24, 2009

Last updated at 02:15 on November 1, 2009

Tags: Firefox, Google, Web, ツール, デザイン, ライフハック, 仕事, 勉強, 暮らし

Gmail がまたこっそりと UI を変更したらしく、メール作成時のテキストエリアが等幅フォントで表示されなくなってしまいました（蛇足ですが、Google Reader でも UI 変更があったようで、グリモンとかキーボードショートカットが一部機能しなくなってものすごく不便です！）。

……続きを読む »

No Comments »

Googleで「AA」を検索すると……Googleロゴの遊び心：Doodle

Posted at 00:13 on September 29, 2009

Tags: Google, Web, デザイン, ネタ, ファッション, ブランド, マーケティング, 心理

（クリックで拡大表示）

» Googleで「AA」で検索かけるとGoogleのロゴがAAっぽくなる:アルファルファモザイク

「どうせ釣りでしょ……」と思いながら検索したときのあの驚きはなかなかのものでした。

Google の、こういう遊び心を忘れないところが僕は大好きです（まぁそういうイメージ戦略なんでしょうが）。

ちなみに今日（9/28）は孔子の誕生日らしいですね。下の画像のようにロゴの「Google」の「l（エル）」部分が孔子っぽい人の絵になっています。

（クリックで拡大表示）

No Comments »

数値は減っているのに増えているように錯覚させるグラフマジック

Posted at 00:43 on July 5, 2009

Last updated at 01:26 on March 11, 2010

Tags: イタい, デザイン, ネタ, 心理

» 減っているのに増えているように錯覚するグラフ | Okumura’s Blog

このグラフ1，よく見てください。T先生に教えてもらいました。

うぉ、これは確かにグラフマジック……。敢えて 3D にして奥を小さく手前を大きくし、さらに、数値は変わっていなくてもバーの中のラベルを年を追うごとに上に位置させています。これらに加え、最上部（開成高校）のグラフは１番手前のバーの上に「2年連続全国No.1」という文字を同化しかねないように載せて高さをごまかしています。これは確実にわかってやってますね（いや、たぶんですけど）。

グラフとか表というのは、本来は文章ではわかりにくいことを視覚的にわかりやすく表現するためのツールであるはずです。それをこういう風に使うのはよろしくないですよねぇ……。全体でみれば本当に数値は増えてるんだから変なことしないでもよさそうなものですが……そういうわけにはいかないんですかね……。競争の激しい業界ですしね。

でもま、勉強させてもらいました。ありがとうございます。

• 1 <http://www.waseda-ac.co.jp/news/0902/examination_report_h.html> という URL だったんですが、いつの間にか削除されてしまったようです。

2 Comments »

便利そうなjQueryプラグイン10選

Posted at 22:53 on June 25, 2009

Last updated at 01:25 on March 11, 2010

Tags: jQuery, Web, ツール, デザイン, ライフハック, 備忘録

» ユニークで使えそうなjQueryプラグイン10個:phpspot開発日誌

便利そうな jQuery プラグイン10個が紹介されています。

↓の２つなんかは実際に使ってみたいところです。

Captify1
画像の下部に半透明の背景付きキャプションを表示。アニメーションしていい感じ

Favico2
リンクに自動でfaviconを付けてくれる

• 1 URL は <http://masterfidgeter.com/projects/captify/> で合っていると思うのですが、なぜかアクセスできません。
• 2 こちらも <http://blog.liviuholhos.com/javascript/add-a-favicon-near-external-links-with-jquery> にアクセス不能です。

No Comments »

CSS3セレクタ非対応ブラウザでも対応ブラウザと同じ動作を実現するJavaScriptライブラリ

Posted at 22:29 on June 25, 2009

Tags: Web, ツール, デザイン, ブラウザ, ライフハック, 備忘録

» 古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた – latest log

CSS3 セレクタに対応していないブラウザ（e.g., IE6）でも対応ブラウザと同じ動作を実現してくれるという JavaScript ライブラリのようですが、ちゃんと動けば非常にすばらしいですね！

ブラウザによって使える CSS セレクタが違うというのはウェブマスターにとっては悩みの種です。でもこれさえあれば問題は解決ですね。

いやー、ありがとうございます。

No Comments »

ユーザビリティを意識しながら訪問者を魅了するフッターデザイン論

Posted at 18:41 on June 23, 2009

Tags: Web, WordPress, デザイン, ファッション, ブランド, 備忘録, 心理

» つま先まで気を抜かない、フッターデザイン論 :: gerenuk.crazyphoto.org/

Smashing Magazine では、具体的な例を挙げてフッターをどうデザインするべきかという記事が掲載されています。良い記事なのですが例のごとく少し冗長なので、要点をまとめてご紹介します。

……続きを読む »

No Comments »

最初や最後の行だけ違うスタイルを可能にするJavaScript「yuga.js」

Posted at 10:40 on May 16, 2009

Last updated at 00:01 on September 2, 2009

Tags: jQuery, Web, ツール, デザイン, ライフハック, 備忘録

» 最後の行だけ違うスタイルにするJavaScript: Good Sleep｜Webデザイナーの日々のスキマ

若干古いですが、web creators 4月号の「Webデザイン スタイルアップ Tips」に紹介されていたKyosuke.jpさんの「yuga.js」は、小粒ですがなかなか痒いトコロに手が届くスクリプトが集まっています。

細かいところで手間を省いてくれるスクリプトみたいですね。

……続きを読む »

No Comments »

テーブルやリストの背景を1行ごとに変更する方法：JavaScriptを使うかCSSだけでやるか

Posted at 10:23 on April 9, 2009

Last updated at 12:32 on May 7, 2009

Tags: jQuery, Web, ツール, デザイン, 備忘録

» Good Sleep｜Webデザイナーの日々のスキマ: テーブルの背景色を１行おきに変更してみる

テーブルやリストで１行ごとに背景色を変更したいことってけっこうあるんですよね。作ったきり修正がほとんどないようなサイトなら手作業で１行ごとに class 指定していってもまったく問題ないんですが、行を追加・削除するなどの修正を加える機会がそこそこある場合は手作業じゃやってられません。でもご紹介した記事のとおりにやれば１発解決ですね！

……続きを読む »

1 Comment »