来月1日からスタートする、神宮前ギャラリー「鹿展 vol.4」の作家さんを紹介する特設サイト鹿展 Creators List Vol.4を公開！

今回の鹿展は細密画が多いので作品を大きく見せたいとのリクエストがあった。そのためSwiperを使ったフルスクリーンのサイトを作成。Swiperはレスポンシブ対応はもちろん、スマホのタップ＆スワイプ操作にも標準対応してくれている。Jqueryに依存しておらず、設置も簡単なのでとても使いやすいスライダーだ。

今回のデザインで重点を置いたのは「作品の魅力を損なわずにそのまま伝えること」である。PC版は作品全体をフルスクリーンで表示することができるが、スマホやタブレットなど縦型の端末で表示する際にはどうしてもトリミングする必要がある。そのため、それぞれの作品の構図に合わせて、なるべく自然な形でトリミングされるように切り取り位置を個別設定した。

また、コンテンツの文字色も背景画像となる作品の色味に合わせながら、コントラストを保ちつつ作品に馴染む色を個別設定した。作品を見せることも大切だが、ユーザが求めているのは作家の情報なので、それらのコンテンツが読みにくくなってしまっては本末転倒になってしまう。

スタイルシートでは、最初に全スライド共通のスタイル設定を行った上で、作家一人一人個別にスタイル設定をしている。

/* -- 共通の設定 -- */ 
.swiper-slide {
      font-size:1em;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 40px 60px;
}
.swiper-slide .swiperbox{
      background-color: rgba(255, 255, 255, .6);
      width: 480px;
      padding: 20px;
}
〜　中略　〜

/* -- 作家1の設定 -- */ 
.artist1{
  /* -- 背景に使用する画像を設定 -- */      
  background-image: url(../images/02.jpg);
  background-size:cover;
  /* -- 背景画像の表示位置（この場合は上下中央揃え） -- */
  background-position:50% 50%;
  /* -- 使用するフォントカラーを設定 -- */
  color:#474747;    
}

CCSアニメーションはcssanimationを、ボタンホバー時のアクションはhover-cssを使用。どちらもちょっと面白いアクションを簡単に実装できるありがたいリファレンスだ。

今回は神宮前ギャラリーへの出品は初めてというニューフェイスの作家さんが多い。どんな展示になるか今から楽しみだ。

ゴールデンウィークはぜひ神宮前ギャラリーの鹿展へお立ち寄りください。

鹿展 Creators List Vol.4

鹿展とは