Yukiyanagiな日々

趣味で創作活動しています。野生動物、北方狩猟民大好き。創作活動の報告や、日々思うことを綴ります。

やってみたかったこと

昨日から2016年度がスタートしましたね! 新社会人の方も多いと思います。皆様お花見には行かれましたでしょうか。

という挨拶はこの辺で。今日はまたWEBデザインについて書きます。ずっと前からやってみたいなあと思いつつもなかなかやれずにいた事なのですが、会社で新しいWEB事業をやることになった、また素敵な無料素材サイトを見つけた、ということでやってみました。

ですが、今回ご紹介する内容はあまり仕事とは関係ありません。画面いっぱいにダイナミックにコンテンツを見せるデザインなので、企業で使うサイトのデザインとしてはふさわしくありません。むしろ映画やゲームとか、趣味とかのサイトに向いているでしょう。
でもデザインを作る側としてひとつでも引き出しを増やしておきたいし、私の場合WEBデザインは仕事と趣味の両方でやるので、面白そうなことはどんどんやっていきたいと思います。それに新しい手法を学ぶことで、いままでよくわかっていなかったことについて再認識できる、他のデザインを作るときにも大いに役立つ知識を得ることが出来ます。


やってみた① 背景に動画

demo1.jpg
» DEMO

背景一面に動画を配置したデザインです。CSSのみで実装しました。動画をvideoタグでフルスクリーンになるよう高さと幅を設定し(min-width: 100%; min-height: 100%; width: auto; height: auto; とする)、z-index: -1;で重ねる順番を下げます。(数字が大きいほど上に重なります)あとはお好みでdivとかに透過背景をつけて文字を入れればよし、って感じですごくシンプルです。

ただし、この動画はiphoneやiPadでは動きません。このデザインを紹介しているサイトでもその辺については触れていませんでした。なので動く動画背景を楽しめるのは今のところPC環境のみです!

載せている文は「トネリコの木立」というウェールズ民謡の歌詞です。All Angels(オール・エンジェルズ)という歌姫グループの一人、Laura Wrightさんの歌っている曲がすごくきれいでした。



やってみた② ヒーローイメージにグラデーションをかける

demo2.jpg
» DEMO

ヒーローイメージとは、WEBサイトでメインとなる画像のことです。画面いっぱいにメインとなる画像を背景として挿入し、そこにグラデーションをかけて実装します。もちろんこれもCSSのみ。#heroとしたdivタグにCSSで background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,1)), url(背景画像); でメイン画像を背景として入れ、グラデーションをかける。もちろんbackground-size:cover;で画面いっぱいに設定し、常に中央表示するようbackground-position:center center; と入れておきます。
ついでにタイトル文字にも影をつけておきました。(text-shadow:0px 0px 10px #333333;)

次に平文が入るページ下部にもグラデーションをかけます。黒から濃い赤へと変わるよう、background: linear-gradient(rgba(0,0,0,1), rgba(37,2,0,1)); としました。
その中にまたdivタグを入れ、そこで文字が入るスペースの位置と幅を指定しておきました。

また、今回このWEBページにはレスポンシブデザインを適用させました。スマホやタブレットで見たときに見やすい文字サイズ・レイアウトになるようにしています。(やり方は随分荒っぽいのですが)

こんな感じ
demo2-sp.jpg

載っている文はご存知の方も多いかと思いますが、ミュージカル「レ・ミゼラブル」の最後に歌われる「民衆の歌」の歌詞です。私の大好きな曲でもあります。しかし、使っている背景画像はドレスデン(ドイツ)なんですよね(^^;)ただ夕焼けの感じがカッコよかったので使わせてもらいました。



それで、2つのページを作るにあたり使用した画像や動画がPixabayという素材サイトから得たものなのですが(動画は2つほど他の素材サイトのを使用しました)、無料会員のままで、世界中の高品質な素材を、個人・商用利用可、クレジット表記不要、コピー・改変OKというすばらしいサイトです。
(このブログのテンプレートを作った方のサイトにて知りました)

私はこれまでもブログやサイト運営に当たりさまざまな素材サイトを利用してきましたが、素敵だと思ってもクレジット表記が必要だったり改変がダメだったり、クレジット表記が要らないサイトでは素人が投稿したダサい素材ばかりだったりマニアックなネタが無かったり、無料で会員登録できても高解像度の素材を得るためには有料会員にならなくてはいけなかったりと、いろいろ不便が多くありました。だから本当に望みどおりの素材が欲しけりゃ自分で現地に行って撮ってこいってことかと思ってたんですが、このpixabayというサイトは本当にすごいです。他の高額な素材サイトの写真に引けをとりません。



【追記・メモ】
今まで私はフリー素材のことを「著作権フリー」と呼んでいましたが、よく調べてみたところそれは正しくない言い方だということがわかりました。(中には本当に著作権フリー、すなわちパブリックドメインの素材もありましたが)
著作権フリーとは完全に著作権を放棄したもののことで、こんなに綺麗な写真や動画を提供する人が著作権を放棄したいのだろうかと不思議に思っていました。
しかし大抵の素材サイトでは、上記に示したようにいろいろ規約があったり、そうでなくても多くの場合「公序良俗に反する内容には使うことを禁止する」とあります。こういう制限がある場合、著作権は放棄していないってことなんですよね。
だから私が使っている素材の何が「フリー」かというと「ロイヤリティ(使用料)」がフリーなんです。かつてはデザイナーは素材を使うたびに提供者にお金を払わなくてはならなかったのですが(今でも高級な素材はありますが)、最近はそういう料金なしでいちいち許諾を得ることもせずに使える素材が増えています。(もちろん提供者もそれに同意した上で載せてもらいます)それが私がこれまで使ってきたフリー素材なのです。
こちらのリンクで詳しく→「著作権フリー」と「ロイヤリティーフリー」との違い | nanapi [ナナピ]


0 Comments

Add your comment