デザイン

【制作記録】架空のハンドメイドカフェのLP

制作記録_アイキャッチ画像_架空のハンドメイドカフェのLP

こんにちは、まなてぃです。
受講していたオンラインのデザイン講座(Design Hacks)の課題で作成した成果物の記録です。

ペライチを利用して、LP(ランディングページ)を作る」という課題に挑戦しました。
よろしければご覧ください!

ペライチというサービスについて

課題としてLPを作成するにあたってペライチというサービスを使用しました。

ペライチというサービスは、あらかじめ用意されたテンプレートやレイアウトを選び、初心者でも簡単にホームページ作成できるツールです。
今回の課題では無料版を使用させていただきました。

まなてぃ
まなてぃ
HTML/CSSについては別途、市販の書籍で勉強中です。(2020年10月現在)

【完成品】架空カフェ Handmade Cafe MattariのLP

(架空)ハンドメイドカフェLP(架空)ハンドメイドカフェLP

※本デザイン・LPは架空の店舗です。実在する人物・地名・団体とは一切関係ありません。
写真はフリー素材サイト、またはペライチのテンプレート内に設定されていたデフォルト画像をお借りしています。

制作期間:約7日(アイデア出し・構成・修正期間・添削期間含む)

使用ツール:

  • ペライチ(LP作成)
  • Adobe Photoshop(ヘッダー画像作成,画像サイズ調整)
  • Adobe Illustrator(ロゴ作成,ファビコン作成)

ペライチで公開している作成したページ:
https://peraichi.com/landing_pages/view/samplecafelp12345

制作過程

制作過程についてです。

デザイン講座の課題内容
  • ペライチを利用しLPを作成する
  • お題はなんでもOK
  • 今まで勉強したことを復習しながら、「ロゴ」「ヘッダー」「バナー」のいずれか1点以上を「オリジナルで作成して」ペライチページに挿入する

アイデア出し・構成

作成するLPのイメージを以下のように設定しました。

アイデア出し内容
  • ハンドメイド×カフェ のお店のLP(架空)
    • 店名: Handmade Café Mattari
    • 利用者層: 20代~40代女性がメイン
  • 提供メニュー
    • コーヒー
    • フード(サンドイッチなど)
    • ハンドメイド作品の販売
  • 架空のお店のコンセプト
    • オーガニックなイメージ
    • フードも、ハンドメイド作品も手作り
    • 作品を制作・展示できるスペースがある
    • ワークショップなどのイベントもある

構成を考えるにあたり、ノートに簡単にイメージをまとめました。
今回はLPの内容・ロゴ・ヘッダー画像・ファビコンなどをオリジナルで作成することに決めました。

制作記録_ハンドメイドカフェ_ラフ1LP構成ラフ
制作記録_ハンドメイドカフェ_ラフ2LP構成ラフ

作成したオリジナル素材

ロゴを作成する前にロゴの案のラフを描きました。
ここでは、カフェらしくコーヒーカップのイラストを描くことと、カフェのコンセプトとしている「まったり」の文字を英字筆記体で「mattari」と入れることにしました。

制作記録_ハンドメイドカフェ_ラフ3ロゴ案

完成品は以下のようになりました。

制作記録_ハンドメイドカフェ_ロゴハンドメイドカフェのロゴ

ラフ案に「Handmade Cafe」を足しました。
今後、このお店のロゴをwebサイト以外にもチラシやバナーに載せることを想定した時に、カフェお客さんにぱっと見で何のロゴなのかが分かった方が良いと考えたためです。

制作記録_ハンドメイドカフェ_ファビコンハンドメイドカフェのファビコン

ペライチのファビコンは推奨サイズ : 縦32px、横32pxです。
(本ブログ上では拡大表示しているためすこし荒くなってしまっています)
コーヒーカップをイメージし、入れ立てのコーヒーの温かさを表現しました。

ロゴを作成してから、ヘッダー画像の作成を行いました。

制作記録_ハンドメイドカフェ_headerハンドメイドカフェのヘッダー画像

ロゴと同じフォントを使いました。
カフェの店内の写真(フリー画像のチョイス)を使用し、LPを見た人へ落ち着きがあり「まったり」できる空間のイメージを与えられるように意識しました。

まとめ

受講していたオンラインのデザイン講座(Design Hacks)の「ペライチを利用して、LP(ランディングページ)を作る」という課題に挑戦しました。
オンラインのデザイン講座(Design Hacks)の課題としては、LP作成が総合課題でした。

架空のハンドメイドカフェページでしたが、LPへの訪問者(カフェの見込み客)にどんな情報を伝えたいか、どういった画像を使用したらイメージを損なわないかなど、たくさん考えることがありました。

デザイン講座の受講は完了となりましたが、これからは実際のデザインのお仕事にもぜひ挑戦していきたいです!

最後までご覧下さり、ありがとうございました。

ABOUT ME
まなてぃ
訪問いただきありがとうございます。 まなてぃと申します。 動画編集者をしております。 ブログ+Webデザインもゆるくやっています。 このブログでは私の好きな、消しゴムはんこと生活に関すること、動画のことについて、ざっくばらんに発信できればいいなと思っています。よろしければご覧ください。