総合商社 株式会社a様 のHP制作を担当させて頂きました。
担当範囲
デザイン ／ コーディング
制作期間
1ヶ月半
デザインについて
クライアント様のご希望は黒でしたので、堅実な企業をイメージに、ベースカラーは濃いグレーを使用。
ロゴと同色のオレンジをアクセントカラーとして使用しています。
メインビジュアルには、環境保護をイメージした画像を採用。右と左をあえて斜めにずらすことで社長様のお名前にあるZを表す隠しポイントを入れています。
ベースカラーがダークトーンのため、重くなりすぎないよう、コンテンツの角は丸みを持たせています。
サイト全体の構成としては、クライアント様のご要望がサブページを作らずメインページ1枚にまとめるとのことでしたので、ランディングページのように縦に長い構成としています。
企業・サービス紹介の後に、取り扱い製品の簡単な紹介コンテンツ、その後により詳細な製品紹介コンテンツを配置しています。製品紹介では、文字を少なめに、資料や動画へのリンクを設置することで、ユーザーの飽きがこないよう工夫しています。
実装について
メインビジュアルに企業のキャッチフレーズとなるテキストを配置。
タイピングのように文字が出てくるアニメーションを入れいます。
製品紹介コンテンツには、ユーザーが気になる製品があった場合に、その製品の詳細や動画リンクに飛べるようページ内リンクを設置しています。
また、縦に長い構成となっているため、ページ右下の矢印からトップへスクロールさせるページ内リンクも設置。こちらはjqueryを使いスムーズなスクロールを実装しています。
使用ツール
Illustrator
Photoshop
