imasashi.net

山中一毅(サックス奏者,作曲者)公式ウェブサイト制作しました

Kazuki Yamanaka website

Kazuki Yamanaka Official Website

ニューヨークでサックス奏者として活躍をしている山中一毅が1stアルバムをリリースするということで、彼のオフィシャルウェブサイトを制作しました。
知り合いのミュージシャンの中でも最大級に応援している彼から幸運にも依頼してくれたということで、自分の持ってるウェブサイト制作の知識を総動員して頑張って制作しました。

構成:
冒頭のYoutube映像を流しっぱなしでコンテンツを見られるように、今流行のロング1ページ構成に。その上で、バイオグラフィやライブ情報などの系統の異なるコンテンツを、それぞれ異なるレイアウトで飽きさせないように工夫したつもりです。

デザイン:
すごくシンプルにしてcssのアニメーションで工夫を持たせようとしたのですが、いやはやどうしてめちゃくちゃ難しかったです。Awaaardsのサイトを見まくったりしましたが、やっぱり素人デザイナーには限界があることを痛感しました。いくら参考にしても詰めの甘さを感じます。

コーディング:
技術的なポイントとしては(あくまで俺的に、ですが)…

  • cssだけで作るモーダルウィンドウ
  • css3のアニメーションの利用
  • サイズ可変要素の上下左右センタリング(これが一番感動した)
  • カルーセルの実装

あたりです。もちろんスマホ対応はレスポンシブ。javascriptはブラウザ幅で利用するスクリプトを使い分けています。

Credits:
Clident:山中一毅
Design:いまさし
Coding:いまさし
URL:http://kazukiyamanaka.com