ファーストビュー課題のふり返り

スクールの課題で「架空の整骨院サイトのファーストビューを2案考える」というお題に取り組みました。その名も「すずらん整骨院」！可憐で爽やかなネーミングをデザインにも反映させたい、そして高齢者にも見やすいような分かりやすいサイトにしたいと思って第一稿をデザインしました。それがこちら。

先生からいただいたフィードバックをまとめてみると

◆枠で囲った電話番号の表記は、四辺の余白の幅を揃える。
◆二つの画像の連結部分がもっと自然になじむように、グラデーションでぼかしてなじませ、キャッチコピーが目立つように。
◆ヘッダーのナビゲーションメニューの左右の余白が均等になるように、文字幅をずらす。
◆院内風景と人物を合成した画像では、要素同士の幅をもっと近接させる。
◆ナビゲーションメニューの文字がもっと読みやすくなるよう、白抜き文字をボールドにするか、ボタンの色をもっと濃くする。
◆院内画像の上に配置した白抜き文字の視認性を上げるために、背景画像に透明度を上げた黒レイヤーをかぶせる。

どれも、なるほどなぁと思うことばかりで、確かにひとつひとつを直していくと読みやすさが格段にアップしました。前回のバナー制作でも苦労した余白は、やはり侮れませんね。頭では分かったつもりでいても、まだ実践に活かしきれていなかったので、現在「けっきょく、よはく。」を読んで勉強しているところです。

お直しをして、第二稿を提出したまではよかったのですが、ここで私は重大なミスに気付いてしまうのです。課題のファイルに「ヒアリングシート」なるものがあって、架空のクライアントの情報や要望などがスプレッドシートにまとめてあるのですが、わたくし、スプレッドシートのトラップにまんまとはまりました。私のパソコン、普段画面下の方に、ピン止めしたアイコンがずらっと整列しているのですが、スプレッドシートの下の方がこのアイコンたちにすっぽり隠れておりまして。。。実はこの下に、別ワークシートが見れるタブがたくさんあったのですねぇ。。。ひょんなことで、アイコンたちが一瞬隠れたときにそれを見つけたときは、ゾゾゾッと血の気が引きました。私がこれまで見ていたのは、最前面のワークシートに記載されていた「基本情報」のみ！「えらい簡素な情報だなぁ」と思っていたのですが、それもそのはず。その下には、整骨院のテーマカラーやら、見込み客の情報やら、お宝情報がわんさか埋もれていたのですから。新たに得られて、デザインに反映させたい情報としては、「特に若者にアピールしたい」「整骨院のテーマカラーは濃いピンク、紫でクールなイメージで」「シュッとしたデザインはNG」「カラフルではなく落ち着いた雰囲気で清潔感があるサイトに」という点。早速配色変更です。えらいミスを犯してしまったけど、早い段階で発見したことをよしとして、前向きに捉えよう！

再度のお直しを経て、最終的にはこのように落ち着きました。

配色を、温かみのあるオレンジｘグリーン系で、と最初は思っていたのですが、後で見つけた架空クライアントの要望を反映させてクールなパープル系でまとめてみました。最初、パープルと同系色のネイビーも使ってみたのですが、すずらんの葉っぱのイメージを後に続くページデザインに取り入れたかったので、サブカラーはグリーンにしました。

現在このファーストビューに続くTOPページを作成中です。後に続くページの流れを考え、二案のうち、最初に作成した第一案を採用することにしました。頑張って制作を続けます！

今回の教訓は、余白の取り方やレイヤーの重ね方はもちろんなのですが、スプレッドシートを侮るな！ということ。今後はアイコンで隠れている下にもタブがないか、入念にチェックしようと思います。