忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[1] [2] [3

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

電車の開閉ボタン

私は大学に通うのにJR中央線を利用しているのですが、
先日、入り口付近の開閉ボタンの隣に「ひらく・Open」「とじる・Close」シールが貼ってあるのを発見。

button2.gif
ボタン自体のデザインはこんなかんじ。
(左から、開く、閉じる)
この隣にシールが貼られていました。

私はいつもこのテの開閉ボタンを見ては苦労することが多々あります。
矢印がひらく、とじるを示しているのはよくわかるのですが、
ぱっとみてどっちがひらくのか、とじるのかがよくわからないのです。

この電車に「ひらく」「とじる」シールが貼られているのも、判別しにくいという意見があったからなのでは。
(勝手な解釈です)

日本語がわからない人にも分かりやすいように、「開」「閉」ではなく、
矢印でボタンを作ったはずなのに、結局その隣に「ひらく」「とじる」が貼られていたのでは
本末転倒な気がします。


そこで、わたしなりに出した解決案がこちら。

button.gif
開、閉に、Open、Closeの頭文字を組み合わせてみました。
ぱっと見て思ったのですが、閉ボタンが開いている感じがしてすごくちぐはぐですね。

button3.gif
無難な感じのももうひとつ作ってみました。

よく考えたら、改良案2つとも、文字が読めるということ前提なんですよね。
日本人は識字率が極めて高いのであまり気にする必要ありませんが、
外国では字が読めない人もいます。それだと、上記の例は意味を為しません。


button4.gif
そこで、全部つっこんでこんなのどうだろう!?


ふと思いついたものをあげてみました。

PR

モノサシに目印 コトバ/デザイン/アソビ

毎日コミュニケーションズが出版している、WebDesigningという雑誌があります。
MDNのWebCreatorsと共に、研究室にたんまりとバックナンバーが揃っていたので、
ぱらぱらとめくっていたんですが、
最近のトレンドとか、インタビューとかの文章が連なっている中で、
ひときわ異彩を放っているページが。

それが、「モノサシに目印」でした。


非クリエイティブ思考回路の私にとって、その記事の視点は非常に新鮮で、
本当に感銘を受け、本屋さんでもWebDesigningの新刊を見つけるとこの記事だけは読んで帰るというくらい
ファンになりました。
記事を書いているのは、長谷川踏太さんというクリエイターの方です。


そんな「モノサシに目印」が、単行本化して発売されるということで、さっそく購入しました。
わくわくして読んでみたんですが、第一印象は

 

「意外と知らないのが少ない」。

よく考えたらあたりまえなんですよね。
5年連載っていっても月刊誌ですから、12×5=60作品。
研究室には40冊以上のバックナンバーがおいてあるんですから、
知ってるのが多いのは当然ですね。


ページ数のわりにお値段が張りますが、その価値はあると思います。
電車の中で読んだりすると思わずにやにやしてしまって、
周りの人に怪しまれることうけあいですのでお気をつけて。

本について詳しく見る

ペーパープロトタイプ 動画集

以前記事に書いた「ペーパープロトタイプ」に関しての動画を集めてみました。


一番わかりやすい例。1分30秒からが本番です。


一気に載せると重いので、続きは見たい方だけどうぞ。

GIF画像をPNGっぽく用いたサイト

Dale Harris さんのポートフォリオページ。


こういった透明感のあるグラフィカルなサイトは
たいてい画像を透過pngにしていることが多いのですが、
こちらは透過gifを利用しています。

pngの方が透過処理がキレイではあるのですが、
まだまだ普及率の高いIE6で表示ができない、という致命的な欠点があるので、
一般的なサイトではなかなか利用されていません。

ですが、個人のポートフォリオサイトに関しては別で、
透過pngやJavascriptをふんだんに用いた前進的なものが多いのですが、
gifでもきれいなサイトが作れるんだなーと感銘を受けました。

透過gifでここまで画像をキレイに表示しているサイトはあまりないのではないかと思います。


ただひとつ気になる点は、
ページ中段くらいにでてくる4つのカンバッジ状のメニューの部分。
カーソルを合わせると絵柄が変わるのですが、IE6では画像がちらつきます。
a要素だけに画像を指定するとこうなってしまうので、
aの親要素にも画像を指定すると問題なく表示できます。
このサイトの構造を考えると、ちょっと難しいかもしれませんが。


デザインやコメントの手書き具合がとても気に入ったのでメモ。
色合いもとっても絶妙ですてき。

 

北京オリンピックのピクトグラム

コリス
で取り上げられていた北京オリンピックのデザインのうち、
ピクトグラムをピックアップしてみました。


ちなみに、ピクトグラムとは…
文字に変わって情報を表現する記号、すなわち絵文字のことをさすもので、
基本的に、白地に黒または黒字に白の、モノクロで描かれます。

日本では東京オリンピックで始めて知られるようになり、以降普及したと言われています。

東京オリンピックのピクトグラムを探したのですが、
はっきりと写っているのはこれしか発見できませんでした…。
olympic.gif

参考・画像引用:マリオットの盲点


さて、本題の北京オリンピックのピクトグラムです。
こちら!
Img214070247.jpg
引用元(中国語):http://www.beijing2008.cn/spirit/beijing2008/graphic/

より詳しいピクトグラム(中国語)
http://www.beijing2008.cn/spirit/beijing2008/graphic/pictograms/
リンク先(北京オリンピック公式サイト)の右上にはEnglishリンクもあるので、そちらもご覧下さい。



以下、英文・中文意訳

このピクトグラムは、
印字の美点(美しき篆書)をテーマに、印字(篆書)のストロークを基本としています。
今回のオリンピックのピクトグラムは、古代中国の骨や青銅に刻まれた碑文(甲骨文字金文)の
魅力あるグラフィックと、単純化された近代グラフィックを融合してつくられたものです。
わかりやすく、覚えやすく、使いやすいように作られています。

以上。



例によって、訳文は必ずしも正しいとは限りません。あしからず。
英文訳だけでは心配なので、本家の文章(中国語)も参考にして意訳しています。
ちなみに、中国語は全くわかりません。ごめんなさい。

簡単にまとめると、
「北京オリンピックのピクトグラムは、中国の古代文字を現代風にアレンジして作られている」ようです。


追記
コリス様のページに、新しく
歴代オリンピックのポスター・メダル・ピクトグラムなどのアーカイブ集のエントリが追加されました。
あわせてご覧になると非常に役立つかと。

プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
11« 2017/12 »01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
ブログ内検索
忍者ブログ [PR]