# チャプター1 皆さま、おはようございます。 ウェブエンジニアの七色です。 本日は、ECサイトの深掘りについて、 1つテーマを設けてお話ししたいと思います。 本日のトークテーマについては、 ECサイトのマイページについてお話したいと思います。 マイページ、言い方によってはアカウントページと言ったりしますが、 皆さま、想像をつけますでしょうか。 マイページ、アナソンとか通常のECサイトだったら、 おそらく会員登録できるECサイトだったら、 変わらずある機能と言えると思います。 自分の顧客のいろんな情報を編集できるページになりまして、 わざとくりその中に入っている機能をかいつまんでありますと、 例えば、顧客のお届け先情報の登録、もしくは編集ができる機能、 支払いに使うクレジットカード情報の登録や編集ができる機能、 お客様がお気に入りに追加した商品が閲覧できるお気に入りリスト閲覧の機能、 お客様がこれまでに注文した履歴を確認できる注文履歴の機能、 もしストアにそういった機能があれば、 ストア内で使えるポイント履歴を確認できる機能、 あとはこのストア内にそういう機能があれば、 定期購入の内容の編集機能、 もしこれもあれば、お客様の会員ランクを表示する機能などです。 実際に毎ページって1ページの中にこういったいろいろな機能が備わっております。 しかし、どれも外すことができない重要な機能ばかりです。 ここについて、 ECサイトを全く作ったことのない人がこれから違っているという場合は、 めちゃくちゃ要注意なところもありますし、 それもECのプラットフォームによって、 そのマイページの寄送をどこまで自分でするかどうかというのが、 本当に全然プラットフォームによって全く違います。 例えば国産のフューチャーショックというプラットフォームとか、 ベースとか、 そういったものはストアとかも日本の収集管を踏襲していますので、 おそらく日本でよく使われるような機能は備わっていたり、 あとは駐車の変更に関しても、 都道府県のプルダン学びが、 北海道という北から沖縄に南にかけて順番に並んでいるとか、 そういった日本の収集管に合わせた設定が最初からされたりしています。 なんですけど、例えばこれが今とても主流に使われている ショピファイTVCのプラットフォームだったりしますと、 今言った都道府県の並び、 客様が自分の住所、回送先住所を編集する場面のときに、 都道府県のプルダンをクリックしますと、 上から47個並んでおります。 それが都道府県のどれを選ぶかというところですけど、 ショピファイのデフォルトの仕様だと、 これがなんと愛用順に、名前の小順になってまして、 愛知県が一番先頭に来るんですね。 その次が秋田とか茨城とかっていう風に、 場所が一体一体めちゃくちゃに頼まれていて、 日本の召集官をこれまで経験している人は、 自分の選択したい都道府県がどこにあるか全然見つけづらい っていう仕様にショピファイはデフォルトではなっています。 なので、ショピファイはこういったところを カスタマイズスペースポイントっていうのがいくつかあるんですけども、 それを行っておいたほうがいいです。 じゃないとこういったことって、 ディレクターさんもデザイナーさんも、 こうした知見がなければ、定見がなければ、 そういう趣味になっていることすらわからず、 中を触ったり、チェストしている方じゃないと気づけない問題になると思います。 おそらくチェストを一番するのは、 ディレクターかアレンジ屋さんになると思います。 なので、こういったところを踏まえながら見ていきますと、 例えば、クレットカード情報の登録編集。 これはおそらくほとんどのプラットフォームで標準で備わっている内容かと思います。 お気に入りリスト。 お気に入りリストに関しては、 ショピファイの場合は標準でお気に入り追加機能というものが実はございません。 これはびっくりされる方も多いんですけど、 なんで標準でないのってよくこれを聞きます。 もしかしたらショピファイにも標準機能として実装がされる可能性はあるんですけども、 プラグインみたいな感じで追加で、 ショピファイの場合はアプリっていう呼び方をするんですけど、 結学生でサブスクでアプリっていうものを選ぶことができます。 ショピファイはお気に入り追加、お気に入りリストを表示するためのアプリっていうのを、 たくさんのチャードパーティーが作ったアプリの中から選んで、 それを実装、追加、インストールする形です。 インストールしたら一応ショピファイの行動でストア制作ができるってことが有利なので、 インストールしたらもうお気に入り機能は使えるは使えるんですけど、 アプリにもいろいろありますけども、 大抵の場合、インストールしたそのままのデフォルトの使用だと、 めちゃくちゃやもったいUIだったり、 なんでそのとこにハートマークがあるのみたいな、わけわからない仕様にほとんどがなってます。 ほとんど、95%、エンジニアがUIをカスタマイズしなければいけなくなります。 一旦治療所を打ちます。 # チャプター2 で、お気に入り機能、じゃあカスタマイズどうやってするかってなるんですけども、 一回こうShopifyのアプリのUIカスタマイズってもう、一回経験すれば、エンジニアがあればわかると思うんですけども、 アプリは便利に自分でコンポーネントをゼロから制作する必要がなく、 またはフロントエンド側の実装のみでは実現できない機能ってのを、 アプリはShopifyのバックエンド側とも連携が可能なので、 アプリじゃないとそういった機能できないとする場合があります。 お気に入りもおそらくフロントエンド対応だけでは不可能で、 バックエンド、データベースと連携した何かしらの仕様が必要になるので、 おそらくアプリではないと実現ができないと思います。 そのときのUIの変更について、もうすでにフレームってものがアプリのほうで作られてるんですね。 ハートマークのボタンの設置箇所だったり、 お気に入りリストを表示するときのページのURLになる数とかも アプリのほうで決められているものがやっぱりあります。 なので、仕様をちゃんと理解しておく必要があるんですね、そのアプリごとに。 このアプリはここが編集できる、ここが編集できない。 ほとんどの場合は伝えるCSSで見た目を調整していくという形になります。 結構力技でCSSで改修、カスタマイズをしていかないと、 これすごいイテてる見た目になったよねっていう風にはなかなかなれない。 なので、Shopifyは濃厚度で制作できると言いますけども、 本当に濃厚度で制作する形で、そういういろんなアプリも入れていくと、 ひっちゃらめっちゃな、ぐちゃぐちゃなデザインのサイトにどんどんなっていく気がします。 なので、結局エンジニアいるんじゃんっていう話になると、 ストアがどんどん発展していくと絶対なると思います。 その時に発注するエンジニアの人がShopify経験があるだったり、 もしご運動で自社でストアを制作して運営しているのであれば、 なんでもできるんですけど、他社さんのストアとかを受注して制作するという場合は、 ディレクターの人だったり、もしくはそこまで最初から要件を詰めるのであれば、 営業の人とかがこうしたことも知識として実は知っていないと見積もりがずれます。 なぜなら標準でも実装されてお気に入り使えるという点で話が弾いていると、 実はShopifyだからアプリを入れなければいけない。 そして律学サブスクはお客様側の方で毎月発生するってことも先に説明しなければいけない。 哲学の学もアプリによって変わる。アプリによって理性ながら差異がいろいろあって、 機能が違ったりします、若干。 ということで、実は前提知識として知らなければいけないんです。 使用をいろいろ。ディレクター、エンジニアは使用理解はもちろんしている必要があるんですけど、 意外と私のこれまでの制作環境では見た目を作っていくデザイナーさん、 この方がこういった話になかなかついてこれないというか、 本人自身もまず踏み込もうとしないという方がかなり多くて、 結構ここで、マイページの画面デザインしますってもし話し場になったときに、 デザイナーさんがどんどん自分の思い込みというか思っているマイページの形、よくあるマイページの形でどんどん作っちゃったりする。 なかなかそんな現場ないかもしれないですけど、私の場合はありまして、 その場合、いやいや、機能を勝手に作るのよっていう、いろんな、 XBeeとかSigmaの上ではテキストを置いてそういう機能があるってことにしてどんどん進めていけますので、 そこを実はその機能を入れるにはお金がかかる、 もしくはそれをカスタマイズ、そういう見た目にするためにはエンジニアの工数がかかる、 イコール企業が発生するとかっていう認識を持っていなきゃいけないので、 実はデザイナーさんも初期再構築の場合は使用理解っていうものをしている必要がありますので、 エンジニア的な発想っていうのをデザイナーさんも持っている必要がある。 逆に言うと、エンジニアもこれデフォルトで言われるまでもなく、デザイナー的知識は持ち合わせています。 ほとんど場合、今のWebフロントエンド開発で言うと、 フロントエンドやる時点でデザイン的意識は持っています。 エンジニアもデザイン側にありもよって現状いますので、 デザイナーさんもきちんとそういうITリテラシーだったり、 使用に関しての理解っていうのをしていくっていう必要があるかと思います。 話が長くなっています。 次がポイント履歴、注文履歴。 注文履歴はほとんどプラットフォームで標準であるかと思います。 ただ注文履歴のどういったレイヤーで表示するかとかもストアによって違うと思います。 注文した履歴の中で、例えば注文日時、何の商品かとかっていろいろ打ち分けが書いてありますけど、 それが一覧でテーブル上で表示されて、注文番号をクリックしたら、 その注文履歴の詳細ページに今度移行したりするとか、 そういった仕様がプラットフォームによって違ったりしますので、 そこもこのプラットフォームの場合はどういう表示の仕方をするんだっていうのを先に踏まえた上で、 デザインなりUI設計をしなければいけない。 逆に言うとUI01でスクラッチで作らないので、 UI設計っていう発想自体がそんなにないと思います。 今すでにあるこの制限の制約の中でどういったカスタマイズをするかっていう発想、 そっちのほうがショップ側の場合は強くなっていくんだと思います。 よくスクラッチで作っていくと、こういったお気に入りケースがあったり注文履歴っていうのも、 データベース連携から全部コーディングプログラミングで作っていけるとは思うんですけど、 ショップ側の場合それは現実的ではなくなってきます。 発注する方の費用価としても、そんな大手のフルスクラッチで作るストアほどの、 何百万とかそんな額で発注する方も少なかったりしますので、 ショップ側プラスとかのストアでなければ。 なので、こういったカスタマイズ前提の使用が最終的にある域でデザインも作っていくっていう発想が必要になったりします。 ではまた次の章に移ります。 # デザイナー 次はポイント利益です。 これはストアにポイントを導入する場合の話です。 ポイントについてもフューチャーショップや国産Voicyプラットフォームであれば付いていることが多いです。 ショップファイルは標準ではないのでアプリを直接インストールする必要があります。 ポイント利益や定期購入の機能や会員ランクなどを実装する場合もあります。 定期購入のアプリを使う場合もあります。 定番で使われているアプリや評判の良いアプリなどが必ずあります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを使う場合もあります。 定期購入のアプリを使う場合もあります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを使う場合もあります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。 定期購入のアプリを持っている方が有利になります。