サイトレビュー#7「結婚式のWeb招待状DEAR様の招待状サンプル」

1.概要

純 & 瑞希's Wedding Invitation

今回はいずれ自分でも作りたいと思っている、結婚式のWeb招待状サンプルをレビュー。

「結婚式の招待状って紙じゃなくても良いんじゃない？」と思って調べてみたら、すでにWebで作れるサービスがあるんですね。

しかもすごいオシャレで素敵だなと思ったので、今回レビューすることにしました。

2.目的

・ゲストが結婚式に参加したくなるように

・新郎新婦や結婚式の雰囲気を事前に伝える

・結婚式の詳細をわかりやすく知らせる

・出席、欠席の返信をハガキより楽に済ませる

3.デザインと印象

・メインビジュアルはタイトルが筆で書かれるようなアニメーションをしてから、写真がフワッと入れ替わる。「何が始まるんだ？」と思うようなワクワク感のあるアニメーション。

・ナビゲーションはスクロールすると右側でついてきて、上に配置しないことで画面を邪魔しない。

・メッセージはスクロールするとメインビジュアルの上に黒透明な背景と共に出てくる。背景をグラデーションのひとつなぎにすることで、物語のような繋がりが感じられる。

・プロフィールは顔写真と海の写真を重ねたり、波のマークや貝のイラストをのせることで立体感が生まれている。文章以外をきっちりレイアウトしないことでラフさが表現されている。

・カウントダウンで背景を変えることで結婚式の日付を印象づけるのと、一旦区切りを入れて飽きさせない。

・結婚式の詳細は、結婚式場のURL、Google マップを置くことで情報を最低限にしてわかりやすく。また情報をずらして配置することで単調にならない。

・背景の色がアニメーションさせることで飽きさせない。

・返信欄は出席・欠席の印がただの丸ではなくカモメと海のマークがついていて、細かいところにもデザインの工夫が見られる。入力欄は画面いっぱいに広げないことでコンパクトになっている。送信ボタンは背景と同じ色のグラデーションにして統一感を。

4.Color

White、Green、Blue

海をイメージする爽やかな配色

5.Font

・Playfair Display：おしゃれな印象

・Oswald：飾りがなく邪魔しない

・FOT-筑紫A丸ゴシック Std：丸みがあって優しく読みやすい

6.レスポンシブ

・全て縦並びの中央配置になる。

・ナビゲーションはハンバーガーメニューに。

・結婚式の詳細や返信欄は元々縦並びにしやすいレイアウトなので、違和感がない。

・結婚式当日はスマホで招待状を確認するので、先にスマホから作っているのかもしれない。

7.おわりに

オシャレと思わせるデザインには色々な工夫がされていることがわかりました。

私もこんなオシャレでワクワクするようなサイトが作れるように頑張ります。

最後まで読んでいただきありがとうございました。