CrowdWorks様
はじめまして、いつもお世話になっております。
デザイナーの平澤天真と申します。
テンプレートのトーン&マナー変更案についてご提案させて頂きます。
まず画像をご覧頂き、詳細を文章で説明させていただきます。
■全体のコンセプトについて
私が初めにクラウドワークス様を使ってみたいと思ったのは、他のクラウドソーシングサービスに比べてPC、スマホ共にデザインが優れていたからというのが1つの大きな理由です。見た目がキレイというのももちろんですし、操作性(UI)がわかりやすかったという点です。
我々は作ることに集中したいので、操作がわかりにくい・プロジェクトが進行しにくいなどという事で時間を取られたくありません。
現在でも充分にわかりやすいUIになっておりますが、それをより改善するということを念頭に制作しました。
全体のトーンを合わせていくということでしたので、色はロゴマークで使われている水色をベースカラー(以下CIカラー)に、必要に応じて色を変え、操作性を高めています。CIカラー以外の違う色を使っている箇所も彩度・明度をロゴカラーに合わせているので、バランスは整っているかと思います。
上から順に説明させて頂きます。
■<h1>帯について
ここも背景色をCIカラーにすることで、全体に締まりがでると思います。
■ロゴについて
下の「仕事を探す」、「エンジニアを探す」ボタンは大きく表示する必要があると感じましたので、1段落としました。そのためスペースができたので、ロゴ大きく表示させています。オシャレでかっこいいロゴなので、これぐらい主張してもいいと思います。
■「仕事を探す」、「エンジニアを探す」ボタンについて
前述の通り、作り手として見ているのか、クライアントとして見ているのかは非常に重要なことだと思いましたので、大きく表示しています。
また、「コンペ始めました」は現在赤色で目立ちすぎているので、落ちついた色にしています。
「コンペ始めました」だけ左に表示されているとバランスが悪いので「エンジニア・デザイナー以外も!」を右側に配しました。
■ナビゲーションについて
文字の視認性を上げるとのことでしたので、背景色を薄く文字を濃くしました。文字サイズも上げ、アイコンを配してより直感的な操作ができるかと思います。
■検索ボックスについて
現在4つの「仕事を探す」ボタンの下にきていますが、左右のスペースが気になりました。
ちょうどそのボタンの右上にスペースがありましたので、そこに配しました。
■4つの「仕事を探す」ボタンについて
「新着」と「プロフェッショナル」はアイコンで表現できるのですが、「経験不問」、「コンペ」はアイコンで表現しにくいです。アイコンがあっても文字を読むことになると思うので、アイコンはなくしすっきりさせました。
そのかわりにはっきりそれらしい色で分け、操作性を高めています。
■ページナビゲーションについて
こちらの視認性は問題無いと思いますが、全体のデザインに合わせたものを作りました。
■カテゴリタブについて
ここもCIカラーをベースに全体のデザインに合わせて作りました。
「気になるリスト」も他ボタンと同じ扱いになると思いますので、色のみ変え、この位置・デザインとしました。
このあと、それぞれのボタンを実際に押した時のイメージをお送りします。
長い文章をお読み頂き有り難うございます。
平澤天真
#クラウドワークスは個人的に大好きなサービスです。
仕事の質も、クライアント様も取り引きがしやすい人ばかりです。
支払いシステムや、プロジェクト進行のシステム、スマホでの操作のしやすさ、どれも素晴らしいです。
クラウドソーシングにも非常に将来性を感じておりますので、お力になれましたら幸いと存じます。
どうぞ、ご検討のほどよろしくお願い致します。
メンバーからのコメント
CrowdWorks様
引き続き、ボタンを実際に押したイメージをお送りさせて頂きます。
■「仕事を探す」、「エンジニアを探す」ボタンについて
「仕事を探す」を選択中のイメージです。作り手側で閲覧中は常にこう表示されます。
■ナビゲーションについて
・「メンバー」にポインタを合わせるとこのように「クライアント(発注者)」が表示されます。
・「相談から契約まで」を選択中はこのように、下部に帯が表示されます。
・「プロフィール」にポインタを合わせるとこのように編集メニューが表示されます。
■4つの「仕事を探す」ボタンについて
「プロフェッショナル向けの仕事を探す」を選択中(そのページにいる時常時)にこのように表示されます。
■ページナビゲーションについて
今いるページがこの「4」のように表示されます。
以上です。
またフルサイズのものを下記にアップしておりますので、参考にされてください。
・前回提出したもの
http://temma.me/crowdworks/crowdWorksTop.jpg
・今回のボタンを押したイメージのもの
http://temma.me/crowdworks/crowdWorksTopPressed.jpg
ご検討のほど、どうぞよろしくお願い致します。
平澤天真