WEBデザイン
前職にて作成したウェブサイト。会社のロゴを一新したタイミングで、ウェブサイトも新しく一新した。
使用ソフト: Dream weaver (HTML5,CSS3,Java script, JQuery)
※以下説明の画像はキャプチャです。動きなどは反映されていません。
▼ home
サイトにアクセスすると、ふわっと会社の写真が表示される。
最初は暗い画面から始まるが、サイト全体は白ベースで構成し清潔感あるデザイン会社という印象になるよう配慮した。
▼ 画面上部のバー
マウスオーバーで色と形が変わる。
赤は、この会社のコーポレートカラーの赤を使用。
▼ service - 各部署の紹介。
部署名クリックで部署の説明が現れ、仕事風景の写真が自動スクロールでゆっくり流れる。
▼ works - これまでの成果物の紹介。
画像マウスオーバーで名前が表示され、クリックで詳細ページに変わる。
▼ works - 画像クリック後
「works」の場所だけページが切り替わり、写真のスライドショーが見られる。
写真右上のX印から元の画面へ戻る。
▼ company - 企業紹介ページ。
情報量が多いため、レイアウトを洗練して要素を減らし、できるだけシンプルにまとめた。
▼ access - 会社への道。
メールアドレスの手紙マークをクリックすると自動的にメッセージアプリが立ち上がるように設定。地図のデザインはGoogleのサイトで配色やアイコンを調整して表示した。
