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デザイナーがクラウドソーシングを発注側で使ってみた... 先日作成した「俺の嫁が可愛い」のロゴを「クラウドワークス」で発注してみました。 発注側で利用したのは初めてでしたので、その所感を紹介します。 なぜ自分で作らずに発注したか Webデザイナーを名乗ってるますが、私ロゴとかのデザイン得意ではないので、多少「俺の嫁が可愛い」を通じてち...
HTML知識不要で初心者でもホームページを作れるペライチを触ってみた。... 一身上の都合で初めてペライチを触ってみました。 作ってみたWebサイトはこちらです。 制作したペライチページ ペライチとは HTMLの知識が無くても、誰でも簡単にペライチページ(ランディングページ)を作ることができるサービスです。 47個ある(2017/3/...
Googleのマテリアルデザインについて調べてみた... 【WordBench京都11月号】テーマにまつわるエトセトラで「聞いて覚えるマテリアルデザイン入門」と題して発表してきました。 スライドはこちら 聞いて覚えるマテリアルデザイン入門 マテリアルデザインについて 私はマテリアルデザインの専門家でも...
素人でもできる、格安でwebサイトを作る方法... 私はWeb制作会社で勤めたり、個人でwebサイト制作を引き受けているのですが、時々「予算無いけどとにかく凄いサイト作りたい」ってお客さんがいたりします。 私は安く作るという事は基本的にせず、あなたが〇〇をやってくれるなら私は作るだけに集中できるので安くは作れますよって感じでお話させてもらい...
第29回リクリセミナー「サイト更新ツールの最新事情!ツールを使い分けて制作者もクライアントもがっちり... 第29回リクリセミナー「サイト更新ツールの最新事情!ツールを使い分けて制作者もクライアントもがっちり!」 上記のセミナーに参加しました。 CMSが増え続ける中、同業種の方がどんなCMSをどのように活用しているかを聞ける貴重な場でした。 参加してみて、心に響いたことの殴り書きです。 ...
放置は怖い、SNSのアプリ連携の解除方法... Googleやtwitterなど連携してアカウントを作るサービスはとても便利ですが、一方で使わないサービスも出てきてそれをずっと放置するのは危険かなと思います。 連携の仕方はボタンひとつで簡単ですが、解除の仕方はよく知らないなと思ったので、調べてみました。 Googleの連携 まずは下記に...