【実践課題4】LPデザイン カンプ制作

OVERVIEW

LPのWFの修正~デザインカンプまで制作しました。

●制作情報

制作時期:2024年 9月

制作時間:2週間

使用ツール:photoshop 

制作の目的:
・ワイヤーフレームがある状態からデザインカンプを制作することに挑戦する
・イメージを固めるためのムードボード作成に挑戦する
・Webデザインをする際に気をつけるべき点を学ぶ
・前回の課題でインプットしたPCとスマホのレイアウトの変化を自分で考えられるようになる

●要件定義

・クライアント情報

 クライアント名:WORK ,inc.

 女性向けのビジネススクールを展開している。会員は20~30代の女性が多く、キャリアアップのためにビジネススキルを学び、さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。

●コンセプトとテーマ

コンセプト:働く女性が勤務後でもくつろぎながら勉強できる環境を提供すること、またその周知

テーマ:キャリアアップのためのリラックススペース

●制作物

LPカンプ

●クライアントから提供されたワイヤーフレームのブラッシュアップ

・ヘッダーの高さがやや高めだったため80pxに修正しました。

・コンセプトの文言の文章を写真で表現できそうだったので、文言を減らしてその分写真で、見た瞬間わかるようなデザインにしました。

・WFでは飲み物の写真を一枚一枚貼っていましたが、コンセプトでは飲み物よりも学習しやすいアピールをした方がいいかと思い、メニューはかなり小さくまとめました。

・ご利用方法にアイコンを追加し、全体のイメージに合う配色にしました。

・ワイヤーフレームの見直し・コンテンツの追加
LPの目的や要件からワイヤーフレームの内容を見直し、他社サイトと比較しながらユーザーが自然に下部までスクロールできるよう、各コンテンツの順番を検討しました。

●ムードボード

●配色について

女性的であり、かつ可愛らしすぎない配色にしようかと思い、ワインレッドと薄いピンクを選択しました。

アクセントを黒にしたことで洗練されたイメージにできたと思います


●課題を通して学んだこと

ワイヤーフレームの大切さと、必ずしも支給されたものに従わなくてもいいということ、

ご提案力が鍛えられたと思いました。


●頑張ったポイント

・目的に沿ったデザインを作ること
LP制作の目的を正確に理解し、目的達成のためにクライアントの要件を深掘りし、情報設計をしていくことを学びました。


・UI、UXの意識

どんな配色、写真にすれば目を惹くだろうか、アプリへ誘導できるだろうかなど

常に考えながら作業することができました。


・基本的なデザインへの意識や技術の定着

苦戦していたデザイン4原則も意識できるようになってきたと思います。

Photoshopで使ったことのない機能を使ってみたいと思い、systemなどのメイン文字の

色づかいや、UIのボタンの立体感などは自分なりに調べて作ってみました。