やっとムスリム向け日本食レストラン”HALAL SAKURA”様のWebサイトを公開しました。
いやー感無量ですね！東京のクライアントを相手に大阪から初めてフルリモートで全ての工程を終えることができました。
おめでとうございます！
そして前編に引き続き、Webサイトの制作工程を余すことなくレポートします。
Adobe XDとSketchで飲食店のサイトを作る【前編】ではワイヤーフレームはAdobe XDで作り、デザインはSketchで作るWebサイトの制作フローを紹介しました。
後編の今回はデザインを形にしていくコーディングについて詳しく書いていこうと思います。
今回の実装はどれもJqueryを使えば汎用的に使えるギミックなので、マークアップ初心者でも簡単に取り込んでいくことができます。
喜んでもらうにはアニメーションも含めてデザインする
アニメーションを使うことはリッチにカッコよく見せること以外にも、ユーザビリティ（UI/使い勝手）をよくするという大きな意義があります。コーディングではリッチなアニメーションを含めてWebデザインと言えるでしょう。
フロントエンドこそがデザインです。
デザインで物足りない部分は、アニメーションで語ることが可能です。
今回の案件『HALAL SAKURA』では以下の点にポイントを置いてアニメーションを実装しました。
そして実際にデザイン＆コーディングしたサイトはこれです。
アニメーションをなぜ使うか
アニメーションをつけたい理由は次の通りです。
- 料理の写真がメインのサイトなのでパララックスを使って立体的に見せたい
- スクロールをゆっくりに制御することで、じっくりと文章を読んでほしい
- 要素をフェードインさせて表示することでスクロールの退屈さを無くし、ページ下部へ促したい
要はエンドユーザーへの優しさですね。
では一つづつ見ていくことにしましょう。どれも干渉しあうことはないのでどなたもスムーズに実装できました。
写真をはっきりくっきり見せたい
今回与えられた素材写真はとてもクオリティが高く、コントラストとシャープさが際立っていました。
そして高解像度ということで、高解像度のRetinaディスプレイにも対応することができます。
写真を有効に見せるためにパララックスを使う
飲食店のホームページで一番重要なのは、この三つだと考えました。
- 料理の素材
- 料理の仕上がり
- 料理を作る工程
料理の写真を奥行きまで表現して、有効に見せるためにパララックスを使いました。
パララックスというのは画面スクロールのスピードと、画像が動くスピードを変えて視差効果を利用した見せ方です。
これによって奥行きが生まれます。
写真素材をもらってからの制作依頼だったので、料理の素材と料理の仕上がりは表現できましたが、料理を作る工程の写真素材がありませんでした。
だから、できるだけ写真素材がいろんな角度から見えるように工夫したい→パララックスを使って奥行きを見せるに行き着きました。
パララックスを使ったプラグインはたくさんありますが、これ決定版です。
詳しいRELLAX.jsの使い方は別のページで解説しています。
文章をゆっくり読んでもらいたい
言葉は読み手を安心させる最大のツールです。
中国人オーナーの日本食へ対する熱い想いを、カタチにすることが指名の僕です。
だからゆっくりと焦らずに文章を読んで欲しかったので、スクロールの量を調整しました。
スクロール制御のコードはこちらで公開していますので参考にしてください。
スクロールアニメーションはwow.js ＋ animate.css
この組み合わせはとっても古くから使っています。
スクロール着火をするJsのWOW.jsとたくさんのアニメーションをクラスをつけるだけで動かすことができるanimate.cssを組み合わせています。
animate.cssでアニメーションを設定し、wow.jsを使って画面に表示された瞬間にフェードインさせます
こちらも詳しい使い方はこちらのページで公開していますので、是非使って見てください。
まとめ：詳しいソースコード
今回は誰でも使えるプラグインを使って作りました。
最後にこれらのアニメーションを詳しく紹介しているページのリンクです。
気になったものがあったらソースコードをコピペして使ってくださいね。
- あわせて読みたい
- Adobe XDとSketchで飲食店のサイトを作る【前編】
- RELLAX.jsを使ってパララックスを表現する
- jqueryでスクロールのスピードを調整する
- wow.jsでスクロールアクションをトリガーにして画面に入るとフェードインで表示させる
どれも簡単なので、コピペだけで動きます。
いかがでしたでしょうか。
アニメーションのライブラリもスクロールのライブラリも、たくさん世に中に出回っているので、初めから自作しなくてもなんでも作れてしまいますね。
ほなね
