先日週末に開催された、新宿のクラブ・カフェのアニバーサリー特設サイトを制作させていただきました。
「color」ANNIVERSARY PARTY 特設サイト
ブレイクポイント１箇所のレスポンシブ仕様です。
制作期間：３日間（デザイン・コーディング全て含む）
 
かなりタイトな制作スケジュールのため、基本は手書きのワイヤー程度に留めました。
また制作着手時点においてメインビジュアルとなるフライヤーデザインが無かった為、フライヤー完成後のビジュアルと極力乖離をしないよう、デザインの部分においては極力手を入れず、また制作の工数削減の為、Photoshopなどを使用した作業においてはかなり省略しました。代わりに「構成」の方に重きを置きました。
 
今回、３日間に渡ってイベントが開催されると言うこと。どの日付も同じくらいプライオリティーが高く、それぞれの日程でテーマとなる「色」を決めていることから、コンテンツを３等分にした画面構成にしました。エフェクトとして、対象日のコンテンツにカーソルを合わせると、コンテンツの横幅が広がりホバー前と後で表示内容が切り替わる仕様になっています。

縦幅は固定し、コンテンツ内でスクロールさせる仕様です。

サイト全体は基本的に、３等分のグリッドで制作、レスポンシブでスマホサイズになると全て１カラムになります。
 
今回の苦労ポイントは、３日間のコンテンツ部分（黒・白・桃）をどうコーディングするか、非常に頭を悩ませました。　display:flex　を使えば簡単に横並びになるのですが、それだとホバー時にコンテツを広げて表示させたりする部分がうまくいかなかったりしたので、コンテンツはそれぞれ　poision:absolute　で位置を固定させています。
コンテンツ部分は　width: calc(88%/3)　で指定することで、画面サイズに対してきっちり３等分になります。（横幅の余白を2%（計12%）取っています。）
また、ホバー時はこのままだと他のコンテンツに隠れてしまうので、z-indexで重なりを他のコンテンツより上に表示するように指定。
加えて、ホバー時のエフェクトに　transition: all 300ms 0s ease;　を加えてあげることで表現をより自然な感じに滑らかにコンテンツが広がるようになっています。
（細かいところではありますが、一応Retina画面も意識して画像を切り出して制作しました。）

 
[画面サイズ767px以下]