シンプルウェイ制作班|WEB制作スタッフブログ

世界各国のwebデザイン~バレエ団編~

2016年03月28日

はじめまして。solderです。

こちらでブログを書くのは初めてとなります。よろしくお願いします。


先日、「世界各国のWebデザインと日本のWebデザインの特徴」という記事を見つけ、同じ組織でも世界各地によってデザインが全く異なる点やその国のIT・文化的事情を垣間見ることができ、面白いと感じました。


今回は世界各国のバレエ団とそのwebサイトの特徴を比較分析したいと思います。
なぜ対象がバレエ団なのかというと、私がバレエ好きだからです。(昨年末には新国立劇場バレエ団の『くるみ割り人形』をS席で観に行ったりしました)



パリ・オペラ座


まずは世界三大バレエ団のうちの一つ、パリ・オペラ座。

この名を知らぬ人はいないことでしょう。ガルニエ宮とも呼ばれ、長い歴史と伝統があります。
また、バレエ界の妖精とも呼ばれ、先日日本で引退公演を行ったシルヴィ・ギエムが所属していた劇場でもあります。


operaparis


サイト全体はモノクロで落ち着いた雰囲気でありながらも美しい画像や書体を用い、他の追随を許さない威厳を感じます。
上記の記事にも書いてありましたが、フランスはモノクロにテーマカラーを加える配色を行うという一貫性があり、ここでもそれが表れていました。



ボリジョイ・バレエ団



本拠地はロシア・モスクワ。
チャイコフスキーの『白鳥の湖』や『ドン・キホーテ』が初演されたということで有名です。


bolshoi


サイト全体から古き良き伝統の香りが漂います。バレエでは踊りの構図や背景にシンメトリーの美をよく使うのですが、それがサイトにも生かされています。ディテールはやや古臭さがありますが、ボリジョイ・バレエの伝統とブランドイメージを崩さないためにあえてこうした形式をとっているのかもしれません。



ニューヨーク・シティ・バレエ団


アメリカで最も権威のあるアメリカンバレエシアターと並ぶバレエ団のうちの一つ。


NYcity


トップページの情報量は他のサイトと比べると少なく、よりミニマルな印象です。その分、下層ページが多く作られていますが、モバイルでも見やすいようなサイトの設計で、目的のページにスムーズに移行できる導線の工夫を感じました。



オランダ国立バレエ団


nl


オランダでは打って変わって最先端の技術やトレンドをよく取り込む傾向があるようです。

トップは大きなメインビジュアルを使い、ユーザーへのインパクトと興味を誘います。モノクロベースではありますが、アクセントに鮮やかな色を加えるなどオランダらしい現代的なデザインと言えます。バレエに限らずコンテンポラリーダンスが盛んだということも一因になっているかもしれません。



新国立劇場バレエ団


national


海外のサイトと比べると色数も多く、華美な装飾・丸みのある曲線を多用しています。これは壮麗で豪華絢爛ではあるけれども、人々への劇場に対する敷居を下げ、とても親しみやすい作りになってるように思います。日本人が思い描くバレエのイメージをそのまま具現化したようにも感じました。



まとめ


上記には各国1サイトしか掲載しませんでしたが、同一の組織でないにも関わらず、国ごとに一貫性のあるデザインを施してある場合が多く、それはその国の文化的背景やIT事情を汲んでいることが読み取れました。特に今回は国立の劇場を中心に取り上げたのでその傾向は強く出ているように思います。


世界のバレエ劇場のことも各国のwebデザイン事情も学ぶことができ、大変有意義な時間となりました。
テクニカルなブログが続いていた中で、こうした話題を取り上げるのもたまにはいいのではないでしょうか。


※2016年3月現在



imgの意図しない余白の犯人

2011年06月02日

とても基本的な事になってしまうのですが…
コーディングしてる際、画像の周囲に空白が開いてしまって困った経験はありませんか?
こういう現象↓


私は最初ころ見事にこの現象にハマりました…今回はこの現象について少し。
なぜ空白があいてしまうのか!?そこにはこんな罠が仕掛けられています。


■例■
imgをアルファベットに例えてみます。
「blog」の「g」のみが線からはみ出していますよね?
空白を作っている正体はこの「g」の部分なのです。



私が知ってる解決策は
-------------------
インライン要素からブロック要素にしてあげる(display:block)
(インライン要素・ブロック要素についてはgoogle大先生に聞いてみてください。)
縦位置をどちらかに統一させてあげる(vertical-align:bottom、vertical-align:top)
-------------------
等があります。



↓↓↓imgをブロック要素にしてあげる。↓↓↓




↓↓↓imgの縦位置を合わせてあげる。↓↓↓









わかりにくいですかね・・・ごめんなさい!

コーディングって一度ハマってしまうと「あっ!」という間に数時間過ぎてたりしますよね・・
いかに早く解決の糸口を見るけるか、機転を利かせるかが時間短縮に
つながっていくのではないでしょうか!
(何だかんだで一番早いのは知ってる人に聞く事なんですけどね。)

IEでボーダーが表示されない

2011年02月10日

IEでボーダーが表示されない

サイトのコーディングをして、ブラウザチェックをしていると、IEの不思議な現象によく悩まされます。

今回はグローバルメニューのボタンの両脇に設定したボーダーが表示されないという現象です。



IE6、IE7ではメニューの左から右にマウスを動かすとピンクのボーダーが消え、右から左に動かすとピンクのボーダーが表示される、という現象が起こりました。

このメニューは、背景に「ホーム」にあるピンクの画像とピンクのボーダーの画像を指定していて、それぞれのメニューボタンには白い背景のメニュー画像を指定しています。マウスオンしたときにメニュー画像が visibility: hidden; になり、白いボーダーを両サイドにつけるようになっています。

<div id="globalMenu">
<ul class="clearfix">
<li><a href="/" title="ホーム"><img src="btn0.gif" alt="ホーム" /></a></li>
<li><a href="menu1/" title="menu1"><img src="btn1.png" alt="menu1" /></a></li>
<li><a href="menu2/" title="menu2"><img src="btn2.png" alt="menu2" /></a></li>
<li><a href="menu3/" title="menu3"><img src="btn3.png" alt="menu3" /></a></li>
<li><a href="menu4/" title="menu4"><img src="btn4.png" alt="menu4" /></a></li>
<li><a href="menu5/" title="menu5"><img src="btn5.png" alt="menu5" /></a></li>
</ul>
</div>

今回は、<a>要素に指定したボーダーの動作がおかしいので、その親要素にあたる<ul>にスタイルシートでwidthを指定すると所望の動作をするようになりました。

ボーダーが表示されない現象に探してみると、いろいろな記事が見つかりますが、今回の現象は

Peek-a-boo(いないいないばあ)

というバグのようです。

こちらの記事に、この現象についてまとめてありました。

何回コーディングをしていても、毎回IEの動作に悩まされます。。。

過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 1人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ