【課題】Webサイト制作

制作時間：20時間＋修正5時間

制作期間：2週間＋修正1週間

制作範囲：ムードボード、PCのデザインカンプ、スマホのワイヤーフレーム

使用ツール：Photoshop

制作物

【PCデザインカンプ】

【スマホのワイヤーフレーム】

課題内容

【架空クライアントからの依頼内容】

＜クライアント＞

Work inc.　様

• 働く人々に新しい可能性を提供する事業を複数展開。
• 事業のひとつに都内で働くビジネスパーソン向けのコワーキングオフィスを運営。
• 会員は30代の女性が多く、キャリアアップのために日々仕事や勉強に励む意欲的な人々が集まるコミュニティとしても機能している。
• 家でもオフィスでもない、働く人のための新しい場所としてのコワーキングオフィス「WORK lounge AOYAMA」を運営。

＜要件書＞

　今回の課題では、ヒアリング動画を視聴して、要件書をまとめました。

＜ペルソナ＞

　今回のペルソナは、クライアント側から提示されたものです。

PC用ワイヤーフレームの再考

　クライアントから提供されたワイヤーフレームを元に、より情報が伝わりやすくなる構成とワイヤーフレームを再考しました。

ムードボード

　要件書とペルソナを元に、ムードボードを作成しました。自宅や職場とは違った第３の居場所ということでキーワードとして「落ち着き」や「居心地の良さ」、「温もり」を設定し、慌ただしい都心の中でゆったり時間が流れる、落ち着ける空間を考えました。

工夫したポイント

・目線の誘導と時間の緩やかな流れを表現するために随所に落ちていく葉っぱを散りばめ　た点

・スマホのワイヤーフレームにおいて、ご利用プランを比較することを考え、上下のスクロールの場合、動作が大きくなってしまうため、横のスクロール表示にした点

課題を通して学んだこと

・スマホとPCでのデザインの違い

　PCと同じデザインのままでも分かりやすく表示できる場合と、画面の大きさの違いから同じデザインでは、伝わりにくくなってしまう場合があることを改めて感じました。

・余白の使い方

　余白の幅によって、落ち着いた印象や硬い印象など違った印象を与えることができることを学びました。ただあまり余白が広すぎると間延びした印象を与えてしまうため、実際のサイズ感を確認しながら決めることが大切だと感じました。

・ムードボードの重要性

　要件書やペルソナを元にムードボードを作成することによって、デザインの方向性が決まり、デザインカンプが作りやすくなりました。クライアントとの認識に相違がないか確認するためにも言葉だけでは伝わりにくいデザインの方向性を確認するためにも大切だと感じました。