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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

さて、本題の北京オリンピックのピクトグラムです。
こちら！

引用元（中国語）：http://www.beijing2008.cn/spirit/beijing2008/graphic/

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

---

以下、英文・中文意訳

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

以上。

---

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

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

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

デザインができるまで

idea*idea 様にて、
「雑誌のページデザインを作るまで」の動画（Youtube）の紹介がされていたので、お気に入りメモ。

雑誌のデザインの場合はずっとPhotoshopでの作業になるので
画面変化を動画として保存できますが、
Webだとコーディング→ブラウジングの繰り返しなので、
なかなか作業風景を動画にするのは難しいものがあります。

デュアルディスプレイでの作業ならもう少し楽かもしれませんが、
CSS書き換えた後は、ブラウザをそのつど更新しないと反映されないのでなんとも言えないですね。

ちなみに、エントリーのコメントに、
「Webサイトのできるまでの変遷・gifアニメ」へのリンクが貼られています。
こちらもオススメです。

以前、CSSを書くタイミングという記事を書きましたが、
このgifアニメではコンテンツ→CSSの順で作業が行われていたので、
少し親近感が湧きました。

作業がわかりやすいようにコンテンツ（文章）を先に入れていたかもしれないので、
この方がいつもこの順番で製作されているのかは分かりませんが…。

自分なりのルールを明確にして、
それに沿ってWebサイトを作るように意識することが大事だと感じました。

自分の色

ＨＴＭＬが書ける人はこの世にたくさんいます。
その中で、自分にしかできないこと、他の人にはないもの。

その答えは、私自身の人間的魅力ということになります。

どんなに苦手なタイプの人とでも付き合うことになるのがお仕事。
仕事は仕事、と割り切るのが理想であり、
そうできるのがプロの人間なのかなあと思います。

でも、実際そう上手くはいかない気がします。

やっぱり、人間的に気に入った人と気持ちよくお仕事したいですし、
同程度の技術を持っているならば、仕事のしやすさ、相性の良い方を
パートナーとして選ぶこともあると思います。

だから、ひとを理解する能力を養った方がいい。

足りない能力を補い続ける人生よりも、
自分にとってプラスになる能力を身につけたほうがいい。

だから、今しか出来ないことをしたほうがいい。

旅行に行ったり、遊びに行ったり、いろんな人と話したり。
時間がある今でしかできないことがあると思う。

と、あるクリエイターさんに言われました。

きれいな建造物を見てもうんともすんとも感動できない私が、
お金をかけて旅行に行って、何か得られるものがあるんだろうか。

そう考えてしまうと、なかなか異国へ旅立つことができません。
もうちょっと外に目を向けないとな、と反省しました。

1日の生活を表すブランドロゴ・ダイアグラム

大学でダイアグラムに関する研究をしているメンバーがいる中、
ちょっと気になるダイアグラムを見つけたのでメモ。

DEAR JANE SAMPLE(英語)

以下、私訳文

---

ブランドファン・Janeのブランドタイムライン

 

以前、私がブランドロゴが好きだという話をしたのですが、
私はどのように日常生活でブランド物を利用しているのか考えてみました。
毎日どのくらいのブランド物を使っているのか、あなたは数えたことがありますか？

そこで、私はとある金曜日の生活をブランドロゴで表してみることにしました。
やってみたら、かなり大変だと言うことに驚かされました。
そして、このタイムラインが私を的確に表しているのにも驚きました。

この記事を読んでいるみなさんにもぜひ、「ブランドロゴの1日」を作ってもらいたいです。
とっても楽しいし、そこからいろんなことが見えてくると思います。
あなたがもしブログを持っているのなら、ぜひ私に「ブランドロゴの1日」を送ってくださいね。
楽しみにしています。

(「ブランドロゴの1日」は意訳です。原文は「day in brands」です。)

以上、意訳文

---

ということで、私も作ってみました。

（クリックで大きくなります）
いやー、なんだか生活感丸見えですね。
しかも、引きこもってた日のものなので、PC関連ばかり。
National製品が異様に多いのがとても気になりました。

みなさんもやってみてはいかがでしょうか。