知人からの相談と、最初の不安
きっかけは、知人が営む熊本のDJバー「Good Music Bar Mellow Mellow」のホームページ制作の相談を受けたことでした。
私自身、実際のお客様のために、本番公開するサイトを作るのは2度目。
正直なところ、「自分に務まるだろうか」という不安の方が大きかったのを覚えています。
ただ、頼まれたのは単に「ページを用意すること」ではありません。
「お店の雰囲気や、そこで過ごせる時間の魅力を、初めて知る人にも伝わる形にすること」。
音楽好きな大人が自然に集まれる場所。
その空気感を、どう画面の中で表現するか。
これが今回の制作で、一番向き合った課題でした。
制作の流れ。配色決めから骨組みづくりまで
制作は、WordPressとSWELLテーマをベースに、段階を踏んで進めました。
まず取り組んだのは、配色とトーン＆マナー（サイト全体のデザインの雰囲気）の方向性を決めること。
お店のビジョンに合わせて、ダークな背景にゴールドを差し色にした、落ち着いた配色に決めました。
次に、HERO・ABOUT・INFOなど、ページの土台となるセクションのデザインを固め、見出しのスタイルやフォントを統一。
そこから月替わりの企画「THIS MONTH」やイベント情報、お知らせ「NEWS」など、各セクションを少しずつ組み立てていきました。
骨組みができた後は、住所やDJ情報などの実データへの差し替え、スマートフォン表示の細かな崩れの修正など、一つずつ問題を潰していきました。
余白、文字サイズ、画像の見え方など、パソコンでは気にならなくても、スマートフォンで見ると違和感が出る部分も少なくありません。
最後に、検証用のURLで制作していたサイトを独自ドメイン「mellowmellow-kumamoto.com」へ移し、正式に公開しました。
「完璧に作り込んでから見せる」のではなく、
「形にしては確認し、直す」
これを繰り返しながら進めたのが、今回の制作の特徴です。
こだわったのは「動きのある体験」
当初は、「まず完成させることを優先し、動きのある演出は公開後の改善課題にしよう」と考えていました。
ところが、途中で店主に相談したところ、
「動きのある魅力的なサイトとして出したい」
という返事をもらい、多少時間がかかっても良いので方針を変更することにしました。
いきなり全セクションに演出を詰め込むと収拾がつかなくなりそうだったので、まずはHEROセクションだけに絞り、動きの演出を一つ試すところから開始。
「まずは1要素、80点でいい」と割り切ったことで、完成度を気にしすぎずに手を動かすことができました。
HEROで手応えを掴んだあとは、プラグイン「Animations for Blocks」を使い、ページ全体にスクロール連動のフェード演出を適用。
さらに、
- イベント情報を「日付バッジ＋説明＋写真」のカード型デザインに再設計
- 写真はタップして拡大できるように調整
- ABOUTセクションなど一部の背景に、画像をうっすら重ねる演出を追加
- Font Awesomeのアイコンや区切り線を使って情報を整理
- イベント関連のロゴが横にゆっくり流れ続ける「EVENT LOGO」セクションを追加
といった工夫を加えました。
派手さを追求するのではなく、「音楽が好きな大人が自然に集まれる場所」という雰囲気を壊さない範囲で、控えめに動きを加えることを意識しました。
Before / After。出来上がったTOPページ
制作を始めた当初は、WordPressのテーマ「SWELL」の初期状態に近い、飾りのない構成からのスタートでした。
そこから配色を決め、セクションを一つずつ組み立て、最後に動きの演出を加えていきました。
現在のTOPページは、店内のミラーボールなどが映る、このお店の世界観を垣間見ることができるHEROから始まり、スクロールするたびに各セクションがふわっと浮かび上がる構成になっています。
イベント情報も、日付・説明・写真をひと目で追えるカード形式に整理しました。
最初は何もなかった画面が、少しずつ「Mellow Mellowらしい場所」に変わっていく。
その過程そのものが、今回の制作で印象に残っている部分です。
公開に向けて。独自ドメインへの引っ越し
制作中は、検索エンジンに表示されない検証用のURLでサイトを作っていました。
完成後、お店専用のドメイン「mellowmellow-kumamoto.com」を取得し、サイトをまるごと移す作業に取り組みました。
まずサイト全体のバックアップを取り、そのうえでサイトのファイルとデータベースを新しいドメイン側に複製。
サイト内に残っている古いURLを新しいURLへ一括で置き換え、SSL（https化）を設定しました。
その後、検索エンジンへの表示を許可し、Googleにサイトの情報を登録。
ここまで終えて、ようやく「正式公開」です。
途中、Googleに送るサイトの案内図である「サイトマップ」が表示されないというトラブルもありました。
原因を調べてみると、移行作業のミスではなく、テーマの初期設定でその機能が止まっていたことが分かりました。
「自分が何か壊したのでは」と焦りましたが、一つずつ可能性を切り分け、原因を探していく。
この経験から、トラブルが起きたときほど、焦らず一つずつ確認することの大切さを学びました。
使用した技術・ツール
今回の制作では、WordPressとSWELLテーマを使用しました。
動きの演出には「Animations for Blocks」というプラグインを組み合わせ、画像の拡大表示にはLightbox機能、アイコンにはFont Awesomeを活用。
音源紹介にはSoundCloudの埋め込みも検討しテストにて実証済、今回はYouTubeの埋め込みで対応しました。
今後は、ケースバイケースでさまざまな音源の紹介ができるよう、対応の準備をしています。
特別なコーディング環境を用意することなく、WordPressの管理画面とプラグインを組み合わせることで、動きのあるサイトまで制作できることを実感した制作でもあります。
やってみて学んだこと
今回、一番学んだのは、
「最初から完璧を目指さない」ことの大切さです。
動きの演出も、全部を一度に作ろうとせず、まずHEROの1か所だけで試し、感触を掴んでから広げていったことで、途中で行き詰まることなく最後まで形にすることができました。
また、スマートフォンでの見え方の細かな崩れなど、パソコンの画面だけでは気づけない問題にもいくつも直面しました。
実機で確認しながら、一つずつ直していく。
当たり前のようでいて、実際にやってみると、その重要性を強く感じます。
そして、相手であるお店の方の要望が制作途中で変わることもありました。
最初は予定外の変更として捉えていましたが、それを負担に感じるのではなく、「より良いものにするための方向転換」と考えられるようになったことも、今回得られた気づきです。
そしてもう一つ。
サイトは「作って終わり」ではない。
公開して、お店の方が実際に使い続けられる状態にするところまでが制作なのだと、ドメインの引っ越しを通して実感しました。
実際のサイト
今回制作したサイトはこちらです。
初めての実店舗案件ということもあり、不安を感じながらのスタートでした。
それでも、
話を聞く → 形にする → 試してみる → 確認する → 修正する
この繰り返しで、少しずつ形にしていくことができました。
今回の制作は、自分にとって単なるWEBサイト制作ではなく、「実際のお客様のためにサイトを作り、公開までやり切る」という経験になりました。
これからも、こうした小さな実績を一つずつ積み重ねながら、WEB制作を副業として形にしていきたいと思っています。
コメント