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

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

2016年03月28日

はじめまして。solderです。

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


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


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



パリ・オペラ座


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

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


operaparis


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



ボリジョイ・バレエ団



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


bolshoi


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



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


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


NYcity


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



オランダ国立バレエ団


nl


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

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



新国立劇場バレエ団


national


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



まとめ


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


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


※2016年3月現在



text-shadowを使ってテキストを装飾

2015年08月24日

CSS3のtext-shadowを使って、文字に影をつけたり、縁取りをする方法をご紹介します豆電球

text-shadowは文字に影を付けるプロパティです。
text-shadow: 横方向 縦方向 ぼかし 影の色;

【影】
text-shadow: 2px 2px 4px #000;
simple way


【文字の縁取り】
text-shadow:
1px 1px 1px #444,
1px -1px 1px #444,
-1px 1px 1px #444,
-1px -1px 1px #444;
simple way

【縁取り+影】
text-shadow:
1px 1px 0 #bfbfbf,
1px -1px 0 #bfbfbf,
-1px 1px 0 #bfbfbf,
-1px -1px 0 #bfbfbf,
4px 4px 4px #000;
simple way

【光る文字】
text-shadow: 0 0 10px #fff;
simple way

【浮き出る文字】
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
simple way

【へこんだ文字】
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
simple way

工夫次第で、色々な装飾が実現できそうですハート

三角形の作り方

2015年04月21日

三角形はborder(枠線)を使って表現することができます。
borderの四辺に違う色を指定して確認してみましょう豆電球

【border:3px; を指定した、50pxの正方形】
width:50px;
height:50px;
border-top:3px solid #FF7FBF;
border-left:3px solid #FFFF7F;
border-right:3px solid #7F7FFF;
border-bottom:3px solid #7FFFBF;


【border:20px; を指定した、50pxの正方形】
width:50px;
height:50px;
border-top:20px solid #FF7FBF;
border-left:20px solid #FFFF7F;
border-right:20px solid #7F7FFF;
border-bottom:20px solid #7FFFBF;


中央の白い四角形(50px正方形)をなくすために
width:0px;
height:0px;
を指定してみましょう。

【border:20px; を指定した、0pxの正方形】
width:0px;
height:0px;
border-top:20px solid #FF7FBF;
border-left:20px solid #FFFF7F;
border-right:20px solid #7F7FFF;
border-bottom:20px solid #7FFFBF;


上記ピンクの三角形を表示させる場合、他の三角形をtransparent(透明化)で消します。
width:0px;
height:0px;
border-top:20px solid #FF7FBF;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid transparent;


下向き三角形の完成です。
もうお気づきでしょうが、右向き、左向き、上向き三角形も同様に作成できますねにこにこ
その他、border-width の値を調整すると、三角形のサイズも変えることができます。

お役立ちサイトとして
CSS triangle generator
では、頂点やサイズ、色を指定するだけで
簡単に三角形を作成することができます。

吹き出しや、簡単なアイコンなど作成する際に
使ってみてください犬

GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション

2014年09月16日

こんにちは。デザイナーの@です。

WEBサイトを作る際、ちょっとしたアニメーションにGIFアニメを利用すると面白い効果ができたりしますよね。
ただ、gifはjpgやpngに比べると使える色が限られるため画質の劣化が目立つのも気になる…ということで、CSS3のキーフレームを利用してコマ送りのアニメーションを試してみました!


.tsukubach-animation {overflow: hidden;width: 256px;height: 256px;background: url(http://img01.tsukuba.ch/usr/t/e/c/tech/20140916_2.png) no-repeat;-webkit-animation: jump 2s steps(23, end) infinite;animation: jump 2s steps(23, end) infinite;}@-webkit-keyframes jump {0% {background-position: 0 0;}100% {background-position: 0 -5888px;}}@keyframes jump {0% {background-position: 0 0;}100% {background-position: 0 -5888px;}}

左図のような1コマ1コマを繋げた画像を用意して、background-positionをずらして表示すると、コマ送りのアニメーションになります。

※background-positionの指定はパーセンテージだと上手く動かないようです。

魅力は何と言っても背景を綺麗に透過したPNG-24形式のファイルも、jpgも、svgもアニメーションに使えること!
頑張ってWEBサイトで魅力的に使いたい~ハート


writer : @

transformで回転したとき、ジャギるのを直す方法

2014年09月01日

最近、CSSのtransformで回転させる機会が増えてきましたが、
この前ちょっとした問題が発覚しました。

画像など回転させた時は問題ないのですが、
下記のような背景パターンのバーなどを回転させるとジャギってしまいました。





どうにかならないものかと調べてみたら、
簡単に直せる方法が見つかり、
transparentの指定方法をちょっと変えるだけでOKみたいです。

▼修正例
transform: rotate(-5deg);
 ↓
transform: rotate(-5deg) translate3d(0, 0, 0);

こちらを反映したのが下記になります。





translate3d は3D移動用のパラメータなのですが、
何故かこの指定でジャギるのが直るようです。

また、この指定方法はグラデーションの場合にも有効で、
下記の様になります。


【before】




【after】




こんな方法で直るなんて目から鱗でした。
最初に修正方法を見つけた人は本当すごいですね…
過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 1人
新規投稿

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

このページの先頭へ