生徒作品

2021年度生徒作品(ECサイト)

第一回企画発表 2021年/5/20・最終発表日 6/17
今年も、専門学生(5チーム@5-8名)がECサイトを完成させました。およそ2ヶ月間に渡る制作期間、お疲れ様でした。それぞれのショップが「コンセプト」を掲げ、時代洞察を見据えた付加価値の創造、商品決定、サイトネーム、デザインをすべて企画制作しました。

実在のない架空商品・架空店舗です。システム等一切組み込んでおりませんので、購入もできません。学習のため、写真類一部ネット上のものをお借りしています。各ショップサイトは、検索対象外(noindex)として施してございます。検索に上がることもありませんので、ご了承ください。

そなえるもーる

(制作チーム/ ラーメン大好き同好会)
オリジナルの防災セット「リュクボ」防災用品、備蓄品販売のECサイトを制作しました。

サイトコンセプト
「もしもに備える、防災リュック」
時代洞察
2021年は、東日本大震災から10年の節目にあたることから、「もう一度、防災について見直そう」に着目しました。巷では30年以内にマグニチュード8-9級の南海トラフ地震が来るかもしれないなど予想されています。
ターゲット層
・30 代 ~50 代
・家族持ちの女性
ペルソナ
36歳 女性(主婦)
大阪在住、
4人家族、共働き
前々から、備蓄品を用意したいと思っているが、具体的に何を買えばいいかわからない。

総評価

かわいいキャラクターをメインに、ロゴマークの考案も素晴らしい。サイト全体にまとまりがあり、非常に見やすく買いやすい構成となっています。文字の大きさの大小にメリハリをつけ、読みやすさ、インパクトに配慮していますね。黄色と青の色使いも素晴らしく「防災イメージ」を払拭させるような明るく元気なデザインコンセプトです。

優れている点

優れたデザイン

まとまりのある構成、心地よい余白、インパクト。黄色とネイビーをうまく使った色合い。そして「読みやすさ」非常に優れたデザインに仕上がっています。

スライダー内のそれぞれバナーも、バラツキなくまとまっており、チーム制作と思えない仕上がりです。

商品のよさが伝わる

もしもに備える、防災リュック
「リュクボのこだわり」のコンテンツは、非常に重要です。商品のどこが優れているかが、しっかり明記されています。

ウェブフォントの効果
お気づきでしょうか?見出しなどに、ウェブフォントをうまく活用しています。
(タイプラボ参考/ニタラゴルイカ)

サイトのイメージだけでなく、可愛くて親しみやすい商材のブランディング効果に、うまくマッチしています。リュクボのこだわりを「3つ」に絞り、コンパクトにまとめた点も、非常に素晴らしいと思います。

アイコンの活用も効果的です。ぜひ参考にしてください。
納得のいく商品詳細。和食セットと洋食セットを展開。

購入者が買いたくなった時、速攻でカートに入れられる工夫も素晴らしい。
このページは、お客様がカートに入れる最も重要な画面です。リュックの中身セットがしっかり分かるように作り上げてあります。セット内容のサムネイルは、それぞれクリックすることが可能。ポップアップで詳細が出るように工夫されています。直下に、購入ボタンを配置し、ここで納得したユーザーがすぐに購入できるよう構成されています。専門学生が作ったと思えない完成度。見出しのデザイン、文字の大きさ、余白、ぜひ参考にしていただきたいです。

【補足】「おとなリュクボ」と「こどもリュクボ」が若干、接近しすぎているので、ここが少し惜しい点です。
シリーズ紹介

アドバイス

アイキャッチの工夫
今回、大人用と子供用の防災リュックを提案していますが、サムネイル(アイキャッチ)がほぼ似ているので、「大人用・子供用」と一目でわかる工夫があるともっと良かったと思います。

サイト内に人物イメージがないところも、若干身近に感じづらい印象になっているかもしれません。

キャラクターを活かした提案

今回かわいいクマのキャラクターを考案したので、リュックにキャラクターがプリントされていたり、専用のキーホルダーなども考案すれば、さらにブランドイメージとしての付加価値も上がったでしょう。リュックは、防水加工になっているはずですから、「防災用だけでなく普段仕様でもお使いいただけます」などの明記があると、購入者が増えると思います。もしかすると、家族キャンプにも使えるかもしれないですね。

リュックのサイズ
「子供用」と明記していても、幼児から小学生まで背丈がかなり違いますので、どの年齢のお子さんが背負える大きさなのかわかりやすくすると、購入意思に繋がります。大きさを明記するには、実際に子供が背負っている写真を添えるとわかりやすいです。

特設サイト「東日本大震災から10年~日本のリスクマネジメントの今~」公開  ~3.11の教訓に学び、ニューノーマル時代のBCPを考える~|ニュートン・コンサルティング株式会社のプレスリリース

メッセージ性を高める
2021年は、東日本大震災から10年の節目。ここに着目した時代洞察も素晴らしいと思います。ウェブサイトにもメッセージ性を生かすとさらに良かったと思います。

「東日本大震災10年特設サイト」
みんなからのメッセージ

シナリオ販売「OBAKE」

(制作チーム/ 卍双剣䆿血ャ卍)
個人間取引(CtoC)で、シナリオを販売するネットショップを制作しました。

サイトコンセプト
あなたの作品にもうひと味付け足しませんか。あなたのつくったシナリオで制作のお手伝いしませんか?

時代洞察
お家時間の増加により、創作する時間が増えた。SNSなどを介して作品を発信する場が増えた。

総評価

ゴーストライターの名称から「おばけ-OBAKE-」というサイトネームが、ユニークでいいですね。近年、アニメ好きな人が増えています。シナリオは書けるけれど、イラストやキャラクターが描けない!イラストは描けるけどシナリオが思いつかない!など相互の要望に応えるCtoC。コロナ禍の時代にもぴったりな時代洞察で素晴らしい提案です。

優れている点

シンプルに検索窓

トップページは、シンプルに検索窓をセンターに配置しており、非常によいと思います。トップページから、速攻で検索することで多くのシナリオを即座に探すことができますね。

ピックアップ

ライターのプロフィールが見れる
人気の作家さんをピックアップしており、横スクロールすることで作家さんを吟味しながら、選ぶことができます。


さらなる豊富な検索
実際には作動していませんが、タグ付けすることでシナリオを探すこともできます。ジャンルやカテゴリー、長編・短編などあらゆる検索機能を搭載しており、シナリオや作家さんを探しやすい工夫があります。

ランダムバナー

バナーがランダムに切り替わる
トップページに人気のジャンルから探せるようになっています。目に付くバナーはランダムに切り替わる仕様になっており、工夫されていますね。

アドバイス

「売りたい人」「買いたい人」が融合しているので、少しわかりづらい構成になってしまっています。ユーザーが2者であり、非常に難しいサイト構成なので、制作着手前にしっかり誘導経路を考えておきましょう。

ウェブサイトは、トップページの印象が非常に重要なので、ここでユーザーの関心が得られないと、会員登録に繋がりません。ヒーローヘッダーの直下で、サイトの概要が概ね理解できるような工夫が必要です。

OBAKEについてがよくわからない
  • 「おばけ」って、どんなサイトなの?お金はかかるの?
  • サイトの使い方は?登録しないと使えないの?

「サイトの概要」と「使い方」は違います。
特殊な商材であるが故、初めて訪問した人は、サイトの概要がわかりません。OBAKEの使い方は、こちらのページに書かれているので、なんとなくわかるのですが「おばけ」がどのようなコンセプトで、ユーザーの夢や希望をどのように叶えてくれるのか、伝わりにくい点が残念です。

ここでシナリオを投稿する人は、アマチュアですから「自分のシナリオを買ってもらえるだろうか」など自信がない人が多いでしょう。OBAKEが、そっと背中押ししてくれるようなコンテンツやキャッチがあれば、きっと登録したくなるでしょう。

あなたの夢を叶えます。形にします。
あなたのシナリオやイラストが、見てもらえるチャンス!
クリエイターの集いですから、サイト全体の印象は、明るい、ワクワク感が向上する、夢が膨らむ、楽しくなるなどの工夫があると巷で人気のサイトになるでしょう。

色合いはサイト全体の印象を決める。
サイトカラーが黒なので(おそらくゴースト=黒で決定したものと思われますが)、暗めな印象になっていることも残念な点です。せっかくのサイトロゴも、生きていません。

無形財アイテムを売買する難しさ
イラストもシナリオも相互販売できる仕様にすると「売りと買い」が相互にできるので、メルカリのようなCtoCが実現するでしょう。メルカリは単なるモノとモノの売買ですが、OBAKEは、無形財を売買するので、人の気持ちや思い・叶えたい夢・個人の要望などが決定意思に直結します。機能性だけでなく人の心に響く訴求をすることが、会員登録の決め手になります。

ひとくみ記念日

(制作チーム/ロコモコ)
誕生色の靴下販売サイトです。出産祝いや、小さなお子さんにプレゼント向けのECサイトを制作しました。

サイトコンセプト
「親子に贈るひとくみの記念日」
時代洞察
約8割の人は、プレゼント選びに困っている。
ターゲット層
・プレゼントに送るものを悩んでいる
・20~30代女性。

総評価

トップページから、ぐっと女性の気持ちを掴んでしまうストーリー性の高い仕上がりになっています。ガーリー過ぎない大人ピンク色が、ターゲット・ペルソナと合致していますね。ヒーローヘッダーの写真がかなり印象を左右してしまうので、写真の選択にはかなりの苦労があったようです。「足元から心まで温まる少し特別な靴下」というメッセージ性、手書きのイラストとさり気ないアニメーションが効果的になっており、単なる靴下ではない魔法のような訴求効果がユーザーの心を捉えます。

つい読みたくなるストーリーによる誘導
ウェブサイトで重要なのは、ユーザーが訪問した後、「次に起こすアクション」を想定することです。ひとくみ記念日は、→誕生月を選ぶ、→色を選ぶなど、アクションを起こしたのち、靴下詳細へたどり着き、納得した上でカートに入れる、という流れになっています。トップページが魅力的に構成されているので「つい見たくなってしまう」「誕生色って何なの?」という次のアクションにつながる興味をおこさせるようなストーリー仕立てになっています。下層ページに入ってからカート到達まで、魔法が解けないテクニックを研究しましょう。

優れている点

心地よいデザイン

繋がり・緩やか・自由を表現するデザイン
トップページが非常に魅力的。緩やかな曲線は、癒し・自由・手書きなどの印象を与え、効果的です。また、ヘッダーにはロゴが縦書きになっていて、目を引きます。SNSレビューの配置も購入意思決定の要素になります。

商品の特徴

ひとくみ記念日の特徴
商品の特徴をトップページに配置。「単なる靴下でない」ことへの付加価値をしっかり明記。付加価値を定義してあります。柔らかいアイコンがほっこり分かりやすいですね。

アレンジもできる付加価値提案
靴下にワンポイント刺繍が入れたりできるサービスも展開しています。

語りと検索

「あなた色を見つけてください」は、ユーザーへの語りかけ口調は効果的です。直下に検索窓が、可愛らしくデザインされていて、サイトデザインへの拘りが感じられます。

アドバイス

トップページが魅力的であるが故、次の階層ページへ推移した瞬間、若干がっかりしてしまう。

単調な誕生月
靴下が列挙しているだけ?トップページにあった幸せ感 はどこに?

誕生月をクリックすると愕然としてしまう
誕生月パネルにもひと工夫あるともっと良かったかも知れません。角を丸くするだけでも、柔らかくなりますし、さりげなく背景を利用してみるのもいいでしょう。

あれれ?単に靴下が並んでいるだけ?無人くん?
せっかくトップページでワクワクして誕生月にたどり着いたのに、靴下がずらっと並んでいるだけで、トップページで得た高揚が、一気に冷めてしまう傾向にあります。

カゴ落ちさせない工夫
目指す誕生日は1アイテムなので、他の商品と比較する楽しさや迷う楽しさも、「ひとくみ記念日」にはありません。カートまで最速3クリック。この3クリックまでを脱落させることなく、慎重に誘導する必要があります。

ユーザーが「購入するまで」がECサイトの役割ですから、「カートに入れる」まで、しっかり誘導させる工夫を考案しましょう。

※【カゴ落ちとは?】カゴ落ちは別名「カート放棄」とも呼ばれます。購入意思のあるお客様が、一旦、商品をカートに入れたにもかかわらず購入しないままサイトから離脱してしまうことを指します。 こんな悲しいことはありません。実際のECサイトは、アクセス解析等を導入しており、カゴ落ち率の統計も記録されています。

【参考イメージ】
靴下それぞれにメッセージ性や写真、カラーネームに工夫があるともっと良かったかもしれません。なかなか写真素材がなく難しかったと思います。(参考)/タビオ(靴下販売)

カートに入れられない!
カート周りは、靴下の長さや素材、サイズ、ラッピングの有無などが選択できる仕様になっていますが、値段の表記がなく、「カートに入れる」の最終ボタンも配置されていませんでした。非常に残念です。

値段がわからない!
複数人でのグループ制作、短いスパンでの制作期間であったこと、非常に大変だった様子が伺えます。商材の値段・送料などは、初回の企画の時点で、しっかり決めておきましょう。

贈り物をする人の気持ちを汲み取る。
今回は、「贈り物・ギフト」が主体のECサイトですから、送料や包装紙、「のし」やリボン、メッセージカードなどのインフォメーションは、重要です。
参考: ギフトラッピング | Tabioのギフトラッピング

姪っ子に贈りたい

出産祝いなので、ラッピングしてほしいです。

カート周りに、ラッピング、ギフト仕様の概要があると購入意欲が高まります。

居酒屋宅飲み亭

(制作チーム/ メンズ)
コロナ禍により、お家時間が増え、外食アルコール規制が勧告されました。この時代洞察により、ウーバーイーツなどの出前・宅配サービスが拡大。居酒屋宅飲み亭は、自宅で居酒屋のような気分を味わえるような宅配サービスを考案しました。今回の企画は、実店舗での飲食はできない想定であり、ゴーストレストランという架空店舗です。

サイトコンセプト
お酒とおつまみが頼めるデリバリーサイト
「自宅で呑みてぇ」のための居酒屋
時代洞察
外で飲む機会がなくなった反面
自宅でお酒を楽しむ人が増えている

ターゲット層
20~30 代の男性
・居酒屋が休業中で困っている
・オンライン飲み会や自宅で知人と
お酒を飲む
・デリバリーサービスをよく利用する

総評価

フードデリバリー市場に着目!
コロナ禍の時代洞察にぴったり合った企画。自宅でもっと充実した居酒屋スタイルを再現したい人は、たくさんいることでしょう。ウーバーイーツ利用者も増加してます。お酒のデリバリーは、ありそうでなかった企画です。未成年者は、購入できない工夫や、カート決済「注文完了」までの画面もほぼ完璧に仕上げており、押しやすいボタン配置、見やすい画面設計などユーザーフレンドリーに配慮されています。

優れている点

すぐに注文できる

トップページには、美味しそうなメニューが並び、すぐに注文できる構成になっています。お品書きも、目立つように配置されていますし、「注文の仕方」も、非常にシンプルに解説されていて、安心してオーダーすることができます。

魅力的アイキャッチ

アイキャッチのコピーが生きる
アイキャッチがわかりやすく、それぞれにキャッチコピーも記載されていて、ついつい欲しくなるビジュアルです。ここに値段の記載があれば、さらにいいでしょう。
SNSで拡散を狙う
トップページにもSNS掲載があり、インスタグラムでも宣伝してもらいやすい工夫も施されています。

スライダー効果が生かされている
スライダー効果により、一目で美味しそうな写真をたくさん見ることができます。まずは「美味しそう!」「今すぐ飲みたい!」という気持ちになります。ECサイトは、ある程度カートまでの勢いが必要なので、ユーザーの高揚を下げないよう、カートまで誘導させることがポイントです。

アドバイス

「居酒屋宅飲み亭」の特徴は、特殊フォントを採用しているという点です。居酒屋を表現するため、ウェブフォントを使用しているようですが、サイト全体に使用するべきではないと思われます。

見づらい?小学生の字?
どんな効果があるの?

特殊フォントの使い過ぎに注意

  • 読みづらい
  • 文字が接近しすぎ・小さい
  • ヘタ字?
  • 料理が美味しそうに思えない。

特殊フォントは、実店舗のメニューや看板、ポスターによく使われていますが、ウェブサイトには効果的(部分的)に使用すべきでしょう。例えば、タイトルのみに使用する、キャッチコピーだけに使用するなど部分的に活用しましょう。

宅飲み=居酒屋を再現するビジュアルがない
今回のECサイトの最も「肝」の部分である「宅飲み」これが、どこを見ても直結しません。単純に普通の「居酒屋さんのウェブサイト」になってしまっています。あくまで「宅飲み・デリバリー」を訴求したいところです。「宅飲み」で画像検索してみましょう。

「自宅で呑みてぇ」のための居酒屋イメージ

「自宅で呑みてぇ」のための居酒屋?ペルソナの「山田さん」はどうなった?

宅呑みやデリバリーが連想できない
トップイメージも、自宅が連想できないですし、何やら居酒屋で女性と男性がリモートで話している状況で、「宅飲み」「デリバリー」コンセプトや企画と全くマッチしていません。ターゲットは、20~30代の男性を挙げていますから、仮説から外れないよう貫いてください。

サイトタイトルが大き過ぎる。
スライダーパネルのサイトタイトルが大きすぎます。サイトタイトルは、ヘッダーにあるので、スライダーにタイトルは、不要でしょう。居酒屋に行けない今だから・・「自宅で呑みてぇ」に応えます←このキャッチを大きく活かしましょう。

イメージ・写真の重要性
「自宅で呑みてぇ!」がコンセプトですから、呑めない自粛期間に、自宅でも居酒屋のように楽しめる!などのビジュアルがあると、今回の企画は大成功だったのではないでしょうか。

mini(スマホカバー販売)

(制作チーム/ いけいけどんどん)
唯一無二のアンドロイド専用のスマホカバーを販売する EC サイトを企画提案。アンドロイドのスマホカバーの種類が少ないことに着目。こだわりのある人へ向けてオリジナルの「スマホカバーのデザイン」を提案できる上、販売もできるECサイトを展開しました。「muni」というサイトネーミングは、唯一無二のワードから命名しました。

サイトコンセプト
Android のスマホカバーで悩ませない!
時代洞察
Android のシェア率が上がっている
Android カバーが圧倒的に少ない

ターゲット層
20代女性
Android カバーで他人と違うものを持ちたい
販売者
自分の考えたデザインを売りたい

総評価

もう少しターゲットを絞り込みましょう。
スマホカバーの購買は、機種が変わるごとに必要ですね。使っているうちに経たってくることもあり、スマホを持っている人のほとんどがカバーを購入します。ここで、miniのターゲットはかなりカバーに拘りがある人に絞られると思いますが、企画内のターゲット層を、もう少し絞り込みましょう。例えば、スマホカバー以外に、どんなことに興味がある人ですか?趣味は?持ち物は?スマホのデザインも一概に色々ありますから、好みと傾向を合わせるためにも、ペルソナを具体的に考えてみましょう。

優れている点

コンセプトが明確

自分のデザインが売れる
単なるスマホカバー販売でなく、自分のデザインが売れる!という夢実現を企画したのは、とても良いと思います。「購入したい人」「売りたい人」の2者へのわかりやすい誘導が工夫されています。

ランキング

ECサイトに欠かせない売り上げランキング。訪れた人は、必ずと言っていいほどここをチェックするコンテンツです。ECサイトを非常によく研究しています。

バリエーション

分かりやすいコンテンツエリアの仕切り
バリエーションが豊富であることも、一目でわかる。ワクワクしてきますね。さらに、このエリアには、ドットの背景が敷かれており、ブロックエリアの仕切りが視覚的にわかるような工夫が施されています。

アドバイス

モニターの約半分で一部画面が切れてしまう。

最低モニター50%は耐えれる(切れない)レイアウトを考慮しましょう。謎の空白は、スマホで見ると改善されています。

  • ヘッダー、ナビゲーションが接近し
    接触したり途切れる。
  • スライダー上部が切れる。
  • PCでのレイアウトで、謎の空白
アイテムは高校生(10代)寄り?

アイテムとターゲット
今回のターゲットは、20代女性となっていますが具体的な人物像が描かれておらず、トップスライダーに配置されている女性と販売されているデザインがやや不一致な感も否めません。

カラーの考慮
サイト全体の配色に、「緑色」を多用していますが、チカチカする箇所があります。チカチカ色は、あまり多用せず効果的に使うと見やすくなります。

ターゲットが若い年代層であっても、チカチカする配色を選ぶ必要性は特になく、読みやすさを最も重視してください。配色は、サイト全体のイメージを決定しますから、慎重にセレクトした上で使い分けるとデザインセンスが格段に向上します。

グリーン配色のサイト紹介
https://www.ikesai.com/color/green/
https://sankoudesign.com/category/green/

緑色ってどうなの?
みどりさん

グリーン(緑色)カラーのサイトって難しいの?

実は・・・
ウェブサイトに緑色をメインカラーに使用するのは、非常に難しいのです。そもそもわたしたちの暮らしの中で、緑色といえば、自然、野菜、信号機、カエル、抹茶、など「緑」を連想するアイテムのインパクトが強く、緑を見ただけでそれらのアイテムと被ってしまうことにあると思われます。

ですから、緑を使用するサイトは、ほぼ緑色から関連される業界(医療業界・環境・安全第一・自然に満ちた・エコロジーなどを掲げている業界)が使用している場合が多いのです。また、緑と相性がいいセカンドカラーの選別も難しいので、全体に緑色一色に偏りがちなことも挙げられます。

結尾

このコーナーをご覧になられた方、いかがでしたでしょうか。「えっ?ほんとうに学生が作ったの?」と目を疑うのではないでしょうか。

パソコン自体に慣れない初心者レベルから初めてHTML言語を学び、およそ1年〜3年目でこのようなサイトが制作できるようになります。特に昨年から今年にかけては、コロナ禍の影響でリモートを活用した制作が行われましたが、今年も無事、クォリティの高い作品を完成させることができました。

ほんとうにお疲れ様でした。

2021年6月