公開日：2024.12.03

株式会社ラボネットワーク様｜サービスサイト制作

株式会社ラボネットワーク様のサービスサイト「オンラインラボforフォトグラファー」の制作を行いました。

本サービスは、これからフォトビジネスを始めたい方向けのサービスで、プロ向けの商材販売サイトです。商品には、フォトアルバムやフォトグッズなどがあり、ネットから簡単に注文ができます。

コンテンツ・導線設計

構成で最も考慮したのは、タッチポイントごとの導線設計です。

まずTOPページは、初回訪問者とリピーター向けの導線を設計しました。
初回訪問者向けには、ファーストビュー下部へサービス概要を設置し、更にサービスの詳細を知りたくなった場合の受け皿として、サービス詳細ページへの導線を設けました。

リピーター向けには、TOPからも商品購入が容易にできるよう商品一覧を設置。この他、おすすめ商品ラインナップを設け、おすすすめ商品の閲覧と購入がスムーズになる導線を設計をしました。これらの導線設計により、ユーザーの使い易さとクライアントの訴求したいポイントを押さえたサイトに仕上げました。

また、おすすめ商品ラインナップは、広告利用のニーズもあったことからLP型のレイアウトを採用。また本ページは、量産のニーズがあったため更新性の高いテンプレート実装し、クライアントの好きなタイミングで自由にLPが量産できる「LP制作ツール＂LP-STUDIO＂」を導入しました。

→ LP-STUDIOへのお問い合わせはこちら

デザイン

当サービスサイトでは、フォトアルバムやフォトグッズなど、写真を扱う商品を提供しているため、写真の美しさを損なわないよう、大きく魅力的に見えるデザインを心がけています。

また、ターゲットとなるカメラマンがオンラインで利用するプリントサービスであることから、「簡単に作れる手軽さ」を印象付けることが重要です。そのため、シャープで硬い印象よりも、丸みを帯びた優しい雰囲気のデザインを採用しました。全体的に丸いモチーフや曲線を取り入れたパーツを用いることで、「簡単に作れる手軽さ」を表現するレイアウトを実現しています。

一方で、メインカラーをすべて柔らかい色調にしてしまうと、幼い印象が強くなりすぎる可能性があります。この点を考慮し、クライアントの赤色のキーカラーにブラックをアクセントとして加え、落ち着いたトーンを意識した配色にすることで、幼い印象にならないように解消しバランスの取れた仕上がりを目指しました。

コーディング・管理画面・仕様

顧客が更新していくことを踏まえ、入力の負担と迷いが少なくなるように画像には推奨サイズ・文字入力には推奨文字量など、管理画面の入力項目に注釈を設けています。
またブロックエディタとカスタムフィールドの両方を用いることでレイアウトに変化をもたせシンプルすぎないような形を実現しています。
ブロックエディタはオリジナルのブロックを開発し、より伝えたいことを伝えられるようお客様の表現の幅を広げました。

アニメーションにはGSAPを使用してスクロール位置に応じて変化させるなど見ていて飽きないような仕組みを導入しました。
端末に負荷の少ないアニメーションになっておりデスクトップやスマートフォンを問わず同じユーザ体験を提供しています。