Facebook おむすび屋むすび様【HP】
Logo

おむすび屋むすび様【HP】

クレジット
Avatar
Webデザイン
おむすび屋むすび様【HP】-1
シェア

おむすび屋むすび様【HP】

【作品情報】 制作時間(全てのページ):3週間(企画1週間、ワイヤーフレーム1週間、デザインカンプ1週間) 使用ツール:Figma(全体レイアウト)、Illustrator(一部タイトルの作成)、Photoshop(写真加工)、Visual Studio Code(コーディング) 担当範囲:企画、UI/UXデザイン、一部コーディング 【作品について】 クライアント情報: おむすび屋むすび様 ・テイクアウト専門の別府のおむすび屋さん ・お米と具の食材にこだわりがある。 課題: ・情報ツールはInstagramのみのため、顧客に伝える情報が少ない。 ・海外からの観光客が増えた影響で、地元の客足が遠のいてしまった。 目的: ・Webページを開設し新規の顧客を獲得する。 ・特に20代〜30代の来客を増やしたい。 ・一度離れてしまった地元客を連れ戻したい。 ターゲット(ペルソナ): ・30代女性。別府在住。 ・健康志向で貯金傾向。 ・結婚を控えており家族思い。 ・SNSは閲覧のみ。 コンセプト: 読みやすく、温かみのあるサイト 工夫点: ー ホームー ・メインビジュアルは一目でおむすび屋さんとわかるよう、おむすびの写真を大きく配置しています。 ・おいしさの秘密に地元や大分のワードを入れることで、地元客に検索されやすくしています。 ・お米のこだわりはクライアントにとって特に重要だと感じたため、背景色を変え強調しています。 ・すべてのページの最後には、先頭へ戻るボタンを、フッターには各セクションへ飛べるボタンをそれぞれ配置し情報を見返しやすくしています。 ー おしながきページ ー ・健康志向のペルソナのような閲覧者のためにアレルギー表記をつけています。 ・おいしい召し上がり方や持ち帰りの注意点には、文字だけでなく、イラストを用いることで、より温かみのある柔らかい雰囲気にしています。 ー キャンペーンページ ー ・メインビジュアルにはバナーを使用し何のキャンペーンか一目でわかるようにしています。 ・キャンペーン詳細や注意点はアクセントカラーの若草色でまとめ、見やすく整理しています。 ー ハンバーガーメニュー ー ・アイコンを配置することで、温かみを残しつつ、視覚的にもわかりやすくしています。
クレジット
Avatar
Webデザイン
シェア
下川瑞稀の他の作品
画像
作品を見る
八女煎茶【返礼品アイコン】
画像
作品を見る
SUMMER SALE【バナー】
画像
作品を見る
投資セミナー【バナー】
foriio

あなたのforiioを無料で作成

fori.io/
おむすび屋むすび様【HP】-1

おむすび屋むすび様【HP】

【作品情報】 制作時間(全てのページ):3週間(企画1週間、ワイヤーフレーム1週間、デザインカンプ1週間) 使用ツール:Figma(全体レイアウト)、Illustrator(一部タイトルの作成)、Photoshop(写真加工)、Visual Studio Code(コーディング) 担当範囲:企画、UI/UXデザイン、一部コーディング 【作品について】 クライアント情報: おむすび屋むすび様 ・テイクアウト専門の別府のおむすび屋さん ・お米と具の食材にこだわりがある。 課題: ・情報ツールはInstagramのみのため、顧客に伝える情報が少ない。 ・海外からの観光客が増えた影響で、地元の客足が遠のいてしまった。 目的: ・Webページを開設し新規の顧客を獲得する。 ・特に20代〜30代の来客を増やしたい。 ・一度離れてしまった地元客を連れ戻したい。 ターゲット(ペルソナ): ・30代女性。別府在住。 ・健康志向で貯金傾向。 ・結婚を控えており家族思い。 ・SNSは閲覧のみ。 コンセプト: 読みやすく、温かみのあるサイト 工夫点: ー ホームー ・メインビジュアルは一目でおむすび屋さんとわかるよう、おむすびの写真を大きく配置しています。 ・おいしさの秘密に地元や大分のワードを入れることで、地元客に検索されやすくしています。 ・お米のこだわりはクライアントにとって特に重要だと感じたため、背景色を変え強調しています。 ・すべてのページの最後には、先頭へ戻るボタンを、フッターには各セクションへ飛べるボタンをそれぞれ配置し情報を見返しやすくしています。 ー おしながきページ ー ・健康志向のペルソナのような閲覧者のためにアレルギー表記をつけています。 ・おいしい召し上がり方や持ち帰りの注意点には、文字だけでなく、イラストを用いることで、より温かみのある柔らかい雰囲気にしています。 ー キャンペーンページ ー ・メインビジュアルにはバナーを使用し何のキャンペーンか一目でわかるようにしています。 ・キャンペーン詳細や注意点はアクセントカラーの若草色でまとめ、見やすく整理しています。 ー ハンバーガーメニュー ー ・アイコンを配置することで、温かみを残しつつ、視覚的にもわかりやすくしています。
クレジット
Avatar
Webデザイン
シェア
下川瑞稀の他の作品
画像
作品を見る
八女煎茶【返礼品アイコン】
画像
作品を見る
SUMMER SALE【バナー】
画像
作品を見る
投資セミナー【バナー】
foriio

あなたのforiioを無料で作成

fori.io/