既にコーヒー好きのユーザーがターゲットであり、より良いコーヒーを求めて、ブラウザ検索から閲覧する想定のため、オーガニックコーヒーに対するこだわりが伝わる画像でFVの世界観を演出しました。5秒単位で画像が切り替わるようにし、ユーザーに『Natural Beans』の特別感やこだわりを伝え、スクロールしたくなるような導線を意識しました。

オンラインによるオーガニックコーヒー販売の存在を知らないユーザーも多いため、読み進めやすいようにストーリー形式でオーガニックコーヒーの魅力やメリットを伝え、購買意欲がそそるように第三者目線で流れを確認しながら設計しました。

『Natural Beans』様がオーガニックコーヒー販売において大切にしているコンセプト「信頼・安心・健康」が伝わる世界観を目指し、「ナチュラル感・清潔感・上質感」をデザインコンセプトに掲げて制作しました。

配色選定では、ベースカラーを白でナチュラル感・清潔感・フレッシュさを引き立て、焙煎仕立ての新鮮なコーヒー豆を連想できるようにあえてアクセントカラーをコーヒーの実のような濃い赤にしました。テキストカラーを濃い茶色にし、さりげなくコーヒー豆の販売であることを伝えています。アクセントやテキストカラーを濃いめのトーンにすることで、上質感を引き立てています。

フォント選定では、信頼感や安心感がよりユーザーに届くよう、18世紀から愛されている信頼性の高い「Baskerville」をベースとし、Web表示に最適化して設計された「Libre Baskerville」を見出しやナビゲーションの欧文フォントとして選定しました。また、自分のこだわりコーヒーへの愛着感を持ってもらえるよう、本文がメインの和文フォントとして親しみや信頼感、温かみが滲み出る「Zen Kaku Gothic Antique」を選定しました。

スクール課題として初めてサイト制作をしました。決められた題材に沿って作る課題、または自由に題材を選べる自主制作課題の2種類で選択ができたため、自主制作課題に挑戦しました。ただし、実際の業務ではクライアントが必ずおり、目的や課題などクライアントに寄り添ったサイト設計やデザインをする必要があるため、できるだけ決められた題材用に用意されていたヒアリングシートに則り、題材をオーガニック野菜ではなく、オーガニックコーヒーに変更し、課題に挑戦しました。

今回の制作で最も得られた学びは、情報設計の大切さです。初制作とのこともあり、デザインの見た目ばかりに重きを置いていましたが、ユーザー目線でのサイト閲覧やデバイスで見た際のサイトの見やすさなどを考慮できていませんでした。また、対象のターゲットにあった購買意欲をそそる世界観になっておらず、実際にデバイスで確認した際に良く分からないサイトが出来上がってしまいました。

反省点を洗い出し、セクションの順番、コピー内容、伝わる写真選定など、新規ユーザーの目線となってどうしたら購買意欲をそそり、試してみたいと思ってもらえるかを追求しながらデザイン設計の修正を行いました。結果、第三者に制作したサイトを確認してもらい、1回試してみたいかもって思ってもらえるまでブラッシュアップすることができました。