![見出し画像](https://assets.st-note.com/production/uploads/images/56176497/rectangle_large_type_2_eab044fb402c5b60cf1ea3e5a2317587.jpg?width=1200)
違和感の言語化をトレーニングするnote(Vol.1 残念なECサイト)
こんにちは!
TwitterでWeb制作のあれこれ発信している石油王です!Web制作業界のコミュニティ「シナカフェ 」を共同運営している、実務経験14年以上のフリーランスWebクリエイターの日本人です!
01.この企画を考えた経緯
僕がTwitterを見ていると、実在するWebサイトのスクリーンショットを掲載し批評するツイートを見ました。
ユーザー視点からの批評を財産と考えることもあれば、トラブルに発展する可能性もあります。例えばコンビニのお弁当や我々が日々使っている家電などは、ユーザーの批評により改善され、より良いものに進化していくと思います。
しかしWebサイトのお仕事は、そのデザイン・レイアウト・仕様になった理由もあるし予算だってあります。様々な事情があり完成したWebサイトなので、事情を知らない人が批評するのは個人的に適切ではないと考えます。
▼建築に例えると、Web制作を作ってもらったクライアント目線だと、きっとこんな気持ち
ハウスメーカーにマイホームの設計を依頼して、どうしたら住みやすいかを二人三脚で考えて完成した図面や外観をSNSで批評されたら不愉快じゃないですか...?
ならば自由にレビューできるものを作れば良い!
レビューは学びが多いのは確かである!UIに問題のある無料のデザインカンプを作り、1つの架空サイトに大勢の方が自由にレビューや添削ができて、意見が集まればめっちゃ学びが多いのでは?と思い今回の企画を作りました。
デザインカンプも無料配布し、ポートフォリオへの掲載もOKとすることで、初学者さんの言語化やUI改善のトレーニングやアピールにも使えます!
02.企画の目的
企画には誰でもご参加いただけます。デザインカンプもご自由にお使いください!ベテランの方でも楽しんでいただけると思いますが、駆け出しや業界外の方のトレーニングになると思います。
[01] 言語化スキルのトレーニング
レビューや添削は学びになります。ユーザー視点から「何が使いづらいのか・見づらいのか」を言語化できることは大きな武器です。
UI改善のご提案をすることもできますし、言語化が得意になれば、クライアントにもご納得いただきやすく、スムーズにプロジェクトが進みます。
実際に私は、大きなCMSの「何が使いづらいのか・見づらいのか」を言語化し、資料にまとめるプロジェクトを経験しています。その後、改善案のご提案もご依頼いただきました。
[02] 添削してUIデザインスキルを鍛える
言語化できることと、実際に使いやすいUIデザインができるのは別です。何が使いづらいのか・見づらいのかを言語化できても、改善案を提案できない人もいます。「どうしたら改善されるのか」の答えを、デザインカンプを使って実際に作ってみてください。
残念なデザインなので印象をまるっと変更しても良いですよ!
[03] 横のつながりを作る
同じ企画に参加する者同士でコメントしあうことで、横の繋がりができるのではないかと考えています。独学されている方は、この企画を通じてTwitterで仲間を増やしてみてはいかがでしょうか!
03.企画の参加方法
レビュー用のPNG画像と添削用のデザインカンプ(XD)をご用意しています。「何が使いづらいのか・見づらいのか」のレビューもしくは、添削して書き出した画像を添付してツイートしてください。
実在するWebサイトだと勘違いされると炎上する恐れがあるので、ハッシュタグを必ず付けてください「#サンプルデザインレビュー」。
企画に興味がある方も、ハッシュタグから追いやすくなると思います。
01.画像をダウンロードする
02.どこが使いづらいか・見づらいかを考える
03.添削をする人はデザインカンプを添削をする
04.画像を添付しハッシュタグを付けてTwitterに投稿
・Twitterに投稿する以外にもブログやnoteに掲載してもOK
・実績としてポートフォリオに掲載してもOK
・石油王のFF外でもOK!
・僕の企画だと紹介してくれたらめっちゃ嬉しいです!
04.注意事項と著作権について
[01] 著作権について
企画内容の著作権は石油王にあります。
添削後のデザインのみを掲載すると、制作者が全てを考えたと勘違いされてしまう可能性があるため、Twitterに投稿する場合は「#サンプルデザインレビュー」のハッシュタグを、それ以外に掲載する場合は、こちら企画noteのURLもしくは石油王のツイッターアカウントのURLをどこかに載せてください。
[02] トラブルがあった場合は責任を負いません
画像を仕様する場合は必ずフリー素材や購入した素材をお使いください。著作権や肖像権などでトラブルになった場合は責任を負いません。
[03] コメントは優しく
コメントが欲しい方は「コメントをリプ欄でください」などと書いて投稿をしてください。UIデザインに慣れていない方が多いと思うので、愛のあるコメントをお願いします。(僕の答え合わせはしません!)
[04] 企画だとわかりやすい投稿を
実在する誰かのWebサイトをレビューしていると捉えられた場合、炎上する可能性もあるので、企画だとわかりやすい投稿をしてください。Twitterの場合はハッシュタグを必ず付けてください「#サンプルデザインレビュー」
05.サンプルのECサイトの情報
革靴の専門店としてリアル店舗を持っている。創業30年でインターネットを使って革靴を販売できればと思いECサイトを作った。制作会社に依頼し、オーダーメイドでECサイトを制作してもらった。デザイン的にも満足だが、利用者からは「使いづらい」という声が多い。
サイトの目的:ECサイトで革靴を売る
サイトの強み:価格の中に送料が含まれている
ターゲット:20代〜50代のサラリーマンの男性
ブランディング:価格は安めだが質は良いので高級感を出したい
上記をふまえて添削してみてください。
06.デザインカンプはこちら
デザインカンプはXDで作成しています。
こちらからダウンロードしてお使いください。
criticism.psd --- 上記添削用のpsd(使わなくてもOK)
design.xd --- デザインカンプ
img.png --- レビュー用画像(criticismではなくこっちを使ってもOK)
logo.psd --- ロゴデータ(普通PSDでは作らないよねw)
逆に使いづらいデザインを作るのが大変でした(笑
いくつ問題点を見つけていますか?10点以上の問題をご用意しています。ぜひ企画にご参加ください。
07.添削したデザインを誰かに評価してもらいたい方
私はクリエイターズ・シナジーカフェというWeb制作のオンラインコミュニティを共同運営しています。誰でもご参加いただける月額1,100円(税込)のカフェのようなコミュニティです。コミュニティの中に「制作物評価部屋」というチャンネルがあり、そちらで今回の企画に限らず、制作物をメンバーで評価しあっています。ぜひ、シナカフェにご参加いただき、添削したデザインを投稿してください。約330人の仲間がお待ちしています。
08.企画参加者の声をここに掲載!
企画が盛り上がることを期待して、ここに参加者の声枠を作ります。みんなで企画を盛り上げてくれたら嬉しい!ツイートだけでなく、掲載してくれたブログやnote、ポートフォリオにリンクを貼らせてください!
UIをリデザインしてみた。
— かな (@_kana_kana_1813) July 6, 2021
詳しい話はnoteに載せようかな〜。#サンプルデザインレビュー pic.twitter.com/xRL7co7W4m
仕事以外で誰かのデザイン調整を初めてやってみました、XD慣れないですけど。
— 穂刈@エンタメ系Web制作会社の代表 (@irokoto_hokari) July 6, 2021
仕様的な部分や順番は変えないままでの調整をしてみてます。
基のデザインと同じサイズで調整したデザインの両方を入れてみてます。#サンプルデザインレビュー pic.twitter.com/jPoVucJ9Vk
本来、購入導線はファーストビューにあるべきとか、在庫や送料周りの記載を考えるとか、デザイン的にも見栄えはもっとブラッシュアップ出来るとかあると思うんですが、構成はあくまで同様で1時間目安での調整という縛りでやってみました。
— 穂刈@エンタメ系Web制作会社の代表 (@irokoto_hokari) July 6, 2021
せきゆおうさん(@wurst_design)の企画に参加させていただきます🙇♂️
— ハイ(ʜɪɢʜ)👋 (@My_name_is_High) July 7, 2021
言語化がとても勉強になると思い、一番時間使いました。
before/after/言語化を添付🤏
(blogが無い💦)
コメントから新たなご縁があると嬉しい…です!#サンプルデザインレビュー pic.twitter.com/tECYbVuWfy
せきゆおうさん(@wurst_design)の企画に参加させていただきました。
— ほなみ@育休中 (@hnm_wo) July 7, 2021
肝心の言語化は、プリントにざっくりと書き込んだ状態なのでまたまとめたいです💦
この半年、デザインもコーディングもほとんどできていないから楽しかった!#サンプルデザインレビュー pic.twitter.com/mmcc2jNtQW
せきゆおうさん @wurst_designの #サンプルデザインレビュー やってみた!
— ikue (@ikue_seadesign) July 7, 2021
XD全然触ったことなかったから時間がかかったけど💦
そしてプロの方から見れば私の添削したものはさらに添削できるのだろうな🤔すでにもっとここをこうしようって思う箇所がいくつか…
なぜこうしたのかnoteにもまとめよ! pic.twitter.com/lZLHMDalto
勢いで作ってみた。
— るりのん@あくせらたんおるた (@rurino_akira) July 7, 2021
XDでもPSDでもなくコーディングデータです。
気をつけた点:
・写真の比率を維持
・タグアイコンを色分け
・値段を目立たせる
・カートエリアをフローティング
・カートボタンをヘッダに
…くらいかなあ。#サンプルデザインレビュー pic.twitter.com/MvnMumm1ol
初めて企画に参加。
— プログラミングをするひよこ (@piyogramer) July 7, 2021
時間の関係でコメントはいれておらず、修正しただけだけども。。
修正前←
修正後→#サンプルデザインレビュー pic.twitter.com/1whwLZjRne
せきゆおう @wurst_design さんの企画 #サンプルデザインレビュー に参加させていただきます🙋♀️
— ちひろ (@chihirohirozumi) July 8, 2021
1枚目が課題で2枚目がデザイン調整をしてみたものです。
XDはいつもカンプとして見るだけなので操作に慣れておらず、めちゃ時間がかかってしまいました〜🤣https://t.co/7lzjuwqjzx pic.twitter.com/Qe4LHekJH6
せきゆおうさん(@wurst_design)の企画に参加させていただきました!
— AKI | WEBデザイン修行中 (@Aki_025_web) July 11, 2021
色々な方のレビュー例や言語化例を見てみると、いかに自分に「違和感に気づく眼」「具体的な改善のアイデア」がないか思い知らされますね……
もっともっと精進します……!#サンプルデザインレビュー pic.twitter.com/IZi8wB6sCa
noteやブログやポートフォリオ
こちらのバナーチャレンジもよろしければご参加ください
この記事が気に入ったらサポートをしてみませんか?