僕が所属しているアカペラバンドのひとつにおーだーめいどカンタービレ♪というバンドがあるのだが、そのバンドのホームページを作ってみた。
といっても、テンプレートを流用しただけなんだけどな！！！
おーだーめいどカンタービレ♪
使用させていただいたテンプレートは、 HTML5up の Prologue というテンプレート。
Prologue | HTML5UP
1ページ内にすべて収まっているパータンが最近マイブームなので、これをチョイス。
フリーライセンスだけどクレジットつけたままにしといてね♡ってことらしい。
配色に関してはこちらのサイトを参考にした。
ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集
今回のサイト作りで色々学びました。
たとえば、質感。紙のような質感を出すために、背景色の上に透過するぼつぼつした画像をマスクしてたりする。
こんなかんじのやつ。
あと、ボタン。
下の画像の赤い部分は、左と右、どっちも同じ色に見えませんか？
これですね、実は右のほうが明るい色なのです。錯視の一種なのかな…？詳しいことはわからないのですが。。
それと、Youtubeのリンクを途中から再生させる技。これは簡単。
埋め込みコードをこんな風にyoutubeからひっぱってきて、
[html]
<iframe width="189" height="141" src="//www.youtube.com/embed/wv1AHYJ5Fls" frameborder="0" allowfullscreen></iframe>
[/html]
ソースリンクのお尻に
[html]
?start=(始めたい場所の秒数)
[/html]
を書くだけでおｋ。
つまり、
[html]
<iframe width="189" height="141" src="//www.youtube.com/embed/wv1AHYJ5Fls?start=2220" frameborder="0" allowfullscreen></iframe>
[/html]
こういうこと。べーんりー。
あと、文字はWebフォント使ってます。
M+ FONTS
自分のHPで使わせていただこうと思って見つけてきたフォントだったのだが、先にこっちのページが完成してしまった……笑
そんなもんですかね。結構イメージ通りのものが出来たので満足です。