◎ポートフォリオ
PORTFOLIO
和菓子店のホームページ
製作意図
ツール：WordPress
テーマ：Astra
プラグイン：Elementor, Starter Templates
このホームページの目的は「和菓子店への集客」です。スムーズに予約や問い合わせができるよう、電話番号をトップと下部に表記し、スマホビューではボタンタップで電話を掛けられるようにしてあります。物販系のホームページなので、主役である商品画像を際立たせるよう意識しつつ、フォントや縦書きを用いて和風なデザインをしてみました。配色は全体的に黒や白を基調としつつ、ワンポイントカラーとして抹茶色を使用し、和菓子店らしさを出しました。
ファーストビューに関しましては、まず商品画像を大きく表示し、黒い背景で高級感を出しました。和菓子店のホームページなので、店名は崩して書いたようなフォントと縦書きで表記してみました。
ファーストビュー以降のデザインに関しては、商品画像を魅力的に魅せることを第一としつつ、テキスト情報の可読性も意識しました。明朝体と縦書きは見出しのみに抑え、白地に黒字の表記で表記しました。また、ファーストビューからスクロールしてでてくる情報は、まず商品情報、次にコンセプト、といったように見る人が気になるであろう情報を優先して配置しました。加えて、商品画像や商品情報を展示品のように見て回れるようにメニューはどこからでも呼び出せるようにし、サイト内の回遊性も意識しました。導線としては、ぐるぐるとゆっくり見て回った後、サイト上下に配置されている電話番号、もしくはどこからでも呼び出せるアクセス情報に行きつく、という流れを想定して作りました。
全体として和風な雰囲気のなかで商品や情報をゆったりと見て回っていただくことによって和菓子店へ来店したいという思いが高まるようデザインしてみました。
放課後等デイサービスのホームページ
製作意図
ツール：WordPress
テーマ：Astra
プラグイン：Elementor, Starter Templates
このホームページの目的は「利用児童・生徒の獲得」です。この目的に直結するパーツである電話番号の表示と資料請求ボタンは一番上に配置し、ページを開いてすぐ目に入るようにしました。スマホでは電話番号をタップすると電話アプリが起動するようにしています。配色に関しましては、福祉サービスのホームページということで、温かで親しみやすい橙色をメインカラーとしました。
ファーストビューに関しましては、サービスの告知をするホームページなので、何のサービスなのかをテキスト情報でしっかりと伝えることを意識しました。「発達がゆっくりなお子様を全力サポート！」という、重要なテキストを黒字で太く大きく表示することにしました。場所はZ字の起点であり、最初に目につく左上にしました。さらにZ字上に様々な子どもたちの写真を配置しました。写真が入れ替わるようにしたり、サイズや形の異なる写真を使用することで躍動感を出し、見る人の目を引きやすいようにしました。背景には、元気で明るい印象を与えてくれる青空の画像を使用しつつも不透明度を下げ、大事なテキストの視認性を阻害しないように気を付けました。
スクロールサインに従ってスクロールすると、「そもそも放課後等デイサービスとは何なのか？」や、「このサービス事業所の特色は何なのか？」、「利用できるまでの流れ」といった、見る人が気になるであろう情報はすぐに出てくるようにしました。さらに「ご利用者様の声」で背中を押し、最後には地図とともに、お問い合わせと資料請求の案内をもう一度表示しています。
全体として温かで元気な雰囲気を醸し出しつつ、訪問者の目を引き、サービス内容をしっかりと伝え、見る人が見たいであろう情報は見やすいところに置いておき、終盤で背中を押す、といったように、ホームページを開いてから放課後等デイサービスにコンタクトをとるまでの流れを意識して作成してみました。
Webデザインセミナーのランディングページ
製作意図
実装方法：HTML、CSS
備考：スマホビュー特化
このランディングページの目的は、無料のWebデザインセミナーへの参加申し込みをしてもらうことです。今回はサービス系のランディングページなので、テキストでサービス内容をしっかり伝える必要があります。ターゲットは40代前後の男性女性。割合は30対70。WEBデザインに興味がある人。あるいは、在宅で働ける仕事を探している人。明るい印象で、信頼感があるデザインを、とのディレクションをいただいています。
ということで、「信頼」を表す白を背景としつつ、明るく親しみやすい橙色も多用したデザインにしてみました。テキストは可読性を意識して白地に黒や橙色といった強めの色で、ゴシック体を使用して表記しました。
イラストに関しましては、ゼロからスタートしてWebデザインで成功するまでの道のりを表現してみました。最初は初心者の状態から学びや実践を重ね、その先に明るい未来が待っている、そんなイメージを伝えることにより、5日間チャレンジに申し込む意欲を高めることができたらと考え、デザインしました。
ファーストビュー以降につきましては、受講特典やセミナーの日程などのセクションを、見る人の視線が自然に流れるように配置しました。各セクションには、テキストの情報伝達を補助するイラストを選定して添えました。また、終盤のビフォーアフターセクションでは、ビフォーを暗く、アフターを明るくし、このセミナーをきっかけに良い変化が訪れることを期待させるようなデザインを心がけてみました。
コンバージョンボタンにつきましては、思い立った時に申し込みがしやすいように序盤と終盤の2か所に設置してあります。
高級インソールのランディングページ
製作意図
ツール：WordPress
テーマ：Astra
プラグイン：Elementor
このランディングページの目的は、見る人に高級インソールを購入してもらうことです。商材であるインソールは、整体師の先生が身体の構造に基づいて開発したものであり、多くの医療機関でも採用されている品物となっています。そのため、「高級感」、「専門性」、「権威性」を感じさせるデザインを、とのディレクションをいただいています。
ということで、このデザインでは、「白衣」の色である白色と、「知性」を思わせる青系色のグラデーションを背景に採用することにより、権威性・医療系・清潔感といった印象を持たせてみました。商品名のテキストには高級感のある金文字を使用してプレミア感を出しつつ、医療機関で採用されている旨のテキストは黒文字で読みやすく表示し、専門性が伝わるように心がけました。
商品画像は「お店の展示品」のように見えるよう意識して配置を考えました。また、専門性が伝わるよう、多くの医療機関で採用されている旨のテキストは、商品画像のすぐ次に目に入るように配置しました。
ファーストビュー以降につきましては、インソール選びに関する疑問を投げかけ、その後、従来のインソールの欠点を説明し、「そこで」と、商品を紹介。さらに医療現場での採用や、仕組みの説明などにより専門的な知見に基づく商品であることを印象付け、購入ボタンへ案内する、といった「導線」を意識してデザインしました。矢印やセクションの形状を工夫し、見る人の視線がスムーズに流れていくよう心がけました。また、テキストで装飾を施す箇所は、「つまみ読みしやすいように」という基準で選びました。
ゴルフスクールのランディングページ
製作意図
ツール：Wix
このランディングページの目的は、室内ゴルフスクールの無料体験レッスンへ申し込んでもらい、会員獲得につなげることです。ターゲットは50代～60代男性ゴルファーとなっています。
まず、今回はサービス系のランディングページとなっていますので、サービス内容をテキストでしっかりと伝える必要があります。なので、ファーストビュー内の重要情報は、テキストの視認性を妨げない白地の上に黒や青といった強めの色で、ゴシック体を使用して表記しました。また、「全額返金」という保証制度と、通い放題ゴルフスクールの中では比較的優しい値段の2か所は見る人の心をつかみやすいと考え、特に強調しています。画像につきましては、サービス内容の伝達を補助するものを、という意図で、室内練習場を背景に、男性のゴルフ講師がゴルフクラブを持ってスイングをしている画像をしっかり大きく表示しました。
ファーストビュー以降は、スクールの詳細、実績、お客様の声、と続きます。お客様の声セクションは、見る人の背中を押す大事なセクションです。なので、吹き出しの外にコメントの要約を添えることによって、つまみ読みもできるように工夫しました。また、コンバージョンボタンは、見る人が押しやすいようにランディングページの序盤と終盤の2か所に設置してあります。
美容サロンのバナー
行政書士事務所のバナー
今回のバナーの目的は、見る人に行政書士へ依頼してもらうことです。
サービスのバナーなので、とにかくまずは一番大事なテキストをはっきりと見やすく載せることを意識しました。
今回の一番大事なテキストは、「建設業許可申請に強い行政書士」。行政書士の専門分野を示し、この分野であれば安心して任せられる、ぜひ依頼したいと思わせてくれるテキストを白地に黒字で大きく示し、アンダーラインも添えました。
佐渡旅行パックのバナー
旅行の販売促進ということで、基本的にはサービスのバナーとなります。サービスの告知の場合はテキストが主役となるのですが、旅行となると行先の写真も目立たせたいところです。ということで、今回はテキストも写真もどちらも重視したデザインを心がけました。行先とお得なパックの告知テキスト、そして写真をZ字上に配置し、その周りには行先の魅力を伝えるイラストをちりばめ、わくわく感をそそるように意識してみました。
お花のサブスクのバナー
このバナーの目的は、詳しい情報が書かれたサイトに移動してもらうこと、そしてサブスクに登録してもらうことです。どちらかというと物販よりのバナーなので商品写真が要となります。魅力的な一枚を大きく表示してしっかりと目に焼き付けてもらう、というのもよいですが、今回は「毎月季節の花々が届くサブスク」なので、複数種類の花々の写真を配置してみました。配色はグリーンを基調とし、ボタニカルな印象にしてみました。
放課後等デイサービスのバナー
作成前にまず、バナーの目的を考えました。今回の目的は、「バナーを見た人に放デイの体験会に来てもらう」というものです。なので、放デイのバナーであること、体験会の告知であることをしっかり伝えるため、この2つの情報は白い帯に大きな黒字ではっきりと表示し、とにかく大事なテキストをしっかり見せることを心がけました。テキストをメインにしつつ情報伝達を補助するイラストも添えてみました。
シャンプーのバナー
サイダーや制汗剤の広告でよくある、すがすがしく爽快なデザインに挑戦してみました。 物販バナーなのでまず商品写真は大きく表示しました。さらに、爽快感を抱かせるような見せ方をしたかったので、数ある「海と空」の画像の中でも特に晴れ渡った明るい画像を選び、商品画像の背景に。仕上げに水しぶきで涼やかさも演出しました。メンズシャンプーのスース―とした清涼感を感じられる仕上がりになっていればいいなと思います。
四柱推命講座のバナー
今回はサービスのバナーなので、何のバナーなのかをテキストでしっかりと示すことを意識しました。「四柱推命の占術士養成講座」のバナーであることを無地の背景に大きな黒字で表示しています。さらに情報伝達の補助として、命式を調べているようにも見える女性の画像を配置しました。また、東洋思想っぽさを出すために、色遣いは中国風に、フォントは明朝体にしました。
さくらのマドレーヌのバナー
季節感のあるバナー作成に挑戦しました。 まず、物販バナーなので商品画像を大きく表示し、春らしさを演出するためにさくらのイラストを添えました。 テーマがさくらなので、背景や文字色にも桜色をあしらいました。 また、お花見は日本の文化なので、和風っぽさがマッチすると考え、商品名は明朝体で縦書きにしてみました。
