サイト全体図
背景画像はHeaderとABOUTとSITEMAPに設置し、カテゴリごとにメリハリを。 ボタンはUIを意識し、デザインは統一。購入と他で色分け。
ロゴタイプ
ハッキリ見えやすいことを意識し、斜体である“Raleway ExtraBold Italic”のフォントを使用。頭文字の「DCR」のみ、一回り大きく仕立て点もポイント。インパクトに残るよう単語ごとに色分けし、メリハリを付けました。
ロゴシンボル
レコード会社とわかるように背景にレコードをイメージした図を配置。配色も3色メインで統一感を表現。ロゴタイプと差別化を図り、フォントは”Acier BAT Text Solid”を使用。頭文字の「DCR」の文字間を開け、影になるイメージで背面に逆配色で「DCR」を配置してポイントを作りました。
課題概要
架空のコーポレートサイト制作
担当
デザイン・コーディング
所要時間
企画（1時間）、デザイン（時間）、コーディング（15時間）
ターゲット
10～20代の最新音楽に敏感な男女
コンセプト
音楽エンターテインメントレーベル
アーティスト紹介、最新曲・ニュース紹介、レーベルグッズ販売、SNS案内、事業内容、求人、お問い合わせ
サイトの目的
アーティスト認知度UP（PV数）、新曲・配信DL数UP、問い合わせ数UP、SNSフォロワーUP、グッズ購入UP
デザインについて
社名にもあるように「夢」「彩」「音」を表現すべく、POPでファンシーなイメージでパステルカラーを基調にしました。ファーストビューで音楽サイトとわかるようにアーティストの画像を大きくメインに配置、色が際立つよう背景は白として、UI/UXを意識しボタンデザインは統一、ホバー時の色を補色にした点がポイントです。
コーディングについて
初めてのWEBサイト制作でしたので、まずは基本的なマークアップを意識しました。CSSを書きやすくするためにHTMLには細かくクラス名やID名を付け、わからなくなるのを防ぐ為コメントも随時記入し、慣れること覚えることを意識しながら制作を進めました。