見出し画像

違和感の言語化をトレーニングするnote（Vol.1 残念なECサイト）

せきゆおう𝕏 Web制作のあれこれ発信する人

こんにちは！
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、ポートフォリオにリンクを貼らせてください！

noteやブログやポートフォリオ

こちらのバナーチャレンジもよろしければご参加ください


いいなと思ったら応援しよう！