栄のイベント情報を一覧で見られる情報サイトです。

 

このサイトのポイント

投稿された写真がメインとなるため、弁当箱グリッドを使用しリズム感を出したデザインにしました。

この弁当箱グリッドでは、以下のように各画像をほぼ正方形、縦長、横長にトリミングしたものを組み合わせて行きます。

 

 

ポイントとしては、画像のトリミング位置で、サーバーサイドで機械的にトリミングすると、本来画像として見せたい部分が切れてしまう可能性があります。

そのためには、以下のように画像のトリミング位置もユーザーが指定できるようにしたいということになりました。

 

 

そこで、制作したのが、管理画面上で、マウス操作で簡単に３種のトリミングを行う仕組みです。

 

 

このようにして、各画像ごとに３種のトリミングパターンを用意し、以下のように投稿枚数に応じて、レイアウトパターンを複数作成しておいたものから自動でパズルのように組み込むような仕組みになっています。

 

一見とてもシンプルに見えるトップページですが、裏側ではトリッキーな動きになっています。