ウェブデザイナーの日記

藤居正彦氏の、というのも堅苦しいので、おじさんのサイトということで紹介します。新作イラストもあるんで、イラストレーターをお探しのディレクターのみなさん、絵を見るのが好きな方はどうぞご覧下さい↓

color-pencil.com

さいきんはイラストレーターへの問い合わせの中には個人のお客さんもいるそうです。写真館で家族写真を撮るような感覚で、プロのイラストレーターに家族の絵を描いてもらうってのは、シャレているというか、心が豊かなかんじがしてよいですね。

ウェブデザインについて。

今回いちばん迷ったのは「イラストをどのように見せようか」という点でした。イラストを紹介するページでは（一部ちがうとこもありますが）、以下のようなインターフェイスになっています。

1. 正方形のサムネイルがズラーとあって、
2. そこにポインタをあてると全体の構図がわかるサムネイルが見えて
3. クリックするとモーダルウィンドウになって拡大絵が見れる

という3段階方式をやってみました。以下のページとかそういうつくりになってます↓

挿絵イラスト

結局のところ、イラストっちゅうもんをどのような視点で見るか？という論点の違いでインターフェイスに対する好みが分かれるのではないかと思います。絵というものを『資料』として眺めているひとには全体の構図がわかるサムネイルがズラーと並んでいる方式、すなわち、古典的で安心感を与える見せ方が好まれるでしょうし、まったりきぶんで絵を眺めて楽しみたいというひとは正方形クリッピングをおもしろがってくれるのではないかと想像しています。

私は仕事柄、ストックフォトのサイトをしょっちゅう見ますが、ストックはアートでなく素材なので、あくまで素材としての見せ方に傾注してインターフェイスがつくられています。イラストレーターは商業画家なのでそっち寄りのほうがいいのかなぁ、でも普通にサムネイルが並んでいるパターンてのは古くさくてつまらんのう、というふたつのきぶんでモヤモヤしつつ、結局、いまの方式を選択しました。

完成したあとも「これでよかったのだろうか」と思ったりして、むーむーとうなってばかりいましたが、そんなある日、MOMAのサイトを見てみたのですよ↓

http://www.moma.org/

そしてMOMAでも「作品の一部を切り取る方式のサムネイル」を採用していることを知りました。そこにポインタをあてると作品の全体図がわかるサムネイルが短いキャプションつきで現れ、それをクリックすると拡大絵が見れるという、美術館にしては大胆なインターフェイスを積極的に取り入れていることを知りました。なんだ！そうか！MOMAもやってるんなら私もやってみよう！という次第でおじさんのサイトもこのようになりました。

誤解のないように申し添えておきますが、私はなにも自分のデザインがMOMA並みにスバラシイ！といいたいんではなく、クリッピングされたサムネイルを見せるインターフェイスはどうなのだろうかという点に絞ってのお話です。

「美術館にしては大胆な」と書きましたが、通常、アーティストの作品を見せるサイトにおいては、作品の一部を切り取るというアートディレクションはなかなかやらせてもらえません。「○○センセイの作品を勝手に切り取るとは不届き千万！」とダメ出しされます。過去に美術館やアーティストのサイトをつくったことがありますが、そのときもものすごく制限されました。トリミングなどぜったいやらせてもらえないし、背景の色とか、ボーダー幅なども厳しくチェックされました。美術館とかギャラリーのサイトってのは、だいたいどこもそのようなムードでつくられているんで平坦なデザインにならざるをえないという事情があるみたいですが、天下のMOMAはひとあじちがうんだなーと思いました。ソリッドです。んで、私も参考にさせて頂きました。

というかんじで完成しました。どうすか。

ところで技術的な話題に移りますが、今回のサイトでは「MacOSX Safari1.xで見れるようにせよ」という条件がありました。これは印刷グラフィック業界の特殊な事情によります。ネット人間から見るとおそろしく古いMacを日常的に使ってるひとが印刷業界には多いのですね。クラシック環境はレガシーブラウザ専用の代替ページに飛ばすってことにしましたが、問題はSafari1.xです。ギャラリーページのJavascriptはjQueryを使ってスクリプトを書きましたが、単に「動く」というだけではだめで「とにかく軽く！」ということを考えてつくりました。検証用に古いMac、G4 400MHZのマシンを出してきました。いろいろと勉強になりました。

モーダルウィンドウを出すところでは、jQueryのプラグイン、SimpleModalのお世話になりました。SimpleModalは「モーダルウィンドウを出す／閉じる」というだけのシンプル機能のプラグインです↓

Eric Martin » SimpleModal

これはなかなか優れモノだなというのがわかりました。パッと考えると、モーダル出すなんて簡単じゃないかという気もしたのですが、たとえばこんなかんじで↓

Simple jQuery Modal Window Tutorial

上のリンク先では「jQuery使えばカンタンヨ〜」てな具合にサンプルスクリプトが紹介されていますが、上のサイトのコメントの後ろのほうを見てもわかる通り、やってみるといろいろと問題が発生します。IE6でposition: fixedが効かないとか、ブラウザのウィンドウサイズの取得でブラウザによってコケるとか、いろいろな事象に悩まされます。SimpleModalはそこらへんを勝手にやってくれます。こういう問題と闘いつつ、ちまちまとコーディングをするのも楽しいですが（笑）、今回はおとなしくプラグインのお世話になりました。SimpleModalでは、モーダルに表示したいDOMをつくって、それを引数として渡せばオッケーです。モーダル状態になったウィンドウをドラッグしてみるときちんと黒バックがくっついてくるとか、仕事が細かいです。容量もライト。5kbくらい。jQueryは革新的に便利ですが、すべてのブラウザ環境の違いを吸収してくれるというわけではないので、これはたいへん助かりました。3種類のコールバック関数を渡せるようになってて、モーダルが開くとき、DOM構築直後、モーダルが閉じるときの3種類に動作をくっつけることができます。モーダルを手っ取り早くつくりたいという方にはオススメです。

んで、Safari1.xで見れるようにしなくちゃいけないのですが、いろいろとありましたが、その中に「preventDefault()が効かない」という問題がありました。ぐぐってみるとFAQレベルのトラブルなのですね。解決法がわからなくて、どうしたもんだかと思ったんだけど、「DOMによってaタグをspanタグに差し替える」というのを思いついてやってみたらば、結果良好なのでこの方式を採用しました。他になにかいい手があったらご教授ください。そんなめんどくさいことをしなくてもレガシー方式で「onclickナンチャラ... return falseでオッケー」という気もしますが、これをやることによって、Javascriptをdisableにしているビジター（てのはかなり少ないですが）に対してのfale safeになるからいいかな。jQueryのセレクタはこういうときにべんりです。短い行数でDOMの入れ替えが行えます。

参考までに書きますが、jQueryは現在最新verが1.3.2ですが、これだとSafari1xはダメ。古いverから少しづつ上げていったら1.2.3が使えました。といっても「1.2.3はSafari1.x対応」という意味でなく、たまたま私の使ったメソッドが動いたというだけの話だと思います。

最後にひとつ。

イラスト作品を大きくしたときに常に出る角丸の背景ですが、気づくひとはかなり少ないと思うのですが、この背景画像には、ほんのちょっぴりだけグラデがかかっています。薄いグレー→白のグラデーションになっています。背景が白い絵を見てみるとわかりやすいです。マッシロの背景と、チョイグラデの背景を比べてみたらこっちのほうが絵がきれいに見えると思ったのでそうしました。ディスプレイの性能がショボイとまったく同じに見えちゃうんで、かなりナローな層を対象にしていますが、すこしでも作品が映えるほうがよいと考えてそのようにしました。

『sites』カテゴリのエントリ

• べんりサイト覚え書きメモ
• FFFFOUND! イメージにボケーと身を委ねたいひとむけサイト
• 最新HIT曲のサワリ視聴をブログにはりつけられるサイト
• SFロボのペーパークラフト :: これはすごいぞ！
• 全国役所一覧というサイト
• w3cモドキのhtmlチェッカー :: w3 tableless
• Olivia Lieghの写真はいいなぁ
• Ajax :: 超簡単に郵便番号→住所自動入力を実現するライブラリ
• イベント会社のサイトをリニュアル

コメント・プリーズ！

お名前 (your name)

(required)

url

(optional) ※公開されます。

メールアドレス (email)

(optional) ※公開されません。管理者にだけわかります。

コメント (comment)

(required)

 クッキーにお名前、url、メールアドレスを保存する。

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『&lt;』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

ADD YOUR COMMENT! / コメントする