デザイン候補の一覧(8案)
同じ文章と同じ写真で、見た目(基調)だけを変えています。文章や写真の良し悪しではなく、全体の雰囲気で1つ選んでください。
見方: 各案のボタンから次を開けます。
- 英語トップ: 海外の人が最初に見る画面
- 由緒: 神社の歴史のページ
- 注文: お守りを選んで注文するページ
- 繁體中文・日本語: それぞれのトップ
写真は神社の今のサイトから借りた仮のものです。本番は撮り直します。
値段・品目・送料はまだ仮です。
1 案1
白地に品を整然と並べる、落ち着いた贈り物の店の見た目。
作った側のメモ(参考との残った差)
- 「写真左・灰地右」の組が続くだけで、参考の写真タイル格子(願いの言葉のタイル)が無い
- ヒーローの白い副文が竹・屋根の細かい模様に重なって読みにくい
- 繁体字・日本語のヒーローに説明1文と下線リンクが無い
- 見出しが全部斜体(参考は特集だけ斜体)
- 注文: 写真が灰の枠の中で二重の地に見える。見出し帯の右半分に絵・写真が無い。スマホで一言が3行になり間延び
- スマホのヘッダーの影が2要素、Menu に枠と影(参考は線のアイコン)
2 案2
えんじと生成りの、手紙のような上品な見た目。願いの意味を一つずつ語る。
作った側のメモ(参考との残った差)
- 注文: 絞り込みボタンが全幅のえんじ塗りで大きい(参考は小さな札)。見出し帯が約420pxで、最初の画面に品がほぼ見えない
- 繁体字・日本語のロゴの漢字がゴシックに見える
- 由緒ページの白いロゴ・ナビが明るい屋根と空に重なって読みにくい
- トップのカードが3列で隙間あり(参考は4列・隙間なし)。参考の「新着の商品並び」が無く、年表を足している
- リンクの hover が無い/一瞬で切り替わる。スマホのメニューの開閉は未確認
3 案3
暗い色の写真を大きく使う、静かで少し神秘的な見た目。
作った側のメモ(参考との残った差)
- 注文(スマホ): 絞り込みの帯が右にはみ出して最後のボタンが切れて見える(横送りだが分かりにくい)
- トップの御守タイルのラベルが約11pxで小さい(参考は約28〜30px。固定値の取り違えの可能性)
- 写真と文字の分割ブロックが3つ続く(参考は1つ)
- 写真が青みがかって強く暗い。注文の見出しの本文が明るい写真の上で読みにくい
- 繁体字・日本語のボタンの漢字が小さく太字で潰れる。選択中の絞り込みが黒塗り
4 案4
白地に朱が1色だけ。写真と短い文を交互に置く、端正な見た目。
作った側のメモ(参考との残った差)
- 注文(スマホ): 絞り込みの最後の札が右端で切れ、選んでいる札が見分けられない
- トップの白い大見出しに注連縄の赤白の紐が重なって読みにくい。スマホのロゴの小さな英字が明るい空に重なって読めない
- 「See more」の朱の下線が伸びる動きが出ていない。写真の 1.03→1 の動きは未確認
- 年表に朱の線を足している、ナビに現在地の下線、フッターが簡素(参考は4列)
5 案5
紙色の地に写真と短い文だけ。説明を控えて写真で見せる見た目。
作った側のメモ(参考との残った差)
- ナビが横一列で四角い枠に囲まれ、スクロールで流れる(参考は右上固定の縦書きメニュー)。スマホでは枠付きナビが言語切替・縦書きの社名と重なり気味
- 注文: スマホの最初の画面に品も絞り込みも出ない。desktop も見出し帯が約420px
- 注文の写真が列の幅より小さく、札が写真の外に黒塗りで付く
- トップのギャラリーが横長から始まる(参考は縦長から)。文字の出現の動きが全節に付いている(参考は1か所)
- 「Read more」の1文字ずつの波の動きは未確認
6 案6
黒地に大きな「1200」と社名。年数そのものを見出しにする、目を引く見た目。
作った側のメモ(参考との残った差)
- 繁体字・日本語の最初の画面で段落の下が約250px空き、巨大ロゴが全幅になっていない
- 社名が小ロゴ・見出し・巨大ロゴで3回くり返される(参考の見出しはロゴと別の言葉)
- 注文: カードが枠付きの箱に写真が小さく入って二重枠に見える。スマホで絞り込みの3つ目が右端で切れる
- トップ「The shrine's story」に本文とボタンが無く空きが大きい。由緒の横スクロールに写真の無い文字だけの箱
- 巨大ロゴに差し色が無い、主ナビの非選択項目が灰色
7 案7
生成りの紙の色と淡い緑。手作りの案内のような、やわらかい見た目。
作った側のメモ(参考との残った差)
- 注文: 3列が左に寄り右側が空く(参考は全幅)。見出し帯の写真が小さな額縁
- トップの写真が画面に固定されず、紙色のカードが地に溶けて枠が見えない
- スクロール後のヘッダーが透明のまま文字に重なる(参考は紙色の帯)
- カードで一言が品名より目立つ。スマホのお知らせカードの文字が途中で切れて読めない
- 写真の無い番号カードが片側に浮いて空きができる
8 案8
白と黒だけの飾りのない見た目。名前と願いの一行で選ばせる。
作った側のメモ(参考との残った差)
- 商品カードの写真が列幅より狭く、札が写真から離れて浮く。写真と文字の間が空く
- 注文(スマホ): タブが右端で切れ、送れる印が無い
- カードで一言が名前より目立つ(参考は名前が一番目立つ)。カードの hover の動き(写真切替・カート帯)は未確認/無し
- トップ下半分が文字の区切り4つで文字が多い。スマホの最初の画面で竹林の上の白い文字が読みにくい
- スマホのヘッダーで社名と言語がくっつく。由緒ページのヘッダー下に白い帯