サンプルサイト

Web Studio AttachmentでどんなWebサイトを制作できるのか、以下のサンプルサイトを参考にしていただければと思います。
ページ内のアンカーリンクに移動する動きやスクロールしたときの動き、レスポンシブ対応などをご確認いただけますのでぜひチェックしてみてください!

  • サンプルサイトの会社名、店舗名、所在地、人物名、メニューや価格などは全て架空のものです。
  • また、サンプルサイトのお問い合わせフォームは見た目のみで実際の送信はできません。

ピアノ教室

<特徴>

グランドピアノの形で切り抜いて、次々に画像が変化していくメインビジュアルが最大の特徴です。
このようにお好きな形で画像を切り抜く演出も可能ですのでご相談ください。
背景画像には音符を散りばめ、丸ゴシックのフォントを主体としてロゴのアルファベット部分は手書き風にしたり、写真などを丸みを帯びたボックスで囲んだりと、全体的に柔らかく親しみやすい印象のWebサイトです。
スマートフォン表示の際のハンバーガーメニューをクリックした時のメニュー展開も、ボタンを中心に円が広がるような演出にしており、サイトの雰囲気とマッチさせています。
お申し込みフォームは4ページに設置しておりますが、共通のものを使用しているため、フォームの費用は1個分だけですみます。
保育園や子供を対象とした施設のWebサイトにも最適なデザインのテイストです。

工務店

<特徴>

ブレイクポイントを1100px、最大幅は1920pxに設定し、画像をダイナミックに見せるWebサイトです。メインビジュアルは住宅購入で実現できる暮らしをイメージできるような写真をフェイドインするスライダー画像でアピールしています。
住宅購入を考えられている方は自宅でゆっくりと検討されることも多いかと思いますので、大画面で見たときに広々とした住宅空間を感じられるように設計するのが有効です。
もちろんスマートフォンで見たときにも崩れることなく情報を見やすくしております。
施工実績の投稿機能やお問い合わせフォームを実装しています。

ヘアサロン

<特徴>

トップに固定されたナビゲーションメニューをはじめ、黒の半透明な背景色を活かしたデザインが特徴です。全体の配色も落ち着いた雰囲気で、フォントも細めのすっきりとした明朝体なので全体的に大人っぽい印象を感じられます。
「Hair Style」の箇所はスライダー画像になっており、スタイルサンプルがゆっくりと流れ続けるようにしています。店舗のイメージ写真をスライダーで表示したりしてもいいですね。
※2025/05/17 下層ページを追加しました。

カフェ

<特徴>

1カラムでサイドバーが無く、要素が縦に並ぶシンプルな構成のサイトです。縦にスクロールすると、ヘッダー部分にナビゲーションが追従して現れます。
メインビジュアルのナビゲーションはシンプルに文字だけを重ねたいけど、その他の箇所では視認性を良くしたい場合に、背景色をつけたナビゲーションを付ける、といったことができます。
お知らせはカード型表示にし、メニューはシンプルにテキスト情報のみ、メニューや店内の雰囲気は「GALLERY」の写真でイメージを膨らませてもらう設計です。
ひとつひとつの商品のビジュアルを強調するよりも、お店全体の雰囲気を感じてもらいたい場合に有効です。