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

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

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

そなえるもーる

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

総評価

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

優れている点

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

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

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

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

アドバイス

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

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

シナリオ販売「OBAKE」

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

総評価

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

優れている点

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

アドバイス

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

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

• 「おばけ」って、どんなサイトなの？お金はかかるの？
• サイトの使い方は？登録しないと使えないの？

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

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

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

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

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

ひとくみ記念日

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

総評価

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

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

優れている点

アドバイス

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

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

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

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

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

居酒屋宅飲み亭

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

総評価

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

優れている点

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

アドバイス

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

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

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

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

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

mini(スマホカバー販売)

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

総評価

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

優れている点

アドバイス

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

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

緑色ってどうなの？

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

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

結尾

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

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

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

2021年6月