【Webデザインスクール体験談#8】デザインの授業が堂々完結！クリエイターズファクトリー（CF）

今回の授業でデザインに関する授業は完結。
課題となっていたオーダーメイト靴サイトは完成できるのか！？

8回目の授業までにやったこと

オーダーメイド靴サイトのTOPデザイン修正と2つの課題をやりました。

・TOPデザイン修正
・下層ページのデザインを考える
・スマホ用のTOPデザインを考える

他には下記2つ。

・バナートレース　1本
・オリジナルバナー　1本

今回も授業の課題に時間が掛かりました・・・

オーダーメイド靴サイトのTOPデザイン修正

前回の講評で指摘をもらった内容がこちら。

TOPデザイン修正1回目

指摘をもとにTOPデザインを修正しました。

セクションごとの背景を変えるのは「納品までの流れ」だけにしました。

「当店について」→「取り扱い商品」→「お客様の声」の流れで見ていくと、使っている画像が下記のようになっています。

「当店について」：画像が半分のサイズ
「取り扱い商品」：画像がフルサイズ
「お客様の声」：画像が半分のサイズ

そのため、「納品までの流れ」以外は動き？があると思ったので、背景は「納品までの流れ」のみに入れました。

ボタンの矢印は「>」から変えてちょっとおしゃっぽいものに変更。

TOPデザイン修正2回目

修正1回目を提出しましたが、またFBが・・・
終わりが見えない。

指摘内容はこちら。　

修正した内容がこちら。

「お客様の声」の余白は講師の方から参考に渡されたURLをもとに修正。

シンプルなデザインや堅めなデザインに！吹き出し使わず引用符で表現！

今回は上記のデザインで授業に望むことにしました。

オーダーメイド靴サイトの下層ページデザイン

課題となっていた下層ページのデザイン。
数はありますがTOPデザインがある程度できていたので思ったより時間はかかりませんでした。

作成した下層ページは下記のとおり。

当店について

サイトの目的が認知拡大とお問い合わせ増加だったので各ページに「お問い合わせ」と「Instagram」の項目を配置しています。

取り扱い商品

オーダーメイド革靴サイトで2番目に大事なページだと思っている「取り扱い商品」ページ。（一番大事なのはTOP）
この1ページだけで完結してもらえるようなレイアウトにしています。

提供された商品の素材は下記だったのですが、白背景だと色がキツすぎてサイトの雰囲気と合わないなと思ったので切り抜いてみました。

「ご提供価格」はセクションごとに背景を変えるという指摘を思い出し、高級感がありそうなダマスク柄を背景に薄く敷いています。

よくある質問

Q&Aに使用している線はボタンと同じゴールドっぽい色を使用して高級感をだしてみました。

お問い合わせ

質問内容の回答の枠は、Q&A同様にゴールドっぽい色を使用しています。デザインの4大原則である反復的な感じで。

オーダーメイド靴サイトのスマホ用デザイン

PC用のTOPデザインをもとにスマホ用のデザインも考えてみました。

スマホ用TOPデザイン

比較的スムーズにいったのですが、「納品までの流れ」が大変でした。
スマホ用にデザインを考えてなかったのでどうレイアウトしようか悩みました。結局参考にしたサイトをほぼ丸パクリ（笑）

あとはファーストビューのキャッチコピーを画像内に収めるか外に出すかも悩みました。
若干視認性は落ちますが、画像内のほうがなんかかっこよかったので画像内に収めました。

スマホ用TOPデザイン（ハンバーガーメニュー）

スマホ用サイトといったらハンバーガーメニュー。（右上にある三本線のヤツ）

色味が好みです。

バナートレース

※シマウマは元画像を切り抜き

オリジナルバナー

プチ旅行に行ってきたので、そのときに撮影した写真を使ってバナーを作成してみました。

オーダーメイド靴サイト完成なるか！？デザイン編完結！

前回の授業に引き続きオーダーメイド靴サイトのフィードバックがメインの授業でした。
デザインに関する授業は今回で最後。TOPデザインを3回修正して挑んだ授業最後のフィードバックの結果は・・・

見事に指摘が盛りだくさん。

なかなかOKがでない・・・

ちなみに初稿と最新のデザインはこちら。

初稿と比べるとメリハリがついて見やすくなりました。
それとなく高級感もでてきたような気がします。

デザインの授業は今回で終了ですが、引き続きフィードバックは受けていきます。
授業が終わってもフィードバックを受け付けてくれるのはいいですよね。

本日の課題

デザイン編最後の授業での課題はなし。
しいて言うなら、オーダーメイド靴サイトのデザインを完成させること。

あとは、個人制作（卒業制作みたいなもの）の題材をもうすぐ考え始めた方がいいとのこと。

個人制作ではWebサイトをヒアリングから設計、デザイン、コーディングまでまるっと対応します。
業務でそのまま使えるレベルのものを作成します。

もし、あなたやあなたの周りでWebサイトを作りたい！って方がいたら無料で作成しますので、TwitterのDMまたは、本サイトのお問い合わせからご連絡ください。

先着1名様限定！

Twitter（アカウント名：ぷれこ）

お問い合わせ

デザイン編総括

Photoshopの基本操作から始まり、オリジナルバナーの作成、figmaの基本操作、Webサイトの設計と様々なデザインの知識を学んできました。
本には載っていない現場の意見も聞けたり、自分以外のデザインを見られたりと学べる間口が広がったなと感じます。

特にプロの目線で受けられるフィードバックが個人的には大満足。しかも無制限。
他の受講生のフィードバックも見られるのもめちゃくちゃ勉強になる。独学ではできない学び方ですね。

効率面も独学の2,3倍は爆上がりします。（当社比）

雰囲気がいいのも続けられる秘訣かもしれない。

次回からはやったことのないコーディングの授業ですが、引き続き頑張る！！