サンプルサイト
Web Studio AttachmentでどんなWebサイトを制作できるのか、以下のサンプルサイトを参考にしていただければと思います。 下層ページまではご用意したおりませんが、ページ内のアンカーリンクに移動する動きやスクロールしたときの動き、レスポンシブ対応などをご確認いただけますのでぜひチェックしてみてください！
※サンプルサイトの店舗名、所在地、メニューなどは全て架空のものです。
カフェサイト
＜特徴＞
1カラムでサイドバーが無く、要素が縦に並ぶシンプルな構成のサイトです。縦にスクロールすると、ヘッダー部分にナビゲーションが追従して現れます。
メインビジュアルのナビゲーションはシンプルに文字だけを重ねたいけど、その他の箇所では視認性を良くしたい場合に、背景色をつけたナビゲーションを付ける、といったことができます。
お知らせはカード型表示にし、メニューはシンプルにテキスト情報のみ、メニューや店内の雰囲気は「GALLERY」の写真でイメージを膨らませてもらう設計です。
ひとつひとつの商品のビジュアルを強調するよりも、お店全体の雰囲気を感じてもらいたい場合に有効です。
※画像をクリックするとサンプルサイトを見ることができます。
ヘアサロンサイト
＜特徴＞
トップに固定されたナビゲーションメニューをはじめ、黒の半透明な背景色を活かしたデザインが特徴です。全体の配色も落ち着いた雰囲気で、フォントも細めのすっきりとした明朝体なので全体的に大人っぽい印象を感じられます。
「Hair Style」の箇所はスライダー画像になっており、スタイルサンプルがゆっくりと流れ続けるようにしています。店舗のイメージ写真をスライダーで表示したりしてもいいですね。
※画像をクリックするとサンプルサイトを見ることができます。