【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP

2つめの自作Webデザインについてのまとめ記事です。

　出来上がったデザイン(左:PC版、右:SP版)

お題

アイスクリーム専門店の仮想LP

お店の特徴

• フルーツアイスクリームショップ
• アメリカ生まれ
• 素材の色・風味を大事にする

コンテンツ希望

• お店のロゴ
• トップに画像スライダー(新着情報や期間限定メニュー)
• お店について
• 代表メニュー(アイス画像)
• 店舗情報(現在は2店舗、徐々に拡大予定)
• SNSリンク

コンセプト

「ポップ」「カラフル」「ナチュラル」

制作ポイント

• マテリアルデザイン
• 2カラムレイアウト
• ロゴを自作/写真素材の加工(主にPhotoshop)
• 自作デジタル水彩素材の使用(Fresco)
• 写真をSVGでマスク

デザイン工夫点

ジューシー感が感じられるように
カラフルな写真・画像素材を使用しました。
アイスクリームが溶け出したような
自作の水彩デジタル画像素材を使用して、
よりお題に合うように工夫しました。

また、アイスクリームとフルーツのかたちを意識し
円形・波・しずく形のモチーフを多くとりいれました。

たのしく動きがでることと、見やすさを考慮して、
マテリアルデザイン/2カラムレイアウトで作成しました。

制作物

• ワイヤーフレーム(XD)
• 自作ロゴ(Fresco/Photoshop)
• 水彩デジタル背景素材(Fresco)
• アイスクリーム背景透明画像(Photoshop)
• PC版デザインカンプ(プロトタイプ含、XD)
• SP版デザインカンプ(プロトタイプ含、XD)

それぞれまとめていきます。