【美容室編】Webデザイン実践課題配布！（ポートフォリオ掲載OK）

今回は、Webサイトリニューアルの課題を作成しました！

PENGINの運営者がWebデザイン勉強中に初めてサイト制作を担当した美容室の協力を得て、課題を作りました。

以下の店舗サイトのリニューアルを想定しているため、実案件に近い形でWeb制作を実践的に学べます。

⚠実際にWeb制作会社などで働く場合は、コーポレートサイトやLPの案件が多いため、美容室やカフェのサイトを作れても評価されないという見方もあります。

しかし、美容室のサイトは初学者でもとっつきやすい題材のため、Web制作のフローに慣れるための題材としては適していると思います👍

次のステップアップとしてコーポレートサイトのリニューアル課題も用意してますよ！

課題の取り組み方

課題の想定

Webディレクター伝いの依頼（ヒアリング済み、情報設計済み）を想定しています。
※もちろん戦略や情報設計から練って頂いてもOKです👌

そのため、ヒアリング内容、企画提案資料、ワイヤーフレームを用意しています。課題概要から確認してくださいね！

デザインについて

まずは課題概要を確認しましょう。クライアントの希望イメージ、ディレクターが作成した企画書・ワイヤーフレームを確認します。

ワイヤーフレームを元にデザインをしていきましょう！コンテンツの順番を入れ替える、テキストを変更するなどは適宜行って結構です。
ただし、「デザインのしやすさから変更する」のはNGです。常に「クライントの課題解決のためにそうした方が良い理由」を考えましょう！

ワイヤーフレームからデザインするときのポイントについて書こうと思ったんですが、Webクリエイターボックスさんの記事が非常にわかりやすかったので共有しておきますね！

>> ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ | Webクリエイターボックス

コーディングについて

デザインを作成したら、コーディングを行っていきます。コーディングの主なポイントは2つです！

他にも細かいことを言えばキリがありませんが、とりあえずはこの2点をできるようにしましょう！

案件概要

ここからは、仮想リニューアルの案件概要について記載していきます！しっかりと確認しましょう😊

依頼内容

クライアント情報

ビジョンや理念

希望するイメージ

提供素材

企画・提案内容

提案書

提案資料は以下のスライドをご確認ください！

>> 提案資料スライド（Googleスライド）

ペルソナ設計

ペルソナについては以下のシートを参考にしてください！

競合他社調査

競合他社については近隣の店舗のリストとポジショニングマップを用意しています！

競合のリストはスプレッドシートで用意しています！以下のリンクからご確認ください！

>> 競合他社のリスト（Googleスプレッドシート）

ワイヤーフレーム

ワイヤーフレームはFigmaで用意しています！以下のリンクから確認してください。

>> Figmaワイヤーフレーム

それでは、制作頑張ってみてください!

最後に

サイトリニューアル課題はこちらもあるのでぜひチャレンジしてみてください！

#クリスタチャレンジのハッシュタグを付けて、課題の進捗報告や終了報告をしてくれたら、リツイートしに行きますね💨

上記ハッシュタグで学習記録をツイートする際は、

を付けてツイートすると後で見返したときに参考になります！