MENU

【サイト模写&観察】カフェ×モダン

2021 10/24
【サイト模写&観察】カフェ×モダン

めちゃくちゃ久しぶりの更新です…!
さっそくですが、サイト模写をして学んだことをまとめていきたいと思います。

素敵な見本サイト様:https://kalpa-wajima.com/

目次

PC版のデザイン模写

左が模写で右が見本です。写真もなるべく似たものを探して加工しました。

想定のターゲットと目的

ターゲット
輪島観光に訪れる30代前後の観光客。オーガニックな食材に惹かれる、落ち着いた雰囲気のカフェを好む人。自炊をするときは食器にもこだわりがあり、旅行先でお洒落な雑貨を探すのも楽しみのひとつ。

目的
輪島観光に来た人をカフェに呼び込むこと。サイトでカフェの魅力を伝えて行きたいと思ってもらい、まずはアクセスページへの流入を増やす。

気付いたこと(PC版)

MVとPICK UP

MVとファーストビュー

  • ファーストビューは背景と同じ黒から中央に正方形の画像がペラっと捲れつつ左に流れていくアニメーションでカフェの風景をチラ見せ。広めの余白、テキストも左下にさりげない一言にすることで写真を大きくしなくても目立つ。
  • MVからPICK UPにかけて、左下に余白を置くことで次のPICK UP左に視線を誘導する。
  • 右下に目立つアクセスボタンがあると行き方をすぐに調べられるので、CTAのアクセスページに誘導しやすい。

PICK UP

  • 黒背景の下38%に疑似要素で白背景を重ねて上のMVの背景がPICKUPに被っているように見せている。左に通り道を作ることでMVから目線が行きやすい。
  • PICK UPは画像はリンクだが、スマホだと要素は横スクロール。一枚以外は見切れでスクロールだとわかる。
  • マウスオーバーで画像は小さく、丸ボタンは大きくな動きで下層ページがあることを示している。

ABOUT

  • メインはコーヒーの画像で左のテキストエリアと画像、下のサブ写真と背景はブロークングリッドで雑誌風。
  • 「Learn More」の丸ボタンはマウスオーバーで円の線が一周する。10pxとかなり小さくても余白と動きですっきりと目立つ。
  • サブの写真と一言は全幅で3枚スライドで配置。width: 46.5%;の黒背景を置くことでコーヒー画像との繋がりを表現しつつ、上にスライド枚数も見やすく配置できる。文字の色も切り替わる。

MENU

  • 見出し、メニューは中央揃え。左に正方形の画像、右にテキストとサブ画像のエリア。
  • テキストエリアは上に余白があることで、まず画像に目線が行く。下にpaddingg-bottom:7%;余白を入れつつ、画像の下は3枚とも下に整列されていてすっきりした見た目。
  • 画像エリアの下に疑似要素で背景色と同じ色を入れることで画像エリアとテキストエリアが重なっているように見せている。
  • 値段は主張しすぎないグレー、小さめに配置。
  • 左上にメニュー名のアルファベットが円になって回転していて、動きが可愛いアクセントになっている。

PRODUCT

  • 食器、工芸品のカテゴリ(右上の数字)と商品自体の画像(下の5枚)という2種類のスライドの組み合わせ。スライドにすることでスペースが節約され1枚の写真を大きく見せてしつこくない。
  • 下層ページにはさらにカテゴリごと画像リンクがあるが、トップページでも商品のバリエーションを見せることでユーザーの興味を引く工夫がされている。
  • 商品数やカテゴリが多いときにスライドにすると、長くなりすぎず情報にまとまりが出て見やすい。

WAJIMANURI

  • 輪島塗の色を思わせるMVより暗くて重い黒を使うことで、他の薄い背景のセクションと一線を画している。他のカフェとの差別化にもなる内容であり、しっかり伝えたい内容なのかも。
  • 正方形のメイン画像の上には十字線。視線を集める?窓から覗いているように感じる?
  • 下層ページの内容を示す画像リンクが目次のような役目を果たしており、クリックでページ内リンクの箇所にダイレクトに飛べる。

ニュース

  • 左にニュースカテゴリを出してしまうことで、読みたい記事のアーカイブに直接飛べる。PICK UPと同じなので、ここは文字だけであっさりしている。
  • マウスオーバーで見出しの和文に下線が引かれる。

フッター

  • グローバルナビはマウスオーバーでくるっと一回転する。
  • padding: 145px 14% 150px;でロゴの分5px幅を狭めることで見やすくしている。

気付いたこと(SP版)

PCとスマホで見比べて気付いたことです。比較のために横並びにしてみました。

MVとPICK UP

  • 黒背景はheight: 667px;(iPhone6/7/8の高さ)にmin-height: 100%;とmax-height: 100%;をかけてスマホの高さいっぱいにMVが表示される。
  • PICK UPは1枚目と2枚目少しを出すことでスクロールを促す。

ABOUT

  • ABOUT→和文キャッチコピー→画像→本文→ボタンの順。キャッチと本文の間に画像が挟まることでテキストがダラダラ続くことなく読みやすい。
  • 左右に33pxの余白がありコンテンツは中央揃え、テキストは左揃え。
  • サブ画像は中央と左右にチラ見せして横スクロールできることを示す。

MENU

  • 左上に回るアルファベットのsvgを置くことでさり気ない遊び心のあるあしらいになる。
  • メイン画像→テキスト→サブ画像で長めのテキストも画像というワンクッションで挟むと読みやすい。
  • テキストエリアの白背景は画像に少し重ねると雑誌風になりさらにテキスト左右の余白が広くなって読みやすい。

PRODUCT

  • 右上に棒線と画像上に矢印。画像やテキストを邪魔しない程度に小さくスライドであることを示す。

WAJIMANURI

  • 縦長方形の画像は横長にして縦長になりすぎず各項目のリンクも隠さず下層ページに誘導する。

NEWS

  • カテゴリは上にまとめ、ブロックは中央揃え。

フッター

  • 上下左右に広めに余白を取ることで文字リンクを指で押しやすい。

その他全体メモ

フォント

欧文:Righteous
和文:見出しは見出ゴMB31Pr6N(モリサワ)、本文は自分のPCでは游ゴシック(FOT-筑紫A丸ゴシック Std R)

h2見出しは2.8rem(下線付き)、和文のキャッチコピーは1.8rem、本文は1.4remと低めのジャンプ率。写真の比率と余白を大きくとることで文字とのメリハリがあり、落ち着いた雰囲気に合っている。

h2見出し、メニューのあしらい、数字はRighteousで丸みのあるコロッとしたフォント。視認性が高い。大きく配置すると子供っぽさが出てしまうが、小さくするとサイトのモダンな雰囲気にも馴染む。

和文のキャッチコピーはゆとりのある行間、文字間をもたせている。

配色

カラーパレット(たぶん全部)を使われているセクションごとにまとめてみた図。
背景とコンテンツ内の色は近い色でまとめられている(暗い黒とグレーかかった黒、白と薄いクリーム色など)ようでした。
色数だけ見るとかなり多いですが、暗い色と黄みがかった明るい色で微細に調整されているのでメリハリと統一感があるんだなと思いました!

ボタン


主に下層ページのボタンと記事のボタンの2種類で統一されている。文字が小さくても余白、アニメーションで存在感を出せる。

ハンバーガーメニュー

  • PCでは左に見出し、中央に画像、右に連絡先・住所・SNSを表示。スマホでは画像が非表示になる。
  • 下からふわっと出現するアニメーションと見出しはマウスオーバーでくるっと回転+中央の画像は下層ページをイメージする画像に切り替わる。動きと画像が変わることで単調な目次にならず、見やすい。

構成

写真周りの余白を広めに、文字のジャンプ率を低めにすることで写真を魅力的に見せている。

大きめの正方形の写真
セクションでメインの写真。セクションごとに左右に振られていて目線の流れで読みやすい。背景が黒の時は左テキスト、薄い色のときは左に写真、右のテキストで統一。

横長長方形の画像
メインのサブ写真。

縦長長方形の写真
右に余白を開けて背景に少し暗めの同系色を敷く。

写真加工

写真をレトロ風にする

似た画像が見本と同じ雰囲気になるように加工しました。左が加工前、右が加工後です。

オレンジと黄色のグラデーションマップとマゼンタを上げたカラーバランスで暖かみを出し、明るさとトーンカーブを調整しました。

参考にさせていただいたのはこちらのサイト様。

STEP UP WEB|大阪のホームページ制作・作成サービス
【Photoshop】写真をかっこいいレトロ調に加工する方法
【Photoshop】写真をかっこいいレトロ調に加工する方法今回はSNSでもみかけるレトロ調の写真加工をPhotoshopで作成する方法をご紹介します。アプリやアクション…

まとめ

参考にさせていただきたい箇所がありすぎるサイトでした!
特に取り入れたいなと思ったのはこちらの3点です。

  • 写真の数を多く見せたいときは、メインとサブで画像を分けてスライドで表現するとメリハリができて見やすい。
  • 背景に少し濃い目・薄い目の色を重ねてブロークングリッドにするとフラットデザインに奥行きが出る。
  • PC版のハンバーガーメニューに画像を入れると視覚的にもわかりやすくする。

今回はここまで。それでは!

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる