実務経験がありませんので、このポートフォリオではこれまでに作成した架空のサイトトップページのみのご説明のみとなります。
Webデザインに関する基礎知識を学ぶため、2021年11月よりオンラインスクールに通うとともに、外部試験(Webクリエイター能力認定試験エキスパート)の受験を通して早く正確なWeb制作技能を学びました。(2022年5月合格)
どうぞよろしくお願い致します。
というコンセプトで制作した架空のサイトです。
使用:HTML/CSS/jQuery/Photoshop
ターゲット
目標
英語を多用し国際色の豊かさをアピールしました。
受験生および受験生のご家族による閲覧を想定したメニューを選定しました。
イラストや文字より写真を使用することで学校生活のイメージが湧きやすいようデザインしました。
使用:HTML/CSS/jQuery/Photoshop/Illustrator
ファーストビューで優しい印象を与えられるようメイン画像はふんわりとした色合いのイラスト(Illustratorにて作成)にし、さとう歯科医院という文字も細めに設定しました。
安心感を与えられるよう院内の写真(フリー素材)を使用し、同時に清潔感も感じられるよう明るさを調整しました。
全体に落ち着いた雰囲気を出すために柔らかい色合いのくすんだピンク系統でまとめました。
各ボタンには補色に近い緑色を使用し、詳細ページへの移動やお問い合わせに迷わないよう強調しました。
また、トップページで使用する写真に統一性が出るようトーンやコントラストを調整しました。
トップページ全体を星空の背景にし、星が綺麗なキャンプ場というイメージが残るよう意識しました。
既存の男性利用者に加えて女性利用者を増やしていきたいという方針のため、文字やロゴを繊細な雰囲気で統一しました。
全体として品のある印象を目指して、控えめな動きをつけました。
使用:Bootstrap/Photoshop
高級感のあるイメージを与えられるよう色数を抑えてシックな雰囲気を目指しました。
また、余白を大きめに取ることでハイブランドな雰囲気を出しました。
カメラの画像は全て背景から切り抜き、トップページ上で存在感が出るようにデザインしました。
ファーストビューで特産品を全面に押し出し、観光客のページ遷移減少を目指しました。
視力の悪い方の利用も考慮し、文字サイズの変更ボタンを設置しました。(聴力が弱い方向けの音声読み上げボタンについては現在動作しません)
色合いと柔らかい印象のイラストで、全体に優しい印象を目指しました。
こちらのフォームはGoogleフォームを利用しており、固定ページのお問い合わせフォームはWordPressのプラグインを利用して作成しております。