Facebook 【HP】Lani Studio & Co.
Logo

【HP制作(Studio)】Lani Studio & Co.

クレジット
Avatar
WEBデザイナー
【HP制作(Studio)】Lani Studio & Co.-1
シェア
制作ノート
【HP】Lani Studio & Co.
  • コンセプト:「デザインの力で、あなたのビジネスに新しい風と無限の可能性を。
  • 目的:ブランドの世界観(南国リゾートの上質さ・洗練された開放感)をWeb上で表現し、信頼感と魅力を同時に伝えて新規のお問い合わせ・制作ご依頼へ繋げること。
  • ターゲット:世界観やデザインのトーン&マナーに拘りたい個人事業主、女性起業家、新規ブランド立ち上げを検討しているサロン・ショップオーナーなど
  • ペルソナの課題・ニーズ:「自分のサービスや商品の魅力が伝わる、おしゃれで洗練されたWebサイトを作りたい」「スマホで見ても美しく、運用もしやすいサイトにしたい。

デザインの工夫点・こだわり

① ブランドのトーン&マナーの徹底(統一感のある世界観構築)

  • ラグジュアリー×リゾートの質感 エメラルドグリーンとサンドベージュ、ゴールドのアクセントカラーで構築し、ハワイ語で“天国・空”を意味する「LANI」の名の通り、ゆったりとした時間の流れと上質さを感じさせるトーン&マナーを統一。
  • フォントとレイアウトの美しさ エレガントな英文フォント(Serif系)と可読性の高い和文フォントをバランスよく組み合わせ、余白を広めに取ることで、視覚的なノイズを減らした美しいレイアウトを意識。

② Studio(ノーコード)を活用したインタラクティブな表現

  • 滑らかなアニメーションとレスポンシブ対応 ファーストビューのファジーな背景やスクロールに応じた要素のフェードインなど、動きを取り入れて「生き生きとしたWeb体験」を演出。PC・タブレット・スマートフォン全てのデバイスで美しく崩れないレスポンシブデザインに。
  • CMS機能を活用した作品管理(ポートフォリオ) StudioのCMS機能を組み込み、制作実績(LP、バナー、LINEリッチメニューなど)の更新や詳細閲覧をスムーズに行える構成。

③ 迷わせない導線設計(UI/UX・コンバージョン意識)

  • 視線誘導とCV(お問い合わせ)への配置 ヘッダーやFV(ファーストビュー)、フッターなど、ユーザーが気になったタイミングでいつでもアクションを起こせる位置にお問い合わせボタン(Contact)を配置。
  • ブランドの信頼感を高めるコンテンツ構造 「About(想い・プロフィール)」「Services(提供サービス)」「Portfolio(実績)」「Contact」をシンプルに体系化し、初めて訪れたユーザーでも事業内容や強みが直感的に理解できるよう配慮。

<使用ツール> Studio、Photoshop

シェア
【HP】Lani Studio & Co.
  • コンセプト:「デザインの力で、あなたのビジネスに新しい風と無限の可能性を。
  • 目的:ブランドの世界観(南国リゾートの上質さ・洗練された開放感)をWeb上で表現し、信頼感と魅力を同時に伝えて新規のお問い合わせ・制作ご依頼へ繋げること。
  • ターゲット:世界観やデザインのトーン&マナーに拘りたい個人事業主、女性起業家、新規ブランド立ち上げを検討しているサロン・ショップオーナーなど
  • ペルソナの課題・ニーズ:「自分のサービスや商品の魅力が伝わる、おしゃれで洗練されたWebサイトを作りたい」「スマホで見ても美しく、運用もしやすいサイトにしたい。

デザインの工夫点・こだわり

① ブランドのトーン&マナーの徹底(統一感のある世界観構築)

  • ラグジュアリー×リゾートの質感 エメラルドグリーンとサンドベージュ、ゴールドのアクセントカラーで構築し、ハワイ語で“天国・空”を意味する「LANI」の名の通り、ゆったりとした時間の流れと上質さを感じさせるトーン&マナーを統一。
  • フォントとレイアウトの美しさ エレガントな英文フォント(Serif系)と可読性の高い和文フォントをバランスよく組み合わせ、余白を広めに取ることで、視覚的なノイズを減らした美しいレイアウトを意識。

② Studio(ノーコード)を活用したインタラクティブな表現

  • 滑らかなアニメーションとレスポンシブ対応 ファーストビューのファジーな背景やスクロールに応じた要素のフェードインなど、動きを取り入れて「生き生きとしたWeb体験」を演出。PC・タブレット・スマートフォン全てのデバイスで美しく崩れないレスポンシブデザインに。
  • CMS機能を活用した作品管理(ポートフォリオ) StudioのCMS機能を組み込み、制作実績(LP、バナー、LINEリッチメニューなど)の更新や詳細閲覧をスムーズに行える構成。

③ 迷わせない導線設計(UI/UX・コンバージョン意識)

  • 視線誘導とCV(お問い合わせ)への配置 ヘッダーやFV(ファーストビュー)、フッターなど、ユーザーが気になったタイミングでいつでもアクションを起こせる位置にお問い合わせボタン(Contact)を配置。
  • ブランドの信頼感を高めるコンテンツ構造 「About(想い・プロフィール)」「Services(提供サービス)」「Portfolio(実績)」「Contact」をシンプルに体系化し、初めて訪れたユーザーでも事業内容や強みが直感的に理解できるよう配慮。

<使用ツール> Studio、Photoshop

シェア
長嶋 若尾の他の作品
画像
作品を見る
【リッチメニュー】
画像
作品を見る
【リッチメニュー】
画像
作品を見る
【LP】スナックバー
foriio

あなたのforiioを無料で作成

fori.io/
【HP制作(Studio)】Lani Studio & Co.-1
【HP】Lani Studio & Co.
  • コンセプト:「デザインの力で、あなたのビジネスに新しい風と無限の可能性を。
  • 目的:ブランドの世界観(南国リゾートの上質さ・洗練された開放感)をWeb上で表現し、信頼感と魅力を同時に伝えて新規のお問い合わせ・制作ご依頼へ繋げること。
  • ターゲット:世界観やデザインのトーン&マナーに拘りたい個人事業主、女性起業家、新規ブランド立ち上げを検討しているサロン・ショップオーナーなど
  • ペルソナの課題・ニーズ:「自分のサービスや商品の魅力が伝わる、おしゃれで洗練されたWebサイトを作りたい」「スマホで見ても美しく、運用もしやすいサイトにしたい。

デザインの工夫点・こだわり

① ブランドのトーン&マナーの徹底(統一感のある世界観構築)

  • ラグジュアリー×リゾートの質感 エメラルドグリーンとサンドベージュ、ゴールドのアクセントカラーで構築し、ハワイ語で“天国・空”を意味する「LANI」の名の通り、ゆったりとした時間の流れと上質さを感じさせるトーン&マナーを統一。
  • フォントとレイアウトの美しさ エレガントな英文フォント(Serif系)と可読性の高い和文フォントをバランスよく組み合わせ、余白を広めに取ることで、視覚的なノイズを減らした美しいレイアウトを意識。

② Studio(ノーコード)を活用したインタラクティブな表現

  • 滑らかなアニメーションとレスポンシブ対応 ファーストビューのファジーな背景やスクロールに応じた要素のフェードインなど、動きを取り入れて「生き生きとしたWeb体験」を演出。PC・タブレット・スマートフォン全てのデバイスで美しく崩れないレスポンシブデザインに。
  • CMS機能を活用した作品管理(ポートフォリオ) StudioのCMS機能を組み込み、制作実績(LP、バナー、LINEリッチメニューなど)の更新や詳細閲覧をスムーズに行える構成。

③ 迷わせない導線設計(UI/UX・コンバージョン意識)

  • 視線誘導とCV(お問い合わせ)への配置 ヘッダーやFV(ファーストビュー)、フッターなど、ユーザーが気になったタイミングでいつでもアクションを起こせる位置にお問い合わせボタン(Contact)を配置。
  • ブランドの信頼感を高めるコンテンツ構造 「About(想い・プロフィール)」「Services(提供サービス)」「Portfolio(実績)」「Contact」をシンプルに体系化し、初めて訪れたユーザーでも事業内容や強みが直感的に理解できるよう配慮。

<使用ツール> Studio、Photoshop

シェア
長嶋 若尾の他の作品
画像
作品を見る
【リッチメニュー】
画像
作品を見る
【リッチメニュー】
画像
作品を見る
【LP】スナックバー
foriio

あなたのforiioを無料で作成

fori.io/