ブティック社様（情報サイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回、訴求コンテンツである「特集記事」への導線を際立たせるため、メインビジュアルのすぐ下に配置しているほか、背景色がグラデーションで変わっていくアニメーションを取り入れることで、自然と訴求を高めながらトレンド感を演出いたしました。

また、画面が大きいPC用サイトでは、ページ上部のヘッダーに「ネイルデザイン」「セルフネイル」「商品」など9種類の主要コンテンツへの導線を配置しました。そのため、ユーザーは最短導線で目的の情報を閲覧できる設計となっております。ほかにも、ネイルデザインは2カラムのレイアウトを使用している一方で、サロン情報は横幅いっぱいを使って表現するなど、見せたい情報に合わせてユニークにデザインを施すことで、コンテンツの視覚的な差別化を行いました。

システム面では、お客様がブラウザ上で簡単に更新していただけるよう、お知らせ・イベント情報・最新号紹介・各種記事コンテンツの更新にCMSを取り入れております。そのため、ホームページ公開後も継続してコンテンツを増やすことができ、CVをアップさせるためのツールとしてご活用いただけます。

デザイン面では、ホームページの主役であるネイルデザイン写真を際立たせるため、すっきりとしたホワイトをベースカラーに使用して全体的にシンプルなテイストでまとめております。さらに、ポイントとしてネイルパーツをイメージした華やかな装飾や太めの枠線を取り入れることで、メリハリがついたトレンドのデザインに仕上げました。

モバイル用サイトでは、ユーザビリティを考慮し特集コンテンツやサロン情報など複数のコンテンツを表示する箇所は横スクロールで表示し、情報が整理され、各ページを最後まで見やすいデザインにいたしました。また、ハンバーガーメニュー内では主要コンテンツへの写真付き導線バナーを配置することで、ユーザーに目的のページを最短の動線で閲覧していただくための設計を行っております。

システム面では、「ネイルデザイン」「セルフネイル」「商品」など7種類の記事コンテンツを1つの管理画面だけで更新していただけるオリジナルCMSを開発いたしました。管理画面から記事のカテゴリーを選択していただくだけで、それぞれのページへ自動的に振り分けられるだけでなく、コンテンツに合わせたユニークなデザインで表示される仕組みとなっております。

デザイン面では、主要コンテンツである「季節のおすすめ」に自動で背景色が変わっていくアニメーションを取り入れることで、トレンド感を演出しつつ、重要な箇所を自然と強調する視覚効果デザインを行いました。リニューアル後は「担当の方から大変くわしく丁寧にご指南いただき、安心してお願いすることができました。デザインも非常に気に入っています。」と喜びの声をいただいております。