Cntlog > WEB全般 > ECサイトやCMSで良いデザインをするために気をつけている事

ECサイトやCMSで良いデザインをするために気をつけている事

私は自分でデザインをしたものをコーディングする事が多いのですが、最近一件人のデザインをする機会がありました。

デザイン自体に文句を言う立場ではなかったので、やんわりとこのデザインでは「後々問題が出ます」とお伝えしたのですが、スルーされて公開日が近づくに連れて実際に素材を組み込みはじめて現場(運用チーム)からの修正したいクレームが出てきました

こういった事は実はECやCMSのデザインに慣れてないデザイナからのデザインだとよくあることで、珍しくはありません。(見た目はカッコイイデザインだったんですよ。)

私は自分でECサイトやCMSのデザインするときに、現場にクレームが出ずにスムーズに運用をするために気をつけてる事を紹介します

良いデザインとは何か

「良いデザイン」とは何かをはっきりと答えれるものかと言われると人によって「良い」は違います。

私が「良いデザイン」と定義するものは「見る人が知りたい情報がすぐに見つけられる事」を指します。
そしてその情報によって見た人の心を躍動させれたとき初めて「良いデザイン」として評価しています

ですので、いわゆる「かっこいいデザイン」というものは私は良いデザインとはまったくおもっておりません
※特定の誰かをdisるつもりはないので、もしかして私の事…とか思わなくて良いです。

そしてECサイトやCMSのデザインで注意するところは、更新を自分以外の人がするというところです。

Webデザイナーであればコーディングできて当たり前、画像の切り抜き・加工なんてできて当たり前という話ですが、ECサイトやCMSのサイトを更新するひとがみんな類似のスキルを持っているとは限りません。むしろそのスキルを持っていない人が多いでしょう
というか、ECサイトなどであれば、作業が多いので、画像を必ず加工しないといけないようなデザインであれば現場を疲弊させます

ECサイトやCMSのサイトのデザインで1番私が気にするところは(伺ってるスキル・経験で)誰が使ってもいい感じにできるデザインを作ることです。

いい感じの定義はその案件によりけりなので、ここでは定義を省きますが、一定のクオリティを保てるようにデザインをすることで、現場の方はスピードを維持しつつ、どんな素材でもユーザーに違和感を与えさせずに更新ができれば、デザイナが計算した通りの「見た人の心を躍動させる」事に繋がります。

これが私が考える、ECサイトやCMSのサイトにおける良いデザインです。
※SEOとかまた別で考える事はありますが、今回はあくまでデザインのお話です。

良いデザインにするための思考

まずはBASEさんの人気のデザインテンプレートをご覧ください。

BASEさんはECサイトを簡単につくれるサービスです。
ここでは、デザインのテンプレートが販売されています。
作っているのはBASEさんではなく、外部のクリエーターがマージンを払って(もらって?)販売しています。

あくまでテンプレートなので、具体的にどんな商品、どんな人が使うかなどは一切定義されてい状態でデザインをされたものです

これらを見て、Webデザイナの皆さんは見て、どう思いますか?
「普通」「私でも出来る」「どこかで見たことあるようなデザインばかり」などといった感想があるのではないでしょうか。

実はそういったデザインをしたほうがECサイトやCMSサイトでは良いデザインになることが多いです。
※別にBASEさんのデザインが最高に優れてるとかそういう話ではなく、あくまで参考にです。

更新の事を考えずにデザイナの独りよがりでデザインをしたものはのちのち現場を困らせます。
汎用的と聞くと「デザイナは価値がなくなる」という方もいますが、汎用的なデザインを作るのはそれは貴重なスキルです。
(個人的な肌感ですと、そういった感想を持つ方はデザイナの経験が浅い人、自分がデザインしかできない人というコンプレックスを持っている人が多い印象です)

デザインシステムというのを耳にされたことはありますか。
デザインシステムとはデザイナ一人の頭の中にあるガイドラインを明文化するものです。
言ってしまえば、そのブランド、製品などのデザインの仕様作りです。(パターンデザインという言い方もしますね)

共通言語を作る事でデザインの良し悪しをチームで判断できるというのが特徴です。

デザインシステムがあると下記の事が容易になります。

  • スキル差があっても一定のクオリティを維持できる
  • 改善することができる
  • 使いまわせる
  • 拡張ができる
  • 良し悪しを判断できる
  • 新しい人がすぐにチームに入れる

最近はデザインシステムを作れるデザイナが求められてるという話をよく聞きます。
私も最近はコンポーネントデザインにハマっており、みんなが育てれるデザインを考えるようにしています。

使いにくいデザインの具体例

使いにくい=デザイナの想定外と思ってもらうと結構しっくり来ると思います。
例えば

  • 文章の量が各々違っていて、サムネイルやカードの高さがバラバラ
  • スマホとPCの画像のトリミングの大きさが違う
  • 画像の上に文字や文章を載せる(黒っぽい画像の上に文字色が黒だと読めない)
  • 改行位置の指定が必要な文章
  • 画像の上に画像を載せる
  • 縦長の画像が入ったときの事

数を出せばいくらでも、使いにくい例は出せると思います。
多分コーダーの人がこの辺りの例を見ると、過去に携わった案件の事を思いだせるかもしれません。

同様にデザイナの人も「こんなはずじゃなかった…」と思う案件を思い出した人もいるでしょう。

偉そうに言ってますが、私も駄目なデザインをいっぱいしてきています。
ただちゃんと反省をして、最近は改善の出来るデザインがちゃんとできてると自負しています。

改善出来るデザインを作るために

私が最近気をつけている事は、作ったデザインを拡張・改善できるようにすることです。

じゃあ、どういうデザイン(UI)であれば良いかと言うと、極端にいえばフレームワークにあるようなデザインです。
また汎用か…と思うでしょうがやっぱり汎用って大事なんです。
どこででも使いまわせるデザインというのは、それだけで価値があります。

別に汎用は悪くないです。
衣服でいえば、ユニクロは汎用性の塊です。
みんなが着てるからかっこ悪いと思う人もいると聞きますが、イケメンがユニクロを着こなせば誰もユニクロかなんて気にしません。

中身が重要です。

サイトやアプリも同じでしっくり来るデザインになっていれば、ユーザーはどこかで見たデザインだから駄目とは思いません。駄目と思うのはユーザーの思考ではなく、同業者の思考なのではないでしょうか。

別にユニクロ信者というわけではないのですが、安易にユニクロを否定してる人を見るとオリジナリティにこだわって、ものの本質を疎かにしてる人なんじゃないかと疑ってしまいます。(個人の感想です)

良いデザインにするために

最近の私のやり方なのですが、完成したデザインではなくて30%くらいのところで見せます
未完成のデザインを見せるのが恥ずかしいと思う人もいるでしょうが、その羞恥心が使いにくいデザインを作る原点になってるかもしれませんよ。

実は完成系の状態だと、人ってそれに引きずられて意見がでなかったりするんですよね。
未完成の状態とはいえ、チームの人に見せる事で意見の吸い出しがしやすくなります。

ユーザーを知る人、更新をする人、過去の経験がある人、様々な人がチームの中にいると思います。
別の職種だからと線引するのではなく、もっと自分から歩み寄るだけで良いデザインに仕上がる可能性は高いです。
※言いたい放題の人もいるので、舵取りを失敗すると炎上するのでそのへんはご注意ください。私もよく失敗します

もし自分がプロなのに「人に意見をもらってデザインする」ことに抵抗がある人は、自分のデザインをしたい人なのではないでしょうか。
自分の趣味であればそっちに振り切ったほうが楽しくて良いのですが、自分以外が使うデザインであれば、その人に合わせてデザインをするというのも立派なデザインだと思います。

昔は私もデザイナはもくもくとデザインだけしてれば良いと思っていましたが、ヒアリングってめちゃくちゃ大事です。

最後に

大層な事を言っていますが私もどこにでもいる普通のWebデザイナです。
失敗もいっぱいしてきましたし、これからもいっぱいすると思います。

「良いデザイン」の定義は時期や案件、心の汚れ具合など様々な要因で変わりますが、少なくとも自分がこれは「これは良いデザインだ」と納得できるものをこれからも作り続けたいなと思います。

余談ですが、デザインは時間をかければ良いものが出来るわけではありません。
中途半端でも(信用できる)人に見てもらって意見をもらって作るだけでも、クオリティは一気に上がりますので一人で悩むくらいなら恥を捨てて公開するのオススメです(ゝω・)

関連記事

Web Asssembler(ウェブアセンブラー)という職種を自分の中で整理してみた... Web Asssembler という職業を皆さんご存じですか? 私は一週間くらい前まで知りませんでした。 知ったきっかけはこちらの「カスタムフィールド製造業ならびにWebアセンブラーという職業について」です。 私のWeb Asssembler(ウェブアセンブラー)の解釈 ...
Evernoteが料金体系が変わったので違うサービスを検討してみた... Evernoteが2016/6/28に料金体系を変えてきましたね。 ヘビーユーザーの方は結構驚かれたのでは無いでしょうか。 私は端末を跨いでメモアプリとして結構使っていたので、今回の料金体系の変更で使いにくくなってしまった部類です。 無料のプランでは端末2台までの使用しか出来ないので、...
【Advent Calendar】LTと私&LT始めたい方へ... LT Advent Calendar第1弾12/1の記事です。 今年はLT芸人と言われる1年でした。 自分でも数ヶ月連続でやっていたり、勉強会に参加したらいつもLTしてるとか、LTするために勉強会に参加してるとか色々言われた一年でした。 LT楽しいです。 LT(ライトニングトーク)とは...
2014年秋アニメサイトを同業者(Webデザイナ)目線で見て気になったとこ... もう10月です。気がついたら一年終わってしまいしそうですね。 秋アニメ全然チェックしていなかったので、アニメだけじゃなくまたサイトの制作部分も一緒にチェックしてみました。 気になる演出やデザインなど刺激されたサイトをまとめてみました。 ふうせんいぬティニー 下層ページに入った...
無料で取得できるGoogleの資格(Google Partner)を取得しました。... マーケティングの知識や流行りの技術もそれなりに身についてきたので、資格でも取って実力試しでもしようかなーと思って、探してみたら無料でGoogleが認定している資格がありましたのでご紹介します。 Google Partners Google Partnerとは「Google AdW...
【簡単】asanaの日本語入力のバグを直す方法... 今年からタスク管理のツールをtrelloからasanaに乗り換えました。 asanaは非常に優秀なタスク管理ツールです。しかし日本語を入力する際に入力中の文字列が複製されるというバグが有りましたがその解消法のご紹介します。 解決方法 ものすごく簡単でChromeのExtension...