header

SITE DESIGN

管理人がデザインしたWEBサイトデザインを紹介するページです。


作品No:1

AUS OF TRISTE

サイト名:Vivid Gardenia
使用言語・ツール:HTML5,CSS3,javascript,jquery,Inkscape,PhotoshopCS6,IllustratorCS6
制作時間:基盤は30時間ほど(運営期間:2014.02→現在:)
ページ構成:2カラムのレスポンシブルリキッドデザイン
累計ページ数:18
管理人作業部:全て
制作のコンセプト:当初は趣味でのイラストサイトの開設を目的とし、HTML4.01とCSS2.01を用いてのフレームサイトを制作していました。制作を進めるにあたり、WEBデザインの面白さや奥深さに気がつき、数々のデザイン変更を行いつつ現状に至っているサイトです。現在では旧式の悪いデザインは全て捨て、可能な限り新しい要素を取り入れたサイトデザインを重視して運営しています。
このサイトでは自分の個性を反映したデザイン表現を目的とし、かつ自身の技術を高める試みを様々に行っています。全体の構成としては、グローバルリンクを設置するのは勿論のこと、幾何学的でメタリックなデザインの中でできる限り閲覧しやすいデザインを意識しています。余談ですが、ヘッダーとフッターは劇場をイメージし、カラーリングは各種作品が綺麗に見える配色を試みています。

作品No:2

架空製薬会社Cure

サイト名:架空製薬会社Cure
使用言語・ツール:HTML5,CSS3,javascript,jquery,Inkscape
ページ構成:上部メニュー式1カラム・リキッドデザイン
制作時間:約50時間
累計ページ数:7
管理人作業部:全て(ただしフェード変化スクリプト内の写真はフリー素材を使用。)

制作のコンセプト:清潔感と企業性の反映を求められる医療系列会社を想定し、1カラム形式で架空の製薬会社をデザインしました。テーマカラーをクリア系に絞り全体の構成をデザインし、左右にパディングを設定することでページの圧迫感を減らしています。また、各ページにはページテーマに合わせたキャッチコピーを明記・及び写真をスクリーンショー形式で表示することにより、ページの印象をより明るくし、病気や薬品におけるマイナスイメージの払拭を目的としてJqueryを導入しました。

架空製薬会社Cure 内部ページ

さらに、各ページには文章の大きさを変更するスクリプトを設置し、視力の悪い方にもアクセシブルなページを目指しました。ヘッダー・ロゴマーク・UIメニューのデザインはフリーのベクター系ソフト『Inkscape』を使用しています。
内部ページを構成する文章には、実在する製薬会社HPを参考にし、前向きで意欲的な企業イメージを想起させるよう心がけています。

作品No:3

Syumal Artbox

サイト名:Syumal Artbox
使用言語・ツール:HTML5,CSS3,javascript,jquery,Inkscape,PhotoshopCS6,IllustratorCS6
制作時間:約70時間
ページ構成:3カラム・2カラムのレスポンシブルリキッドデザイン
累計ページ数:3
管理人作業部:全て

制作のコンセプト:妹から頼まれたオリジナルデザインのイラストサイトです。フラットな印象と、ピンクを貴重とした女性らしく可愛らしい印象のサイトデザインを希望されたため、ロゴやヘッダー、UIデザインから配色までできる限り相談しあい、妹の満足いくデザインを追及しました。
今回のサイトは前回のページとは異なり、さらに多くの種類のブラウザからの閲覧を想定し、キオスク型のリキッドデザインを選択しました。内部構成の変化により伸縮するデザインをCSS3により行っています。


sitedesign4

作品閲覧ページではjqueryの『Flexsllider』を使用し、快適で可愛らしい閲覧環境を整えるとともに、 CSSとの連携により作品幅に合わせたサイトの変形が行われるようになっています。今回のデザインは主としてPhotoshopCS6とIllustratorCS6のスキル習熟を目的とした側面もあり、想定していた作業時間を上回りましたが、その分技術の向上を感じられました。何よりも、身内とはいえども依頼者のニーズを満たすデザインができたため、完成が非常に喜ばしかったです。



サイトへの感想や、構造上の問題点などがある場合は下記のメールフォームから連絡を頂けると嬉しいです。