works:株式会社NERC/S-WPIAプロジェクト

WordPressで制作した2サイトを、制作実績に追加しました。

今回はデザインから私が制作しています。
どちらも大学にゆかりがある案件ですが、傾向は大きく異なっています。


株式会社NERC(自然エネルギー研究センター)


S-WPIA開発プロジェクト


投稿者名 うぇびん 投稿日時 2011年10月10日 | Permalink

SaCSS Vol.25(1)「a-blog cmsで見る、jQueryのCMS活用例」

フォローアップが遅くなってすみません。

2011年6月25日の「SaCSS コーディング勉強会 Vol.25」で講師をさせていただいたときの、一本目のスライド資料を公開します。


投稿者名 うぇびん 投稿日時 2011年06月30日 | Permalink

FacebookのWindows用フォントが変わった件への対策

お気付きでしょうか。
FacebookのWindows用日本語フォントが「メイリオ」になりました。

これまでは英字フォントのみが指定されていたので、実質指定なし=ブラウザの初期設定フォントになっていました。通常、ブラウザでは「MS Pゴシック」となっている(Windows7も!)ので、ほとんどの人はアンチエイリアスなしの文字で見えていたはずです。


Windows版Firefoxでの表示


Facebookページはインラインフレームで表示されているので、CSSの指定は独立しています。
このままではUIとの間に違和感が出てしまうので、早速、WebbingStudioのFacebookページもメイリオに対応しました。


投稿者名 うぇびん 投稿日時 2011年04月13日 | Permalink

ライジングサンのサイトが印刷できません

rsr09

全然ロックがわからないのに、
ライジングサンロックフェスティバルのチケットを買ってしまいました。

→Pia-no-jaC←とスガシカオのステージが観たいのです。渋さ知らズやスカパラも観たいです。
ひとりで参加するtwitterのfollowerさんにテントサイトを使わせてもらえそうなので、お世話になる予定です。

「ライジングさんおひとり様の集い」を開催することになりました。当日はお気軽に声をかけてください。
http://twitter.g.hatena.ne.jp/webbingstudio/20090725

で、これだとただの日記です。
カテゴリー、「Webdesign」になってますよね?

表題の通り、本題はライジングサン公式サイトの話です。
エリアマップやタイムテーブルを印刷できないのです。

「RISING SUN ROCK FESTIVAL」は日本屈指のライブフェスです。
サイトは皆がワクワクするような、オサレでグルーヴしてるデザインじゃなければいけません。

今年のサイトを担当した制作会社は技術力が高いようで、個性的なデザイン、透過PNG・JavaScriptを駆使した演出、論理的なコーディングと、デスクトップで閲覧する分には充分なサイトです。
参加してみたくなるワクワク感いっぱいです。

なのですが…いざチケットを買って、情報を集めようとすると問題が出てきます。

↓これ、エリアマップです。

rsr_1

グロカワデザインに突っ込みどころ満載ですが、それは置いといてw

エリアマップはFlashで作成されており、IEの仕様に対する対策としてスクリプトで呼び出されています。
なので、スクリーンショットを撮らないと印刷ができません。

また、各スポットに関する説明は「マウスオーバー」に反応するため(昨年のエリアマップもそうです)、例えスクリーンショットを撮っても詳しい情報までは紙に写りません。

↓で、タイムテーブルの方ですが

rsr_2

今年のRSRのタイムテーブルは、2分を1pxに見立てて、div要素に時間分のheightやmarginを指定することで生成しています。デスクトップで見る分にはステージの時間軸が分かりやすいですし、おそらくCMSでの作成・変更がしやすいものと思います。

ですが、ブラウザの印刷ではテーブルが崩れてしまいます。
しかも全部ベタ塗りなので紙はインクでブヨブヨですw

高度なCSSレイアウトを正しく印刷するには、専用のソフトが必要です。
フジロックのタイムテーブル(tableとrowspanを使ったオーソドックスなスタイルです)もやっぱり印刷できないし仕方ないですが、それだったらPDFを用意してもらえると助かるってものです。コンビニやWESで紙のパンフを配ってるので、それを貰ってきた方が良さそうです。

印刷以外でも、違う立場だと感じる不便があったりします。

例えば、先日会った友人は
「アーティスト紹介が暗くなって詳細が出るのだけど、閉じ方がしばらくわからなかった」
と言っていました。

rsr_3

アーティスト紹介のモーダルポップアップにはThickboxが使われていますが、これのインターフェースは一般の人がイメージする「端に× がある」形式ではなく、英文で書かれています。
画面外をクリックしても閉じられるのですが、その説明はありません。
そんなにWEBサービスを利用しない人だと迷ってしまうのです。

私も最近はyuga.jsに含まれているThickboxを使っているのですが、ただ「かっこいい演出」を取りいれるのではなく、実際に使ったときのことを考慮しなくちゃいけないのだなあと、またひとつ勉強になりました。

インパクト重視のサイトデザインは、ライジングサンの伝統のようです。
「History」のページでは過去11回の公式サイトが全てアーカイブされていて、WEBデザインの歴史をリアルに語る貴重な資料となっています。

http://rsr.wess.co.jp/2009/guideline/history/

なかなか面白いので、デザイナーコーダーの方はいちど見てみてください。


投稿者名 うぇびん 投稿日時 2009年07月25日 | Permalink

「Discover Shiretoko」で使われているWEBデザインの美麗テクニック

shiretoko2

Discover Shiretoko – 世界自然遺産「知床」と Web ブラウザ「Firefox」の物語

美しい。
流石はWEB標準の先端をゆくMozilla Firefoxのサイトです。
しかも、コードネームに我らが世界遺産、「Shiretoko」を選んでくれて嬉しいですー。
北海道を愛する方も、フォクすけを愛する方も、俺はOpera一筋だ馬鹿野郎という方も、是非訪問してみてください。

このサイトではWEBデザインの美しいテクニックがあちこちに使われています。
全ては紹介できませんが、取り急ぎ目立つものだけ。

WEBデザインの可能性を広げる、透過PNG

このサイトには「透過設定」を行ったPNG画像が多用され、Flash並のグラフィカルな演出を実現しています。
PNG32形式はファイルサイズが大きくなる欠点がありますが、近年のADSL、光回線の普及で使いやすくなりました。

ですが…
あのクソ忌々しいInternetExplorer6はこれに対応しておらず、足を引っ張り続けています。
このIE6でも透過PNGの表示を可能にするのが、「PNGFix」と呼ばれるJavaScriptライブラリです。
「Discover Shiretoko」はjQueryライブラリを使用しているので、jquery.pngFix.jsを採用しています。

jquery.pngFix.js – PNG-Transparency for Windows IE 5.5 & 6

衝撃のGlider.js

shiretoko3

いや、これはびっくりしました。
てっきり知床→Firefox間でページを移動するのだろうと思っていましたから。
このダイナミックな横スライドは、日本人が作成したjQueryライブラリ「Glider.js」を採用しています。

Glider.jsを作ってみた。 – Ho-KAGO After School

Firefoxユーザーのなかには、「No Script」プラグインでJavaScriptをオフにしている方も少なくありませんが、このライブラリはdivでグルーピングされたHTMLに対し演出を加えるものなので、内容が読めなくなることはありません。
でも、できればこのサイトくらいはJavaScriptオンで見てあげてください…

一部が重なっているナビゲーション

shiretoko1

本文最後尾のナビゲーションは、矢印の一部が重なっています。
四角ベースのCSSレイアウトでこれを実現するには、各ボタンを透過画像で作成し(ここは透明度はあまり関係ないのでgifです)、さらにフロートで横に整列したボタンに対し「ネガティブマージン」や「position:relative(相対配置)」で矢印の一部が重なるように位置ずらしをすることで実現できます。

説明記事がネット上にいろいろあったのだが見つからない…汗

尚、ボタンの重なっている部分は「HTMLで後に書かれている要素」が優先されます。なので、重なりは最小限に抑える必要があります。

トップ専用CSSによるデザインの上書き

shiretoko4

「Discover Shiretoko」はトップ以外のデザインでは、共通の背景画像が使われています。
半島のすみっこにくまさんがいるやつです。
ですが、トップページのみ「top.css」を後から読み込ませることにより、導入部をよりダイナミックな構成に変更しています。
こうすることで、作業量を最小限にしつつ、ページ毎の演出を調整することができます。

これはWEBデザイナーの間では割と常套手段なんですが、CSS勉強中の方も自分のサイトやブログなどでお試しください。楽しいですよ。


他にもレイヤー配置など、たくさんのテクニックが使われていますが、この辺で。ノシ

何故ここまで高度なテクニックを多用したのか。その答えははっきりしています。

「Mozilla Firefox」が最先端のレンダリング、スクリプト処理に対応できるブラウザであることを、自らのサイトで証明するため。

Discover Shiretoko」は、制作チームの自信の現れなのです。


投稿者名 うぇびん 投稿日時 2009年06月24日 | Permalink