【スクール課題①】歯医者WEBサイトデザイン

今回は、スクールの課題である
「町の歯医者さんの依頼」
のブラッシュアップ記録です。

ヒアリングシートを簡潔にまとめると、
・清潔感あり
・子供や女性も通いやすい町の歯医者さん
・スッキリ
・ポップすぎない
というご要望です。

今回は用意されたワイヤーフレームから作成しました。

まずは私がWEBデザイン分析を始める前に、
初めて作成したサイトデザインから。↓

今見ると、これはひどい。
「自分がやりたいことを詰め込んだだけの、自己満足サイト」
ですね。
この頃はまだUI、UXの存在すら知りませんでした。

お次に、
WEBデザイン分析をした後に一から作り直したデザイン↓
（もう一度修正が入ります）

今見てみると、まだ無駄な情報、背景のゴチャつきを感じます。
そして、クライアントのご要望である「清潔感」に欠けています。
しかし、WEBデザイン分析をすることによって、サイトの統一感が意識できるようになりました。

このデザインを作成する前に、
オレンジのサイトを見返した自分の感想、思考はこちらです。↓↓

ーーーーーーーーーーーーーー
❎始めたての頃考えていたこと
⭕️デザイン分析や先生からのフィードバックを聞いて学んだ後
ーーーーーーーーーーーーーー
オレンジ色のメインカラーについて
❎清潔感とは違う気がするけれど、あたたかい雰囲気にしたいから提案前提でこの色にしよう。
⭕️まずはクライアントが求める雰囲気や、トンマナを考えてデザインするべき。院内の写真を見るとサイトの雰囲気と合っていないと思う。

イラストについて
❎子連れでも安心できるようたくさんイラストを入れよう。カーソルを合わせると画像が動くと離脱率が防げるのではないか。
⭕️まずカーソルを合わせないと情報が見えないのは不親切。パッと見て知りたい情報が見えた方が良いと思う。イラストの雰囲気もバラバラ。

英語のあしらいについて
❎大きく英語を背景に入れるデザインをよく見る気がする。余白が寂しいから入れておこう
⭕️あしらいが強調されすぎていて、伝えたいことがぱっと見わからない。あしらいは薄く、小さく、あくまで飾りであるべき。

余白・文字サイズについて
❎画面いっぱいを使い、見やすくしよう。と思っていたくらいで、何も考えていなかった。
⭕️実際の画面で見てみると文字が大きすぎる。他のサイトを分析してみると、思っていたよりはるかに小さな文字を使用していた。余白を広く取ることで、心のゆとりを持ってサイトを見ることができた。

診療内容セクションの画像について
❎わかりやすいように、画像とタイトル、説明文を入れ込んで・・・。
⭕️デザインのルールに沿っていなかった。「左から右へ」の読みやすさの考慮ができていなかったことや、座布団やタイトルが重要なはずの画像を邪魔していた。矯正治療と小児矯正、どちらも同じ小児矯正のように見える。

CTAについて
❎重要だからボタンはこの色、あまり重要じゃないからこの色〜。わかりやすいように表にボタンを接着させて〜。
⭕️ユーザーにとって「わかりやすさ」「見やすさ」を考慮できていなかった。デザイン分析でUIを学んで、「ユーザーにとっていかに使いやすくするか」を考えるようになった。

その他にも沢山気づいたことや学んだことがありました。
先生からのフィードバックをいただき、「デザイン分析」の大切さをご教示いただき、その日からほぼ毎日分析を重ねてきました。
（過去のnote記事にWEBデザイン分析の記録があります）

WEBデザイン分析で学んだこと

デザイン分析の大切さを教わった日から、AIにテンプレートを作ってもらい、将来自分のデザインの引き出しとなるようしばらくの間noteに１日１投稿デザイン分析記事を作成してきました。

ーーーーーーーーーーーーーーーーーーーー

WEBデザイン分析で学んだこと・気づき

・UI/UXという存在を知った
・サイト全体の統一感に気づいた
・世界観の出し方を学んだ
・文字サイズや画像サイズを学んだ
・あしらいの付け方を学んだ
・余白の大切さを知った
・思っていたよりサイトの内容は
　シンプルなものが多かった

ーーーーーーーーーーーーーーーーーーーー

デザイン分析を継続し、
「一旦寝かせてみると違う視点で見れたりします」
と講師からアドバイスをいただき、一旦別の課題へ。

数週間おいてみると、この作り直したデザインもまだまだ改善できることに気づくことができました。
「自分がやってきた勉強の成果」
にとっても感動しました。

そして最終ブラッシュアップ。↓

しっかりと「清潔感」、「使いやすさ」「見やすさ」「情報のわかりやすさ」
に考慮した、サイトを作成する目的を意識したデザインに修正することができました。

また、講師からのアドバイスで角丸は可愛さがでてしまい、明朝体との相性があまり良くないとのことで、角をつけることで「清潔感」に全振りしつつ、余白で写真を強調することで、「子供や女性の通いやすさ」を伝える設計に修正しました。

クライアントのご要望であった
「清潔感」「こどもや女性も通いやすい」
これらが伝わりやすく、病院の雰囲気とマッチした設計にできたと思います。

また、コーディングしやすい設計というところも考慮してデザインすることができました。
・flexで整えやすい設計
・コンテンツ幅を１ピクセル単位で揃える
・セクション間のmarginを揃える
・ボタンのデザインを統一する
など調整しました。

ーーーーーーーーーーーーーーーーーーーーーーーー

勉強すればするほど、自分の成長を感じることが
楽しくて楽しくてたまりません！！

これからも、もっと良いデザインができるよう、
勉強を継続していこうと思います！！