カテゴリー: 新着情報

来月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

鹿展とは

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

今回も作品提供ができない分、サイトの方で応援させてもらう。CodyHouseの2-blocks-templateをベースに、上下にスライドする、2カラムの日めくりカレンダー的なサイト（SP版は1カラムのブロックメニューとなる。）を作ってみた。

2-blocks-templateは、左ブロック下部にあるナビゲーションボタンを押すとコンテンツが左右にスライドしていく設定になっている。これをボタンクリックで左ブロック下方向に、右のブロックは上方向にスライドしていくように変更した。

まず左ブロックに配置されているナビゲーションボタンを中央に縦並びで表示する（形状も丸にした）ようにスタイル設定を変更。

次に右ブロックの背景も、左ブロックと同じようにコンテンツごとに切り替わるように、list要素にスタイルシートを追加。

.cd-content-list > li{
  background: rgba(28,28,28,0.5);
}
.cd-content-list > li:nth-of-type(2) {
  background:url(../img/img-2.svg) no-repeat center center;
  background-size:70%;
}
　　　〜　以下省略　〜

そして、左右のブロックにtranslateYを使って上下方向への動きを設定する。

左ブロックの設定

   /* image block(left block) */
  .cd-image-block > ul > li {
　　　〜　途中省略　〜
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
  }  

  .cd-image-block > ul > li.is-selected{
    /* this is the visible item */
    position: absolute;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  .cd-image-block > ul > li.move-turn{
    /* this is the item hidden on the avobe */
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }

右ブロックの設定

    /* content block(right block) */
  .cd-content-block > ul > li {
　　　〜　途中省略　〜
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
  }

  .cd-content-block > ul > li.is-selected {
    /* this is the visible item */
    position: absolute;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  .cd-content-block > ul > li.move-turn {
    /* this is the item hidden on the bottom */
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }

スライドの方向を変えるだけで、サイトの印象は大きく変わる。それがスタイル設定だけでできるのだから、CSS3は便利だし面白いなと思う。
ちなみにトップページのもみじの落ちるアニメーションもスクリプトは使わず、CSS3のみ。

鹿展 Creators List Vol.3