今回はクラウドワークスのトライアル案件に挑戦しました。トライアルの目的としては、今後の実務に近い課題をこなし、実際のスキル感を把握するとともに、業務のイメージとの相違を防ぐことを目的としています。今回のトライアルの内容（報連相など）は全て実務でも実施することができます。社内のみならず他社様とのお取引にも、大いに役立つ内容となります。
実際の業務ではないため報酬も微々たるものですが、スキルアップのための訓練になりました。
トライアル案件「株式会社KK建設」
この会社は架空のものです。クラウドワークスのトライアル案件から、実際の業務を想定して作りました。
トライアルの内容
トライアルの内容はNotionにて共有されました。
内容としては、現在の実力をクラウドワークス側に見て頂き、スキルを認めてもらえば安定して仕事を頂けるという方式のようです。私はデザイナー職なので、架空のクライアントを想定したヒアリングシートとワイヤーフレームをご確認してFigmaでのレイヤーカンプを作成しました。
ヒヤリングシートから読み取ったデザインコンセプト
建設会社のコーポレートサイト作成。人材に来てほしいため、土木のきついイメージを払拭するクリーンなHPを作って欲しい。地域に信頼されている会社であることもアピールしたい。キーカラーは紫。
イメージ参考サイト
ターゲットユーザー
- 不問（求職者）
- 男性
- 仕事を探している人。土木建築に興味がある求職者。
プロジェクトメンバー
- ディレクター1名
- デザイナー（担当）
- コーダー（コーディング班）
担当領域
- デザイン（Figma使用）
使用ソフト
- Figma
デザインカンプ製作期間
2日
デスクトップデザインのみの納品で良いとのことでした。
制作のポイント・流れ
ヒヤリングシートから情報を取得し、レイヤーカンプを作成しました。ワイヤーフレームは既に出来ていたので、そこに合わせてイメージサイトを参考にデザインを当てはめています。NotionではXDでの納品とありましたが、ディレクターからFigmaで作って欲しいと言われ指示されたソフトでレイヤーカンプを作成しました。
Notionとヒヤリングシートの内容を確認。
ワイヤーフレームをもとにFigmaにてレイヤーカンプを作成。
ロゴはCanvaのロゴジェネレーターにて作成。テキストはダミーのもの、てにをはがおかしな部分があったので整理したものを配置。
最終チェック、ディレクターに確認してもらい、自身の担当部分は終了しました。
制作のポイント
用意された架空のワイヤーフレームにデザインを当て込みました。Figmaの全体はこちら
メインカラーの設定
配色パレットとアセットを作成しました。紫のキーカラーを希望されていましたが、洗練されたイメージの配色とは遠くなってしまうため、濃紫をアクセントカラーに使用し、ベース、メインはサンセットをイメージした淡いオレンジでクリーンなデザインに仕上げました。
各コンテンツの作成
上下の余白を意識し、背景が寂しくならないようベースカラーのあしらいを設置しました。テキストはてにをはを確認し、不足している部分はヒヤリングシートに記載のあった情報を違和感の無いよう入れています。ワイヤーフレームのフォントはNotoSansJPを使用していた為、このHPのフォントも汎用性の高いNotoSansJPメインで使用しました。
お問い合わせコンテンツの作成
建設をイメージできるような画像と、文字のバランスが調和するようオーバーレイ等使用しています。建設関係、と会社概要はバナーリンクをイメージしました。
ロゴの作成
ロゴは無かった為、Canvaのロゴジェネレーターで作成しています。最近のロゴはほぼロゴジェネレーターに頼り作成しています。
FVの作成
初期に作成していた画像が地域密着型建設業を意識し、街並みの景観画像を使用しましたが、上司に確認してもらったところ、「土木より不動産のイメージなので、重機があった方が良い」と指摘を受けました。重機が映っているフリー素材を探し、実際に人が働いているものも欲しいなと思いこちらのFVになりました。テキストはワイヤーフレームに指示があったものを使用しています。明朝体を使い、クリーンや優しいイメージを出しています。FVの参考サイト
ワイヤーフレームがあることでの悩み。
今までHPリニューアル案件に携わることが多く、久しくワイヤーフレームに触れてきませんでした。他者が用意してくれたワイヤーフレームに沿ってデザインすることが、道筋があるようでいて自分には以外と難しく感じました。決まりがある中でも、デザインをうまく遊ばせるにはどうすれば良いか。とにかくワイヤーフレームに沿ってフリー素材を当て、ヘッダー、フッターのコンテンツを埋めていくことでデザインのイメージがうまく湧きました。まずは基本に忠実につくり、そのあと応用を効かせるというやり方が早道だ、と今回の案件で学ぶことが出来ました。
