ai pinoli(アイピノーリ)オープン

先月ロゴデザインのお仕事をさせていただいた熱海のジェラート屋さんai pinoli(アイピノーリ)がオープンしたので行ってきた。

ai pinoli

ai pinoliは熱海駅前のイタリアンLEONE9に併設されており(オーナーシェフはいずれも相松敏彦さん)、ジェラートやドリンクのテイクアウトが可能。

濃厚なチョコレートや風味豊かなピスタチオなど、素材そのものの味が際立ったジェラートでとても美味だった。

ロゴマークはオーナーシェフのご要望で「松ぼっくりの置物」をモチーフにしている。シチリア島では松ぼっくりの置物が幸運を運ぶものとして愛用されているそうだ。

この松ぼっくりの置物をaiの中に入れる事で店名であり、オーナーシェフの苗字でもある「ai(相)」と「pinoli(松)」を集約して表している。

神宮前ギャラリー更新

神宮前ギャラリーサイトに5月のイベント情報を掲載。

鹿展Vol.4
開催期間:2019年5月1日(水)〜 5月6日(月)

神宮前ギャラリー企画「鹿展」を開催します。様々な分野で活躍する作家7名の「鹿」作品を展示します。
個性豊かな鹿たちをお楽しみください。

神宮前ギャラリー鹿展vol.4

鹿展Vol.4特設サイト公開

来月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を使用。どちらもちょっと面白いアクションを簡単に実装できるありがたいリファレンスだ。

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

神宮前ギャラリー鹿展vol.4

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

鹿展 Creators List Vol.4

鹿展とは

神宮前ギャラリー更新

神宮前ギャラリーサイトに4月のイベント情報を掲載。

「さあ…」ワンダーランド
開催期間:2019年4月3日(水)〜 4月4日(木)

クウェートからやってきた女性アーティストBedour Ahmed(ブドル・アームド)とThuraya Lynn(スラヤ・リン)による二人展。
2日間だけの展示となっております。お誘い合わせの上ぜひご来場ください。

さあ…」ワンダーランド Bedour Ahmed & Thuraya Lynn

前田恵里 個展「Sceneries of Light」
開催期間:2019年4月12日(金)〜 4月15日(月)

「Sceneries of Light」と題した今回の個展では、新作オブジェ・アクセサリーを中心に展示いたします。光の透過によって作り出されるガラスの中の景色をお楽しみください。

前田恵里 個展 Sceneries of Light

神宮前ギャラリー更新

神宮前ギャラリーに3月のイベント情報を追加。

失恋予報
開催期間:2019年3月21日(木)〜 3月26日(火)

切なさ満点のポートレイト写真作品が多数展示されます。展示作品を収めた写真集を販売予定。
3/23(土)には写真家藤里一郎氏とのトークイベントも開催。

そして、本日から20日までは、女子美工芸専攻の7人によるテキスタイル展「PATTERN RHYTHM」が開催されます。

神宮前ギャラリーサイト更新

神宮前ギャラリーに11月、12月のイベント情報を追加。

秋草 愛 作品展『北のいきもの』
開催期間:2018年11月30日(金)〜 12月4日(火)

ほっきょくぐま、アザラシ、ラッコ、エトピリカなど「北のほうに住むいきもの」の立体作品展。
カレンダーや来年の干支、いのししの置き物もあるそうです。

秋草 愛 作品展『北のいきもの』


nacoo’s world in CHRISTMAS 2018
開催期間:2018年12月8日(土)〜 12月9日(日)

nacco’s FACTORYのテディベア展が開催されます。クリスマスオーナメントで飾られた心温まる空間をお楽しみください。

nacco's FACTORYのテディベア

鹿展Vol.3特設サイト公開

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

神宮前ギャラリーサイト更新

神宮前ギャラリーサイトに10月のイベント情報を掲載しました。

この秋、鹿好き&鹿マニア必見のイベント、神宮前ギャラリーの企画展「鹿展Vol.3」が開催されます。

鹿展Vol.3
開催期間:10月4日(木)〜9日(火)
開廊時間:12:00〜19:00(最終日は17:00まで)

鹿をモチーフとしたイラストや立体作品、彫刻、鹿革製品など様々なジャンルの「鹿作品」が並ぶグループ展です。
鹿イラストのポストカードや、鹿柄のマステ、鹿革の靴など、ここにしかない鹿小物に出会えます。

出品作家さんについてはCreators List Vol.3をご覧ください。

関連サイト

鹿展

Creators List Vol.3

神宮前ギャラリーサイト更新

神宮前ギャラリーに9月のイベント情報を追加。

CHOI JEEHYUN-TAKAHASHI AYAKO 二人展
開催期間:9月14日(金)〜19日(水)

女子美術大学大学院ファッションテキスタイルの2名による作品展。
学んできた環境や好みが異なる二人が、それぞれの考える新しい服のカタチを表現します。


おのおの、展
開催期間:9月20日(木)〜25日(火)

絵描き、イラストレーター、オートマタ作家の三人による作品展。モチーフも材料も、ジャンルも作風もばらばらな3人が、おのおのの個性溢れる作品を自由に展示します。