架空旅行サイト

URL：https://sugarlife.work/travel/

女性らしいフォントや色使いのサイト

女性向けの架空旅行サイトをイメージして制作しました。
ターゲットにする女性の年齢層は、20代後半～30代以降。
シンプルな中に、フォントや色使いで少しの可愛さを取り入れました。

WordPressでウェブサイトを作る時に、BootStrapがベースになった 無料テーマを使用することが多く、学習がてらBootStrapを使用して コーディングをしました。

制作時間：約15時間/3日間（内訳：デザイン/0.5日・パーツ作成/0.5日・コーディング/2日）
使用ソフト：Dreamweaver・Photoshop
フレームワーク：Bootstrap4
jQueryプラグイン：Vegas2
使用画像：Unsplash

サイトPC画像

サイトSP画像

架空店舗サイト

URL：https://sugarlife.work/shop/

ナチュラルで優しい印象のサイト

架空店舗サイト（食パン専門店）をイメージして制作しました。
ターゲットは、30代以降の主婦。
専門店の高級感は出さず、お気に入りのパン屋さんをコンセプトに ナチュラルで優しい印象のサイトを目指しました。

エフェクトや動きをつけずに、長すぎずシンプルすぎず相手にとって 分かりやすく情報を伝えれるよう心がけました。

制作時間：約10時間/2日間（内訳：デザイン/0.5日・パーツ作成/0.5日・コーディング/1日）
使用ソフト：Dreamweaver・Photoshop・Illustrator
使用画像：撮影

サイトPC画像

サイトSP画像

架空ECサイト

URL：https://sugarlife.work/ec/

迷わず使いやすいサイト

実店舗を持っているメーカーが運営するアパレルECサイトをイメージ して制作しました。
ターゲットは、20代～30代の男女です。
情報量は多くなりすぎないように、シンプルで商品が見やすいサイトを 目指しました。

スペースの節約のため、コンテンツを集めたかったためスライダーを 設置しましたが、画像が思い通りに配置できず、プラグインのファイルを 直接書き換えることになり、予想以上に時間がかかりました。

制作時間：約30時間/5日間（内訳：デザイン/1日・パーツ作成/1日・コーディング/3日）
使用ソフト：Dreamweaver・Photoshop・Illustrator・XD
jQueryプラグイン：bxSlider
使用画像：Unsplash

サイトPC画像

サイトSP画像

架空店舗サイト

URL：https://sugarlife.work/cafe/

シックで落ち着いた雰囲気のサイト

店舗サイト（カフェ）をイメージして制作しました。
ターゲットは、20代後半～30代の男女です。
インスタ映えするおしゃれなカフェをイメージしやすいよう、 ファーストビューの画像とは別に、多くの画像で目を引くよう スライダーで料理や店内の画像を掲載しました。

異なるプラグインを複数設置することにチャレンジしたかったため、 2種類のスライダーを設置し、動きに変化をつけました。

制作時間：約10時間/2日間（内訳：デザイン/0.5日・パーツ作成/0.5日・コーディング/1日）
使用ソフト：Dreamweaver・Photoshop・Illustrator
jQueryプラグイン：Vegas2・bxSlider
使用画像：Unsplash

サイトPC画像

サイトSP画像

架空コーポレートサイト

URL：https://sugarlife.work/corp/

ビビッドカラーが印象的なサイト

アパレルメーカー（ブランド）をイメージして制作しました。
ターゲットは、20代後半～30代の男女です。
画像はあえてモノクロにし、ブランドコンセプトをファーストビューに ビビットカラーで。

シングルカラムレイアウトのサイトは何度か制作しているため、あえて ページを分割しました。
単調化を避けるために、画面遷移時にアニメーション効果をつけました。

制作時間：約10時間/2日間（内訳：デザイン/0.5日・パーツ作成/0.5日・コーディング/1日）
使用ソフト：Dreamweaver・Photoshop
jQueryプラグイン：Animsition
使用画像：Unsplash

サイトPC画像

サイトSP画像