![[オリジナルデザインの実践]ヘアサロン NO HAIR](https://webcre8tor.com/wp-content/uploads/2024/09/share.png)
Sponsored Link
この記事の目次
ヘアサロン NO HAIR 様からの依頼
クライアントからの依頼
クライアント様(架空)からWebサイト制作の依頼があり、
その際にヒアリングした内容を以下のご要望書にまとめました。
| 項目 | 内容 |
|---|---|
| クライアント名 | ヘアサロン NO HAIR (ノーヘアー) |
| 依頼内容 | 店舗のWebサイト制作で、まずはTOPページがほしい。※1 |
| 目的 | 店舗ブランディング強化および集客を狙いたい。 |
| 参考デザイン | ページデザインの希望参考例は以下2点。 |
| サイトマップ | 合計7ページ制作予定。※2
|
| 共通ブロック(コンポーネント) | ヘッダー / フッター |
| トップページのメインコンテンツ |
|
| SNS対応 | YouTube・Instagramアイコンを常設表示※3 |
| 支給素材 | ロゴ提供あり / スタッフ写真数点あり※4 |
| 備考 | 今後、下層ページを順次制作予定 |
| ※1・・・早期公開優先のため、ひとまずトTOPページを作って欲しい。 ※2・・・残りの6ページも順次制作するため、ヘッダーのナビゲーションにリンクリストを掲載しておく。 ※3・・・YoutubeとInstagramを使い積極的に広報しており、常設表示できる場所にSNSアイコンを表示してほしい。 ※4・・・ロゴは提供可能、画像素材はスタッフを撮影した写真が数点ある。 |
|
まずは上記内容を元にトップページのデザインを完成させましょう。
制作の手順
制作の手順は以下です。
- トップページの手描きラフを描く(→参考)。
- 手描きラフをPCに送る
- Figmaのデザインファイルを準備する
- 手描きラフを下絵にトレースを行う
- Figma上でデザインを完成させる
1. トップページの手描きラフを描く
PCでの作業に入る前に、まずはご要望書にある内容をよく理解することが重要です。
その内容を元にレイアウトなどの構成を考え「手描きラフ用紙」にトップページのラフを描きましょう。(→参考)
手描きラフ用紙(PDF)
2. 手描きラフをPCに送る
トップページのラフがざっくりとでも完成したら、スマートフォンで撮影してPCに送りましょう。
「カメラで撮影→Google Driveアプリでアップ→PCでGoogleドライブからダウンロード」のやり方がおすすめです。
3. Figmaのデザインファイルを準備する
以下のFigmaデザインファイルをドラフトに複製、およびチームのプロジェクトに移動しましょう。
なおプロジェクトの件数が上限である場合は新たにチームを作って移動してください。
Figmaデザインファイル「Webページデザイン演習 NO HAIR」
いつも通り、ページデザインページはデザイン制作のためのページですが、
使用画像ページにはロゴが3パターンと画像を3点(店長・スタイリスト/店長/スタイリスト)置いています。
4. 手描きラフを下絵にトレースを行う
手描きラフを下絵にトレースを行いましょう。
元が手描きのため正確さは求めないようにしましょう。
5. Figma上でデザインを完成させる
これで素材などは揃いました。
あとは現在までに身につけたFigmaのスキルによって、あなたのオリジナルデザインを完成させましょう。
