【1日1サイトレビュー】#26 Tio Lunchin

■Tio Lunchin http://www.tioluchin.com/

スペインのケータリングサービスのサイト。翻訳機フル活用しました…

・全体的に黒×ベージュ×白で作られているサイト。トップのファーストビューからページ最下部までスクロールに合わせて調理器具や料理、食材の写真が立体的に並ぶ。背景に固定する写真、シャドウを付けて少し浮かせて見せる写真とを分けて動きが出ている。

・背景のベースカラー黒と食器の色を揃えていて、食材が引き立つようになっている。色合いは落ち着いているが写真のばらつきで賑やかに見せている。

・スクロールしていくと実際のケータリング準備の光景を動画で見せるコンテンツ有り。大きく横一面を使っている。Youtube等と違って動画再生、音量調節のボタンが右側にあるのが特徴的だった。右利きの人が多いから右側？

・画面左上のハンバーガーメニューにはスクロール先と同じコンテンツのリンクがある。ハンバーガーメニューを閉じたままでも左側にスクロールバーが出て、今どの部分を閲覧しているか見えるようになっている。こういうスタイリッシュなスクロールバーを作りたい…

・最後にはケータリングの実際の見積？フォームがあってこのページのゴールがここになっていることがわかる。

・フォント： DINpro、clicheregular、Arial
・カラー：ベースカラー黒#272727（ムラ有り）、アクセントカラーベージュ#D3A368、#CCA36E、ナビゲーションベージュ#A6865D、ロゴ白#FFFFFF